Je viens de mettre une pièce sur ce site. C’est un cabinet de travail dans une maison qui n’existe pas, sur une colline au-dessus de l’océan, et tu peux t’y promener, t’asseoir et prendre des objets en main. La maison est imaginaire. Tout ce que tu peux y prendre en main est réel : mes livres, les cours que j’ai suivis, les produits que j’ai construits, les parcs que j’ai visités et les recommandations que des collègues ont écrites pour moi sur LinkedIn.
Il a fallu quatre tentatives pour en arriver là, et les trois premières ont échoué. Je pense que la façon dont elles ont échoué est plus utile que la pièce elle-même, et c’est donc de cela que parle cet article.
Pourquoi three.js, au fond
Tout a commencé sur X (Twitter). J’y voyais sans cesse de superbes réalisations 3D, des choses que des gens avaient construites pour tourner dans le navigateur avec three.js, et j’avais envie d’essayer moi-même. C’était vraiment toute la raison. Quand nous avons écrit l’objectif de la première tentative, c’était simplement que le but est de construire quelque chose en three.js. J’étais curieux.
Premier essai : dix visages de la même idée
Fin septembre, je suis parti de mon archive de blog comme sujet : 523 articles, disposés dans l’espace par date et par thème. Nous avons construit six concepts en vrais rendus : un paysage de colonnes, une impression risographique à deux encres, une carte des étoiles, une tempête de papier, un relief de terrain et un minuscule diorama de bureau. Quatre autres idées (un livre, un arbre, une imprimerie, de l’encre dans l’eau) ne sont allées que jusqu’à des maquettes grossières. Neuf des dix sont ci-dessous. Le paysage de colonnes n’a jamais été sauvegardé.
Je les ai tous rejetés. Quand nous avons écrit pourquoi, la conclusion était simple. Chaque tentative était la même idée, des points tirés des mêmes articles, avec un moteur de rendu différent. Changer dix fois de technique ne pouvait pas corriger le fait que l’œuvre n’avait pas de vrai sujet. Nous avions aussi dessiné les mêmes données sous forme de simple graphique en 2D, comme le seuil que la version 3D devait franchir, et c’est un bon test que je recommande à quiconque est tenté par la 3D pour elle-même.
Essais deux et trois : un vrai sujet, et le mauvais combat
Début octobre, j’ai réessayé avec de vrais sujets : comment Ask Sydney trouve les sources derrière une réponse, et comment l’un de mes produits fonctionne de l’intérieur. Les premières versions étaient simples, et elles étaient vraiment faites pour des gens comme moi, qui se soucient déjà du fonctionnement d’un pipeline.
Nous avons donc fait une vraie passe de direction artistique sur les deux. Des modèles réalisés dans Blender, un environnement éclairé, du bloom, de la profondeur de champ, du brouillard et des ombres douces. Les créations étaient testées, accessibles et prêtes à être traduites. Je les ai pourtant jugées insuffisantes, parce que je les comparais aux concept arts que j’avais générés avec un modèle d’images avant de commencer, et à côté, elles perdaient à chaque fois.
Voici chaque création en trois étapes : la première version, la version avec direction artistique, et le concept art auquel je la comparais. D’abord, comment Ask Sydney trouve ses sources :
Et comment DIALØGUE fabrique un épisode :
La leçon que nous avons écrite, c’est que le three.js en temps réel ne peut pas égaler un rendu hors ligne photoréaliste. Une image fixe peut passer des minutes sur une seule image, pour régler exactement l’éclairage, la profondeur de champ et chaque texture. Un navigateur dispose de quelques millisecondes par image. La règle pour l’essai suivant est donc devenue : la 3D en temps réel ne rivalise jamais sur le réalisme. Elle gagne en répondant à la personne qui est devant, et si une vidéo pouvait remplacer la création, alors la création est mauvaise.
Quatrième essai, et encore beaucoup de non
Ces trois tentatives ont utilisé différents modèles et outils, dont DeepSeek et le GPT d’OpenAI. Aucune n’a atteint mon niveau d’exigence. La quatrième tentative, début novembre, s’est faite avec Claude Opus 5.5 dans Claude Code.
J’aimerais pouvoir dire que cela a marché du premier coup. Ce n’est pas le cas. Avant la pièce, j’ai dit non à un ensemble de verres d’eau montrant comment répartir un budget média (trop tactique), à une création à l’encre, à un paysage de papier découpé à survoler (trop fade), à quatre esquisses d’autres mondes, à un musée de ma carrière où l’on pouvait se promener, et à un studio avec six bureaux, un pour chaque discipline du marketing. Ma note sur le studio disait qu’il était « très loin du facteur wow » que je cherchais et que « les six bureaux sont affreux ». Ils l’étaient.
L’idée qui a marché venait de moi, pas du modèle. Et si le visiteur était un invité dans la maison de mes rêves, et que je lui montrais mon cabinet de travail ? J’ai décrit la pièce telle que je l’imagine : le bureau, dos à la fenêtre, la bibliothèque, un long canapé et une table pour s’asseoir, boire un café et discuter, une cheminée, et dehors, des arbres et des vagues, comme à Big Sur. Quand j’ai vu la première version qui tournait, j’ai dit « oui, c’est la bonne direction ».
Puis sont venus les détails. J’ai rejeté les canapés trop rembourrés, une table banale, une porte laide, un lampadaire et des arbres qui ne ressemblaient pas à Big Sur. Ce que j’ai demandé, c’était un « cabinet de travail de classe mondiale, au luxe discret ». Plus tôt dans le projet, j’avais essayé de décrire cette sensation avec le hall d’un bon hôtel, où l’odeur et les fleurs te donnent le sentiment d’être en sécurité et que l’on prend soin de toi, et avec un bol de ramen, qui « a l’air simple, mais c’est très difficile de le réussir ». C’est toujours la meilleure description que j’aie.
À gauche, une première version de la pièce, et à droite, la pièce d’aujourd’hui.
Comment elle est faite
Blender construit la pièce et y cuit la lumière, avec son moteur de rendu Cycles, pour que le navigateur n’ait pas à calculer comment le soleil tombe sur le sol. three.js dessine ensuite la pièce en direct et gère tout ce qui réagit à tes gestes : marcher, s’asseoir, prendre des objets en main, rester jusqu’au soir.
Il y a une règle d’honnêteté. La maison est imaginaire et le dit, mais tout ce qu’un invité prend en main est réel et a une source. Les mots sur chaque objet sont courts, car ma règle pour la pièce était de la montrer en 3D, avec une seule ligne courte et pas de mur de texte.
La pièce fonctionne aussi en 13 langues, et elle a une version écrite pour les lecteurs d’écran et pour quiconque a un navigateur incapable de l’afficher.
Les dix premières secondes
Avant le lancement, nous avons testé la pièce sur une version de développement, plus lente que le vrai site, avec trois visiteurs fictifs, chacun avec un rôle, un appareil et une vitesse de connexion différents, et sans aucune explication de la page. C’étaient des agents d’IA, pas de vraies personnes, donc je traite cela comme un test de fumée plutôt que comme de la recherche. Le résultat était pourtant clair. Le plus rapide a vu un écran noir avec « Bienvenue, prenez votre temps. » pendant environ huit secondes. Les deux autres ont vu du noir pendant les dix secondes entières. Deux d’entre eux ont dit qu’ils seraient partis d’eux-mêmes. « Prenez votre temps » a été lu comme « attendez », et rien ne disait ce qu’était la page.
Une image fixe de la pièce s’affiche donc désormais dès la première seconde, avec mon nom et une ligne dessous, et les photos de parcs ne se chargent qu’une fois la pièce prête. Je n’ai pas encore de données de vrais visiteurs.
Après le lancement, j’ai continué, parce qu’un téléphone lent simulé mettait encore environ 8 secondes à devenir actif. Le navigateur commence maintenant à télécharger la pièce en même temps que la page, au lieu d’attendre que son code soit chargé, la vue sur l’océan arrive à moitié de sa taille et se précise un instant plus tard, et le modèle 3D lui-même est passé de 2,8 MB à 0,81 MB, sans aucune différence que je puisse voir. Sur un téléphone lent simulé, la pièce devient maintenant active en environ 4,5 secondes. Sur mon propre téléphone, c’est fluide.
Ce que j’ai appris
Le goût compte plus que jamais. Il faut avoir le goût, et aussi le vocabulaire, pour demander à la machine de créer ce qu’on a en tête. Tout au long du projet, les idées et les non étaient les miens, et les modèles d’IA ont fait la construction. Ce qui a décidé si cela devenait bon, c’était ma capacité à dire ce qui n’allait pas (trop rembourré, banal, trop fade, pas Big Sur) et ce que je voulais à la place. Quand je n’arrivais pas à le décrire, j’obtenais une version très bien faite de la mauvaise chose.
Un produit est un moyen, pas une fin en soi. Il faut comprendre pourquoi on le construit, qui il sert et quelles conclusions ou quelles impressions on veut laisser aux gens. Les premières tentatives sont parties d’une technique. La pièce est partie d’un visiteur qui ne m’a jamais rencontré : ce qu’il prend en main et ce qu’il pense en repartant. Une fois cela clair, beaucoup de décisions se sont prises toutes seules.
Le modèle a-t-il compté ? Je pense que oui. C’est le premier qui a fait passer la pièce au-dessus de mon niveau d’exigence. Pourtant, quand je relis les notes des quatre tentatives, le sujet et le but ont changé autant que le modèle, et honnêtement, je n’arrive pas à séparer les deux.
La pièce est à chandlernguyen.com/study. Elle fonctionne aussi sur téléphone, j’ai vérifié sur le mien. Si tu as construit quelque chose en 3D avec l’IA, ou essayé et abandonné, qu’est-ce qui t’a arrêté ? Je suis curieux de savoir si c’étaient les outils ou l’idée.