Aurora FieldOpen-source Three.js GLSL aurora shader
Explore an open-source Three.js aurora shader built with five-octave FBM, layered light bands, and optional synthetic audio. Run the demo and inspect the GLSL.
How the aurora shader works.
- Family
- Procedural Backdrop
- Status
- Active
- Drivers
- Time · Synthetic audio (optional)
- Primitive
- Fullscreen plane
- Pipeline
- Five-octave FBM · Layered exponential bands · Aspect-correct fullscreen pass · Audio-reactive gain
- Source
- 2 mapped units
Five octaves of value noise bend three exponential light bands across an aspect-correct fullscreen plane. The original timing, color mix, vignette, and optional audio gain remain intact.
The visual behavior and production defaults are retained in the TSL adaptation. Only application-specific orchestration and unlicensed model inputs were replaced, leaving a focused study that can be read independently of the original product.
This preview uses one managed WebGPU renderer with automatic WebGL2 fallback, a capped pixel ratio, deterministic geometry, and complete GPU cleanup when you leave or switch studies.
Pipeline, step by step
- Correct the fullscreen coordinates
The vertex pass supplies aspect-aware UV coordinates so the field keeps its proportions across viewport sizes.
- Build a five-octave FBM field
Layered value noise bends the bands while time advances the field at the original production rate.
- Shape and mix the light bands
Three exponential bands combine cyan, violet, vignette, and optional synthetic audio gain in the fragment stage.
CompatibilityThe live study uses Three.js 0.185.0, preferring WebGPU and falling back automatically to WebGL2. Source, classification, and notes remain readable when graphics are unavailable, animation is disabled, or the graphics device is lost.
CreditFirst-party GLSL is extracted from commit d018f6d057c8f30144979bbcc95436cfb405d7c5.
Open-source adaptationNo visual input geometry changed. The inline production shader was separated into reviewable GLSL files and connected to a synthetic audio control.
Audio response, without a microphone.
Automatic mode generates deterministic level and frequency curves. Move any slider to hold a manual signal instead.
GLSL source: fullscreen vertex and fragment stages.
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}