LinearAbiltyCastingThreeJS Turns Skillshot VFX Into a Playable Three.js Sandbox 🔗
Developers explore hand-written GLSL and Vite to prototype League of Legends-style ability effects with line and ground-targeted casts.
achrefelouafi/LinearAbiltyCastingThreeJS is a skillshot VFX sandbox built with Three.js, Vite, and custom GLSL shaders that lets developers prototype and tweak ability effects in real time.
The project implements five distinct abilities — Frost Lance (Q), Storm Lance (E), Cinder Fall (R), Nova Beam (F), and Voltaic Snare (V) — each with unique visual behaviors: line casts that arm on keypress, follow mouse aim, and fire on click; and a far cast (V) that uses a thick-boundary cursor circle to preview area of effect before commitment. Effects include fracturing ice fronts, branching lightning, raymarched lava trails, spiraling light columns, and electric leashes that scorch the terrain.
Built with Vite for fast iteration and Three.js for rendering, the sandbox emphasizes low-level control through hand-written GLSL, avoiding abstraction layers to give developers direct access to shader logic for customization. The immediate visual feedback loop makes it ideal for learning advanced rendering techniques or prototyping game abilities without engine overhead.
The catch: The project lacks documentation, configuration options, or export mechanisms, limiting its use beyond local experimentation and raising questions about scalability or integration into larger codebases.
- Game developers prototyping ability VFX
- Graphics programmers learning GLSL and Three.js
- Educators teaching real-time shader effects
- Indie creators testing skillshot mechanics
- Open-source contributors expanding effect library
Source: achrefelouafi/LinearAbiltyCastingThreeJS — based on the project README.