Cosmic Nebula WebGL — Live Space Simulation

← Back to Visuals

About This Simulation

This cosmic nebula is generated entirely on your GPU in real time using WebGL2 GLSL fragment shaders. Three passes of FBM domain warping — each using the previous noise field to distort the next — create the turbulent filament shapes characteristic of real emission nebulae. Two overlapping nebula layers at different scales produce a sense of volume and depth. Three star field layers at varying grid sizes give parallax depth from distant blue pin-points to nearby coloured suns. Mouse movement shifts the entire field for a gentle interactive parallax. The filmic tone map keeps colours rich without blown-out highlights.

TechniqueFBM Domain Warp
RendererWebGL2 GLSL
Stars3 Depth Layers
PaletteFilmic Tone Map

Frequently Asked Questions

What is the cosmic drift effect in this simulation?

The drift is created by slowly offsetting the UV coordinate space over time, giving the illusion that you are travelling deeper into the nebula. The UV shifts at different rates horizontally and vertically, producing a gentle parallax journey through infinite procedurally generated space.

What is FBM noise and why does it look like a nebula?

Fractal Brownian Motion (FBM) stacks multiple octaves of smooth value noise at doubling frequencies. When applied three times in a chain — each pass using the previous noise result to warp the input coordinates — it produces the turbulent, organic filament shapes characteristic of real emission nebulae.

What is a nebula?

A nebula is an interstellar cloud of gas and dust in space, often illuminated by nearby stars or stellar remnants. Famous examples include the Orion Nebula and the Pillars of Creation. This simulation recreates the swirling gas filaments and vivid magenta, blue and amber colours using procedural GLSL noise — no images or video are involved.

Does this simulation work offline?

Yes. ASMR Sanctuary is a Progressive Web App. After your first visit the Service Worker caches all assets and the simulation runs fully offline with no internet connection required.

How does the mouse parallax work?

The fragment shader receives your mouse position as a uniform. It shifts the nebula UV coordinates by a small fraction of the normalised mouse offset, making the gas clouds tilt gently toward your cursor. The effect is subtle — try slow, sweeping movements across the canvas to feel the depth.

How many star layers are in this simulation?

There are three distinct depth layers. The far layer uses tiny 1.8 px grid cells with cool blue-tinted stars. The mid layer uses 3.5 px cells with warm twinkling stars that pulse at unique frequencies. The near layer uses 7 px cells with larger, randomly coloured bright stars — together they create a convincing sense of three-dimensional stellar depth.

What is filmic tone mapping?

Filmic tone mapping compresses high-dynamic-range colour values into the 0–1 display range using a curve that mimics photographic film. The formula col / (col + 0.9) prevents harsh blown-out whites. A gamma of 0.86 then lifts shadows slightly, matching the warm, slightly overexposed look of Hubble Space Telescope imagery.

What ASMR sound pairs well with this nebula?

Deep cosmic drones or Binaural Theta tones from the Sound Mixer create an immersive deep-space atmosphere. Open it in a separate tab at low volume alongside the nebula for a full audio-visual meditation experience.

What does the Speed control do?

The Speed slider multiplies the animation time variable passed to the shader. At 0.25× the drift is almost imperceptibly slow, perfect for long meditation sessions. At 3× the gas clouds swirl rapidly. Visual quality and resolution remain constant at all speed settings.

What are the GPU requirements for this simulation?

The simulation requires a GPU with WebGL support, available in virtually all modern desktop and mobile browsers. The layered FBM shader runs up to 7 noise octaves per pixel which is compute-intensive. On low-end mobile devices you can reduce load by pressing Pause when not watching, or lowering the Density slider to reduce nebula brightness calculations.