企业官网建设流程全解析

这节课，我们告别“傻瓜式”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 写

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. 下节课我们在这份红布上再加噪声、做流动，让墙面自己“动起来”。