L'écosystème Three.js

Abstraction et standardisation du rendu Web.

• Créée en 2010, c'est le standard pour la 3D sur le Web.
• Permet d'utiliser la puissance du GPU sans complexité inutile.
• Compatible avec WebGL et WebGPU.

1. Philosophie d'Abstraction

Simplifier la complexité technique.

• Réduction du code : On écrit "ajouter un cube" plutôt que de configurer manuellement la VRAM.
• Interopérabilité : Le moteur gère les différences entre les types de cartes graphiques.
• Approche Objet : Manipulation de concepts visuels (Caméras, Lumières) plutôt que de registres.

2. Anatomie d'une Application

Les quatre piliers fondamentaux.

• Scene : L'espace (le "plateau de tournage") qui contient tout.
• Camera : Le point de vue qui définit la projection.
• Renderer : Le moteur qui transforme le graphe d'objects en pixels.
• Objects : Combinaison d'une géométrie (forme) et d'un matériau (apparence).

3. Le Cycle de Rendu (Loop)

Synchronisation avec l'écran.

• Animation Frame : Le navigateur demande un dessin 60 fois par seconde.
• Mise à jour d'état : On modifie les propriétés juste avant de dessiner.
• Le Dessin : Un appel unique qui transforme tout le décor en pixels.

2.1 Structure des Objets 3D

La discrétisation des surfaces.

• Le Maillage : Un objet 3D est un maillage, composé de sommets, arêtes et faces.
• VBO (Vertex Buffer Object) : Les sommets stockés en mémoire vidéo (VRAM).
• La Normale : Vecteur essentiel pour le calcul de l'illumination.

2.2 Algèbre Linéaire & Transformations

Passage de l'espace 3D aux coordonnées homogènes.

• Translation, Rotation, Échelle : Manipulations de base.
• Matrices 4x4 : Encodage linéaire de toutes les transformations.

2.3 La Matrice : L'outil Universel

Efficacité et Composition.

• Condensation : 16 chiffres stockent l'état spatial complet.
• Composition : On multiplie les matrices pour combiner les mouvements.
• GPU : Architecture optimisée pour le calcul matriciel massif.

2.4 Le Graphe de Scène

Hiérarchie et Propagation.

• Parentalité : Les mouvements des parents s'appliquent aux enfants.
• Relativité : Chaque enfant contient une transformation locale qui lui est propre.
• Matrices Locales vs Monde : Calcul relatif des positions.
• "Matrice Monde = Parent x Locale"

2.5 Caméras et Projection

• Projection : Caméra transforme la scène 3D en une image 2D.
• Caméra Perspective : Simulation de l'œil humain (Point de fuite).
• Caméra Orthographique : Vision technique (Parallèle, sans déformation).
• Image Buffer (Z-Buffer) : Stocke la distance de chaque pixel par rapport à la caméra.

3.0 Le Pipeline Graphique Programmable

Le voyage de la donnée vers le pixel.

3.1 Étape Application (CPU)

• Logique, physique et Culling (tri des objets visibles).
• Soumission des Draw Calls au GPU.
• Le principal goulot d'étranglement (Bottleneck).

3.2 Vertex Shader (GPU)

Traitement par sommet.

• Le GPU traite chaque point simultanément.
• Projection finale sur la surface de l'écran.

3.3 Assemblage & Clipping

Troncature géométrique.

• Élimination des primitives hors du volume de vision.
• Division perspective (NDC).

3.4 Rastérisation

Discrétisation géométrie vers fragments.

• Identification des pixels couverts par chaque triangle.
• Interpolation des données (couleurs, UV) sur la surface.

3.4 Rastérisation

Le défi de la discrétisation.

• Vecteur (Jaune) : Forme mathématique parfaite, résolution infinie.
• Raster (Vert) : Approximation par une grille de pixels.
• Aliasing : L'effet d'escalier dû à la résolution limitée.

3.5 Fragment Shader

Calcul de l'illumination par pixel.

• Échantillonnage des textures.
• Application des modèles de lumière.

3.6 Sortie Écran (ROP)

Tests finaux et composition.

• Z-Buffer Test : Gestion de la visibilité et profondeur.
• Blending : Mélange pour la transparence.

4.1 Pourquoi le GPU ?

Le secret : Le parallélisme massif.

• CPU (Cerveau) : Quelques cœurs très rapides, optimisés pour des tâches séquentielles complexes.
• GPU (Muscles) : Des milliers de petits cœurs optimisés pour faire la même opération simple sur des millions de données (SIMD).

4.2 La Mémoire Vidéo (VRAM)

Le stockage haute performance.

• Bande passante : La VRAM est beaucoup plus rapide que la RAM classique pour le transfert de données.
• Coût du transfert : Envoyer des données du CPU vers le GPU est "lent".
• Draw Calls : Chaque commande de dessin a un coût de communication (overhead).

4.3 Les Shaders (GLSL)

De petits programmes exécutés sur le GPU.

• Vertex Shader : S'exécute pour chaque sommet (géométrie).
• Fragment Shader : S'exécute pour chaque pixel (couleur).
• Langage : GLSL (proche du C), compilé par la carte graphique.

5.1 Modèles d'Illumination (Lambert)

Réflexion diffuse idéale.

• Comment la lumière intéragit avec la surface.
• L'intensité dépend de l'angle entre la lumière et la surface.
• Intensité = Normale · Lumière

5.2 Rendu Physiquement Réaliste (PBR)

Modèle microfacettes.

• Albedo : Couleur de base.
• Roughness : Rugosité de la surface.

5.3 Raytracing & Illumination Globale

Simulation du parcours des rayons.

• Alternative à la rastérisation.
• Permet des reflets et ombres parfaits.
• Plus coûteux mais physiquement plus proche de la réalité.

6.1 Interaction : Problème

Du clic 2D vers l'objet 3D.

• Comment faire pour interragir depuis l'écran (2D) avec notre scène (3D) ?
• La scène est en 3D / l'utilisateur intéragit en 2D.
• La scène contient une position (x, y, z) / l'utilisateur intéragit via (x, y).

6.1 Interaction : Solutions

• Lancement d'un rayon depuis la caméra vers la scène.
• On vérifie quel objet le rayon touche en premier.
• Test d'intersection avec la géométrie de la scène.

6.2 Optimisation : LOD

Level of Detail adaptatif.

• Consiste à utiliser plusieurs version d'un même objet.
• Remplacement du maillage selon la distance.
• Préserve la fluidité sur les scènes complexes.

7.1 La Synchronisation Visuelle

Maintenir une image cohérente entre spectateurs.

• Le Problème : Le réseau est instable (Jitter) et lent (Latence).
• Désynchronisation : Risque de téléportation des objets.

7.2 Snapshot Interpolation

Voyager dans le passé pour voir le futur fluide.

• Le Tampon (Buffer) : On attend d'avoir plusieurs positions d'avance.
• Interpolation (LERP) : Calcul des positions intermédiaires entre snapshots.

7.3 Déterminisme et États Visuels

S'assurer que 1+1 = 2 partout.

• Simulation Déterministe : Même code + mêmes entrées = même image.
• Réconciliation : Le serveur corrige périodiquement les dérives visuelles.

7.4 Conclusion : Vers l'Image Distribuée

• Cloud Rendering : Fusion de flux vidéo et de géométrie locale.
• L'Image n'est plus un fichier : C'est un consensus distribué en temps réel.