Cesium 三维场景中通过自定义着色器实现多种特效（纹理、光带、点光源、反射）

整体功能概述

构建一个基于 Cesium 的三维场景，加载三维瓦片集模型，同时提供多种特效，像夜景纹理、上下扫光、点光源以及反射纹理等，利用 dat.gui 库创建交互界面。

代码详解

白膜特效

nightFs.glsl

void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {// 将法线值，直接作为颜色输出，这样可以确定模型的坐标轴// material.diffuse = normalize(v_normalMC);vec3 positionMC = fsInput.attributes.positionMC;// 如果片元在楼顶上，就不用贴图，直接给一个颜色if(dot(vec3(0., 0., 1.), v_normalMC) > 0.95) {material.diffuse = vec3(0.01, 0.1, 0.1);} else {// 先尝试使用x,z两个方向上的坐标来贴图// z的取值大概是0-500左右，x,y大概是0-200左右的取值vec2 uv = vec2(1., 1.);// // 确定uv的x轴// uv.x=fract(positionMC.x/pictureSize);// uv.y=fract(positionMC.z/pictureSize);// material.diffuse=texture2D(u_texture,uv).rgb;// 结论：只使用x，z进行贴图，在模型面垂直于x轴的情况下，由于x的变化非常小，所以导致贴图的质量很低// 所以我们需要判断，x轴和当前面的法向量的夹角float dotX = dot(vec3(1.0, 0.0, 0.0), v_normalMC);// 当前面和法向量垂直，这时，我们使用y，z贴图,这里注意，还考虑cos为负数的情况if(dotX > 0.9 || dotX < -0.9) {uv.x = fract(positionMC.y / u_pictureSize);} else {uv.x = fract(positionMC.x / u_pictureSize);}uv.y = fract(positionMC.z / u_pictureSize);material.diffuse = texture2D(u_texture, uv).rgb;}
}

这段代码用于Cesium引擎的GLSL着色器代码，主要用于动态调整3D模型表面的材质贴图方式。其核心功能是根据模型面的朝向智能选择贴图轴，避免拉伸，并区分楼顶和墙面。具体作用如下：

---

1. 楼顶处理

• 条件判断：通过法线方向（点积 dot(vec3(0., 0., 1.), v_normalMC) > 0.95）检测当前片元是否属于楼顶（法线接近垂直向上）。

• 颜色固定：若为楼顶，直接赋予深青色 (0.01, 0.1, 0.1)，跳过贴图逻辑，简化渲染。

---

2. 墙面贴图优化

• 动态UV选择：

  • 计算法线与X轴的点积 dotX，判断墙面是否垂直于X轴（|dotX| > 0.9）。

  • 垂直于X轴：使用Y和Z坐标生成UV的X分量，避免因X变化小导致的贴图拉伸。

  • 其他情况：使用X和Z坐标生成UV的X分量，正常贴图。

• 贴图平铺：通过 fract(positionMC.axis / u_pictureSize) 对坐标分块，实现纹理重复，适应大尺寸模型。

---

3. 解决的问题

• 贴图拉伸：在垂直于X轴的墙面，改用Y轴生成UV，避免纹理因坐标变化不足而过度压缩。

• 视觉一致性：通过分块贴图（fract）保证纹理在不同面上均匀重复，提升细节表现。

---

4. 代码总结

• 输入：模型坐标 positionMC、法线 v_normalMC、贴图尺寸 u_pictureSize。

• 输出：材质颜色 material.diffuse，楼顶为固定色，墙面为动态贴图结果。

• 关键逻辑：基于法线方向动态选择UV轴，平衡贴图质量和性能。

---

该代码通过智能UV映射优化了建筑类模型的纹理表现，使墙面贴图更自然，同时简化楼顶渲染，是3D场景中常见的材质优化策略。

relfect.glsl

