着色器（Shader）交互指南

这个页面是什么？

这是一个WebGL着色器（Shader）游乐场。您可以实时渲染像Mandelbulb这样的3D分形，调整参数，并看到即时反馈。它帮助您理解体积渲染和着色器调优的基础知识——全部在您的浏览器中。

主要功能

• 交互式3D视图：旋转、缩放和探索分形
• 配置面板：实时调整着色器参数
• 每次更改的即时渲染反馈

如何使用

1. 点击配置按钮打开代码面板。
2. 编辑参数如MAX_ITERATIONS、DENSITY、SCATTERING等。
3. 点击应用立即查看您的更改。
4. 使用鼠标旋转（左拖拽）、缩放（滚轮）和平移（右拖拽，高级模式）。

参数示例

#define MAX_ITERATIONS 32
#define DENSITY 0.15
#define SCATTERING 0.8
#define LIGHT_INTENSITY 5.0
#define STEP_SIZE 0.01

• 增加DENSITY获得更实心的外观
• 降低MAX_ITERATIONS获得更好的性能
• 尝试#define USE_NOISE 1获得自然效果
• 调整LIGHT_DIR获得不同的光照角度

着色器示例与解释

float kernal(vec3 ver){
   float x,y,z;
   x = cos(1.0 / (ver.x*ver.x + 0.06));
   y = cos(1.0 / (ver.y*ver.y + 0.06));
   z = cos(1.0 / (ver.z*ver.z + 0.06));
   return -x-y-z-1.2;
}

• ver：着色器正在评估的3D空间位置。
• x, y, z：每个都代表ver.x、ver.y、ver.z坐标的变换值，使用坐标平方倒数（加上小常数避免除零）的余弦函数。这在3D空间中创建了一个高度非线性、周期性的场。
• return值将这三个分量组合起来，偏移-1.2，来定义该点的表面或密度。结果是一个复杂的、波浪状的分形结构。

这个核心函数在光线步进算法中用作距离场。通过调整公式或常数（如0.06或-1.2），您可以控制生成分形的形状、频率和密度。在配置面板中尝试这些值以获得不同的视觉效果。

性能技巧

• 降低MAX_ITERATIONS或增加STEP_SIZE以获得更高的FPS
• 禁用抗锯齿以减少GPU负载
• 尝试预设：SCATTERING=0.9, LIGHT_INTENSITY=8.0获得强散射效果

控制方式