news 2026/7/10 7:16:51

Cesium快速入门22:fabric自定义着色器

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Cesium快速入门22:fabric自定义着色器

这节课,我们告别“傻瓜式”fromType,改用更灵活的Fabric写法,手把手自定义 Primitive 材质。
一句话:Fabric 就是“用 JSON 对象描述材质”,既能配 uniform,也能直接写 GLSL 源码,想怎么画就怎么画。


一、Fabric 基础格式

const material = new Cesium.Material({ fabric: { type: 'Color', // 材质类型(可省) uniforms: { /* 参数表 */ }, // 着色器里的外部变量 source: `/* 可选:完全自定义 GLSL */` } });
  • typefromType的第一参数对应,写不写都行;

  • uniforms里的值会原样传进着色器;

  • 一旦给出source,Cesium 就不再内置代码,而是把你写的字符串直接编译进片元着色器——自由度瞬间拉满。


二、把以前的纯色、贴图改用 Fabric 写

  1. 半透明红

const fbMaterial = new Cesium.Material({ fabric: { type: 'Color', uniforms: { color: Cesium.Color.RED.withAlpha(0.5), // 外部变量 } } });
  1. 贴图

const fbMaterial = new Cesium.Material({ fabric: { type: 'Image', uniforms: { image: './imgs/logo.png', // 图片路径 } } });

效果与fromType完全一致,只是换了个写法,为后面“手写着色器”热身。


三、完全自定义:手写 czmmaterial

Cesium 的片元着色器里会调用一个固定接口:

czm_material czm_getMaterial(czm_materialInput materialInput);

只要你在 Fabric 里提供source,系统就把这段字符串原封不动塞进最终着色器,想返回什么颜色都行。

示例:整面涂纯红

const rawMaterial = new Cesium.Material({ fabric: { uniforms: {}, // 暂无外部参数 source: ` czm_material czm_getMaterial(czm_materialInput materialInput) { czm_material mat = czm_getDefaultMaterial(materialInput); // 先拿默认结构 mat.diffuse = vec3(1.0, 0.0, 0.0); // 漫反射=红色 return mat; } ` } });
  • czm_getDefaultMaterial帮你把结构体初始化好;

  • mat.diffuse就是改表面颜色;

  • 想调透明度再动mat.alpha,想自发光就改mat.emission,全靠你发挥。


四、想看最终代码?Cesium 给你开“后台门”

把材质赋给 Appearance 后,运行时能直接拿到完整源码:

console.log(appearance.fragmentShaderSource);

打印结果里就能看到:

  • 变量v_st(UV)怎么来;

  • czm_getMaterial在哪被调用;

  • 最终gl_FragColor如何叠加光照。
    调错颜色、写崩语法时,把这里当“在线调试器”即可。


五、Fabric 能做什么

  • 改已有 uniform:换图、换色、换强度;

  • 写全新 GLSL:噪声、流动、扫描线、科技墙……随便玩;

  • 多材质合并:Fabric 支持components混搭,后面再进阶。


小结

  1. Fabric = JSON 描述材质,可配 uniform,可写 GLSL。

  2. 手写czm_getMaterial就能完全掌控像素颜色。

  3. 调错就打印vertexShaderSource / fragmentShaderSource,实时查看最终代码。

  4. 下节课我们在这份红布上再加噪声、做流动,让墙面自己“动起来”。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/7/10 11:03:07

NCMD解密工具完整使用指南:3步解锁网易云音乐加密文件

NCMD解密工具完整使用指南:3步解锁网易云音乐加密文件 【免费下载链接】ncmdump 项目地址: https://gitcode.com/gh_mirrors/ncmd/ncmdump NCMD解密工具专为处理网易云音乐NCM格式加密文件设计,通过简单的拖放操作即可将加密音频转换为标准MP3格…

作者头像 李华
网站建设 2026/7/9 20:35:39

火山引擎AI大模型接入Qwen-Image,提升企业级服务能力

火山引擎AI大模型接入Qwen-Image,提升企业级服务能力 在数字内容爆发式增长的今天,企业对视觉素材的需求早已从“有图可用”转向“精准表达”。无论是电商平台需要千人千面的商品主图,还是品牌方追求高度一致的全球传播视觉,传统设…

作者头像 李华
网站建设 2026/7/10 1:27:00

GitHub Wiki建设ACE-Step知识库:聚集社区智慧

GitHub Wiki建设ACE-Step知识库:聚集社区智慧 在音乐创作的门槛正被AI技术不断降低的今天,一个普通人能否仅凭一句“写一首温暖的吉他曲,像夏日傍晚的微风”就生成一段动听旋律?答案已经从“不可能”走向现实。由 ACE Studio 与阶…

作者头像 李华
网站建设 2026/7/9 18:45:31

卡尔曼增益:动态权重,最优估计

在卡尔曼滤波中,观测值和预测值的权重由 卡尔曼增益 动态决定。这个权重不是固定的,而是根据两者当前的不确定性(误差大小)实时计算得出。核心规则:谁更可靠,就赋予更高权重1. 权重计算公式(直观…

作者头像 李华
网站建设 2026/7/10 0:33:41

强力解锁原神圣遗物管理?5步教你用椰羊工具箱告别手动录入烦恼

强力解锁原神圣遗物管理?5步教你用椰羊工具箱告别手动录入烦恼 【免费下载链接】cocogoat-client A toolbox for Genshin Impact to export artifacts automatically. 支持圣遗物全自动导出的原神工具箱,保证每一行代码都是熬夜加班打造。 项目地址: h…

作者头像 李华
网站建设 2026/7/10 7:02:26

Wan2.2-T2V-5B与YOLOv5/YOLOv8对比:不同AI模型的应用边界探讨

Wan2.2-T2V-5B与YOLOv5/YOLOv8对比:不同AI模型的应用边界探讨 在今天的AI应用现场,一个开发者可能会同时面对两个截然不同的任务:一边是市场部要求“根据一段文案自动生成3秒宣传视频”,另一边是工厂产线提出“实时检测产品表面是…

作者头像 李华