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 变量，想怎么用就怎么用。

下节课，我们在这块"会呼吸的红布"上加圆遮罩、调透明度，一条完整的"雷达扫描圈"就成型了。