vec3 createPointLight(vec3 positionWC){// pow(clamp(1.-lightDistance/u_lightRadius,0. ,1.),2. );// lightDistance就是当前片元和点光源中心点的距离// length可以计算向量模,这里用当前的世界坐标-点光源的世界坐标float lightDistance=length(positionWC-u_lightPosition);float intensity=pow(clamp(1.-lightDistance/u_lightRadius,0. ,1.),2.);return u_lightColor*intensity;
}
vec3 createReflectColor(vec3 normal,vec3 positionEC){vec3 worldNormal=normalize(normal);vec3 eyeToSurfaceDir=normalize(positionEC);vec3 direction=reflect(eyeToSurfaceDir,worldNormal);// 使用反射向量的x,z进行贴图,看一下效果vec4 color=texture2D(u_envTexture,vec2(direction.x,direction.z));return color.rgb;
}
void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material){vec3 positionWC=fsInput.attributes.positionWC;vec3 normalEC=fsInput.attributes.normalEC;// positionEC就是物体在相机坐标系下的坐标，在这里也可以理解为相机--->物体的向量vec3 positionEC=fsInput.attributes.positionEC;vec3 lightColor=createPointLight(positionWC);// 构造反射贴图的函数vec3 reflectColor=createReflectColor(normalEC,positionEC);// 将模型的颜色应用反射material.diffuse=reflectColor;vec3 positionMC=fsInput.attributes.positionMC;float czm_height=clamp((positionMC.z-380.)/320.,0.0,1.0);// 给白膜添加渐变material.diffuse*=czm_height;// 添加点光源material.diffuse+=lightColor;
}

这段代码是用于Cesium引擎的GLSL着色器程序，主要实现了一个结合 环境反射、高度渐变颜色 和 点光源照明 的复杂材质效果。以下是详细解析：

---

1. 核心函数解析

（1）createPointLight 函数

• 功能：计算点光源的衰减光强。

  • 输入：片元的世界坐标 positionWC。

  • 逻辑：

    1. 计算片元与点光源的距离：lightDistance = length(positionWC - u_lightPosition)。

    2. 通过公式 intensity = pow(clamp(1.0 - lightDistance / u_lightRadius, 0.0, 1.0), 2.0) 计算光强衰减（距离越远，强度越低）。

    3. 返回光源颜色 u_lightColor 与强度的乘积。

  • 作用：模拟点光源（如路灯、灯泡）的局部照明和衰减效果。

（2）createReflectColor 函数

• 功能：生成基于反射向量的环境贴图颜色。

  • 输入：片元的法线 normal 和相机坐标系位置 positionEC。

  • 逻辑：

    1. 标准化法线 worldNormal 和视线方向 eyeToSurfaceDir（从相机指向片元）。

    2. 计算反射方向 direction = reflect(eyeToSurfaceDir, worldNormal)。

    3. 使用反射向量的 X和Z分量 作为UV坐标采样环境贴图 u_envTexture。

  • 作用：模拟环境反射（如镜面、金属表面），但此处仅用X/Z分量可能是为了简化效果（如地面或水平面反射）。

（3）fragmentMain 主函数

• 功能：组合所有效果，生成最终材质颜色。

  • 逻辑流程：

    1. 环境反射：将材质基础色设为 reflectColor。

    2. 高度渐变：根据模型坐标Z值（positionMC.z）生成渐变系数 czm_height，使底部（Z=380）到顶部（Z=700）颜色渐深。

    3. 叠加点光源：将点光源颜色 lightColor 直接叠加到材质颜色上。

---

2. 关键作用

（1）环境反射

• 实现：通过反射向量采样环境贴图，模拟表面反射周围环境。

• 简化设计：仅用X/Z分量可能针对特定场景（如地面反射），忽略垂直方向变化以提高性能。

（2）高度渐变

• 参数含义：positionMC.z 表示模型坐标的垂直高度，(positionMC.z - 380)/320 将高度映射到 [0, 1]，实现从底部到顶部的颜色渐变。

• 用途：模拟建筑高度变化（如水位线、楼层颜色过渡）。

（3）点光源叠加

• 直接叠加：将点光源颜色 lightColor 直接加到材质颜色，模拟光源对表面的照明影响（如夜间建筑的局部亮斑）。

---

3. 潜在问题与优化

（1）反射方向问题

• 可能的Bug：eyeToSurfaceDir 应是从表面指向相机的方向（即 normalize(-positionEC)），但代码中直接使用 positionEC 可能导致反射方向错误。

• 修复建议：修改为 eyeToSurfaceDir = normalize(-positionEC)。

（2）环境贴图采样

• 局限性：仅用X/Z分量可能导致反射扭曲（如垂直面反射异常）。

• 优化方案：改用立方体贴图（textureCube）或完整反射向量 direction.xy。

（3）光照模型简化

• 问题：直接叠加点光源可能过曝（未区分漫反射/高光）。

