Cesium使用自定义Shader渲染3dtiles建筑白膜

适用场景

大屏项目，有科技风格主题渲染需求的，可以对建筑白膜进行自定义渲染，实现灵活多变酷炫的风格

实现思路

Cesium自1.87.1版本，开始支持3DTileset使用CustomShader：

1	Added CustomShader class for styling Cesium3DTileset or ModelExperimental with custom GLSL shaders

在CesiumJS 1.97版本，支持Model entities使用CustomShader：

1	Model entities now support CustomShader

借助CustomShader，我们可以轻松的实现模型的自定义Shader渲染

效果展示

关键代码

//基于高度的渐变和线条扫描特效
const shader = new Cesium.CustomShader({
    fragmentShaderText: `
            void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
                float _baseHeight = 50.0; // 物体的基础高度，需要修改成一个合适的建筑基础高度
                float _heightRange = 40.0; // 高亮的范围(_baseHeight ~ _baseHeight + _heightRange) 默认是 0-60米
                float _glowRange = 200.0; // 光环的移动范围(高度)
                float vtxf_height = fsInput.attributes.positionMC.z-_baseHeight;
                float vtxf_a11 = fract(czm_frameNumber / 120.0) * 3.14159265 * 2.0;
                float vtxf_a12 = vtxf_height / _heightRange + sin(vtxf_a11) * 0.1;
                material.diffuse = vec3(0.0,0.2,0.3)*vec3(vtxf_a12, vtxf_a12, vtxf_a12);
                float vtxf_a13 = fract(czm_frameNumber / 360.0);
                float vtxf_h = clamp(vtxf_height / _glowRange, 0.0, 1.0);
                vtxf_a13 = abs(vtxf_a13 - 0.5) * 2.0;
                float vtxf_diff = step(0.005, abs(vtxf_h - vtxf_a13));
                material.diffuse += material.diffuse * (1.0 - vtxf_diff);
            }
          `
  })

//加载3dtiles建筑白膜
try {
	tileset = await viewer.load3dtiles('/models/3dtiles/JN-WhiteModel/tileset.json');
    //设置customShader属性
	tileset.customShader = shader 
} catch (error) {
	console.error(`Error creating tileset: ${error}`)
}

遇到的坑

在应用shader时，可能会遇到渲染结果不符合预期的bug，这是可能是因为模型的z轴和cesium中模型的z轴对应不正确导致的，这时候可以尝试使用y轴作为垂直向上的坐标轴。体现在着色器代码中就是将fsInput.attributes.positionMC.z改成 fsInput.attributes.positionMC.y；

模型坐标轴不正确时上面shader的应用效果

拓展学习

研究了一下shader的代码，发现实现简单的渐变效果还是比较简单容易上手的，于是写了一个简单的基于模型高度渐变的无特效shader

void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
  //模型底座高度
  float baseHeight = 60.0;
  float height = fsInput.attributes.positionMC.z -baseHeight; 

  //高度归一化(意义：假设模型高度范围在0-200米之间)
  float normalizedHeight = clamp(height * 0.02, 0.0, 1.0);

  //定义渐变的两个颜色：底部白色，顶部蓝色
  vec3 bottomColor = vec3(0.01, 0.04, 0.04);  // 白色
  vec3 topColor = vec3(0.0, 0.6, 0.8);     // 深蓝色

  //基于归一化高度值计算最终颜色
  material.diffuse = mix(bottomColor, topColor, normalizedHeight);

  //模型材质透明度设置
  material.alpha = 1.0;
}

shader学习心得：

通过fsinput.attributes.positionMC.z，获取模型的高度
使用clamp函数，可以将高度值归一化到0-1区间，以便将其映射到颜色值的RGB通道中
颜色值的混合可以使用乘法*操作符，mix函数可以用来按比例混合颜色

glsl编程不方便用控制台输出来进行调试，可以使用step函数来判断值的范围，将其反应到颜色上。

//step函数基本用法：
float a = step(0.5, 0.3);  // 返回0.0，因为0.3 < 0.5
float b = step(0.5, 0.7);  // 返回1.0，因为0.7 >= 0.5

//因为其返回值为0或者1,可以将其映射到颜色上用于判断值的范围，伪代码：
material.diffuse = vec3(setp(1.0,height)*step(height,2.0),0.0,0.0) //判断height是否大于1.0,小于2.0，符合这一规则的像素点将显示为红色