[ 01 · Embarquement ] Aldéris
Neuf planètes,
un seul voyage
Une démonstration technique : neuf planètes procédurales calculées image par image par votre carte graphique, et une caméra qui les relie au fil de votre navigation.
- Three.js r185
- WebGPU
- Shaders TSL
- GSAP
- Web Audio
NAVIGATION : AVANCER · RECULER· FLÈCHES DU CLAVIER
[ 02 · Rendu ] Cyrel
WebGPU d’abord,
WebGL2 en repli
Le moteur ouvre un rendu WebGPU quand le navigateur le propose. Sinon, Three.js bascule sur WebGL2 avec une scène allégée : moins d’étoiles, des sphères moins denses. La résolution est plafonnée pour rester fluide sur les grands écrans.
- WebGPURenderer
- Repli WebGL2
- Résolution plafonnée
[ 03 · Matières ] Seltane
Des surfaces
sans aucune image
- ✓Bruit fractalquatre octaves de bruit dessinent continents et reliefs.
- ✓Jour et nuitun terminateur doux, souligné d’un liseré chaud.
- ✓Atmosphèreun halo de Fresnel qui dépend de l’angle de vue.
- ✓Un seul shaderles couleurs passent en uniforms : toutes les planètes le partagent.
[ 04 · Instruments ] Nérys
Des jauges
tracées au shader
Graduations, crans lumineux et aiguilles sont dessinés à partir des coordonnées de surface, puis animés par une horloge unique partagée par toute la scène.
- Coordonnées UV
- Horloge uniforme
- Rendu additif
[ 05 · Vitesse ] Halvane
Des étoiles
qui s’étirent
Entre deux destinations, chaque étoile devient un segment dont la longueur suit la vitesse du voyage, en un seul appel de dessin. Autour de cette planète : arcs, étincelles et ondes de choc.
- LineSegments
- Mélange additif
- Ondes en boucle
[ 06 · Particules ] Miréa
Toujours
face à vous
Satellites et particules sont des plans orientés vers la caméra à chaque image. Leurs motifs sont dessinés sur un canvas 2D puis envoyés au GPU, et les particules sont recyclées en boucle.
- Billboards
- CanvasTexture
- Recyclage
[ 07 · Réseau ] Orvane
Un circuit
qui circule seul
- ✓Sept nœudsdes cœurs qui pulsent, chacun à sa phase.
- ✓Douze liaisonsdes tubes où le flux défile en continu.
- ✓Des paquetsun par liaison, d’un nœud à l’autre.
- ✓Un haloun disque lumineux qui respire derrière.
[ 08 · Chargement ] Calyxe
Construit
au fil du voyage
Les effets de chaque planète sont bâtis un par un, au plus près de votre position, et leurs shaders compilés en arrière-plan. Sur ordinateur, le moteur 3D attend votre premier geste pour se charger.
- compileAsync
- Chargement différé
- Veille du cockpit
[ 09 · Arrivée ] Vespéra
Un son
synthétisé en direct
Réacteur, sifflement de vitesse et musique de navigation sont générés par Web Audio, avec des oscillateurs, des filtres et du bruit. Deux bruitages enregistrés accompagnent le décollage. Le bouton musique coupe ou relance la boucle.