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