厦门网站建设手机版夏邑县百城建设提质网站

厦门网站建设手机版,夏邑县百城建设提质网站,天津滨海新区邮编,深圳网站设计网站建设哪个好这节课#xff0c;我们告别“傻瓜式” fromType#xff0c;改用更灵活的 Fabric 写法#xff0c;手把手自定义 Primitive 材质。 一句话#xff1a;Fabric 就是“用 JSON 对象描述材质”#xff0c;既能配 uniform#xff0c;也能直接写 GLSL 源码#xff0c;想怎么画就…这节课我们告别“傻瓜式”fromType改用更灵活的Fabric写法手把手自定义 Primitive 材质。一句话Fabric 就是“用 JSON 对象描述材质”既能配 uniform也能直接写 GLSL 源码想怎么画就怎么画。一、Fabric 基础格式const material new Cesium.Material({ fabric: { type: Color, // 材质类型可省 uniforms: { /* 参数表 */ }, // 着色器里的外部变量 source: /* 可选完全自定义 GLSL */ } });type与fromType的第一参数对应写不写都行uniforms里的值会原样传进着色器一旦给出sourceCesium 就不再内置代码而是把你写的字符串直接编译进片元着色器——自由度瞬间拉满。二、把以前的纯色、贴图改用 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完全一致只是换了个写法为后面“手写着色器”热身。三、完全自定义手写 czmmaterialCesium 的片元着色器里会调用一个固定接口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_stUV怎么来czm_getMaterial在哪被调用最终gl_FragColor如何叠加光照。调错颜色、写崩语法时把这里当“在线调试器”即可。五、Fabric 能做什么改已有 uniform换图、换色、换强度写全新 GLSL噪声、流动、扫描线、科技墙……随便玩多材质合并Fabric 支持components混搭后面再进阶。小结Fabric JSON 描述材质可配 uniform可写 GLSL。手写czm_getMaterial就能完全掌控像素颜色。调错就打印vertexShaderSource / fragmentShaderSource实时查看最终代码。下节课我们在这份红布上再加噪声、做流动让墙面自己“动起来”。