• 改进：采用Phong或PBR光照模型，分离漫反射与高光计算。

---

4. 代码总结

• 输入：片元的世界坐标、法线、模型坐标，光源参数（位置、颜色、半径），环境贴图。

• 输出：材质颜色 = 环境反射色 × 高度渐变 + 点光源颜色。

• 应用场景：建筑白模的复杂材质效果（如玻璃幕墙反射、楼层渐变、夜间灯光照明）。

通过组合反射、渐变和点光源，这段代码实现了动态的视觉表现，适用于需要高细节的3D场景（如城市建模、游戏场景）。

scanFs.glsl

void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material){// 1.尝试在模型的中间生成一条光带vec3 positionMC=fsInput.attributes.positionMC;// czm_height取值范围在0-1之间,由于模型在地下有一段高度groundHeight，所以需要减去float czm_height=clamp((positionMC.z-groundHeight)/maxHeight,0.0,1.0);// 通过czm_height能够很快速的确定片元的高度// if(czm_height>0.5 && czm_height<0.505){//     material.diffuse=vec3(1.,1.,1.);// }else{//     material.diffuse=vec3(0.01,0.1,0.1);// }// 假设我们只需要一条固定光带 宽度为0.05// 将0.5变为iTime，这样可以让光带动起来float iTime=czm_frameNumber/120.;// 可以将iTime修改为一个来回运动的函数，这样光带的运动轨迹也是来回运动的iTime=abs(fract(iTime)*2.-1.);float czm_diff = step(u_scanWidth, abs(czm_height - iTime));// 添加渐变色,czm_height就是渐变因子material.diffuse=mix(vec3(0.1,1.0,0.2),vec3(1.,1.,1.),czm_height);material.diffuse += (material.diffuse * (1.0 - czm_diff)*3.0);
}

这段GLSL代码是用于Cesium引擎的片段着色器，主要实现了 动态高度渐变颜色 和 扫描光带效果，适用于3D模型的视觉增强（如建筑白模的动态高亮扫描）。以下是详细解析：

---

1. 核心功能

(1) 高度渐变底色

• 实现逻辑：

  • 通过模型坐标的Z值 positionMC.z 计算归一化高度 czm_height，公式为：

    glsl

    复制

    czm_height = clamp((positionMC.z - groundHeight) / maxHeight, 0.0, 1.0);

    将模型高度映射到 [0, 1] 范围，groundHeight 为地面基准高度，maxHeight 为最大高度。

  • 颜色插值：使用 mix 函数将颜色从深绿色 (0.1, 1.0, 0.2) 渐变到白色 (1.0, 1.0, 1.0)，渐变因子为 czm_height：

    glsl

    复制

    material.diffuse = mix(vec3(0.1,1.0,0.2), vec3(1.,1.,1.), czm_height);

  • 效果：模型底部显示深绿色，顶部逐渐变为白色，模拟高度相关的颜色过渡（如海拔渐变）。

---

(2) 动态扫描光带

• 光带运动：

  • 通过时间变量 iTime 控制光带位置：

    glsl

    复制

    float iTime = czm_frameNumber / 120.0;               // 时间流逝（120帧为周期）
    iTime = abs(fract(iTime) * 2.0 - 1.0);              // 生成三角波，使光带在0-1高度区间来回扫描

    此处 iTime 被转换为一个在 [0, 1] 之间来回振荡的值，形成光带上下扫描的效果。

  • 光带区域判断：

    glsl

    复制

    float czm_diff = step(u_scanWidth, abs(czm_height - iTime));

    • czm_height - iTime 计算当前高度与光带位置的差值。

    • abs(...) 获取差值的绝对值，step(u_scanWidth, ...) 判断差值是否超过光带宽度 u_scanWidth：

      • 若差值 小于 光带宽度，czm_diff = 0（光带区域）。

      • 若差值 大于等于 光带宽度，czm_diff = 1（非光带区域）。

• 光带亮度增强：

  glsl

  复制

  material.diffuse += (material.diffuse * (1.0 - czm_diff) * 3.0);

  • 在光带区域（czm_diff = 0），将底色亮度提升3倍，形成高亮光带。

  • 在非光带区域（czm_diff = 1），不叠加额外亮度。

---

2. 代码作用

