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.

• VBO (Vertex Buffer Object) : Les sommets stockés en mémoire vidéo.
• Le Maillage : La surface formée par les triangles (optimisation GPU).
• 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.
• Quaternions : Utilisation pour éviter le Gimbal Lock en rotation.

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.
• Matrices Locales vs Monde : Calcul relatif des positions.
• "Matrice Monde = Parent x Locale"

2.5 Caméras et Projection

• Perspective : Simulation de l'œil humain (Point de fuite).
• Orthographique : Vision technique (Parallèle, sans déformation).

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.

Vecteur vs Raster

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.

• L'intensité dépend de l'angle d'incidence.
• Intensité = Normale · Lumière

5.2 Rendu Physiquement Réaliste (PBR)

Modèle microfacettes.

• Albedo : Couleur de base.
• Roughness : Rugosité de la surface.
• Metalness : Comportement métallique.

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 exact.

6.1 Interaction : Raycasting

Du clic 2D vers l'objet 3D.

• Lancement d'un rayon depuis la caméra.
• Test d'intersection avec la géométrie de la scène.

6.2 Mathématiques du Unproject

• Mapping des coordonnées souris vers [-1, 1].
• Inversion des matrices de Projection et de Vue.
• Ray = P⁻¹ × V⁻¹ × ScreenPos

6.3 Optimisation : LOD

Level of Detail adaptatif.

• 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.