Three.js – Shaders, Partículas y Post‑Procesado

Este repositorio contiene una colección de ejemplos prácticos desarrollados con Three.js que exploran tres áreas fundamentales de la gráfica 3D en tiempo real: shaders personalizados (vertex/fragment), sistemas de partículas y efectos de post‑procesado. El proyecto está estructurado en tres módulos independientes, cada uno con sus propias demostraciones.

Módulo 1 Vertex y fragment

Este módulo contiene tres ejercicios que demuestran el uso de shaders GLSL para manipular geometría y aplicar iluminación no estándar.

Slime sinusoidal

Un objeto con forma de slime (geometría esférica deformada) cuyo tamaño y forma oscilan siguiendo una función sinusoidal. El vértice se desplaza a lo largo de la normal dependiendo del tiempo, creando un efecto orgánico.

Esfera con iluminación Blinn‑Phong

Implementación del modelo de iluminación Blinn‑Phong c. La esfera reacciona a una fuente de luz direccional, mostrando reflejos especulares y difusos calculados manualmente en el fragment shader.

Toon shading sobre una superficie

Aplicación de sombreado tipo “cel shading” sobre una superficie. Los colores se cuantifican en bandas discretas para lograr el efecto cartoon, y se añaden bordes de silueta mediante el uso de normales.

Sistemas de partículas

Dos ejemplos que explotan THREE.Points y THREE.BufferGeometry para simular comportamientos dinámicos con miles de partículas.

Rasengan (1 millón de partículas)

Representación del famoso jutsu del anime Naruto. Un millón (1 000 000) de partículas giratorias que forman una esfera compacta con un núcleo brillante. El alto rendimiento se logra mediante el uso de BufferAttribute y actualizaciones en el bucle de animación con operaciones eficientes.

Humo

Simulación de una columna de humo que se eleva y se dispersa. Cada partícula tiene posición, velocidad, tamaño y opacidad variables, generando un efecto realista.

Post‑procesado

Un único ejemplo que muestra cómo aplicar efectos de post‑procesado a la escena completa utilizando el EffectComposer de Three.js.

Se aplica un filtro que incluye Desenfoque (blur)

Correr el Proyecto

1. Clona o descarga el repositorio y accede a la carpeta raíz.

2. Entra al módulo que deseas probar, por ejemplo:

cd shaders_01_ci5321

3. Instala las dependencias (solo la primera vez):

npm install

4. Inicia el servidor de desarrollo:

npm run dev

Abre la URL que aparezca en la terminal (normalmente http://localhost:5173 o similar) en tu navegador.