Aller au contenu
learn
Menu global

three.js pour développeurs C#/Java — Mission

Pourquoi j’apprends ça

Section intitulée « Pourquoi j’apprends ça »

Guitar Alchemist dessine en 3D un manche de guitare, un océan, un système solaire et quelques dizaines d’autres scènes avec three.js. Certaines utilisent le nouveau WebGPURenderer et son langage de shaders, TSL ; la plupart utilisent encore WebGLRenderer et du GLSL écrit à la main. En développeur C#, je connais le Viewport3D de WPF et un peu MonoGame. three.js ressemble aux deux au premier abord : un graphe de scène, une caméra, des maillages et des lumières. Puis les détails divergent : le renderer peut choisir WebGPU ou WebGL dans mon dos, une couleur hexadécimale n’est pas le nombre que reçoit le shader, l’intensité d’une lumière s’exprime en candelas, et un modèle arrive sous forme de fichier glTF qui a besoin de ses propres décodeurs.

Ce cours apprend three.js tel qu’il est en septembre 2026, et non tel que le montrent la plupart des tutoriels : WebGPURenderer d’abord, setAnimationLoop au lieu de requestAnimationFrame, TSL au lieu de ShaderMaterial, les imports three/addons, Timer au lieu de Clock, HDRLoader au lieu de RGBELoader.

À qui s’adresse ce cours

Section intitulée « À qui s’adresse ce cours »

Tu es à l’aise avec C# ou Java, et tu as suivi JavaScript pour développeurs C#/Java et TypeScript pour développeurs C#/Java, ou tu connais leur contenu : modules ES et npm, async et await, classes, types structurels. La leçon 9 utilise React ; le cours React (Vite) couvre ce dont elle a besoin. Aucune expérience préalable de la 3D n’est nécessaire, mais si tu as utilisé WPF 3D, MonoGame ou JavaFX 3D, chaque leçon dit ce qui s’y transpose.

three.js en un tableau

Section intitulée « three.js en un tableau »
WPF 3D MonoGame JavaFX 3D three.js
Où il dessine un élément Viewport3D la fenêtre du jeu une SubScene un <canvas> créé par le renderer
Graphe de scène ModelVisual3D, Model3DGroup aucun : on dessine chaque modèle Group, MeshView Scene, Group, Mesh
Axes main droite, Y vers le haut matrices main droite, Y vers le haut Y vers le bas main droite, Y vers le haut
Géométrie MeshGeometry3D tampons de sommets et d’indices TriangleMesh BufferGeometry
Matériaux DiffuseMaterial, SpecularMaterial BasicEffect, effets personnalisés PhongMaterial à base physique : MeshStandardMaterial, matériaux à nœuds
La boucle en mode retenu : WPF redessine quand quelque chose change Update et Draw, appelées par Game AnimationTimer renderer.setAnimationLoop(callback)
API GPU Direct3D 9 DirectX ou OpenGL Direct3D ou OpenGL, via Prism WebGPU, ou WebGL 2 en repli
Shaders aucun effets HLSL aucun TSL, compilé en WGSL ou en GLSL
Fichiers de modèles rien d’intégré le content pipeline (FBX, X) rien d’intégré glTF 2.0 avec GLTFLoader

Les données

Section intitulée « Les données »

Les scènes propres au cours sont petites et déterministes : un cube, un morceau de manche de guitare fait de primitives, des pastilles de couleur, dix sphères dans un studio HDR, et un métronome écrit en fichier glTF par un script. Chaque page rapporte ce que le renderer a fait, et un script Playwright le lit, si bien que les nombres des leçons viennent d’une exécution, pas de la mémoire.

Le vrai code est GuitarAlchemist/ga au commit 05c8eda, principalement ThreeFretboard.tsx, son manche de guitare en 3D. Les composants React de GA demandent three.js 0.180, six versions derrière ce cours. Les leçons citent le code de GA là où il illustre bien un point, y compris ce qui a changé depuis r180 ; les constats sont dans le journal.

