This editor renders a full-screen triangle in WebGL2 and passes two uniforms to your fragment shader: u_time (seconds) andu_resolution (pixels). The varying v_uv is in [0..1].

Ray Marching Basics

For volumetric effects, accumulate density along a ray from the camera origin ro in direction rd. Small adaptive steps improve efficiency.

float t = 0.0; float dens = 0.0;
for (int i = 0; i < 96; i++) {
  vec3 p = ro + rd * t;
  float d = map(p); // signed distance or density proxy
  float sample = clamp(0.7 - d, 0.0, 1.0);
  dens += sample * 0.04; // integrate
  t += 0.03 + sample * 0.02; // adaptive step
}

Tips

• Start simple: spheres, boxes, or layered noise.
• Limit steps (64–128) and use adaptive stepping.
• Use smoothstep for soft transitions.
• Keep color grading at the end (mix two palettes).

Explore the presets and modify them. When ready, share your work using the share link in the editor.