Repolode
Enviar
achrefelouafi

achrefelouafi/LinearAbiltyCastingThreeJS

Sandbox de Three.js y GLSL para ajustar efectos visuales de habilidades tipo skillshot, con controles deslizantes en vivo que siguen funcionando al pausar la simulación.

Ver en GitHub
Estrellas
1,015
Forks
202
Issues abiertos
9
Último commit
hace 26 días

¿Qué es?

Elemental Sandbox es un sandbox de efectos visuales para navegador, creado con Three.js, Vite y GLSL escrito a mano. Demuestra seis habilidades al estilo de League of Legends: cuatro lanzamientos lineales que se apuntan con una flecha en el suelo y dos lanzamientos a distancia que se apuntan con un círculo de selección. Cada habilidad se construye con geometría procedural, shaders de distancia con signo y partículas en la GPU, sin texturas ni hojas de sprites, salvo el modelo del personaje y su mapa de color.

La idea central del proyecto es que cada parámetro se controla con un deslizador en vivo (938 en total) que sigue funcionando mientras la simulación está en pausa. Los shaders, los sistemas de partículas y las luces leen en cada fotograma un único objeto compartido con la configuración, de modo que se puede modificar una erupción o un impacto congelados sobre una imagen fija. El editor integrado (se activa con G) también permite guardar, exportar e importar presets.

El código está organizado en una clase base para las habilidades con pooling, un controlador de apuntado, un pipeline de renderizado con depth prepass, bloom, tone mapping ACES y gradación de color, además de un sistema de partículas en la GPU. En el repositorio se conserva como referencia una versión anterior archivada con hechizos de fuego, agua, tierra y aire.

Funciones clave

  • 01Seis habilidades con modos de apuntado para lanzamientos lineales y a distancia.
  • 02Geometría procedural y shaders de distancia con signo, sin texturas de sprites.
  • 03938 deslizadores de parámetros en vivo que siguen actualizándose mientras la simulación está en pausa.
  • 04Guardado de presets y exportación e importación de JSON desde un editor integrado.
  • 05Sistema de partículas en la GPU con reutilización de posiciones mediante pooling y un búfer circular.
  • 06Pipeline de renderizado con depth prepass, bloom, tone mapping ACES y gradación de color.

Casos de uso

  • Crear prototipos de efectos para habilidades skillshot o AoE en un juego con Three.js.
  • Estudiar técnicas de GLSL, como flechas SDF, cintas de rayos y haces volumétricos.
  • Ajustar de forma interactiva el aspecto de las partículas y la iluminación antes de fijar los valores en el código.
  • Aprender a estructurar un proyecto de efectos visuales en tiempo real en torno a un único objeto compartido con la configuración.

Inicio rápido

  1. 1

    Instala las dependencias

    npm install
  2. 2

    Inicia el servidor de desarrollo

    npm run dev
  3. 3

    Abre la URL que muestra Vite (por defecto, http://127.0.0.1:5173)

Temas

#threejs#glsl#webgl#vfx#particles#shaders#game-dev#vite

Preguntas frecuentes

¿Qué es LinearAbiltyCastingThreeJS?
Sandbox de Three.js y GLSL para ajustar efectos visuales de habilidades tipo skillshot, con controles deslizantes en vivo que siguen funcionando al pausar la simulación. Elemental Sandbox es un sandbox de efectos visuales para navegador, creado con Three.js, Vite y GLSL escrito a mano. Demuestra seis habilidades al estilo de League of Legends: cuatro lanzamientos lineales que se apuntan con una flecha en el suelo y dos lanzamientos a distancia que se apuntan con un círculo de selección. Cada habilidad se construye con geometría procedural, shaders de distancia con signo y partículas en la GPU, sin texturas ni hojas de sprites, salvo el modelo del personaje y su mapa de color.
¿LinearAbiltyCastingThreeJS es gratuito? ¿Qué licencia tiene?
LinearAbiltyCastingThreeJS es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿LinearAbiltyCastingThreeJS sigue mantenido?
Mantenimiento activo. El último commit de LinearAbiltyCastingThreeJS fue el 23 sept 2026.
¿Para qué puedo usar LinearAbiltyCastingThreeJS?
Crear prototipos de efectos para habilidades skillshot o AoE en un juego con Three.js. Estudiar técnicas de GLSL, como flechas SDF, cintas de rayos y haces volumétricos. Ajustar de forma interactiva el aspecto de las partículas y la iluminación antes de fijar los valores en el código. Aprender a estructurar un proyecto de efectos visuales en tiempo real en torno a un único objeto compartido con la configuración.
¿Cómo se instala LinearAbiltyCastingThreeJS?
Instala las dependencias: npm install Inicia el servidor de desarrollo: npm run dev Abre la URL que muestra Vite (por defecto, http://127.0.0.1:5173)
¿Dónde consigo LinearAbiltyCastingThreeJS?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/achrefelouafi/LinearAbiltyCastingThreeJS

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados