Volume Shader Interactive Guide

What is this page?

This is a WebGL volume shader playground. You can render 3D fractals like Mandelbulb in real time, adjust parameters, and see instant feedback. It helps you understand the basics of volume rendering and shader tuning—right in your browser.

Key Features

• Interactive 3D view: rotate, zoom, and explore fractals
• Config panel: tweak shader parameters live
• Instant rendering feedback for every change

How to Use

1. Click the CONFIG button to open the code panel.
2. Edit parameters like MAX_ITERATIONS, DENSITY, SCATTERING, and more.
3. Click APPLY to see your changes instantly.
4. Use your mouse to rotate (left drag), zoom (scroll), and pan (right drag, advanced mode).

Parameter Examples

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

• Increase DENSITY for a more solid look
• Lower MAX_ITERATIONS for better performance
• Try #define USE_NOISE 1 for natural effects
• Adjust LIGHT_DIR for different lighting angles

Shader Example & Explanation

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: The 3D position in space being evaluated by the shader.
• x, y, z: Each represents a transformed value of the ver.x, ver.y, ver.z coordinates, using a cosine function of the reciprocal of the squared coordinate (plus a small constant to avoid division by zero). This creates a highly non-linear, periodic field in 3D space.
• The return value combines these three components, offset by -1.2, to define the surface or density at that point. The result is a complex, wavy fractal structure.

This kernal function is used as a distance field in the ray marching algorithm. By adjusting the formula or the constants (like 0.06 or -1.2), you can control the shape, frequency, and density of the generated fractal. Try experimenting with these values in the CONFIG panel for different visual effects.

Performance Tips

• Lower MAX_ITERATIONS or increase STEP_SIZE for higher FPS
• Disable anti-aliasing for less GPU load
• Try presets: SCATTERING=0.9, LIGHT_INTENSITY=8.0 for strong scattering

Controls