Repolode
achrefelouafi

achrefelouafi/LinearAbiltyCastingThreeJS

A Three.js and GLSL sandbox for tuning game-style skillshot visual effects, with live sliders that stay editable while the simulation is paused.

Stars
1,015
Forks
202
Open issues
9
Last commit
27 days ago

What is it?

Elemental Sandbox is a browser-based VFX sandbox built with Three.js, Vite and hand-written GLSL. It demonstrates six League-of-Legends-style abilities: four line casts aimed with an arrow on the ground, and two far casts aimed with a targeting circle. Each ability is built from procedural geometry, signed-distance shaders and GPU particles, with no textures or sprite sheets beyond the character model and its colour map.

The project's central idea is that every parameter is a live slider (938 in total) that keeps working while the simulation is paused. Settings are a single shared object that shaders, particle systems and lights read every frame, so a frozen eruption or strike can be reshaped against a still image. A built-in editor (toggled with G) also supports saving, exporting and importing presets.

The code is organised as an ability base class with pooling, an aim controller, a render pipeline with depth prepass, bloom, ACES tone mapping and grading, and a GPU particle system. An archived earlier version with fire, water, earth and air spells is kept in the repository for reference.

Key features

  • 01Six abilities with line-cast and far-cast targeting modes.
  • 02Procedural geometry and signed-distance shaders, with no sprite textures.
  • 03938 live parameter sliders that keep updating while the simulation is paused.
  • 04Preset saving, JSON export and import through a built-in editor.
  • 05GPU particle system with pooled, ring-buffer slot reuse.
  • 06Render pipeline with depth prepass, bloom, ACES tone mapping and colour grading.

Use cases

  • Prototyping skillshot or AoE ability effects for a game in Three.js.
  • Studying GLSL techniques such as SDF arrows, lightning ribbons and volumetric beams.
  • Tuning particle and lighting looks interactively before committing values to code.
  • Learning how to structure a real-time VFX project around a single shared settings object.

Quick start

  1. 1

    Install dependencies

    npm install
  2. 2

    Start the dev server

    npm run dev
  3. 3

    Open the URL Vite prints (default http://127.0.0.1:5173)

Topics

FAQ

What is LinearAbiltyCastingThreeJS?
A Three.js and GLSL sandbox for tuning game-style skillshot visual effects, with live sliders that stay editable while the simulation is paused. Elemental Sandbox is a browser-based VFX sandbox built with Three.js, Vite and hand-written GLSL. It demonstrates six League-of-Legends-style abilities: four line casts aimed with an arrow on the ground, and two far casts aimed with a targeting circle. Each ability is built from procedural geometry, signed-distance shaders and GPU particles, with no textures or sprite sheets beyond the character model and its colour map.
Is LinearAbiltyCastingThreeJS free to use? What license does it have?
LinearAbiltyCastingThreeJS is open source under the MIT license. Check the license terms before using it in commercial products.
Is LinearAbiltyCastingThreeJS still maintained?
Actively maintained. The last commit to LinearAbiltyCastingThreeJS was on Sep 23, 2026.
What can I use LinearAbiltyCastingThreeJS for?
Prototyping skillshot or AoE ability effects for a game in Three.js. Studying GLSL techniques such as SDF arrows, lightning ribbons and volumetric beams. Tuning particle and lighting looks interactively before committing values to code. Learning how to structure a real-time VFX project around a single shared settings object.
How do I install LinearAbiltyCastingThreeJS?
Install dependencies: npm install Start the dev server: npm run dev Open the URL Vite prints (default http://127.0.0.1:5173)
Where can I get LinearAbiltyCastingThreeJS?
The source code and installation instructions are on GitHub: https://github.com/achrefelouafi/LinearAbiltyCastingThreeJS

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects