Cesium快速入门24：Appearance编写着色器修改外观
上一节课，我们只在Material里写着色器；今天把“魔爪”伸到Appearance——直接重写片元着色器，一样能让像素跳舞，而且套路更简单、更暴力。
一、Appearance 也能“手写着色器”
EllipsoidSurfaceAppearance本质上就是“官方帮你拼好”的顶点 + 片元代码。
只要你在构造参数里塞入自己的fragmentShaderSource，Cesium 会原封不动采用，不会再帮你插材质函数。
想纯色、想渐变、想动画，全由你一句话决定。
二、最小 DEMO：把 UV 当颜色
下面代码里，我们把v_st（也就是 UV）直接画成红绿渐变，连材质都不引：
const ellipsoidAppearance = new Cesium.EllipsoidSurfaceAppearance({ // material: rawMaterial, // 注释掉，完全不用 fragmentShaderSource: ` varying vec3 v_positionMC; varying vec3 v_positionEC; varying vec2 v_st; // 官方帮你传进来的 UV void main() { // 把 UV 的 x、y 当颜色，再补一个 1.0 给蓝色通道 gl_FragColor = vec4(v_st, 1.0, 1.0); } ` });运行效果：矩形瞬间变成“红→绿”色卡，证明我们已完全接管像素。
三、想动画？先解决“怎么传 uniform”
在 Material 里写uniforms很顺手，可在 Appearance 里写fragmentShaderSource时，构造函数里并没有 uniforms 字段。
正确姿势：
先 new 出对象；
再动态挂
uniforms属性；外部用 GSAP / requestAnimationFrame 随便改。
代码示范：
/* 1. new 对象 */ const ellipsoidAppearance = new Cesium.EllipsoidSurfaceAppearance({ fragmentShaderSource: ` varying vec2 v_st; uniform float uTime; // 外部传进来的时间 void main() { float strength = sin(v_st.x * 10.0 + uTime) * 0.5 + 0.5; // 0~1 呼吸 gl_FragColor = vec4(strength, 0.0, 0.0, 1.0); } ` }); /* 2. 事后挂 uniform 初始值 */ ellipsoidAppearance.uniforms = { uTime: 0.0 }; /* 3. GSAP 让它永远动 */ gsap.to(ellipsoidAppearance.uniforms, { uTime: 1.0, // 从 0 跑到 1 duration: 2.0, // 单程两秒 repeat: -1, // 无限循环 ease: 'linear' });运行效果：红色条纹左右“呼吸”移动，像一条缓慢扫描的激光带。
四、两种“写着色器”路线对比
| 路线 | 入口 | 传 uniforms | 适合场景 |
|---|---|---|---|
| Material + Fabric | source字段 | 直接在 fabric 对象里写 | 需要复用、多材质组合 |
| Appearance 手写 | fragmentShaderSource | 先 new 再挂 uniforms | 快速特效、单个 Primitive 即用即扔 |
两条路都能改像素，谁方便用谁。
五、小结与预告
Appearance 可以直接
fragmentShaderSource = '...'，完全不用 Material。uniforms 要“事后挂”，再用 GSAP 或帧循环去改。
顶点着色器传来的
v_st、v_positionEC等 varying 变量，想怎么用就怎么用。
下节课，我们在这块“会呼吸的红布”上加圆遮罩、调透明度，一条完整的“雷达扫描圈”就成型了。