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
相关推荐
Van_Moonlight几秒前
RN for OpenHarmony 实战 TodoList 项目:顶部导航栏
javascript·开源·harmonyos
技术狂小子几秒前
前端开发中那些看似微不足道却影响体验的细节
javascript
用户12039112947261 分钟前
使用 Tailwind CSS 构建现代登录页面:从 Vite 配置到 React 交互细节
前端·javascript·react.js
花归去43 分钟前
echarts 柱状图曲线图
开发语言·前端·javascript
老前端的功夫1 小时前
TypeScript 类型魔术:模板字面量类型的深层解密与工程实践
前端·javascript·ubuntu·架构·typescript·前端框架
Nan_Shu_6141 小时前
学习: Threejs (2)
前端·javascript·学习
G_G#1 小时前
纯前端js插件实现同一浏览器控制只允许打开一个标签,处理session变更问题
前端·javascript·浏览器标签页通信·只允许一个标签页
@大迁世界2 小时前
TypeScript 的本质并非类型,而是信任
开发语言·前端·javascript·typescript·ecmascript
Amumu121382 小时前
React面向组件编程
开发语言·前端·javascript
冰暮流星2 小时前
javascript逻辑运算符
开发语言·javascript·ecmascript