Shader example library

Volume shader examples and GLSL presets

Start from editable fog, smoke, cloud, and fractal shader examples, inspect how each GLSL preset works, then open it in the editor. Each preset explains the rendering technique, GPU pressure points, phone-friendly limits, and the device class it fits best.

Benchmark context

Presets separate light compatibility checks from heavier shader workloads so results are easier to compare.

Editable controls

Use the parameter notes to decide whether to reduce ray steps, noise layers, render scale, or fractal iterations.

Source-backed notes

Detail pages link to WebGL and benchmark references so the explanations are easier to cite.
Signed distance field density source
Fixed upper-bound ray-marching loop

Fog Sphere

Orbiting fog around a sphere via simple raymarch.

Fog Sphere is the safest starting point for learning how a volume shader becomes a benchmark workload. It casts a camera ray, samples a simple signed-distance sphere, turns distance into density, and accumulates fog over a fixed loop.

2D value noise built from a hash function
Polar coordinate twirl and time-based advection

Twirl Smoke

2D noise-based swirling smoke pattern.

Twirl Smoke shows how a shader can look volumetric without marching through a full 3D density field. It warps 2D coordinates around the center, samples layered value noise, then maps the result into a smoky color ramp.

Procedural 3D value noise
Front-to-back ray marching

Cloud Layer

Low-iteration 3D noise cloud accumulation.

Cloud Layer is the most direct preset for explaining volumetric accumulation. Each ray moves forward through a procedural 3D noise field, samples cloud density, and adds a small amount of brightness as density builds.

Mandelbulb-style iterative kernel
Ray marching with a surface hit condition

3D Fractal

Interactive 3D fractal with complex mathematical patterns.

3D Fractal is the heaviest built-in preset. Instead of sampling a soft fog field, it evaluates an iterative fractal kernel while marching a ray through the scene, then estimates a normal for lighting when the ray hits the surface.