Elemental Sandbox: Open-Source Procedural VFX Playground with Three.js and Pure GLSL

Elemental Sandbox is an open-source WebGL VFX playground rendering 10 procedural magic abilities with Three.js, pure GLSL shaders, raymarching, and GPU particle

tau · September 10, 2026

#Three.js #GLSL #WebGL #VFX #OpenSource #DevTools

Elemental Sandbox: Open-Source Procedural VFX Playground with Three.js and Pure GLSL

Interactive 3D web developer Chiro Visuals (@chirovisuals) has released "Elemental Sandbox" (repository: LinearAbilityExtThreeJS), an open-source 3D WebGL visual effects toolkit built with Three.js, Vite, and hand-crafted GLSL shaders. The project renders 10 complex elemental magic abilities in real time without relying on external image textures, sprite sheets, or baked 3D meshes.

Real-time magic VFX abilities and runtime inspector interface rendered with Three.js and pure procedural GLSL

Image source: Chiro Visuals (@chirovisuals)

For front-end engineers and technical artists exploring real-time graphics and visual effects in the Three.js and Vite ecosystem, Elemental Sandbox offers a practical reference implementation for purely procedural GPU rendering pipelines.

Zero External Assets: Procedural Rendering and Shader Architecture

The defining technical attribute of Elemental Sandbox is the complete absence of raster image textures, sprite sheets, or pre-baked 3D geometry. Every visual element across the 10 multi-layered elemental abilities is computed directly on the GPU through custom GLSL shaders.

  • GPU-Simulated Instanced Particles: The project implements a GPU-driven instanced quad particle system governed by curl noise turbulence and vortex swirl physics, producing dynamic flow fields without CPU particle updates.
  • Volumetric Raymarching: Dense energy cores and volumetric elemental emissions are generated directly within the fragment stage using raymarching algorithms, creating depth and internal glow.
  • World-Space Vertex Calculations: Transformations and deformations are calculated directly in world coordinates within the vertex shader, allowing fluid alignment across dynamic camera angles and projectile trajectories.

By removing all external image assets, the application eliminates network texture streaming latency while leveraging mathematical functions for infinite procedural detail scaling.

Runtime VFX Inspector and Shader Pre-loading Pipeline

Beyond visual demonstrations, Elemental Sandbox provides tooling designed for real-time inspection, shader parameter tuning, and runtime performance optimization.

  • Real-Time Parameter Manipulation in Paused State: Even while the global physics simulation is paused, developers can inspect and adjust turbulence strength, swirl radius, emission velocity, and color ramp attenuation in real time.
  • Preset Serialization and Export: Fine-tuned visual configurations can be saved directly as custom inspector presets, simplifying migration into other production scenes.
  • Shader Pre-loader Pipeline: To eliminate the characteristic runtime frame drop (stutter) caused by on-demand shader compilation in WebGL, a dedicated pre-loading pipeline pre-warms and compiles all 10 ability shaders during the initial loading screen.

Technical Caveats and Implementation Guidance

When evaluating Elemental Sandbox as an architectural reference or integrating its techniques into production web applications, developers should take note of several engineering considerations.

  • GPU Computational Load on Low-End Devices: While memory bandwidth is conserved by avoiding high-resolution textures, procedural volume raymarching and thousands of instanced particles place significant compute demands on integrated GPUs and mobile hardware. Dynamic particle budget scaling and adaptive raymarching step limits are recommended for broad device support.
  • Repository Branch Discrepancies: Historical forks and earlier repositories (such as AvatarCastingAbilitiesThreeJS and typographical variants like LinearAbiltyCastingThreeJS) exist online. Developers should reference the actively maintained achrefelouafi/LinearAbilityExtThreeJS repository on the main branch for the full 10-ability suite and inspector tools.

Sources

This technical breakdown is based on the open-source repository code, shader implementations, and release demonstrations published by interactive 3D developer Chiro Visuals.