Cesium实战：5分钟搞定Shadertoy炫彩光幕材质移植（附完整代码）

Cesium实战：5分钟搞定Shadertoy炫彩光幕材质移植（附完整代码）

当你在Shadertoy上看到那些令人惊叹的动态GLSL效果时，是否想过将它们直接应用到Cesium的三维场景中？本文将带你快速实现这一目标，无需深入理解复杂的着色器原理，只需5分钟即可完成从Shadertoy到Cesium的炫彩光幕材质移植。

1. 准备工作与环境搭建

在开始之前，确保你已经具备以下基础环境：

• CesiumJS：最新版本的Cesium库
• 现代浏览器：支持WebGL 2.0的Chrome/Firefox/Edge
• 基础GLSL知识：了解基本的着色器语法

提示：本文所有代码示例都经过实际测试，可直接复制使用

首先创建一个基本的Cesium场景：

const viewer = new Cesium.Viewer('cesiumContainer', { terrainProvider: Cesium.createWorldTerrain(), timeline: true, animation: true });

2. Shadertoy与Cesium材质系统对比

理解两个平台的差异是成功移植的关键。以下是主要区别点：

3. 核心移植步骤详解

让我们以一个具体的Shadertoy光幕效果为例，逐步完成移植过程。

3.1 原始Shadertoy代码分析

以下是我们要移植的Shadertoy核心代码片段：

void mainImage(out vec4 o, vec2 u) { vec2 v = iResolution.xy; u = .2*(u+u-v)/v.y; vec4 z = o = vec4(1,2,3,0); for(float a=.5,t=iTime,i; ++i<19.; o+=(1.+cos(z+t))/length((1.+i*dot(v,v))*sin(1.5*u/(.5-dot(u,u))-9.*u.yx+t))) v=cos(++t-7.*u*pow(a+=.03,i))-5.*u, u+=tanh(40.*dot(u*=mat2(cos(i+.02*t-vec4(0,11,33,0))),u)*cos(1e2*u.yx+t))/2e2+.2*a*u+cos(4./exp(dot(o,o)/1e2)+t)/3e2; o=25.6/(min(o,13.)+164./o)-dot(u,u)/250.; }

3.2 Cesium材质适配改造

将上述代码转换为Cesium材质系统可用的形式：

