WebGL 着色器

原生 WebGL 全屏片元着色器：程序化噪声、等离子与光线步进，全部在 GPU 实时计算。

技术栈: WebGL 1, GLSL, fragment shader, raymarching

• 噪声流体背景 — FBM 分形噪声 + 域扭曲的流动背景。
• 等离子 — 多重正弦叠加的彩色等离子。
• 光线步进融球 — SDF 光线步进的融合球体与光照。
• 泰森多边形 Voronoi — 沃罗诺伊着色：每个像素找离它最近的种子点，按距离上色，形成细胞状色块。
• 域扭曲 — 先用噪声把坐标推来推去，再在扭曲后的坐标上画条纹/棋盘，规则图案就变成了流动的波纹。
• 螺旋 — 把像素换成角度 θ 和半径 r，亮度取 sin(臂数·θ − 密度·r + t)，就得到旋转的螺旋臂。
• 棋盘扭曲 — floor(x)+floor(y) 的奇偶决定黑白；先用 sin 扭曲坐标，格子就会像布料一样波动。
• 隧道 — 用 1/r 当作深度 z、角度 θ 当作绕圈坐标，z 随时间增加，就像在管道里向前飞。
• 涟漪 — 每个波源发出圆形波 sin(距离/波长 − t)，离得越远越弱；多个波源叠加会出现干涉条纹。
• 星野 — 把画面切成网格，每格用哈希随机放一颗星；多层网格以不同速度平移形成视差，近处星大且快。
• 熔岩 — 若干团块上下漂浮，每个团块贡献 r²/d² 的「场」，场之和超过阈值的区域连成一片，团块靠近时会融合。
• 透视网格 — 地平线以下用 1/|y| 做透视深度，深度随时间增加让网格向你滚来；上方是一轮带条纹缺口的太阳。
• 万花筒 — 把角度对「每瓣角度」取模再镜像，整个平面就由一小块扇形复制出 n 瓣对称图案。
• HSV 色相旋转 — 角度 = 色相 H，离中心距离 = 饱和度 S，整体亮度 = 明度 V。
• 扫描线 — 亮条从下往上扫过，身后留下指数衰减的余辉；背景是等间距的扫描线网格。
• 双融球 — 每个球产生 1/d 的场，场之和大于阈值就算「球体内部」，所以球靠近时边界平滑地连在一起。
• 体积雾 — 多层噪声按不同速度沿风向飘动并叠加，越往下越浓；指针处像手电筒一样照亮雾气。
• 流光条纹 — 把坐标旋转到条纹方向，按宽度切成一条条，每条按序号取 n 种颜色之一；指针附近条纹会弯曲。
• SDF 距离场圆 — 每个像素记录到圆边界的距离，内部为负、外部为正。
• 水面 — 多组不同方向、频率的正弦波叠加成水面高度，高度的峰值区域形成明亮的焦散光斑；指针拨动相位。
• CRT 老电视 — 画面先按像素块量化，再加横向扫描线、RGB 三通道错位（色差）和四角暗角，模拟老电视。
• Julia 分形 — 每个像素当作复数 z，反复做 z = z² + c，统计多少步后 |z| 超过 2（逃逸）。
• 飘雪 — 每层把画面切成网格，每格放一片随机偏移的雪花并向下平移；近处层更大更快，风力让雪花倾斜飘落。
• 油画噪声 — 坐标被「旋转 + 噪声偏移」反复迭代，每多一次图案越复杂，像油彩在水面上流动；彩虹膜模拟肥皂泡的干涉色。