Wawa Sensei logo

Introduction aux VFX

Bienvenue dans ce chapitre sur les effets visuels (VFX) dans Three.js et React Three Fiber. Dans ce chapitre, vous apprendrez à créer des effets visuels époustouflants qui donneront vie à vos scènes 3D.

Mon objectif est de vous aider à débuter dans les VFX et à vous inspirer pour créer vos propres effets. J'ai passé d'innombrables heures à croiser différentes ressources, à expérimenter, à chercher la bonne approche pour que vous puissiez apprendre en quelques heures ce qui vous aurait pris des semaines ou des mois.

Logo Wawa Sensei dessiné avec des particules

Aperçu du projet TSL GPGPU que nous construirons ensemble.

L'art du VFX

VFX signifie Effets Visuels (Visual Effects). C'est l'art de créer des effets pour améliorer l'expérience visuelle d'un film, d'un jeu vidéo, ou pour nous, de nos expériences web en 3D.

Les VFX peuvent être utilisés pour créer des effets réalistes, tels que des explosions, du feu, de l'eau, de la fumée, ou des effets fantastiques, tels que des sorts magiques, de la téléportation, et bien plus encore.

Dans notre contexte, même si vous ne développez pas un jeu, le VFX peut être utilisé pour ajouter cette petite touche supplémentaire à vos projets. Cela peut être utilisé pour créer une expérience plus immersive, pour rendre vos scènes plus captivantes, ou pour créer un rendu plus soigné. En fin de compte, cela permet de construire des projets plus professionnels et visuellement attrayants.

Disons que votre projet possède une fonctionnalité de glisser-déposer. Vous pouvez ajouter un effet de particules lorsque l'utilisateur dépose un élément, ou lorsque l'élément est déplacé. Cela rendra l'interaction plus engageante et amusante.

En entrant dans le monde du VFX, préparez-vous à voir les jeux vidéo et les films sous un nouvel angle. Vous commencerez à remarquer les effets qui sont utilisés pour créer ce que vous voyez à l'écran.

Composition entre plusieurs types d'effets

Un effet est composé d'un ou plusieurs éléments. Ces éléments peuvent être des particules, des shaders, des textures, des meshes, des traînées, et plus. En combinant ces éléments, vous pouvez créer des effets complexes et magnifiques.

Nous apprendrons à créer chacun de ces éléments avec Three.js et React Three Fiber dans les leçons suivantes. Mais d'abord, examinons chacun d'eux.

Particules

Les particules sont de petits éléments émis à partir d'une source. Elles peuvent être utilisées pour créer des effets tels que le feu, le vent, la pluie, la neige, les sorts magiques, et bien plus encore.

En jouant avec le nombre de particules et leurs propriétés, telles que leur taille, texture, couleur, vitesse et durée de vie, vous pouvez créer une infinité d'effets.

Elles peuvent être des sprites (images 2D qui font toujours face à la caméra) ou des objets 3D.

Aperçu de la leçon sur le feu d'artifice.

Meshes/Géométrie

Bien que nous pensions souvent aux particules comme des points ou des sprites, je pense qu'il est important de mentionner que les meshes peuvent également être utilisés pour créer des effets. Par exemple, des rochers sortant du sol ou un portail qui s'ouvre.

En jouant avec la géométrie, le material et les shaders, vous pouvez créer des effets uniques qui se démarquent.

Dans le jeu de sorcier que nous construirons ensemble, voyez comment les éclats de glace provenant du sol ajoutent à l'effet global.

Traînées

Les traînées sont un type d'effet qui crée une ligne derrière un objet. Elles peuvent être utilisées pour créer des effets tels qu'une comète, un faisceau laser ou le vent.

Elles donnent l'impression de mouvement et peuvent être utilisées pour créer une sensation de vitesse ou de direction.

Pour les créer, nous pouvons utiliser des particules ou des meshes (tels que des lignes ou des tubes). Nous apprendrons les deux méthodes dans les leçons suivantes.

Nous jouerons avec les traînées pour créer un effet de comète et plus encore.

Shaders/Textures

