Bienvenido a este capítulo sobre Efectos Visuales (VFX) en Three.js y React Three Fiber. En este capítulo, aprenderás a crear impresionantes efectos visuales que harán que tus escenas 3D cobren vida.

Mi objetivo es ayudarte a comenzar con VFX y motivarte a crear tus propios efectos. He pasado incontables horas consultando diferentes recursos, experimentando, buscando el enfoque correcto para que puedas aprender en unas pocas horas lo que te llevaría semanas o meses.

Previsualización del proyecto TSL GPGPU que construiremos juntos.

El arte de VFX

VFX significa Efectos Visuales. Es el arte de crear efectos para mejorar la experiencia visual de una película, videojuego o, para nosotros, nuestras experiencias web 3D.

VFX se puede usar para crear efectos realistas, como explosiones, fuego, agua, humo, o efectos fantásticos, como hechizos mágicos, teletransportación, y mucho más.

En nuestro contexto, incluso si no estás construyendo un juego, VFX puede usarse para añadir ese toque extra a tus proyectos. Se puede usar para crear una experiencia más inmersiva, hacer que tus escenas sean más atractivas o para lograr un aspecto más pulido. En última instancia, construyendo proyectos más profesionales y visualmente atractivos.

Digamos que tu proyecto tiene una función de arrastrar y soltar. Puedes añadir un efecto de partículas cuando el usuario suelta un objeto, o cuando el objeto es arrastrado. Esto hará que la interacción sea más atractiva y divertida.

Al entrar en el mundo de VFX, prepárate para ver los videojuegos y películas de una forma diferente. Comenzarás a notar los efectos utilizados para crear lo que ves en la pantalla.

Composición entre múltiples tipos de efectos

Un efecto se compone de uno o más elementos. Estos elementos pueden ser partículas, shaders, texturas, meshes, trails, y más. Combinando estos elementos, puedes crear efectos complejos y hermosos.

Aprenderemos a crear cada uno de estos elementos con Three.js y React Three Fiber en las siguientes lecciones. Pero primero, echemos un vistazo a cada uno de ellos.

Partículas

Las partículas son pequeños elementos que se emiten desde una fuente. Se pueden usar para crear efectos como fuego, viento, lluvia, nieve, hechizos mágicos, lo que se te ocurra.

Jugando con el número de partículas y sus propiedades, como su tamaño, textura, color, velocidad y duración, puedes crear un número infinito de efectos.

Pueden ser sprites (imágenes 2D que siempre miran a la cámara) u objetos 3D.

Anticipo de la lección de fuegos artificiales.

Meshes/Geometría

Aunque a menudo pensamos en partículas como puntos o sprites, creo que es importante mencionar que los meshes también pueden usarse para crear efectos. Por ejemplo, rocas saliendo del suelo o un portal abriéndose.

Jugando con la geometría, el material y los shaders, puedes crear efectos únicos que destacan.

En el juego de mago que construiremos juntos, observa cómo los fragmentos de hielo que emergen del suelo contribuyen al efecto general.

Estelas

Las estelas son un tipo de efecto que crea una línea detrás de un objeto. Pueden usarse para crear efectos como un cometa, un rayo láser o viento.

Dan la impresión de movimiento y pueden usarse para crear una sensación de velocidad o dirección.

Para crearlas podemos usar partículas o meshes (como líneas o tubos). Aprenderemos ambos métodos en las siguientes lecciones.

Jugaremos con las estelas para crear un efecto de cometa y más.

Shaders/Texturas

Ya aprendimos sobre shaders en el capítulo dedicado. En el contexto de VFX, los shaders se pueden aplicar en partículas, meshes, o la escena completa para hacer que se muevan, cambien de color, se distorsionen y más. El único límite es tu imaginación.

Al combinar shaders con texturas, puedes crear efectos aún más complejos. Las texturas se pueden usar para agregar detalles a tus efectos, como ruido, patrones o imágenes.

