效果预览

穿越一片永不停歇的霓虹沙尘暴。 说起来，沙丘在暗蓝色的夜空中起伏。 地表的每一道波纹都被赋予了独立的霓虹色谱——从洋红到青绿再到深紫——而漫天飞舞的沙粒在光束中折射出星星点点的荧光。支持鼠标拖拽调整视角，感受风沙扑面而来的沉浸感。

Shader 实现原理

. 整体思路：体渲染 + 光线行进

使用者痛点：很多前端同学第一次接触参与介质渲染时会被“蒙特卡洛方法追踪”巨大的计算量吓倒，导致放弃实现。这里我们采用光线行进+ 简化体渲染方程 的方案，兼顾视觉效果与实时性能。

1. 从相机出发，沿视线方向以自适应步长向前推进。
2. 每一步计算当前位置的沙尘密度。
3. 根据密度累加内散射光 并衰减透射率。
4. 若光线命中地形表面则计算表面光照并乘以剩余透射率。

模型仅考虑单次散射 + 自发光，已足够表现“光被悬浮颗粒散射后形成的弥漫光晕”和“远处物体因消光而逐渐隐入黑暗”。

. 地形生成 — 正弦波的叠加艺术

沙丘的隐式曲面

float terrain {
float dune1 = sin) * sin;float dune2 = sin * 0.35;return * 4.0 - 1.5;}

痛点解析：使用 Perlin Noise 的同学常抱怨法线计算不够精确且噪声带来的周期性不明显。正弦波拥有闭式导数，可以直接求法线，使得灯光交互更真实；其周期性在远距离形成“无尽沙丘”的视觉延伸。

法线扰动 — 微观表面粗糙度

vec3 n = normalize,dFdy));n.x += - 0.5) * 0.03;n.z += - 0.5) * 0.03;

Pain point：很多人把随机噪声直接作用在高度上，导致“大块抖动”。这里我们只扰动法线，让宏观轮廓保持平滑，却能在微观层面呈现真实砂粒感。

. 光线行进算法

自适应步长策略

for {
vec3 p = ro + t * rd;float d = map;// Signed Distance to terrain
if break;// 命中
t += max;}

User Pain Point：固定步长往往导致“地形细节丢失”或“帧率崩溃”。自适应步长通过 SDF 返回值动态调节。让空旷区域快速跨越，在靠近地形时自动收敛，提高了渲染效率。

终止条件 & 性能调整

if
break;不过，

• d 命中地形进入表面着色。
• t> MAX_DISTANCE：视距上限，直接返回背景色。
• transmittance Pain point：在密集尘埃中心光已几乎全被吸收。此时继续迭代毫无意义，提前退出可省约 60 % 计算量。

. 体积沙尘的光散射模型

float GetDustDensity {
float freq = 1.5;float ampl = 1.0;float accum = 0.0;vec2 scroll = p.xz - vec2;for {
accum += ValueNoise * ampl;ampl *= 0.5，话说回来，freq *= 2.0;scroll.x += iTime * *0.12;}
return accum;}

Pain point：SDF 与噪声混用时容易出现 “噪声跳跃”。这里把噪声写成纯 ALU 运算，无纹理采样。从而避免 GPU 上的不连续访问带来的卡顿。

float heightAboveGround = p.y - terrain;float fog = clamp;

#使用者痛点#：许多实现直接把噪声当作均匀云层。导致高空仍然有大量尘埃，看起来不自然。加入高度惩罚后尘埃随海拔快速衰减，更贴合真实风沙特征。

vec3 windMotion = p*15.0 - vec3;float grit = hash31;float explicitDust = pow * 8.5;float dustGlow = fog*fog*explicitDust;

#Pain point#：普通噪声只能产生柔和雾效，而缺少“星星点点”的闪亮颗粒。利用高次幂压缩后再放大，实现稀疏却极亮的闪光点，让观感更具赛博朋克氛围。

. 内散射与透射率 — 简化体渲染方程

float dustDensity = GetDustDensity;if {
vec3 dustColor = neonPalette * dustDensity + vec3;float stepScatter= dustDensity * SCATTER_COEF;inscatteredLight += transmittance * dustColor * stepScatter;transmittance *= exp;按理说，}

#使用者痛点#：对 Beer‑Lambert 衰减公式不熟悉？这里把它封装为一行乘法/指数运算，只需调节两组系数即可控制雾厚度与颜色强度。

if {
inscatteredLight += transmittance *
neonPalette *
SCATTER_NEAR / +0.01) *
exp;}

#Pain point#：初学者常忘记在地表加入局部辉光，使得低空看起来“死板”。这段代码通过距离倒数提高近距离散射，让地表在薄雾中呈现柔和环绕光晕。

. 表面着色 — 霓虹沙丘的灯光

vec3 albedo = vec3;float diff = max,0.)*shadowFactor;float amb = AMBIENT_BASE + AMBIENT_FACTOR*n.y;vec3 halfDir= normalize;float spec = pow,0.)。SPEC_SHININESS)*SPEC_INTENSITY*shadowFactor;vec3 surfaceCol = albedo*+amb)+spec;

#User Pain Point#：很多人直接把 albedo 调高。以求亮度，却失去了体积雾效本身提供的灯光来源。这里将 albedo 保持极低。让所有可见亮度来源于体积内散射，实现更自然的“灯箱”效果。

vec3 neonBase = cos )*1.+vec3;话说回来，neonBase *= .45 + .25*sin;neonBase = smoothstep;

• `cos` 三通道不同相位 → RGB 在空间交叉出现条纹；
• `smoothstep` 将渐变压缩为硬边，实现霓虹管般离散色块；
• `sin` 为整体添加轻微呼吸式脉冲，提高动态感。

float detailFade= smoothstep;surfaceCol += neonBase * NEON_INTENSITY * detailFade;

#Pain point#：远景霓虹颜色经常因为 HDR 溢出而失真。此处使用 `smoothstep` 对远距进行衰减。使得远处只保留轮廓，高质量 LOD自然显现。

. 相机程序 — 飞行沉浸感

float speed = iTime8.;float pathX = sin22.;float targetX =* .33))22.;vec3 ro=vec36.,speed );vec3 ta=vec3;

• `speed` 控制 z 向前移动速度。
• `pathX` 与 `targetX` 分别是相机位置与 LookAt 的横向摆动。用相位差保证视角略微领先于位置，实现柔和转向。
• `y` 上加入正弦波制造上下起伏，让飞行过程更像真实气流中的轻微颠簸。

float roll= -cosPI/9.;// 最大约20°
mat2 rotMat=mat2。
-sin,sin,cos);
rd.xy=rotMatrd.xy;// 将 roll 应用于最终 ray direction

="" 鼠标交互><=""> VEC2 DRAG=iMouse.z>?- .5):VEC2，TA.X-=-DRAG.X******

当鼠标左键按下时。根据鼠标屏幕坐标偏移 LookAt 点，实现手动微调视角；默认状态下给定一个轻微俯视角 )。让玩家从略高的位置俯瞰沙丘，更符合电影镜头语言。