Ich habe gerade einen Raum auf diese Website gestellt. Es ist ein Arbeitszimmer in einem Haus, das es nicht gibt, auf einem Hügel über dem Ozean, und du kannst darin herumgehen, dich hinsetzen und Dinge in die Hand nehmen. Das Haus ist erdacht. Alles, was du darin aufnehmen kannst, ist echt: meine Bücher, die Kurse, die ich belegt habe, die Produkte, die ich gebaut habe, die Parks, die ich besucht habe, und die Empfehlungen, die Kollegen auf LinkedIn für mich geschrieben haben.
Bis hierher waren vier Anläufe nötig, und die ersten drei sind gescheitert. Ich finde, wie sie gescheitert sind, ist nützlicher als der Raum selbst, und darum geht es in diesem Beitrag.
Warum überhaupt three.js
Es fing auf X (Twitter) an. Ich sah dort immer wieder beeindruckende 3D-Arbeiten, Dinge, die Leute mit three.js gebaut hatten, damit sie im Browser laufen, und ich wollte es selbst ausprobieren. Das war wirklich der ganze Grund. Als wir das Ziel für den ersten Anlauf aufschrieben, lautete es schlicht: Es geht darum, etwas in three.js zu bauen. Ich war neugierig.
Versuch eins: zehn Looks für dieselbe Idee
Ende September fing ich mit meinem Blog-Archiv als Thema an: 523 Beiträge, nach Zeit und Thema im Raum angeordnet. Wir bauten sechs Konzepte als echte Renderings: eine Landschaft aus Säulen, einen zweifarbigen Risografie-Druck, eine Sternenkarte, einen Papiersturm, ein Geländerelief und ein winziges Schreibtisch-Diorama. Vier weitere Ideen (ein Buch, ein Baum, eine Druckerei, Tinte in Wasser) kamen bis zu groben Mock-ups. Neun der zehn siehst du unten. Die Landschaft aus Säulen wurde nie gespeichert.
Ich habe alle zehn verworfen. Als wir aufschrieben, warum, war der Schluss einfach. Jeder Versuch war dieselbe Idee, Punkte aus denselben Beiträgen, nur mit einem anderen Renderer. Zehnmal die Technik zu wechseln konnte nicht beheben, dass dem Stück ein echtes Thema fehlte. Wir hatten dieselben Daten außerdem als schlichtes 2D-Diagramm gezeichnet, als die Messlatte, die die 3D-Version überspringen musste. Das ist ein guter Test, den ich jedem empfehle, den 3D um seiner selbst willen reizt.
Versuch zwei und drei: ein echtes Thema und der falsche Kampf
Anfang Oktober versuchte ich es noch einmal, diesmal mit echten Themen: wie Ask Sydney die Quellen hinter einer Antwort findet und wie eines meiner Produkte von innen funktioniert. Die ersten Versionen waren einfach, und sie waren eigentlich für Leute wie mich gemacht, die sich ohnehin dafür interessieren, wie eine Pipeline funktioniert.
Also machten wir für beide eine ordentliche Art-Direction-Runde. Mit Blender gebaute Modelle, eine ausgeleuchtete Umgebung, Bloom, Tiefenschärfe, Nebel und weiche Schatten. Die Stücke waren getestet, barrierefrei und bereit zur Übersetzung. Trotzdem hielt ich sie nicht für gut genug, weil ich sie mit der Concept Art verglich, die ich vor dem Start mit einem Bildmodell erzeugt hatte, und daneben verloren sie jedes Mal.
Hier ist jedes Stück in drei Stufen: die erste Version, die art-directed Version und die Concept Art, mit der ich sie verglich. Zuerst, wie Ask Sydney seine Quellen findet:
Und wie DIALØGUE eine Episode erstellt:
Die Lehre, die wir aufschrieben, war, dass three.js in Echtzeit ein fotorealistisches Offline-Rendering nicht erreichen kann. Ein Standbild darf Minuten für ein einziges Bild aufwenden, um Licht, Tiefenschärfe und jede Textur genau richtig hinzubekommen. Ein Browser hat pro Bild ein paar Millisekunden. Die Regel für den nächsten Anlauf lautete deshalb: 3D in Echtzeit tritt nie im Realismus an. Es gewinnt dadurch, dass es auf die Person davor reagiert, und wenn ein Video das Stück ersetzen könnte, ist das Stück falsch.
Versuch vier, und immer noch viele Absagen
Diese drei Anläufe liefen mit unterschiedlichen Modellen und Tools, darunter DeepSeek und OpenAIs GPT. Keiner davon erreichte meinen Qualitätsanspruch. Der vierte Anlauf, Anfang November, lief mit Claude Opus 5.5 in Claude Code.
Ich würde gern sagen, dass es gleich beim ersten Mal klappte. Das tat es nicht. Vor dem Raum habe ich eine ganze Reihe von Ideen abgelehnt: Wassergläser, die zeigen, wie ein Mediabudget aufgeteilt werden sollte (zu taktisch), ein Tintenstück, eine Landschaft aus geschnittenem Papier zum Darüberfliegen (zu blass), vier Skizzen anderer Welten, ein begehbares Museum meiner Karriere und ein Studio mit sechs Schreibtischen, einer für jede Marketing-Disziplin. Zum Studio hatte ich notiert, es sei „weit entfernt vom Wow-Faktor“, den ich suchte, und „die sechs Schreibtische sind furchtbar“. Das waren sie.
Die Idee, die funktionierte, kam von mir, nicht vom Modell. Was wäre, wenn der Besucher Gast in meinem Traumhaus ist und ich ihm mein Arbeitszimmer zeige? Ich beschrieb den Raum so, wie ich ihn mir vorstelle: der Schreibtisch mit dem Rücken zum Fenster, das Bücherregal, ein langes Sofa und ein Tisch, an dem man sitzt, Kaffee trinkt und redet, ein Kamin, und draußen Bäume und Meereswellen, wie in Big Sur. Als ich die erste lauffähige Version sah, sagte ich: „ja, das ist die Richtung“.
Dann kamen die Details. Ich lehnte die plumpen Sofas ab, einen austauschbaren Tisch, eine hässliche Tür, eine Stehlampe und Bäume, die nicht nach Big Sur aussahen. Verlangt habe ich ein „Arbeitszimmer der Weltklasse, ruhiger Luxus“. Früher im Projekt hatte ich versucht, das Gefühl mit einer guten Hotellobby zu beschreiben, in der der Duft und die Blumen dich sicher und gut aufgehoben fühlen lassen, und mit einer Schüssel Ramen, die „einfach aussieht, aber sehr schwer richtig hinzubekommen ist“. Das ist bis heute die beste Beschreibung, die ich habe.
Links siehst du eine frühe Version des Raums, rechts den Raum heute.
Wie er gebaut ist
Blender baut den Raum und bäckt das Licht in ihn hinein, mit seinem Renderer Cycles, damit der Browser nicht berechnen muss, wie das Sonnenlicht über den Boden fällt. three.js zeichnet den Raum dann live und kümmert sich um alles, was auf dich reagiert: herumgehen, sich hinsetzen, Dinge aufnehmen, bis zum Abend bleiben.
Es gibt eine Ehrlichkeitsregel. Das Haus ist erdacht und sagt das auch, aber alles, was ein Gast aufnimmt, ist echt und hat eine Quelle. Die Texte an den Objekten sind kurz, denn meine Regel für den Raum war, ihn in 3D zu zeigen, mit einer kurzen Zeile und keiner Textwand.
Der Raum funktioniert außerdem in 13 Sprachen, und es gibt eine geschriebene Version für Screenreader und für alle, deren Browser ihn nicht darstellen kann.
Die ersten zehn Sekunden
Vor dem Launch haben wir den Raum mit einem Entwicklungs-Build getestet, der langsamer ist als die echte Website, und zwar mit drei Stellvertreter-Besuchern, jeder mit einer anderen Rolle, einem anderen Gerät und einer anderen Verbindungsgeschwindigkeit, und ohne Erklärung der Seite. Sie waren AI-Agenten, keine echten Menschen, deshalb sehe ich das als Smoke-Test und nicht als Nutzerforschung. Das Ergebnis war trotzdem eindeutig. Der schnellste sah etwa acht Sekunden lang einen schwarzen Bildschirm mit „Willkommen, lass dir Zeit.“ Die anderen beiden sahen die vollen zehn Sekunden Schwarz. Zwei von ihnen sagten, sie wären von selbst gegangen. „Lass dir Zeit“ las sich wie „warte“, und nichts sagte, was die Seite war.
Deshalb zeigt sich jetzt von der ersten Sekunde an ein Standbild des Raums, mit meinem Namen und einer Zeile darunter, und die Parkfotos werden erst geladen, wenn der Raum bereit ist. Daten von echten Besuchern habe ich noch nicht.
Nach dem Launch habe ich weitergemacht, weil ein simuliertes langsames Handy immer noch etwa 8 Sekunden brauchte, bis der Raum live war. Der Browser beginnt jetzt mit dem Herunterladen des Raums zusammen mit der Seite, statt erst nachdem ihr Code geladen ist, die Ansicht des Ozeans kommt in halber Größe an und wird einen Moment später schärfer, und das 3D-Modell selbst ist von 2,8 MB auf 0,81 MB geschrumpft, ohne einen Unterschied, den ich sehen kann. Auf einem simulierten langsamen Handy ist der Raum jetzt in etwa 4,5 Sekunden live. Auf meinem eigenen Handy läuft er flüssig.
Was ich gelernt habe
Geschmack ist wichtiger denn je. Du brauchst den Geschmack und auch das Vokabular, um der Maschine zu sagen, was du dir vorstellst. Die Ideen und die Absagen kamen die ganze Zeit von mir, und die AI-Modelle haben gebaut. Ob es gut wurde, hing davon ab, ob ich sagen konnte, was falsch war (plump, austauschbar, zu blass, nicht Big Sur) und was ich stattdessen wollte. Wenn ich es nicht beschreiben konnte, bekam ich eine sehr gut gemachte Version des Falschen.
Ein Produkt ist ein Mittel zum Zweck, nicht der Zweck selbst. Du musst verstehen, warum du es baust, wem es dient und welche Schlüsse oder Eindrücke die Leute mitnehmen sollen. Die ersten Anläufe begannen bei einer Technik. Der Raum begann bei einem Besucher, der mich nie getroffen hat: was er aufnimmt und was er denkt, wenn er geht. Als das klar war, trafen sich viele Entscheidungen von selbst.
Hat das Modell eine Rolle gespielt? Ich glaube schon. Es ist das erste, mit dem der Raum meinen Anspruch erreicht hat. Wenn ich aber die Notizen aller vier Anläufe noch einmal lese, haben sich das Thema und der Zweck genauso verändert wie das Modell, und ich kann die beiden ehrlich gesagt nicht voneinander trennen.
Den Raum findest du unter chandlernguyen.com/study. Er funktioniert auch auf dem Handy, ich habe meins geprüft. Wenn du schon einmal etwas in 3D mit AI gebaut hast oder es versucht und aufgegeben hast: Was hat dich gestoppt? Mich interessiert, ob es die Tools waren oder die Idee.