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

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 寻求创造与自由。

AI 摘要： 本文详细介绍了如何使用 Three.js 和 GLSL 创建具有互动性的液滴状 metaball 效果。通过片段着色器和光线步进技术，实现了多个球体无缝融合并响应鼠标移动的动态效果。教程从基础设置开始，逐步深入到光线步进、表面法线计算、平滑融合、噪声纹理添加以及鼠标互动的实现，适合对 WebGL 和着色器编程感兴趣的开发者学习和实践。

概览：介绍了演示的整体结构和构建步骤，包括全屏平面的设置、光线步进渲染球体、从球体到 metaball 的平滑过渡、添加噪声以获得液滴外观，以及通过鼠标移动模拟拉伸效果。

1. 全屏平面设置：创建覆盖整个视口的全屏平面，通过 Three.js 设置几何体和材质，并传递画布大小的 uniform 变量到着色器。
2. 光线步进渲染球体：在片段着色器中使用光线步进技术渲染球体，详细解释了光线步进的步骤、SDF（有符号距离函数）的概念，以及如何通过代码实现两个重叠球体的渲染。
3. 从球体到 Metaball：通过 smoothMin 函数平滑融合多个球体的距离值，避免硬边缘，创造出有机融合的 metaball 效果，并通过参数控制融合平滑度。
4. 添加噪声以获得液滴外观：利用 3D 值噪声技术对表面进行扰动，结合反射向量和时间变量生成液滴纹理，并通过后处理增强玻璃般的半透明效果。
5. 通过鼠标移动模拟拉伸液滴：通过记录鼠标轨迹并沿轨迹放置多个球体，实现液滴的拉伸和弹性运动效果，增强互动性。