Démos en direct

Section intitulée « Démos en direct »

Chaque page de leçon tourne sur ce site, dans un cadre replié sous sa capture, avec un panneau Try it qui règle les paramètres de la page, ceux qu’utilisent les exercices. Cinq scènes complètes réunissent les leçons sur une guitare entière modélisée en code : une guitare à jouer (leçon 5), des voicings d’accords sur la touche de GA (leçon 13), un studio avec ombres, environnement HDR et bloom (leçon 7), des médiators lancés sur la guitare avec Rapier (leçon 10), et la guitare en VR (leçon 11). Un cadre ne charge rien tant qu’il n’est pas déplié. Le build entier pèse 9.4 Mo, surtout les deux builds de Rapier en WebAssembly.

À la fin de ce cours, je saurai

Section intitulée « À la fin de ce cours, je saurai »
  • mettre en place un projet three.js avec Vite et TypeScript, et expliquer ce que fait WebGPURenderer quand WebGPU manque ;
  • construire des scènes à partir de géométries, de matériaux à base physique et de lumières, avec des ombres, et lire renderer.info pour savoir ce qui a été demandé au GPU ;
  • garder des couleurs justes de la texture à l’écran : espaces colorimétriques, tone mapping et environnements HDR ;
  • charger des modèles glTF avec leurs animations, et choisir entre les compressions Draco, meshopt et KTX2 ;
  • sélectionner des objets et déplacer la caméra, écrire des matériaux et des effets en TSL, et post-traiter une scène ;
  • dessiner des milliers d’objets avec l’instanciation, BatchedMesh et les niveaux de détail, et mesurer le résultat ;
  • écrire les mêmes scènes avec React Three Fiber, ajouter de la physique avec Rapier et un mode WebXR ;
  • tester du code 3D en CI, et savoir ce qu’un navigateur headless sans GPU peut vérifier et ce qu’il ne peut pas vérifier.

Plan

Section intitulée « Plan »
# Leçon Ce que tu connais déjà
1 Scène, caméra, renderer le Viewport3D et la PerspectiveCamera de WPF, la boucle Game de MonoGame, la SubScene de JavaFX
2 Géométries, matériaux, lumières et ombres MeshGeometry3D, DiffuseMaterial, BasicEffect, lumières directionnelles et ponctuelles
3 Couleur, tone mapping et environnements HDR sRGB, Color dans WPF ou JavaFX, photos HDR
4 Charger des modèles glTF et des animations le content pipeline de MonoGame, les storyboards WPF, AnimationTimer
5 Interaction, Raycaster et contrôles de caméra le hit testing dans WPF, VisualTreeHelper.HitTest, le PickResult de JavaFX
6 TSL et matériaux à nœuds effets HLSL, graphes de shaders
7 Post-traitement avec RenderPipeline render targets, pixel shaders
8 La performance, mesurée : instanciation, BatchedMesh, LOD, frustum culling dessin instancié, profileurs
9 React Three Fiber et drei le data binding de WPF, composants Blazor ou React
10 Physique avec Rapier en WebAssembly BEPUphysics, moteurs physiques de jeux
11 WebXR Windows Mixed Reality, OpenXR
12 Tests et CI : rendu headless, captures d’écran comparées, et leurs limites automatisation d’interface, tests de snapshot
13 Projet : le manche de guitare 3D de GuitarAlchemist, porté vers WebGPU les leçons qui la précèdent
14 Labo : Guitar Alchemist en 3D, quinze expériences mesurées les leçons 8, 9, 10, 11 et 13
— Journal

Le cours est terminé : les 13 leçons ont été écrites et vérifiées le 16 septembre 2026. La leçon 14, un labo de quinze expériences mesurées sur les besoins 3D de Guitar Alchemist, a été ajoutée le 17 septembre. Ce qui reste à essayer sur du vrai matériel, un casque de réalité virtuelle, un téléphone, WebGPU sous Linux, est listé dans le journal.

Ressources

Section intitulée « Ressources »