企业官网建设流程全解析

上一节课，我们只在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 字段。
正确姿势：

1. 先 new 出对象；

2. 再动态挂uniforms属性；

3. 外部用 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' });

运行效果：红色条纹左右“呼吸”移动，像一条缓慢扫描的激光带。

四、两种“写着色器”路线对比

两条路都能改像素，谁方便用谁。

五、小结与预告

• Appearance 可以直接fragmentShaderSource = '...'，完全不用 Material。

• uniforms 要“事后挂”，再用 GSAP 或帧循环去改。

• 顶点着色器传来的v_st、v_positionEC等 varying 变量，想怎么用就怎么用。

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