Cesium自定义着色器-模式

csharp 复制代码
let customShader = new Cesium.CustomShader({
   ......
    // 设置着色器模式为完全替换原始材质。
    mode: Cesium.CustomShaderMode.MODIFY_MATERIAL, 
  ......
})

Cesium 自定义着色器有两种模式:

1. REPLACE_MATERIAL - 完全替换材质

arduino 复制代码
// 当:完全不需要原始材质,要自己从头创建外观
mode: Cesium.CustomShaderMode.REPLACE_MATERIAL

使用场景:

  • 程序化生成的材质(条纹、波浪、渐变等)
  • 特殊效果(X光、热力图、扫描线)
  • 完全自定义的颜色和纹理

2. MODIFY_MATERIAL - 修改原始材质

arduino 复制代码
// 当:想要保留原始材质,只是稍作调整
mode: Cesium.CustomShaderMode.MODIFY_MATERIAL

使用场景:

  • 给原有模型添加发光效果
  • 调整原始纹理的亮度/对比度
  • 在原有基础上添加高光或阴影
  • 颜色校正或滤镜效果

3. 示例对比

a. REPLACE_MATERIAL 示例:

scss 复制代码
// 完全忽略原始纹理,创建自己的材质
mode: Cesium.CustomShaderMode.REPLACE_MATERIAL,
fragmentShaderText: `
  void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
    // 完全自定义的颜色,不关心原始材质是什么
    material.diffuse = vec3(1.0, 0.0, 0.0); // 纯红色
  }
`

原本材质

完全替换材质效果

b. MODIFY_MATERIAL 示例:

arduino 复制代码
// 在原始材质基础上添加效果
mode: Cesium.CustomShaderMode.MODIFY_MATERIAL, 
fragmentShaderText: `
  void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
    // 在原始颜色基础上添加红色分量
    material.diffuse.r += 0.9; // 让原始材质更红一些
  }
`

修改材质效果

c. 选择建议:

  • 想完全重做外观REPLACE_MATERIAL
  • 想微调现有外观MODIFY_MATERIAL
相关推荐
空中海37 分钟前
02 状态、Hooks、副作用与数据流
开发语言·javascript·ecmascript
空中海1 小时前
04 React Native工程化、质量、发布与生态选型
javascript·react native·react.js
杨超凡2 小时前
豆包收费了?我特么自己用“意念”搓了一个!
javascript
threelab2 小时前
Three.js 咖啡杯烟雾效果 | 三维可视化 / AI 提示词
开发语言·javascript·人工智能
Heo3 小时前
14_React 中的更新队列 updateQueue
前端·javascript·面试
前端 贾公子3 小时前
解决浏览器端 globalThis is not defined 报错
前端·javascript·vue.js
之歆3 小时前
DAY12_CSS3选择器全攻略 + 盒子新特性完全指南(下)
前端·javascript·css3
kyriewen113 小时前
代码写成一锅粥?3个设计模式让你的项目“起死回生”
开发语言·前端·javascript·设计模式·ecmascript
iCxhust4 小时前
在 emu8086 中可以直接编译运行的完整汇编程序,演示数组的定义、遍历、求和、求最大值。
开发语言·前端·javascript·汇编·单片机·嵌入式硬件·算法