Un film 3D qui tient dans un seul fichier HTML.
76 secondes au-dessus d’une vallée : un viaduc de pierre, un train à vapeur, un village au bord d’un canal et des montagnes dans la brume. Le terrain, l’herbe, l’eau, la fumée et la musique sont générés par le code dans l’onglet du navigateur. Le fichier ne contient aucun modèle, texture ou enregistrement sonore.
- 76 secondes
- 6 plans
- 1 474 lignes de code
- 0 modèle, texture ou enregistrement
La vidéo est muette. La bande-son générée joue dans la version 3D.
Ce que le code dessine
- 01
Terrain et herbe
Collines, champs et canal viennent d’une fonction de bruit. Environ deux millions de brins d’herbe ploient dans un champ de vent calculé par la carte graphique.
- 02
Viaduc et train
Arches de pierre, rails et traverses suivent une seule ligne de voie. La locomotive fait tourner roues et bielles à la vitesse de sa marche.
- 03
Fumée et eau
Fumée et vapeur sortent de la cheminée par bouffées au rythme des roues. Le canal reflète le viaduc et le ciel.
- 04
Lumière et brume
Soleil bas du soir, ombres longues et brume qui se réchauffe vers le soleil. Bandes cinéma, grain et étalonnage sont appliqués en une passe.
- 05
Son
Échappements au rythme des roues, joints de rail, sifflet, vent, oiseaux et accords doux. Tout est synthétisé avec WebAudio.
Une demande, puis chaque image vérifiée
- 01
La référence
L’idée vient d’une démo de Lentils (@Lentils80) : un survol de vallée avec viaduc et train à vapeur dans un seul fichier, construit avec Claude Opus 5.
- 02
La construction
Claude Code avec Claude Opus 5.5 a écrit la scène, le script de caméra et le son dans un seul fichier sur Three.js r185. La première version était prête en moins d’une heure.
- 03
La vérification
Chaque version a été rendue en images fixes et en vidéo complète à 30 images par seconde, puis revue image par image. Sur une carte RTX 3060, le film tourne à environ 60 images par seconde.
- 04
La correction
Avec le moteur OpenGL de Chrome, l’écran clignotait en noir à partir de la onzième seconde. Une particule de fumée en fin de vie produisait un nombre invalide, et la passe de halo l’étalait sur toute l’image. Une borne a suffi à corriger.
La même méthode pour une scène client
Une scène de ce type peut montrer un produit, un lieu ou un événement. Elle tourne sur un site sans plugin et s’exporte image par image en vidéo pour les réseaux sociaux.
- Scène d’accueil d’une page produit
- Survol d’un lieu ou d’un site touristique
- Bande-annonce d’événement tirée d’une scène en direct
- Courtes boucles pour les réseaux sociaux
Questions sur le film
Que faut-il pour voir la version 3D ?
Un navigateur récent avec WebGL 2 : Chrome, Edge, Firefox ou Safari. Rien à installer.
Est-ce que ça marche sur un téléphone ?
Oui. Sur téléphone, la scène plante environ 620 000 brins d’herbe au lieu de deux millions pour rester fluide. Les téléphones anciens peuvent rester lents.
Comment la vidéo a-t-elle été faite ?
La scène rend exactement n’importe quel instant sur demande. Nous avons capturé 2 280 images en 1080p et les avons assemblées dans le MP4 de cette page.
Pouvez-vous créer une scène de ce type pour nous ?
Oui. Envoyez un court brief via la page contact : ce qui doit être à l’image, où la scène tournera et le délai.
Idée : Lentils (@Lentils80). Code : Claude Opus 5.5 dans Claude Code. Réalisation et vérification : Marketing MIX. x.com/Lentils80