news 2026/6/15 17:13:36

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/6/15 9:34:42

明日方舟UI定制全攻略:打造专属战术界面体验

明日方舟UI定制全攻略:打造专属战术界面体验 【免费下载链接】arknights-ui H5 复刻版明日方舟游戏主界面 项目地址: https://gitcode.com/gh_mirrors/ar/arknights-ui 还在为单调的游戏界面感到厌倦吗?想要为心爱的干员们打造一个专属的展示舞台…

作者头像 李华
网站建设 2026/6/15 8:40:45

HunyuanVideo-Foley与Maven项目集成:Java后端调用AI音效生成服务

HunyuanVideo-Foley与Maven项目集成:Java后端调用AI音效生成服务 在短视频和流媒体内容爆炸式增长的今天,一个常被忽视却至关重要的环节正悄然发生变革——音效制作。过去,一段10秒的动画要配上脚步声、风声和背景音乐,可能需要音…

作者头像 李华
网站建设 2026/6/15 14:25:50

AI时代,身心灵产业之AR/VR/MR在未来空间计算机时代发挥着什么作用?又会给人们的生活带来什么样的改变呢?

在未来空间计算机时代,AR与MR技术能推动身心灵产业实现疗愈、修行和认知提升的革新,同时也会从健康管理、生活体验等多方面重塑人们的生活,具体作用与改变一起看看!1. 在身心灵产业的核心作用AR精准辅助心理干预与训练&#xff1a…

作者头像 李华
网站建设 2026/6/15 5:59:23

城通网盘直连解析终极指南:三步获取高速下载链接

城通网盘直连解析终极指南:三步获取高速下载链接 【免费下载链接】ctfileGet 获取城通网盘一次性直连地址 项目地址: https://gitcode.com/gh_mirrors/ct/ctfileGet 还在为城通网盘的下载烦恼吗?广告等待、限速困扰、复杂的操作流程……这些问题都…

作者头像 李华
网站建设 2026/6/15 10:24:32

VideoDownloadHelper:你的专属网页视频下载神器

还在为无法保存网页视频而烦恼吗?当看到精彩的教程视频或有趣的短视频时,却只能在线浏览无法离线收藏,这种感觉确实让人遗憾。VideoDownloadHelper 浏览器扩展正是为解决这一痛点而生,让你轻松将网页视频变为个人收藏。 【免费下载…

作者头像 李华
网站建设 2026/6/15 1:09:39

Android Studio接入TensorFlow Lite版ACE-Step:实现端侧生成

Android Studio接入TensorFlow Lite版ACE-Step:实现端侧生成 在短视频创作、游戏配乐和独立音乐制作日益普及的今天,用户对“即时、个性化”音频内容的需求正以前所未有的速度增长。然而,传统AI音乐生成大多依赖云端服务——不仅存在隐私泄露…

作者头像 李华