SFX

SFX significa Sound Effects (Efectos de Sonido), y aunque no está directamente relacionado con VFX, es una parte importante de la experiencia. Al agregar efectos de sonido a tus VFX y sincronizarlos con los efectos visuales, puedes crear una experiencia más inmersiva y cohesiva.

No aprenderemos a crear efectos de sonido en este curso, pero aprenderemos una técnica interesante para reproducir sonidos espacializados en el espacio 3D.

CPU vs GPU

Al crear VFX, especialmente en un entorno limitado como la web, es importante tener en cuenta el rendimiento de tus efectos.

Cuando creas VFX, quieres descargar la mayor cantidad posible de trabajo al GPU. Esto significa que querrás utilizar shaders, texturas y otras técnicas aceleradas por GPU para crear tus efectos.

Para efectos simples, como algunas partículas, puedes usar el CPU. Sin embargo, para efectos complejos, como miles de partículas, querrás usar el GPU.

Aprenderemos tanto técnicas de CPU como de GPU en este curso, pero nos enfocaremos en las técnicas de GPU tanto como sea posible. Esto asegurará que tus efectos funcionen sin problemas en la mayoría de los dispositivos.

Crearemos un simple motor de VFX en GPU que nos permitirá crear efectos complejos con facilidad. También descubriremos WebGPU con TSL con un encantador proyecto GPGPU.

Más allá

VFX es un campo vasto, y hay muchas técnicas y efectos que no cubriremos en este curso. Sin embargo, al aprender lo básico, podrás crear una amplia variedad de efectos.

Recursos

Aunque el ecosistema de Three.js es escaso en VFX, hay muchos recursos disponibles para el desarrollo de juegos, que se pueden aplicar a Three.js. Unity, Unreal y Godot son excelentes motores para aprender más sobre VFX.

Como siempre, referenciar diferentes recursos es una gran manera de aprender. Aquí tienes algunos recursos para empezar:

• El canal de YouTube de Gabriel Aguiar tiene excelentes tutoriales sobre VFX en Unity y ahora en Godot. También recomiendo su curso en Udemy llamado Visual Effects for Games in Unity - Beginner To Intermediate.

• El canal de YouTube de Brackeys tiene excelentes tutoriales sobre VFX en Unity (y ahora en Godot después de un largo descanso).

• El canal de YouTube de Coreb Games es similar a los anteriores pero con Unreal Engine.

• El canal de YouTube VFX Apprentice o sitio web contiene muchos videos sobre VFX y sus principios.

Trata de replicar los efectos que ves en estos tutoriales en Three.js y React Three Fiber. Aprenderás mucho haciéndolo.

ArtStation o Pinterest también son excelentes lugares para encontrar inspiración.

Bibliotecas

Desafortunadamente, Three.js no tiene un motor de VFX incorporado como Unity o Unreal. Sin embargo, hay algunas bibliotecas que pueden ayudarte a crear VFX en Three.js:

• Quarks VFX la biblioteca de VFX más avanzada para Three.js. Está basada en la implementación de Unity Shuriken y permite importar VFX de Unity en Three.js. Es una biblioteca de paga, pero puede ahorrarte mucho tiempo dependiendo de tu proyecto y necesidades.
• VFX Composer Suite de Hendrik Mans es una gran biblioteca para crear VFX en Three.js. Es gratuita y de código abierto, pero está menos mantenida que Quarks VFX.
• Wawa VFX la biblioteca que construimos juntos en este curso. Es un motor de VFX simple que te permite crear efectos complejos con facilidad. Es gratuita y de código abierto. Planeo convertirla a TSL en el futuro. Siéntete libre de contribuir a ella.

Conclusión

Espero que estés tan emocionado como yo de adentrarte en el mundo de VFX. Estoy ansioso por ver lo que crearás con el conocimiento que obtendrás en este capítulo.