news 2026/6/10 16:21:23

Cesium快速入门22:fabric自定义着色器

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Cesium快速入门22:fabric自定义着色器

这节课,我们告别“傻瓜式”fromType,改用更灵活的Fabric写法,手把手自定义 Primitive 材质。
一句话:Fabric 就是“用 JSON 对象描述材质”,既能配 uniform,也能直接写 GLSL 源码,想怎么画就怎么画。


一、Fabric 基础格式

const material = new Cesium.Material({ fabric: { type: 'Color', // 材质类型(可省) uniforms: { /* 参数表 */ }, // 着色器里的外部变量 source: `/* 可选:完全自定义 GLSL */` } });
  • typefromType的第一参数对应,写不写都行;

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

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/10 19:56:52

Wan2.2-T2V-A14B视频生成模型商用级表现实测报告

Wan2.2-T2V-A14B视频生成模型商用级表现实测报告 在短视频日均播放量突破百亿的今天,内容生产的“效率天花板”正被AI重新定义。当一条广告片从策划到成片的时间压缩至几分钟,当影视导演能用一句话生成一段赛博朋克雨夜追逐的预演镜头——我们或许正在见…

作者头像 李华
网站建设 2026/6/10 13:56:43

PyCharm社区版如何接入Seed-Coder-8B-Base实现智能提示?

PyCharm社区版如何接入Seed-Coder-8B-Base实现智能提示? 在如今的开发环境中,写代码早已不再是单纯的手动输入。越来越多开发者开始依赖AI助手来自动生成函数体、补全逻辑甚至修复错误。然而,主流方案如GitHub Copilot虽然强大,却…

作者头像 李华
网站建设 2026/6/10 18:18:34

Screen Translator:智能屏幕翻译工具使用指南

Screen Translator:智能屏幕翻译工具使用指南 【免费下载链接】ScreenTranslator Screen capture, OCR and translation tool. 项目地址: https://gitcode.com/gh_mirrors/sc/ScreenTranslator 项目简介 Screen Translator是一款集屏幕捕获、文字识别和智能…

作者头像 李华
网站建设 2026/6/10 18:13:47

FLUX.1-dev模型镜像加速下载:国内HuggingFace镜像源推荐与配置

FLUX.1-dev模型镜像加速下载:国内HuggingFace镜像源推荐与配置 在AI生成内容(AIGC)浪潮席卷创意产业的今天,文本到图像模型已成为设计师、开发者乃至科研人员手中的“数字画笔”。然而,当我们试图将像 FLUX.1-dev 这样…

作者头像 李华
网站建设 2026/6/10 13:28:51

无需高端GPU!Wan2.2-T2V-5B让普通开发者玩转文本生成视频

无需高端GPU!Wan2.2-T2V-5B让普通开发者玩转文本生成视频 在短视频内容爆炸式增长的今天,创意团队每天都在为“如何快速产出高质量视频”而头疼。传统影视制作流程太慢,外包成本太高,而AI生成技术又往往被锁死在A100/H100级别的服…

作者头像 李华
网站建设 2026/6/9 18:14:23

ParsecVDD虚拟显示器完全攻略:从零开始的多屏工作革命

ParsecVDD虚拟显示器完全攻略:从零开始的多屏工作革命 【免费下载链接】parsec-vdd ✨ Virtual super display, upto 4K 2160p240hz 😎 项目地址: https://gitcode.com/gh_mirrors/pa/parsec-vdd 还在为单一屏幕的限制感到束手束脚?想…

作者头像 李华