#优质博文 #前端 #GLSL #Shader #WebGL #数学艺术 #代码压缩
真美啊，各种意义上。
Code golfing a tiny demo using maths and a pinch of insanity
可在此处查看 demo

AI 摘要：本文展示了如何通过极端的代码压缩（Code Golfing）和数学技巧，用 448 个字符的 GLSL 片段着色器绘制出包含山体、云雾、光照与动态相机的 3D 场景。作者详细讲解了每一步的构建过程：噪声函数的构造、空间旋转矩阵压缩、相机设置、光线步进（ray-marching）技术、体积光照（volumetric lighting）及色彩调制等，最后以创作性的数学与艺术融合收尾，展示了“极简代码亦能造美”的魔法。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 环境与灵感
• 项目灵感：用 448 字符实现完整 GLSL 视觉作品。
• 无网格、无贴图，仅用数学公式生成画面。
• 社区协作帮助进一步缩短代码。

2. 基础模板与开发环境
• 介绍 GLSL 片段着色器执行流程（per fragment）。
• 输入变量：分辨率 R、时间 T、像素位置 P。
• 使用自建工具 ShaderWorkshop 代替 Shadertoy，实现本地实时测试。

3. 噪声 (Noise)
• 从梯度噪声到基于正弦波（sin wave）的“假噪声”。
• 展示如何组合正弦波、取绝对值形成山峰与云层的纹理。
• 使用 fbm（Fractal Brownian Motion）叠加多频率噪声。
• 通过旋转与相移实现伪随机性。

4. 空间旋转 (Rotation)
• 推导二维旋转矩阵 mat2(cos θ, -sin θ, sin θ, cos θ)。
• 优化表示法——用 vec4 版余弦近似减少字符。
• 探讨不同矩阵近似方案与三角函数替代。
• 引入快速硬编码旋转矩阵（如 mat2(8,6,-6,8)*.1）。

5. 相机与坐标系统 (Camera & Axis)
• 将 2D 像素空间转换为 3D 射线坐标。
• 简化 lookAt 矩阵计算，通过归一化实现方向向量。
• 最终极简相机代码：vec3 rd = normalize(vec3(P+P - R, R.y));。

6. 山脉高度图 (Height Map)
• 使用累积噪声作为山体高度。
• 将循环条件反向（a+=a），节省字符。
• 内联常量、减少变量与花括号。
• 提供无栈化的简洁函数版本。

7. 光线步进 (Ray-Marching for Solids)
• 根据“距离场”（Distance Field）计算表面交点。
• 步长控制为 20% 安全缩进，避免穿透几何。
• 输出基于深度衰减与亮度法线的初步灰度效果。

8. 云与雾 (Volumetric Effects)
• 拓展噪声至 3D，模拟云层与体积雾。
• 引入 Beer-Lambert 光吸收模型。
• 使用固定步长和动态步长结合模拟体积光。
• 改写密度函数，使云雾兼容在一个表达式中。

9. 合并体积与固体光线步进
• 将 solid 与 volumetric 模型结合为统一循环。
• 条件控制判定 solid 命中及光散射抑制。
• 调整吸收与发光系数，实现光滑过渡与层次感。
• 通过 tanh() 实现快速色调映射（tone mapping）。

10. 色彩与气氛 (Color & Atmosphere
• 将红色分量独立增强，模拟落日光辉。
• 添加地平线散射光层（haze effect）。
• 通过 p.y 高度衰减生成神秘气氛。
• 小幅参数扰动制造动态呼吸式景深。

11. 代码极简与 Golfing 优化
• 减少变量名与类型声明，合并循环表达式。
• inlined 子函数、数学等价式替换、去注释。
• 最终仅 448 个字符实现所有视觉要素。
• 展示终极版本的可读及压缩形式。

12. 总结与艺术性思考
• 将算法、噪声、几何与物理模型浓缩为艺术。
• 代码之美在于极简纯粹，数学与光的共鸣。
• 作者反思现代开发生态与“纯代码艺术”的价值。
• 鼓励读者通过探索 GLSL 寻求创造与自由。

author ubitux