• 视觉表现：

  • 模型表面呈现 从深绿到白色的渐变底色，体现高度差异。

  • 一条 动态扫描的白色光带 在模型表面上下移动，光带宽度由 u_scanWidth 控制，增强动态视觉效果。

• 应用场景：

  • 建筑白模的动态扫描（如展示楼体检测、重点区域高亮）。

  • 地形或管道的流动效果模拟（如液体流动、能量传输）。

---

3. 关键参数与优化建议

(1) 参数说明

参数	作用
groundHeight	模型地面基准高度（Z轴起点）
maxHeight	模型最大高度（Z轴范围）
u_scanWidth	光带宽度（值越小光带越细）
czm_frameNumber	引擎帧计数器，用于驱动时间动画

(2) 优化方向

• 平滑过渡：将 step 替换为 smoothstep，使光带边缘过渡更自然：

  glsl

  复制

  float czm_diff = smoothstep(u_scanWidth - 0.02, u_scanWidth + 0.02, abs(czm_height - iTime));

• 颜色控制：避免直接叠加亮度导致过曝，可改用加法混合或限制颜色范围：

  glsl

  复制

  material.diffuse = min(material.diffuse + (vec3(1.0) * (1.0 - czm_diff)), 1.0);

• 性能优化：若需高频更新光带，可减少 czm_frameNumber 的除数（如 / 60.0 加快扫描速度）。

---

4. 效果示意图

复制

模型高度
^
|         ░▒▓ 白色光带（动态移动）
|       ▒░
|     ▒░      ▓▒░
|   ▒░    ▓▒░    ▒░
| ▒░  ▓▒░    ▒░
|▓▒░      ▒░
|-------------------> 颜色渐变（深绿 → 白）

这段代码通过高度渐变和动态光带，显著提升了模型的视觉吸引力，适用于需要动态高亮或扫描效果的3D场景（如智慧城市、工业仿真）。

白膜特效.js

