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，实时查看最终代码。
下节课我们在这份红布上再加噪声、做流动，让墙面自己"动起来"。