Cesium快速入门22：fabric自定义着色器
这节课，我们告别“傻瓜式”fromType，改用更灵活的Fabric写法，手把手自定义 Primitive 材质。
一句话：Fabric 就是“用 JSON 对象描述材质”，既能配 uniform，也能直接写 GLSL 源码，想怎么画就怎么画。
一、Fabric 基础格式
const material = new Cesium.Material({ fabric: { type: 'Color', // 材质类型（可省） uniforms: { /* 参数表 */ }, // 着色器里的外部变量 source: `/* 可选：完全自定义 GLSL */` } });type与fromType的第一参数对应，写不写都行；uniforms里的值会原样传进着色器；一旦给出
source，Cesium 就不再内置代码，而是把你写的字符串直接编译进片元着色器——自由度瞬间拉满。
二、把以前的纯色、贴图改用 Fabric 写
半透明红
const fbMaterial = new Cesium.Material({ fabric: { type: 'Color', uniforms: { color: Cesium.Color.RED.withAlpha(0.5), // 外部变量 } } });贴图
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混搭，后面再进阶。
小结
Fabric = JSON 描述材质，可配 uniform，可写 GLSL。
手写
czm_getMaterial就能完全掌控像素颜色。调错就打印
vertexShaderSource / fragmentShaderSource，实时查看最终代码。下节课我们在这份红布上再加噪声、做流动，让墙面自己“动起来”。