import * as Cesium from 'cesium'
import * as dat from 'dat.gui'
import { TencentImageryProvider } from '@cesium-china/cesium-map'
import nightFs from '../shader/39.白膜特效/nightFs.glsl'
import scanFs from '../shader/39.白膜特效/scanFs.glsl'
import reflectFs from '../shader/39.白膜特效/reflect.glsl'const gui = new dat.GUI()
// Cesium Ion token
Cesium.Ion.defaultAccessToken ='mytoken'
// viewer是整个三维场景的入口
const viewer = new Cesium.Viewer('cesiumContainer', {// 隐藏默认显示的控件// 时间轴控件timeline: false,// 动画控件animation: false,// 设置底图切换控件baseLayerPicker: false,// 复位按钮的控件homeButton: false,// 全屏按钮的控件fullscreenButton: false,// 导航功能的控件geocoder: false,// 隐藏二三维模式的切换控件sceneModePicker: false,scene3DOnly: true,// 隐藏默认的导航按钮navigationHelpButton: false,// 时间是否流动shouldAnimate: true,imageryProvider: new Cesium.GridImageryProvider({cells: 1,glowWidth: 0,color: Cesium.Color.WHITE.withAlpha(0.1),backgroundColor: Cesium.Color.GRAY,}),
})const options = {style: 4, //style: img、1：经典crs: 'WGS84', // 使用84坐标系，默认为：GCJ02,
}
viewer.scene.imageryLayers.addImageryProvider(new TencentImageryProvider(options)
)const tileset = new Cesium.Cesium3DTileset({url: 'http://localhost:666/model/3dtiles/tileset.json',
})viewer.scene.primitives.add(tileset)viewer.scene.postProcessStages.bloom.enabled = true
viewer.scene.postProcessStages.bloom.uniforms.contrast = 119
viewer.scene.postProcessStages.bloom.uniforms.brightness = -0.4
viewer.scene.postProcessStages.bloom.uniforms.glowOnly = false
viewer.scene.postProcessStages.bloom.uniforms.delta = 0.9
viewer.scene.postProcessStages.bloom.uniforms.sigma = 3.78
viewer.scene.postProcessStages.bloom.uniforms.stepSize = 5const addNightTexture = () => {const customShader = new Cesium.CustomShader({uniforms: {u_texture: {type: Cesium.UniformType.SAMPLER_2D,value: new Cesium.TextureUniform({url: '/src/assets/wall.png',}),},u_pictureSize: {type: Cesium.UniformType.FLOAT,value: 100.0,},},varyings: {v_normalMC: Cesium.VaryingType.VEC3,},vertexShaderText: /*glsl*/ `void vertexMain(VertexInput vsInput, inout czm_modelVertexOutput vsOutput) {// normalMC可以在顶点中，通过vsInput获取v_normalMC=vsInput.attributes.normalMC;}`,fragmentShaderText: nightFs,})tileset.customShader = customShader
}// 白膜的上下扫光功能
const addScanCircle = () => {const customShader = new Cesium.CustomShader({uniforms: {// 地上的最高高度maxHeight: {type: Cesium.UniformType.FLOAT,value: 320.0,},//经过debug法线，在模型的地下，还有一截高度，这个高度，我测试出来是380m左右groundHeight: {type: Cesium.UniformType.FLOAT,value: 380.0,},u_scanWidth: {type: Cesium.UniformType.FLOAT,value: 0.005,},},varyings: {v_normalMC: Cesium.VaryingType.VEC3,},vertexShaderText: /*glsl*/ `void vertexMain(VertexInput vsInput, inout czm_modelVertexOutput vsOutput) {// normalMC可以在顶点中，通过vsInput获取v_normalMC=vsInput.attributes.normalMC;}`,fragmentShaderText: scanFs,})tileset.customShader = customShader
}const addPointLight = () => {const customShader = new Cesium.CustomShader({uniforms: {// [121.44835554037566, 31.2328027614941]u_lightPosition: {type: Cesium.UniformType.VEC3,value: Cesium.Cartesian3.fromDegrees(121.44835554037566,31.2328027614941,1),},u_lightColor: {type: Cesium.UniformType.VEC3,value: Cesium.Color.fromCssColorString('#6900ff'),},u_lightRadius: {type: Cesium.UniformType.FLOAT,value: 2000,},},varyings: {v_normalMC: Cesium.VaryingType.VEC3,},vertexShaderText: /*glsl*/ `void vertexMain(VertexInput vsInput, inout czm_modelVertexOutput vsOutput) {// normalMC可以在顶点中，通过vsInput获取v_normalMC=vsInput.attributes.normalMC;}`,fragmentShaderText: /*glsl*/ `vec3 createPointLight(vec3 positionWC){// pow(clamp(1.-lightDistance/u_lightRadius,0. ,1.),2. );// lightDistance就是当前片元和点光源中心点的距离// length可以计算向量模,这里用当前的世界坐标-点光源的世界坐标float lightDistance=length(positionWC-u_lightPosition);float intensity=pow(clamp(1.-lightDistance/u_lightRadius,0. ,1.),2.);return u_lightColor*intensity;}void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material){vec3 positionWC=fsInput.attributes.positionWC;vec3 lightColor=createPointLight(positionWC);vec3 positionMC=fsInput.attributes.positionMC;float czm_height=clamp((positionMC.z-380.)/320.,0.0,1.0);// 给白膜添加渐变material.diffuse*=czm_height;// 添加点光源material.diffuse+=lightColor;}`,})tileset.customShader = customShader
}const addReflectTexture = () => {const customShader = new Cesium.CustomShader({uniforms: {// cesium在customShader不支持textureCubeu_envTexture: {type: Cesium.UniformType.SAMPLER_2D,value: new Cesium.TextureUniform({url: '/src/assets/pic.jpg',}),},// [121.44835554037566, 31.2328027614941]u_lightPosition: {type: Cesium.UniformType.VEC3,value: Cesium.Cartesian3.fromDegrees(121.44835554037566,31.2328027614941,1),},u_lightColor: {type: Cesium.UniformType.VEC3,value: Cesium.Color.fromCssColorString('#6900ff'),},u_lightRadius: {type: Cesium.UniformType.FLOAT,value: 2000,},},varyings: {v_normalMC: Cesium.VaryingType.VEC3,},vertexShaderText: /*glsl*/ `void vertexMain(VertexInput vsInput, inout czm_modelVertexOutput vsOutput) {// normalMC可以在顶点中，通过vsInput获取v_normalMC=vsInput.attributes.normalMC;}`,fragmentShaderText: reflectFs,})tileset.customShader = customShader
}tileset.readyPromise.then((res) => {viewer.zoomTo(tileset)console.log(tileset.properties)// 使用DebugModelMatrixPrimitive将世界坐标可视化出来viewer.scene.primitives.add(new Cesium.DebugModelMatrixPrimitive({modelMatrix: tileset._root.transform,length: 50000.0,width: 3.0,}))addReflectTexture()
})

这段代码是用于 Cesium 3D地理可视化引擎 的复杂场景构建脚本，主要实现以下核心功能：

---

1. 场景初始化与基础配置

• 引擎配置：

  • 隐藏默认控件（时间轴、动画、底图选择器等），保持界面简洁。

  • 设置白色半透明网格底图（GridImageryProvider），用于调试时辅助观察模型位置。

  • 添加腾讯地图影像图层（TencentImageryProvider），支持 WGS84 坐标系。

• 模型加载：

  • 通过 Cesium3DTileset 加载本地3D瓦片模型（http://localhost:666/model/3dtiles/tileset.json），为建筑白模或城市模型。

• 后处理特效：

  • 启用 Bloom辉光效果，调整参数（对比度、亮度、模糊半径）增强光带、光源的视觉冲击力。

---

2. 自定义着色器效果

通过 Cesium.CustomShader 实现四种动态材质效果，支持按需切换：

(1) 夜间纹理贴图 (addNightTexture)

• 功能：为模型表面添加动态纹理（如墙面材质）。

• 关键参数：

  • u_texture: 2D纹理贴图（wall.png），控制墙面细节。

  • u_pictureSize: 贴图平铺尺寸，影响纹理密度。

• 实现：通过顶点法线 normalMC 计算UV坐标，区分墙面与楼顶，楼顶固定颜色，墙面动态贴图。

(2) 扫描光带效果 (addScanCircle)

• 功能：在模型表面生成 上下移动的白色光带，模拟扫描检测效果。

• 关键参数：

  • maxHeight: 模型最大高度（320米）。

  • groundHeight: 地面基准高度（380米）。

  • u_scanWidth: 光带宽度（0.005）。

• 实现：

  • 通过模型高度 positionMC.z 计算归一化高度 czm_height。

  • 使用时间变量 iTime 生成三角波，驱动光带上下扫描。

  • 通过 mix 函数实现底部到顶部的颜色渐变（深绿→白），叠加光带亮度。

(3) 点光源照明 (addPointLight)

• 功能：模拟点光源（如路灯）对模型的局部照明。

• 关键参数：

  • u_lightPosition: 光源世界坐标（经度 121.44835554037566, 纬度 31.2328027614941）。

  • u_lightColor: 光源颜色（紫色 #6900ff）。

  • u_lightRadius: 光照半径（2000米）。

• 实现：

  • 计算片元与光源的距离 lightDistance，通过衰减公式 pow(clamp(...), 2) 控制光强。

  • 叠加光源颜色到模型基础色，形成局部亮斑。

(4) 环境反射贴图 (addReflectTexture)

• 功能：模拟表面反射环境贴图（如玻璃幕墙反射天空）。

• 关键参数：

  • u_envTexture: 2D环境贴图（pic.jpg），替代立方体贴图（Cesium限制）。

• 实现：

  • 计算视线方向 eyeToSurfaceDir 与法线 normalEC 的反射向量。

  • 使用反射向量的X/Z分量采样环境贴图，生成反射颜色。

---

3. 调试与可视化工具

• 坐标轴可视化：

  • 通过 DebugModelMatrixPrimitive 显示模型的世界坐标轴（长度5万米），辅助定位。

• 状态栏：

  • PositionStatusBar 实时显示相机经纬度、高度等信息。

---

4. 代码作用总结

• 核心目标：在Cesium中渲染3D建筑模型，并叠加 动态材质效果，提升视觉表现力。

• 应用场景：

  • 智慧城市：建筑白模的夜间灯光、扫描检测、环境反射。

  • 工业仿真：设备表面动态光效、局部照明。

  • 游戏开发：复杂材质效果（反射、辉光）的快速实现。

---

5. 参数调整示例

// 示例：通过GUI调整光带宽度
gui.add(options, 'u_scanWidth', 0.001, 0.1).onChange((val) => {tileset.customShader.uniforms.u_scanWidth.value = val;
});// 示例：切换效果
const effects = { '反射': addReflectTexture, '光带': addScanCircle };
gui.add(effects, '效果').onChange((fn) => fn());

该代码通过模块化设计支持快速扩展，是Cesium高级材质开发的典型实践。