Bem-vindo a este capítulo sobre Efeitos Visuais (VFX) no Three.js e React Three Fiber. Neste capítulo, você aprenderá como criar efeitos visuais impressionantes que darão vida às suas cenas 3D.

Meu objetivo é ajudá-lo a começar com VFX e inspirá-lo a criar seus próprios efeitos. Passei inúmeras horas cruzando diferentes recursos, experimentando, buscando a abordagem certa para que você aprenda em poucas horas o que levaria semanas ou meses.

Visualização do projeto TSL GPGPU que construiremos juntos.

A arte do VFX

VFX significa Efeitos Visuais. É a arte de criar efeitos para melhorar a experiência visual de um filme, jogo de vídeo, ou para nós, nossas experiências na web 3D.

O VFX pode ser usado para criar efeitos realistas, como explosões, fogo, água, fumaça, ou efeitos fantásticos, como feitiços mágicos, teletransporte, e muito mais.

No nosso contexto, mesmo que você não esteja construindo um jogo, o VFX pode ser usado para adicionar aquele toque extra aos seus projetos. Pode ser usado para criar uma experiência mais imersiva, para tornar suas cenas mais envolventes, ou para criar um visual mais refinado. Em última análise, construindo projetos mais profissionais e visualmente atraentes.

Digamos que seu projeto possua um recurso de arrastar e soltar. Você pode adicionar um efeito de partículas quando o usuário soltar um item, ou quando o item for arrastado. Isso tornará a interação mais envolvente e divertida.

Ao entrar no mundo do VFX, prepare-se para ver video games e filmes sob uma nova perspectiva. Você começará a notar os efeitos usados para criar o que você vê na tela.

Composição entre múltiplos tipos de efeitos

Um efeito é composto por um ou mais elementos. Esses elementos podem ser partículas, shaders, texturas, meshes, trails e mais. Ao combinar esses elementos, você pode criar efeitos complexos e bonitos.

Aprenderemos a criar cada um desses elementos com Three.js e React Three Fiber nas lições seguintes. Mas primeiro, vamos dar uma olhada em cada um deles.

Partículas

Partículas são pequenos elementos emitidos a partir de uma fonte. Elas podem ser usadas para criar efeitos como fogo, vento, chuva, neve, feitiços mágicos, você escolhe.

Ao brincar com o número de partículas e suas propriedades, como tamanho, textura, cor, velocidade e duração, é possível criar um número infinito de efeitos.

Elas podem ser sprites (imagens 2D que estão sempre voltadas para a câmera) ou objetos 3D.

Visualização antecipada da lição sobre fogos de artifício.

Meshes/Geometry

Como frequentemente pensamos em partículas como pontos ou sprites, acho importante mencionar que meshes também podem ser usadas para criar efeitos. Por exemplo, rochas emergindo do chão ou a abertura de um portal.

Ao brincar com a geometria, material e shaders, é possível criar efeitos únicos que se destacam.

No jogo do feiticeiro que construiremos juntos, veja como as pontas de gelo que emergem do chão contribuem para o efeito geral.

Trilhas

Trilhas são um tipo de efeito que cria uma linha atrás de um objeto. Elas podem ser usadas para criar efeitos como um cometa, um raio laser ou vento.

Elas dão a impressão de movimento e podem ser usadas para criar uma sensação de velocidade ou direção.

Para criá-las, podemos usar partículas ou meshes (como linhas ou tubos). Aprenderemos ambos os métodos nas próximas lições.

Nós vamos brincar com as trilhas para criar um efeito de cometa e mais.

Shaders/Texturas

Já aprendemos sobre shaders no capítulo dedicado. No contexto de VFX, shaders podem ser aplicados em partículas, meshes, ou na cena inteira para fazê-los se mover, mudar de cor, distorcer, e mais. O único limite é a sua imaginação.

Combinando shaders com texturas, você pode criar efeitos ainda mais complexos. Texturas podem ser usadas para adicionar detalhes aos seus efeitos, como ruído, padrões, ou imagens.

