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
相关推荐
kyriewen7 分钟前
我花3天抓了一个幽灵bug,凶手藏在第4层
前端·javascript·程序员
GISBox1 小时前
数字孪生项目必备:RVT模型转3DTiles格式的高效解决方案
gis·cesium·格式转换·服务发布·gisbox·rvt切片·3dtiles格式
mONESY2 小时前
LangGraph.js 从零上手:把 Agent 工作流从一条线变成一张网
javascript
默_笙2 小时前
⚓ AI 的"官方答题卡":withStructuredOutput 与结构化输出的终局之战
前端·javascript
我家猫叫佩奇3 小时前
🦭 厌倦了千篇一律的线性图标?Naive Icons 正式开源
前端·javascript·css
ToTacview6 小时前
Web 可视化卡顿的归因方法论:以“流畅一段、停顿一下“为例的代码级根治
cesium
梦诺6 小时前
vue3 keepAlive+记录滚动条
前端·javascript·vue.js
天若有情6737 小时前
开源轻量双语工具|一键批量查询 NPM 包历史下载量,支持按作者批量统计
javascript·npm·github pages·开源工具·netlify·前端开源·npm克隆量
福兮说8 小时前
纯前端把图片压缩到指定体积:canvas.toBlob 配合二分查找
前端·javascript·canvas·图片处理
志尊宝8 小时前
Vue3 零基础每日笔记(018):按键与鼠标修饰符——回车搜索、Ctrl+S 保存这样写
javascript·vue.js·笔记