Retour

Faon des bois

Un faon se promène dans une forêt de cèdres géants façon Yakushima : le faon est généré et riggé automatiquement avec Tripo, la forêt est entièrement procédurale, et rayons de lumière volumétriques, ombres douces, cycle jour/nuit et vent sont rendus en temps réel — avec enregistrement vidéo directement dans la page.

Auteur: 希彼赫
Essayer en direct
Faon des boisEssayer en direct

À propos de ce projet

« Faon des bois » est une scène three.js en temps réel qui tourne dans le navigateur : un faon se promène dans une forêt de cèdres géants façon Yakushima, tandis que le soleil filtre par les trouées de la canopée, que l’herbe ondule au vent et que les papillons voltigent autour des fleurs. Emmenez-le en promenade, collectez les particules lumineuses, passez du jour à la nuit au clair de lune — ou confiez-le à la caméra cinématographique et enregistrez une vidéo directement dans la page.

Le faon a été créé avec l’API Tripo — génération, low-poly intelligent, vérification de riggabilité et rigging automatique de quadrupède — puis exporté en GLB riggé ; la forêt est entièrement procédurale. Textures de Poly Haven (CC0).

L’expérience est optimale dans un navigateur de bureau avec un clavier ; sur téléphone, touchez le sol pour envoyer le faon marcher et faites glisser pour orbiter la caméra.

Points forts

  1. Promenez le faon avec WASD ou cliquez sur le sol pour l’y envoyer ; maintenez Shift pour trotter et faites glisser pour orbiter la caméra
  2. Traversez les particules lumineuses pour les collecter — rassemblez-les toutes les neuf pour une cascade de carillons tandis que les rayons de lumière s’embrasent ; appuyez sur E ou cliquez sur le faon, et il lève les yeux vers vous
  3. Appuyez sur R pour passer du jour à la nuit au clair de lune, ou sur G pour une rafale qui couche l’herbe et disperse les papillons
  4. Appuyez sur C pour la caméra cinématographique et sur V pour enregistrer une vidéo avec le son directement dans la page ; H masque le panneau des touches

Analyse technique

  • Le faon · Généré et riggé automatiquement avec Tripo

    Le faon sort d’un pipeline de l’API Tripo — génération du modèle, low-poly intelligent, vérification de riggabilité et rigging automatique de quadrupède — et arrive sous forme de GLB d’environ 15 000 triangles, avec un squelette de quadrupède de 41 os et des textures PBR. La page le charge avec GLTFLoader et le met à l’échelle pour une hauteur de tête d’environ 1,55 m, la taille d’un cerf sika.

    Le rig Tripo est nommé proprement : chaque patte est découpée de Limb_0 à Limb_3, et la colonne, le cou et la tête sont numérotés dans l’ordre ; le code retrouve donc chaque patte, la colonne et le cou par leur nom et les pilote directement — sans mapper les os un par un à la main. Un shader teinte le pelage du brun-roux de la robe d’été du cerf sika et sème une ligne de taches claires le long du dos ; les taches sont ancrées aux coordonnées de la bind pose, elles restent donc en place sur la peau quand le faon marche, et à contre-jour la fourrure se borde d’un liseré chaud.

  • Démarche · Une marche calculée en direct sur le rig

    La marche est calculée par IK sur ce rig au chargement de la page. D’abord les trajectoires des sabots : au sol, chaque sabot glisse vers l’arrière exactement à la vitesse du corps ; en l’air, il se soulève, se tend vers l’avant et se repose. Les pattes avancent dans l’ordre arrière gauche, avant gauche, arrière droite, avant droite, chacune au sol environ 70 % du temps, tandis que le corps ne fait que tanguer et rouler légèrement. Chaque patte est résolue par une IK à trois segments qui garde les segments supérieur et inférieur à leur angle de bind pose, avec un pli supplémentaire du poignet quand une patte avant se lève. Toute la démarche est précalculée en une boucle de 48 images confiée à AnimationMixer.

    La vitesse de lecture est la vitesse du corps divisée par la vitesse de recul des sabots : que le faon flâne ou trotte avec Shift enfoncé, ses sabots ne glissent jamais. À l’arrêt, le code fait pivoter les quatre os du haut du dos jusqu’à la tête : le faon broute un moment, relève la tête pour regarder sur le côté, puis la rabaisse — et dès qu’il se remet en marche, le cou se redresse.

  • La forêt · Entièrement générée par le code

    Hormis le faon, tout dans la forêt est généré par le code ; les seules textures sont des jeux CC0 de Poly Haven pour l’écorce de cèdre, la roche moussue et le sol forestier. Les cèdres géants culminent à environ 44 m : les arbres principaux au premier plan ont leurs propres maillages, tandis que les rangées à l’arrière sont dessinées par lots avec InstancedMesh, et la courbure des troncs suit une même formule dans le shader et en JS pour que les branches restent attachées aux troncs courbés. Une strate de jeunes arbres de 8 à 17 m pousse entre les géants, et arbustes, fougères, rochers et troncs tombés garnissent le sous-bois.

    Le sol est couvert de 120 000 brins d’herbe instanciés qui ondulent dans le vertex shader ; appuyez sur G pour une rafale de six secondes qui couche l’herbe et disperse les papillons. L’herbe sait aussi où se trouve le faon et s’écarte autour de lui. Dix-huit papillons voltigent paresseusement autour des fleurs jusqu’à ce que le faon s’approche et les effraie, et 70 feuilles qui tombent, avec pétiole et nervures, tourbillonnent vers le sol et s’illuminent en traversant les rayons.

  • Lumière · Rayons volumétriques et taches de soleil

    La canopée est faite de quelques centaines d’amas de feuilles aplatis ; à mesure que chacun est placé, il est projeté au sol le long des rayons du soleil et tenu à l’écart de 29 points de chute prédéfinis, pour que la lumière tombe en faisceaux distincts. La lumière volumétrique avance pas à pas le long de chaque rayon de vue en échantillonnant la shadow map du soleil à demi-résolution, puis elle est composée avec le brouillard de distance, le tone mapping ACES, le bloom et le FXAA.

    Les ombres sont réécrites en ombres douces PCSS — plus on s’éloigne de l’objet qui fait ombre, plus le bord s’adoucit — et les taches de lumière qui filtrent à travers la canopée sont calculées dans l’espace de la lumière, si bien que l’herbe, l’écorce, le faon et les rayons partagent le même motif. La poussière en suspension ne brille qu’à l’intérieur des rayons et disparaît presque dans l’ombre. Appuyez sur R et la scène bascule vers la nuit en trois secondes : le soleil devient un clair de lune froid, les rayons faiblissent et les particules luisent comme des lucioles.

  • Caméra et capture · Filmez directement dans la page

    Appuyez sur C pour la caméra cinématographique : elle tourne lentement autour du faon en montant et en descendant, toute l’interface masquée. Appuyez sur V pour enregistrer — MediaRecorder capture le canvas WebGL et le son à 60 fps et 16 Mbit/s, en MP4 si le navigateur le permet, sinon en WebM, et le niveau de qualité reste verrouillé pendant l’enregistrement pour que la résolution ne saute jamais en cours de clip.

    Tous les sons sont synthétisés en direct avec Web Audio : un carillon pour chaque particule collectée, qui monte le long d’une gamme pentatonique, et un souffle quand la rafale se lève. La résolution s’adapte à la fréquence d’images et baisse d’un cran dès que des images sautent ; 1 / 2 / 3 verrouillent à la main la qualité basse, moyenne ou haute.