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
相关推荐
子兮曰3 小时前
OpenClaw架构揭秘:178k stars的个人AI助手如何用Gateway模式统一控制12+通讯频道
前端·javascript·github
百锦再3 小时前
Reactive编程入门:Project Reactor 深度指南
前端·javascript·python·react.js·django·前端框架·reactjs
百锦再3 小时前
React编程高级主题:测试代码
android·前端·javascript·react.js·前端框架·reactjs
颜酱5 小时前
图结构完全解析:从基础概念到遍历实现
javascript·后端·算法
小迷糊的学习记录5 小时前
Vuex 与 pinia
前端·javascript·vue.js
发现一只大呆瓜6 小时前
前端性能优化:图片懒加载的三种手写方案
前端·javascript·面试
不爱吃糖的程序媛6 小时前
Flutter 与 OpenHarmony 通信:Flutter Channel 使用指南
前端·javascript·flutter
利刃大大6 小时前
【Vue】Element-Plus快速入门 && Form && Card && Table && Tree && Dialog && Menu
前端·javascript·vue.js·element-plus
NEXT066 小时前
AI 应用工程化实战:使用 LangChain.js 编排 DeepSeek 复杂工作流
前端·javascript·langchain
光影少年7 小时前
react的hooks防抖和节流是怎样做的
前端·javascript·react.js