Cesium自定义着色器:分量修改与完全赋值

书接上文:

依照前面自定义着色器模式分为完全替换材质和修改原始材质,在举例是使用的分别是

ini 复制代码
material.diffuse = vec3(1.0, 0.0, 0.0);

material.diffuse.r += 0.3;

二者有啥区别:

这里就涉及整个向量单个分量概念

一、完全赋值-整个向量

  1. material.diffuse = vec3(1.0, 0.0, 0.0);
scss 复制代码
// 直接覆盖整个漫反射颜色
material.diffuse = vec3(1.0, 0.0, 0.0); // 纯红色
  • 无论原始颜色是什么,现在都变成纯红色
  • RGB三个通道全部被覆盖
  • 丢失所有原始颜色信息

二、分量修改

  1. 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 → 修改部分
相关推荐
2501_920931701 小时前
React Native鸿蒙跨平台实现推箱子游戏,完成玩家移动与箱子推动,当所有箱子都被推到目标位置时,玩家获胜
javascript·react native·react.js·游戏·ecmascript·harmonyos
AI老李1 小时前
PostCSS完全指南:功能/配置/插件/SourceMap/AST/插件开发/自定义语法
前端·javascript·postcss
方也_arkling2 小时前
Element Plus主题色定制
javascript·sass
2601_949809592 小时前
flutter_for_openharmony家庭相册app实战+我的Tab实现
java·javascript·flutter
Up九五小庞2 小时前
开源埋点分析平台 ClkLog 本地部署 + Web JS 埋点测试实战--九五小庞
前端·javascript·开源
摘星编程3 小时前
React Native + OpenHarmony:UniversalLink通用链接
javascript·react native·react.js
qq_177767373 小时前
React Native鸿蒙跨平台数据使用监控应用技术,通过setInterval每5秒更新一次数据使用情况和套餐使用情况,模拟了真实应用中的数据监控场景
开发语言·前端·javascript·react native·react.js·ecmascript·harmonyos
烬头88213 小时前
React Native鸿蒙跨平台应用实现了onCategoryPress等核心函数,用于处理用户交互和状态更新,通过计算已支出和剩余预算
前端·javascript·react native·react.js·ecmascript·交互·harmonyos
程序员清洒4 小时前
Flutter for OpenHarmony:Text — 文本显示与样式控制
开发语言·javascript·flutter
雨季6665 小时前
Flutter 三端应用实战:OpenHarmony 简易“动态内边距调节器”交互模式深度解析
javascript·flutter·ui·交互·dart