N° 05 · Étude de cas · Scène 3D en direct
Sous voiles
Une scène marine en 3D, en direct, à partir d'un prompt de cinq phrases
Un voilier en mer, rendu en direct dans votre navigateur: des vagues calculées comme dans les studios de cinéma, un ciel éclairé selon la physique de la lumière du soleil, et quatre types de météo. Claude Code a tout construit à partir d'un seul prompt court, sans modèle 3D, sans photo et sans fichier image.
Votre navigateur ne peut pas afficher la scène 3D en direct: voici donc une image fixe.
Comment l'utiliser
- Faire glisser
- Faites le tour du bateau du regard. Sur un téléphone, balayez de côté.
- Pincer
- Rapprochez-vous ou éloignez-vous. Sur un ordinateur, Ctrl et la molette, ou simplement la molette en plein écran.
- Météo
- Heure dorée, grain, brume de mer ou clair de lune. La mer change avec le vent.
- 1 à 4
- Une fois que vous avez cliqué sur la scène: changez la météo. Les flèches servent à regarder autour, + et - à zoomer, la barre d'espace à mettre en pause.
Ce que vous voyez
Tout ce qui se trouve dans ce cadre est produit par du code, en ce moment même, dans votre navigateur. Il n’y a ni modèle 3D de bateau, ni photo de ciel, ni vidéo d’eau, ni fichier image. La mer, les nuages, la coque, les voiles et le logo sur la grand-voile sont tous calculés par la puce graphique de votre appareil, des dizaines de fois par seconde. Passez d’une météo à l’autre et observez ce qui change: les vagues grossissent ou s’aplatissent avec le vent, la lumière suit le soleil ou la lune, et dans le grain vous avez de la pluie, des moutons et des éclairs.
Je voulais voir jusqu’où Claude Code peut aller en 3D, alors je lui ai donné cinq phrases (elles sont en bas de cette page) et je l’ai laissé travailler. L’une des cinq contient une faute de frappe: « floating in the clean ». Claude Code l’a interprétée comme la pleine mer et a continué.
Ce que le prompt laissait ouvert
Le prompt demande un bateau, aussi photoréaliste que possible, dans une météo et une lumière dignes du cinéma, avec le Good AI Guide sur la grand-voile. Et il demande three.js, une bibliothèque gratuite pour la 3D dans le navigateur. Toutes les autres décisions ont été prises par Claude Code. En voici quelques-unes:
Des vagues qui se comportent comme des vagues. La mer est calculée comme le font les studios de cinéma et de jeu vidéo: des mesures de la façon dont le vent forme les vagues (les océanographes appellent le résultat le spectre JONSWAP) sont transformées en une surface mouvante grâce à une transformée de Fourier rapide, un outil classique du traitement du signal, à trois échelles différentes et à chaque image. Plus de vent, ce sont des vagues plus hautes, plus longues et plus raides, et de l’écume là où les crêtes se renversent.
Un bateau qui flotte dessus. Les vagues les plus longues sont additionnées une seconde fois, sur le processeur, en cinq points sous la coque, et le bateau les suit comme s’il était monté sur ressorts. C’est pour cela qu’il tangue et roule avec un certain poids au lieu de copier chaque ride.
Une lumière qui suit la physique. Le ciel vient d’un modèle de la diffusion de la lumière du soleil dans l’air, la brume et l’ozone, publié en 2020 par un chercheur en informatique graphique d’Epic Games. C’est pour cela que le soleil bas devient orange, que le ciel au-dessus reste bleu, et que le clair de lune donne le même ciel, en beaucoup plus sombre. Le bateau est éclairé par le même soleil, à travers le même air.
Des voiles qui s’illuminent. La toile de voile laisse passer la lumière. Avec le soleil derrière elles, les voiles se mettent à luire, et les coutures et les lattes apparaissent en lignes plus sombres. Le marquage de l’autre face de la grand-voile transparaît aussi, faiblement et en miroir, comme sur une vraie voile. Chaque face a son propre marquage, placé pour se lire à l’endroit depuis ce côté.
Des détails que personne n’a mentionnés. Le port d’attache du bateau est Bâle, celui de tous les yachts qui naviguent en mer sous pavillon suisse, et le drapeau suisse flotte à sa poupe. Il laisse un sillage, ses feux de navigation s’allument la nuit, la caméra monte et descend avec la houle comme sur un bateau caméra, et sur un écran de téléphone étroit le cadre s’élargit pour que tout le bateau reste visible.
Il porte aussi un nom sur son tableau arrière, Brilliant New Hire: c’est la brillante nouvelle recrue, l’image que j’utilise pour dire ce qu’est l’IA au travail. Ce nom ne vient pas des cinq phrases. Claude Code travaillait dans le code de ce site et pouvait lire mes notes sur le site et sur moi: il connaissait donc la brillante nouvelle recrue et savait que je vis en Suisse. C’est de là que viennent le nom, le port d’attache et le drapeau, et une nouvelle conversation avec le même prompt ne vous les donnera pas. C’est le sujet de Votre IA n’a aucune idée de ce que fait votre entreprise, en miniature: ce qu’une IA sait de vous et de votre travail se voit dans ce qu’elle produit.
Ce qui n’est pas réel
Une partie est truquée:
- Les nuages sont plats: une couche peinte avec des astuces d’éclairage. Regardez-les un moment et vous le verrez.
- Le bateau ne fait pas bouger l’eau. Il n’y a pas de simulation de fluide: la mer est simplement tenue hors de la coque, et l’écume est peinte là où une vraie coque la produirait.
- Les voiles ne prennent pas vraiment le vent. Leur forme vient d’une formule (l’ouverture de la bôme, le vrillage de la voile vers le haut), plus un léger battement.
- La pluie ne tombe qu’à proximité de la caméra, et l’éclair est un effet dessiné.
- Les téléphones et les tablettes reçoivent une version allégée, et certains une version plus simple encore: moins de vagues, des nuages plus simples et pas de reflet du bateau dans l’eau. Si les images arrivent encore trop lentement, la scène baisse d’elle-même sa résolution.
Comment ça s’est passé
Claude Code a planifié la scène, l’a écrite et a vérifié son propre travail en boucle: rendre une image dans un navigateur sans fenêtre (piloté par un script, pour pouvoir faire des captures d’écran), regarder la capture, corriger ce qui n’allait pas, et recommencer. Il a fait le tour de cette boucle une quarantaine de fois. Voici une partie de ce qu’il a repéré:
- Le soleil apparaissait comme un point noir. Il était plus lumineux que ce que le format d’image pouvait stocker, et le dépassement le rendait noir.
- La pluie était invisible. Chaque goutte était tournée dos à la caméra, et les puces graphiques ignorent les surfaces qu’elles voient de dos.
- Le grain ressemblait d’abord à une douce soirée grise. La brume sous le nuage d’orage était éclairée comme si le soleil l’atteignait.
- Les voiles avaient des rayures, parce que chaque voile est une seule surface et qu’elle projetait des ombres sur elle-même.
Un de ses propres tests a signalé des vagues trop hautes: 2,3 mètres pour un vent avec lequel une règle empirique de manuel prévoit 1,6 mètre. Claude Code a compris que cette règle et le spectre de vagues sur lequel repose la scène divergent déjà d’environ 30 %, a pris le spectre comme référence, et a modifié le test plutôt que la mer.
La scène terminée compte environ 6 300 lignes de code réparties sur 19 fichiers, tests des calculs compris. Je n’en ai pas modifié une ligne.
Le prompt ne contient aucune donnée d’entreprise: vous pouvez donc l’essayer avec ce que vous avez, y compris l’assistant que votre employeur vous a fourni. Si vous voulez voir ce que c’est de travailler avec un agent de programmation, je commencerais par Claude Code: quand l’IA arrête de parler et se met à agir.
Le prompt, mot pour mot
Copiez-le, collez-le, voyez ce que vous obtenez
Ces cinq phrases sont tout ce que j'ai tapé. Claude Code pouvait aussi lire le code de ce site et mes notes à son sujet. Si vous essayez, mettez le nom de votre propre entreprise sur la voile.
For the "What's possible" section, I want to look into your 3D modelling abilities and your prowess with three.js. Build a 3D render of a boat floating in the clean, as high quality and photo realistic as possible. Create cinematic conditions through weather and light. The boat should have Good AI Guide branding on its main sail. Use three.js.
Un assistant de chat comme Claude, ChatGPT ou Gemini vous donnera probablement une version plus simple, dans un seul fichier. Pour une scène comme celle-ci, il vous faut plutôt un agent de programmation comme Claude Code ou Codex, capable de créer des fichiers, de les exécuter dans un navigateur et de regarder ce qu'il a produit. Ici, Claude Code a parcouru de lui-même cette boucle « rendu, puis coup d'œil » une quarantaine de fois. Si le vôtre ne le fait pas, demandez-le-lui.