このサイトに、部屋をひとつ公開しました。実在しない家の書斎で、海を見下ろす丘の上にあります。歩き回ったり、腰を下ろしたり、ものを手に取ったりできます。家は想像上のものです。ただ、そこで手に取れるものはすべて本物です。私の本、受講したコース、作ったプロダクト、訪れた公園、そして同僚たちがLinkedInで書いてくれた推薦文です。
ここに至るまでに4回かかり、最初の3回は失敗でした。部屋そのものより、その失敗の仕方のほうが役に立つと思うので、この記事ではそれを書きます。
そもそもなぜthree.jsなのか
きっかけはX（Twitter）でした。ブラウザで動くthree.jsで作られた素晴らしい3D作品をたくさん見かけて、自分でも試してみたくなったのです。理由は本当にそれだけでした。最初の挑戦の目標を書き出したときも、three.jsで何かを作ること自体が目的、というものでした。ただ興味があったのです。
1回目：同じアイデアの10通りの見せ方
9月下旬、題材にブログのアーカイブを選んで始めました。523本の記事を、時間とトピックで空間に並べるものです。実際にレンダリングしたコンセプトを6つ作りました。柱の風景、2色刷りのリソグラフ、星図、紙の嵐、地形のレリーフ、小さな机のジオラマです。さらに4つのアイデア（本、木、印刷室、水に落ちたインク）は、ラフなモックまで進みました。10個のうち9個を下に載せます。柱の風景は保存していませんでした。
10個とも却下しました。なぜかを書き出してみると、結論は単純でした。どの挑戦も同じアイデアで、同じ記事から作った点の集まりを、違うレンダラーで描いただけだったのです。技法を10回変えても、作品に本当の題材がないという事実は直せませんでした。同じデータを、3D版が超えるべき基準として、ただの2Dチャートにも描きました。3Dそのものに惹かれている人にはぜひ勧めたい、良いテストです。
2回目と3回目：本当の題材と、的外れな戦い
10月の初めに、今度は本当の題材でもう一度挑みました。Ask Sydney（シドニー）が回答の裏づけとなる情報源をどう見つけるか、そして私のプロダクトのひとつが内部でどう動くか、です。最初のバージョンはシンプルで、実際のところ、私のようにパイプラインの仕組みにもともと関心がある人向けのものでした。
そこで、両方に対してきちんとしたアートディレクションを行いました。Blenderで作ったモデル、光を作り込んだ環境、ブルーム、被写界深度、フォグ、柔らかい影です。作品はテスト済みで、アクセシビリティにも対応し、翻訳もできる状態でした。それでも、まだ十分ではないと私は判断しました。始める前に画像モデルで生成したコンセプトアートと比べていて、それと並べると毎回負けていたからです。
それぞれの作品を3つの段階で並べます。最初のバージョン、アートディレクション後のバージョン、そして比べていたコンセプトアートです。まず、Ask Sydneyが情報源を見つける仕組みです。
次に、DIALØGUE（ダイアログ）がエピソードを作る仕組みです。
そのとき書き出した教訓は、リアルタイムのthree.jsはフォトリアルなオフライン・レンダリングにはかなわない、というものでした。静止画なら1フレームに何分もかけて、光も被写界深度もすべてのテクスチャも完璧に整えられます。ブラウザには、1フレームあたり数ミリ秒しかありません。そこで次の挑戦のルールは、リアルタイム3Dはリアルさでは競わない、になりました。目の前にいる人に反応することで勝つものであり、動画で置き換えられるなら、その作品は間違っている、ということです。
4回目、そしてまだまだ続いたノー
この3回は、DeepSeekやOpenAIのGPTなど、異なるモデルとツールを使いました。どれも私の基準には届きませんでした。11月初めの4回目は、Claude CodeでClaude Opus 5.5を使いました。
最初からうまくいったと言えたらいいのですが、そうではありませんでした。部屋にたどり着く前に、私はいくつものものにノーと言いました。メディア予算をどう配分すべきかをグラスの水で示すもの（戦術的すぎる）、インクの作品、上空を飛んで見渡す切り紙の風景（平凡すぎる）、別の世界を描いた4つのスケッチ、歩いて回れる私のキャリアの博物館、そしてマーケティングの分野ごとに1つずつ、6つの机が並ぶスタジオです。スタジオについての私のメモは、求めていた「わっ」という驚きから「ほど遠い」ものであり、「6つの机はひどい」というものでした。実際、ひどいものでした。
うまくいったアイデアは、モデルではなく私から出ました。訪れる人が、私の夢の家に招かれた客だったらどうだろう。そして、その客に私の書斎を見せるのです。私は思い描く部屋をこう説明しました。窓を背にした机、本棚、長いソファと、腰かけてコーヒーを飲みながら話せるテーブル、暖炉、そして外には木々と波の寄せる海。Big Surのような景色です。最初に動くバージョンを見たとき、私は「そう、この方向だ」と言いました。
それから細部に入りました。ふくらんだソファ、ありきたりなテーブル、醜いドア、フロアランプ、Big Surに見えない木々は却下しました。私が頼んだのは「世界クラスの、静かな贅沢を感じる書斎」でした。プロジェクトの早い段階で、この感覚を、においや花で安心して大切にされていると感じる良いホテルのロビーと、「見た目はシンプルなのに、きちんと作るのは本当に難しい」ラーメンの一杯にたとえて説明しようとしていました。今でもこれが一番うまい説明だと思っています。
左が部屋の初期のバージョン、右が今の部屋です。
作り方
Blenderが部屋を作り、Cyclesレンダラーで光を焼き込みます。そのため、床に日光がどう落ちるかをブラウザが計算する必要はありません。そのうえでthree.jsが部屋をリアルタイムで描画し、あなたに反応するすべてを担います。歩く、座る、ものを手に取る、夕方までそこにいる、といったことです。
正直さのルールがひとつあります。家は想像上のもので、そうだと明記しています。ただ、客が手に取るものはすべて本物で、出どころがあります。それぞれのものに添える言葉は短くしています。部屋のルールが、3Dで見せ、短い1行にとどめ、長い文章の壁は作らない、というものだったからです。
部屋は13の言語で動きます。また、スクリーンリーダー向けや、ブラウザが描画できない人向けに、文章版も用意しています。
最初の10秒
公開の前に、本番サイトより遅い開発ビルドで部屋をテストしました。3人の代役の訪問者に、それぞれ別の役割、端末、回線速度を与え、ページについての説明はしませんでした。彼らは生身の人間ではなくAIエージェントなので、これは調査ではなく簡易な動作確認として扱っています。それでも、結果ははっきりしていました。一番速かった1人は、「ようこそ、どうぞごゆっくり。」と出る黒い画面を約8秒間見ていました。残りの2人は、10秒間ずっと黒い画面でした。2人は、自分なら離れていたと答えました。「ごゆっくり」は「待って」と読めてしまい、このページが何なのかを伝えるものは何もなかったのです。
そこで今は、部屋の静止画が最初の1秒から表示され、その下に私の名前と1行が添えられます。公園の写真は、部屋の準備ができてから読み込まれます。実際の訪問者のデータは、まだありません。
公開後も改善を続けました。低速のスマートフォンを模したテストでも、動き出すまでに約8秒かかっていたからです。今は、ブラウザがコードの読み込みを待たず、ページと同時に部屋のダウンロードを始めます。海の眺めは半分のサイズで先に届き、少し遅れて鮮明になります。3Dモデル自体は2.8 MBから0.81 MBになり、見た目に違いは感じられません。低速のスマートフォンを模したテストでは、部屋は約4.5秒で動き出すようになりました。私自身のスマートフォンでは、なめらかに動きます。
学んだこと
感性は、これまで以上に大切です。 頭の中にあるものを機械に作ってもらうには、感性と、それを言い表す語彙が必要です。最初から最後まで、アイデアとノーは私のもので、組み立てたのはAIモデルでした。良いものになるかどうかを分けたのは、何が違うのか（ふくらんでいる、ありきたり、平凡すぎる、Big Surではない）と、代わりに何が欲しいのかを、私が言葉にできたかどうかです。言葉にできなかったときは、間違ったものをとてもよくできた形で受け取りました。
プロダクトは目的ではなく、手段です。 なぜ作るのか、誰の役に立つのか、人々にどんな結論や印象を残したいのかを理解している必要があります。最初の挑戦は、技法から始まっていました。部屋は、私と会ったことのない訪問者から始まりました。その人が何を手に取り、帰るときに何を思うか。そこが明確になると、多くの判断はひとりでに決まっていきました。
モデルは重要だったのでしょうか。重要だったと思います。部屋を私の基準に到達させたのは、このモデルが初めてでした。ただ、4回分のメモを読み返すと、題材と目的もモデルと同じくらい変わっていて、正直なところ、その2つを切り分けることはできません。
部屋はchandlernguyen.com/studyにあります。スマートフォンでも動きます。私のもので確認しました。AIで3Dの何かを作ったことがある方、あるいは挑戦してあきらめた方は、何があなたを止めましたか。道具だったのか、アイデアだったのか、知りたいです。