uniform vec4 u_color; uniform float u_time; czm_material czm_getMaterial(czm_materialInput materialInput) { czm_material material = czm_getDefaultMaterial(materialInput); vec2 st = materialInput.st; // 移植的核心计算逻辑 vec2 u = st; vec4 o = u_color; float iTime = u_time; vec3 iResolution = vec3(1., 1., 1.); vec2 v = iResolution.xy; u = 0.1 * (u + u - v)/v.y; vec4 z = o = vec4(1, 2, 3, 0); for(float a=.5,t=iTime,i; ++i<19.; o+=(1.+cos(z+t))/length((1.+i*dot(v,v))*sin(1.5*u/(.5-dot(u,u))-9.*u.yx+t))) { v=cos(++t-7.*u*pow(a+=.03,i))-5.*u, u+=tanh(40.*dot(u*=mat2(cos(i+.02*t-vec4(0,11,33,0))),u)*cos(1e2*u.yx+t))/2e2+.2*a*u+cos(4./exp(dot(o,o)/1e2)+t)/3e2; } o = 25.6/(min(o,13.)+164./o)-dot(u,u)/250.; material.diffuse = o.xyz; material.alpha = o.w; return material; }

3.3 完整实现代码

以下是可直接使用的完整实现：

const viewer = new Cesium.Viewer('cesiumContainer'); const shaderSource = ` uniform vec4 u_color; uniform float u_time; czm_material czm_getMaterial(czm_materialInput materialInput) { czm_material material = czm_getDefaultMaterial(materialInput); vec2 st = materialInput.st; vec2 u = st; vec4 o = u_color; float iTime = u_time; vec3 iResolution = vec3(1., 1., 1.); vec2 v = iResolution.xy; u = 0.1 * (u + u - v)/v.y; vec4 z = o = vec4(1, 2, 3, 0); for(float a=.5,t=iTime,i; ++i<19.; o+=(1.+cos(z+t))/length((1.+i*dot(v,v))*sin(1.5*u/(.5-dot(u,u))-9.*u.yx+t))) { v=cos(++t-7.*u*pow(a+=.03,i))-5.*u, u+=tanh(40.*dot(u*=mat2(cos(i+.02*t-vec4(0,11,33,0))),u)*cos(1e2*u.yx+t))/2e2+.2*a*u+cos(4./exp(dot(o,o)/1e2)+t)/3e2; } o = 25.6/(min(o,13.)+164./o)-dot(u,u)/250.; material.diffuse = o.xyz; material.alpha = o.w; return material; }`; const plane = viewer.entities.add({ name: 'Shadertoy光幕', position: Cesium.Cartesian3.fromDegrees(116.4, 39.9, 1000), plane: { dimensions: new Cesium.Cartesian2(2000.0, 2000.0), material: new Cesium.Material({ fabric: { type: 'ShadertoyLightCurtain', uniforms: { u_color: new Cesium.Color(0.0, 1.0, 1.0, 0.8), u_time: 0.0 }, source: shaderSource } }) } }); // 更新时间变量实现动画效果 viewer.scene.preUpdate.addEventListener(function() { const primitive = viewer.scene.primitives.get(0); if (primitive && primitive.appearance) { const uniforms = primitive.appearance.material.uniforms; if (uniforms && uniforms.u_time !== undefined) { uniforms.u_time += 0.01; } } });

4. 常见问题与优化技巧

在实际移植过程中，你可能会遇到以下问题及解决方案：

4.1 效果差异明显

可能原因：

• 分辨率参数处理不当
• 时间变量同步问题
• UV坐标范围差异

解决方案：

// 调整分辨率比例 vec3 iResolution = vec3(1.0, 1.0, 1.0); // 尝试不同的宽高比 // 调整UV缩放系数 u = 0.15 * (u + u - v)/v.y; // 原始为0.2，可微调

4.2 性能优化建议

对于复杂效果，可采用以下优化策略：

1. 降低迭代次数：减少for循环中的迭代次数
2. 简化数学运算：用近似计算替代复杂函数
3. 使用预处理：将部分计算移到JavaScript端

// 优化后的循环，从19次减少到15次 for(float a=.5,t=iTime,i; ++i<15.; o+=(1.+cos(z+t))/length(...))

4.3 多效果组合技巧

将多个Shadertoy效果组合使用时：

// 效果A的计算 vec4 effectA = computeEffectA(st, u_time); // 效果B的计算 vec4 effectB = computeEffectB(st, u_time); // 混合两种效果 material.diffuse = mix(effectA.rgb, effectB.rgb, 0.5); material.alpha = (effectA.a + effectB.a) * 0.5;

5. 进阶应用：创建动态光幕墙

利用移植的着色器创建更复杂的光幕效果：

function createLightCurtainWall(positions, width, height) { const curtains = []; for(let i = 0; i < positions.length; i++) { const curtain = viewer.entities.add({ position: positions[i], plane: { dimensions: new Cesium.Cartesian2(width, height), material: new Cesium.Material({ fabric: { type: 'LightCurtainWall'+i, uniforms: { u_color: new Cesium.Color( Math.random() * 0.5 + 0.5, Math.random() * 0.5 + 0.5, Math.random() * 0.5 + 0.5, 0.7 ), u_time: 0.0, u_offset: i * 10.0 }, source: ` uniform vec4 u_color; uniform float u_time; uniform float u_offset; czm_material czm_getMaterial(czm_materialInput materialInput) { // 着色器代码（同上） // 在iTime计算中加入u_offset float iTime = u_time + u_offset; } ` } }) } }); curtains.push(curtain); } return curtains; }

通过调整uniform参数，可以实现不同速度、颜色的动态光幕阵列效果。