Nous avons déjà appris sur les shaders dans le chapitre dédié. Dans le contexte des VFX, les shaders peuvent être appliqués sur des particules, des meshes, ou l'ensemble de la scène pour les faire bouger, changer de couleur, se déformer, et plus encore. La seule limite est votre imagination.

En combinant les shaders avec des textures, vous pouvez créer des effets encore plus complexes. Les textures peuvent être utilisées pour ajouter des détails à vos effets, tels que du bruit, des motifs, ou des images.

SFX

SFX signifie Sound Effects, et bien qu'il ne soit pas directement lié aux VFX, il est une partie importante de l'expérience. En ajoutant des effets sonores à vos VFX et en les synchronisant avec les effets visuels, vous pouvez créer une expérience plus immersive et cohérente.

Nous n'apprendrons pas à créer des effets sonores dans ce cours, mais nous apprendrons une technique intéressante pour jouer des sons spatialisés dans l'espace 3D.

CPU vs GPU

Lors de la création de VFX, notamment dans un environnement limité tel que le web, il est important de prendre en compte la performance de vos effets.

Lorsque vous créez des VFX, vous souhaitez déléguer autant de travail que possible au GPU. Cela signifie que vous devez utiliser des shaders, des textures et d'autres techniques accélérées par le GPU pour créer vos effets.

Pour des effets simples, tels que quelques particules, vous pouvez utiliser le CPU. Cependant, pour des effets complexes, tels que des milliers de particules, vous voudrez utiliser le GPU.

Nous apprendrons des techniques basées sur le CPU et sur le GPU dans ce cours, mais nous nous concentrerons autant que possible sur les techniques GPU. Cela garantira que vos effets fonctionnent de manière fluide sur la plupart des appareils.

Nous créerons un simple moteur VFX GPU qui nous permettra de créer des effets complexes avec aisance. Nous découvrirons également WebGPU avec TSL grâce à un joli projet GPGPU.

Aller plus loin

Les VFX sont un domaine vaste, et il existe de nombreuses techniques et effets que nous ne couvrirons pas dans ce cours. Cependant, en apprenant les bases, vous serez capable de créer un large éventail d'effets.

Ressources

Bien que l'écosystème Three.js soit limité en ressources VFX, il y a de nombreuses ressources disponibles pour le développement de jeux qui peuvent être appliquées à Three.js. Unity, Unreal, et Godot sont d'excellents moteurs pour en apprendre davantage sur les VFX.

Comme toujours, la consultation de différentes ressources est un excellent moyen d'apprendre. Voici quelques ressources pour commencer :

Essayez de reproduire les effets que vous voyez dans ces tutoriels sur Three.js et React Three Fiber. Vous apprendrez beaucoup en le faisant.

ArtStation ou Pinterest sont aussi de bons endroits pour trouver de l'inspiration.

Bibliothèques

Malheureusement, Three.js ne dispose pas d'un moteur VFX intégré comme Unity ou Unreal. Cependant, il existe quelques bibliothèques qui peuvent vous aider à créer des VFX dans Three.js :

  • Quarks VFX est la bibliothèque VFX la plus avancée pour Three.js. Elle est basée sur l'implémentation Unity Shuriken permettant d'importer des VFX Unity dans Three.js. C'est une bibliothèque payante mais elle peut vous faire gagner beaucoup de temps selon votre projet et vos besoins.
  • VFX Composer Suite de Hendrik Mans est une excellente bibliothèque pour créer des VFX dans Three.js. Elle est gratuite et open-source mais est moins maintenue que Quarks VFX.
  • Wawa VFX la bibliothèque que nous avons construite ensemble dans ce cours. C'est un moteur VFX simple qui permet de créer des effets complexes avec facilité. Elle est gratuite et open-source. Je prévois de la convertir en TSL à l'avenir. N'hésitez pas à y contribuer.

Conclusion

J'espère que vous êtes aussi excité que moi à l'idée de plonger dans le monde des VFX. J'ai hâte de voir ce que vous créerez avec les connaissances que vous acquerrez dans ce chapitre.

< Shader transitions
Particles >