SFX

SFX significa Efeitos Sonoros, e embora não esteja diretamente relacionado a VFX, é uma parte importante da experiência. Ao adicionar efeitos sonoros aos seus VFX e sincronizá-los com os efeitos visuais, você pode criar uma experiência mais imersiva e coesa.

Não vamos aprender a criar efeitos sonoros neste curso, mas aprenderemos uma técnica interessante para tocar sons espacializados no espaço 3D.

CPU vs GPU

Ao criar VFX, especialmente em um ambiente limitado como a web, é importante estar atento ao desempenho de seus efeitos.

Ao criar VFX, você deve delegar o máximo possível de trabalho para a GPU. Isso significa que você deve usar shaders, texturas, e outras técnicas aceleradas pela GPU para criar seus efeitos.

Para efeitos simples, como algumas partículas, você pode usar a CPU. No entanto, para efeitos complexos, como milhares de partículas, você vai querer usar a GPU.

Aprenderemos tanto técnicas de CPU quanto de GPU neste curso, mas focaremos nas técnicas de GPU tanto quanto possível. Isso garantirá que seus efeitos rodem suavemente na maioria dos dispositivos.

Criaremos um motor simplificado de VFX para GPU que nos permitirá criar efeitos complexos com facilidade. Também descobriremos o WebGPU com TSL com um adorável projeto de GPGPU.

Indo além

VFX é um campo vasto, e existem muitas técnicas e efeitos que não cobriremos neste curso. No entanto, ao aprender o básico, você será capaz de criar uma ampla gama de efeitos.

Recursos

Enquanto o ecossistema do Three.js é escasso em VFX, existem muitos recursos disponíveis para desenvolvimento de jogos, que podem ser aplicados ao Three.js. Unity, Unreal, e Godot são ótimos motores para aprender mais sobre VFX.

Como sempre, a referência cruzada de diferentes recursos é uma ótima maneira de aprender. Aqui estão alguns recursos para você começar:

• Gabriel Aguiar O canal no YouTube tem ótimos tutoriais sobre VFX na Unity e agora Godot. Também recomendo seu curso no Udemy chamado Visual Effects for Games in Unity - Beginner To Intermediate.

• Brackeys O canal no YouTube tem ótimos tutoriais sobre VFX na Unity (e agora Godot após uma longa pausa).

• Coreb Games Canal no YouTube semelhante aos anteriores, mas com Unreal Engine.

• VFX Apprentice Canal no YouTube ou site contém muitos vídeos sobre VFX e seus princípios.

Tente replicar os efeitos que você vê nestes tutoriais no Three.js e React Three Fiber. Você aprenderá muito ao fazer isso.

ArtStation ou Pinterest também são ótimos lugares para encontrar inspiração.

Bibliotecas

Infelizmente, o Three.js não possui um motor VFX embutido como Unity ou Unreal. No entanto, existem algumas bibliotecas que podem ajudá-lo a criar VFX no Three.js:

• Quarks VFX a biblioteca de VFX mais avançada para Three.js. É baseada na implementação do Shuriken da Unity, permitindo importar VFXs da Unity no Three.js. É uma biblioteca paga mas que pode economizar muito tempo dependendo do seu projeto e necessidades.
• VFX Composer Suite de Hendrik Mans é uma ótima biblioteca para criar VFX no Three.js. É gratuita e de código aberto, mas é menos mantida do que a Quarks VFX.
• Wawa VFX a biblioteca que construímos juntos neste curso. É um motor de VFX simples que permite criar efeitos complexos com facilidade. É gratuita e de código aberto. Planejo convertê-la para TSL no futuro. Sinta-se à vontade para contribuir com ela.

Conclusão

Espero que você esteja tão animado quanto eu para mergulhar no mundo de VFX. Mal posso esperar para ver o que você vai criar com o conhecimento que você adquirirá neste capítulo.