书接上文:
依照前面自定义着色器模式分为完全替换材质和修改原始材质,在举例是使用的分别是
ini
material.diffuse = vec3(1.0, 0.0, 0.0);
material.diffuse.r += 0.3;
二者有啥区别:
这里就涉及整个向量和单个分量概念
一、完全赋值-整个向量
- material.diffuse = vec3(1.0, 0.0, 0.0);
scss
// 直接覆盖整个漫反射颜色
material.diffuse = vec3(1.0, 0.0, 0.0); // 纯红色
- 无论原始颜色是什么,现在都变成纯红色
- RGB三个通道全部被覆盖
- 丢失所有原始颜色信息
二、分量修改
- material.diffuse.r += 0.3;
arduino
// 只修改红色分量,其他分量保持不变
material.diffuse.r += 0.3; // 红色分量增加0.3
- 只修改红色通道
- 绿色和蓝色通道保持原始值
- 保留原始颜色的基础上进行调整
三、两种写法可以相互转换:
ini
// 分量修改等价于:
material.diffuse = vec3(
material.diffuse.r + 0.3, // 红色增加
material.diffuse.g, // 绿色不变
material.diffuse.b // 蓝色不变
);
// 完全赋值可以看作:
material.diffuse.r = 1.0;
material.diffuse.g = 0.0;
material.diffuse.b = 0.0;
四、使用场景对比
(一) 完全赋值适合:
scss
// 1. 创建全新的颜色效果
material.diffuse = vec3(sin(u_time), 0.5, 0.8);
// 2. 程序化生成的材质
material.diffuse = calculateProceduralColor();
// 3. 完全替换原始纹理
(二) 分量修改适合:
当使用 MODIFY_MATERIAL 模式时,分量修改特别有用:
arduino
// 1. 颜色校正
material.diffuse.r *= 1.2; // 增强红色
material.diffuse.g -= 0.1; // 减少绿色
// 2. 添加色调
material.diffuse.r += 0.1; // 添加红色调
// 3. 亮度调整(同时修改所有分量)
material.diffuse.rgb += 0.2; // 整体变亮
所以,如果你想要把白膜的颜色改成蓝绿色,只需要设置成完全赋值即可
ini
let customShader = new Cesium.CustomShader({
mode: Cesium.CustomShaderMode.REPLACE_MATERIAL, //替换材质
//片元着色器
fragmentShaderText: `
void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material){
material.diffuse = vec3(0.0, 1.0, 0.5);
material.alpha = 0.3;
}
`,
})
效果

五、总结
| 特性 | 完全赋值 | 分量修改 |
|---|---|---|
| 操作对象 | 整个向量 | 单个分量 |
| 原始数据 | 完全丢失 | 部分保留 |
| 使用场景 | 创建新材质 | 调整现有材质 |
| 模式偏好 | REPLACE_MATERIAL | MODIFY_MATERIAL |
简单记法:
=→ 替换全部.r/.g/.b→ 修改部分