NOCTE #00｜AIと一緒に、歩ける3D空間の土台を作る

はじめに

水面に光が映り、立方体が静かに浮かぶ。そんな空間をWebブラウザで自由に歩けるようにする、NOCTE — A Quiet Space to Explore の制作を始めました。

AIに実装を手伝ってもらい、Blenderで形を作り、React Three FiberでWebへ持ち込む。完成までの過程を、全8回の制作ログとして残していく予定です。

目指す空間の参考画像です。今回の実装画面ではありません。

第0回で作るのは、この景色を支える土台です。Unityの初期シーンのように、白い地面と太陽光を置き、まずは歩ける状態にします。今回は、広さを決める、移動できるようにする、性能を測る。この三つを進めます。

• 広さの基準：1 unit＝1mとし、200m四方を仮に設定する。
• 歩ける操作：マウスで見回し、歩く・走る・跳ぶ。
• 比較できる記録：今の描画性能と通信量を残す。

AIにまとめて作ってもらう方法もありますが、後から形や配置を調整するなら、何を足したのか分かる状態で進めた方が扱いやすいと思うのです。水面やモデルを加える前に、空間の寸法と動作の基準を用意しておきます。

この記事では、細かなコード解説よりも、AIに何を頼み、できたもののどこを確かめたかを中心に紹介します。キーボードとマウスのあるPCを使い、手順を追いながら試せる構成です。

STEP 1｜制作環境を用意する

最初に、AIへNext.jsとTypeScriptを使った制作環境の準備を頼みました。3Dの描画にはThree.js、そのシーンをReactで組み立てるためにReact Three Fiber（R3F）を使います。

役割を大まかに分けると、Reactが画面や設定の状態を管理し、Three.jsが3Dを描画し、R3Fが両者をつなぐ、という関係です。Blenderで形を作るのは次回からになります。

用語の図解は、タップすると原寸画像を開けます。

以下の指示例は、実際に渡した指示を、記事で使いやすい長さに整理したものです。一度にすべて作らせず、各段階で起動と表示を確かめてから先へ進めます。

Next.jsとTypeScriptで、ブラウザ上に3D空間を作るための最小構成を用意してください。Three.js、React Three Fiber、Dreiを導入し、互換性と使用バージョンを確認してください。まずはローカル起動と本番ビルドまで確かめ、移動や演出はまだ追加しないでください。

Next.jsのプロジェクトに3D用のライブラリを追加する場合、基本となるコマンドは次のとおりです。Node.jsとnpmが使える環境で、プロジェクトのフォルダを開いて実行します。

npm install three @react-three/fiber @react-three/drei

これはライブラリを追加するためのコマンドで、これだけで3D画面が完成するわけではありません。今回はAIが設定ファイルや画面を用意し、バージョンを固定して導入しました。ReactとR3Fの対応などは、R3F公式の導入ガイドでも確認できます。

起動は npm run dev。ブラウザに準備用の画面が表示されたら、次の段階へ進みます。

STEP 2｜広さを決め、歩けるようにする

今回は、1 unit＝1m を共通のルールにしました。後からBlenderで作るモデルも、この基準に合わせます。

空間の広さは、100m・150m・200m四方の候補を比較しました。ここで比べたのは実際に歩いた時間ではなく、移動速度を4m/sとしたときの計算上の目安です。

障害物のない直線移動なら「距離÷速度」で求められます。4m/sは、この体験のために選んだ設定で、現実の一般的な歩行速度を再現した値ではありません。

ひとまず200m四方を仮採用し、目線は1.65m、垂直方向の視野角（FOV）は60度にしました。寸法だけで広さの感じ方が決まるわけではないので、歩けるようにしてから調整します。

200m四方の白い地面と太陽光を用意してください。1 unit＝1m、目線1.65m、垂直FOV60度、歩行4m/sを初期値にします。WASD移動、マウスでの見回し、Shiftで走行、Spaceでジャンプに対応させてください。Escで操作を解除し、Rで初期位置へ戻れるようにしてください。

できた空間には、距離の目安になるグリッドと境界線も加えました。走行速度は歩行の1.75倍、7m/sです。

STEP 3｜何も置いていない今を測る

後からモデルや水面を加えたとき、見た目と一緒に動作も変わります。そこで、まだ何も置いていない状態を、比較の出発点として記録することにしました。

画面の隅にFPS、Frame Time、Draw Calls、Trianglesを小さく表示してください。30秒間の測定結果をJSONで保存できるようにし、画面サイズや描画DPRなどの条件も一緒に残してください。

画面上の小さな数値表示をHUDと呼びます。今回は、空間を見る邪魔にならないよう左上に置いています。

今回の実装画面。HUDの118.2 FPSなどは歩行中の1秒平均で、下の30秒測定とは別の値です。

計測には、開発中の画面ではなく本番ビルドを使いました。開発サーバーとは別のターミナルを開き、プロジェクトのフォルダで次を順に実行します。

npm run build
npm run start -- --port 3001

ブラウザで http://127.0.0.1:3001 を開き、Escで操作を解除。右下の「設定 / 計測」から「待機を測定」を選び、終了後に「JSONを保存」で記録を残せます。JSONは、数値と条件を後から読み返せるデータ形式です。

今回残した基準値は、この本番画面をBraveで開き、立ち止まったまま、連続描画を30秒間測った結果です。歩行中の性能をまとめた値ではありません。

95パーセンタイルは、測定したフレーム間隔の約95％がその値以下だった、という目安です。平均だけでなく、少し遅くなった側の様子も残しています。

60 FPSを目指すなら、1フレームの目安は約16.7msです。ただし、今回の約120 FPSが、どのPCでも出るわけではありません。今後はできるだけ同じPC、ブラウザ、画面サイズ、カメラ位置で測り、何を足したときにFrame Timeが伸びたかを見ていきます。

STEP 4｜読み込むデータ量も確認する

画面が滑らかに動くかとは別に、最初にどれだけのデータを読み込むかも確認しておきます。次回以降、モデルやテクスチャを持ち込むときの比較に使うためです。

Chromeの開発者ツールなら、次の順で確認できます。

1. アプリを開き、開発者ツールの Network タブへ進む。
2. Disable cache をオンにし、通信記録を消してから再読み込みする。
3. 読み込みが落ち着いたら、一覧のいちばん下の集計欄を見る。
4. transferred と resources を、それぞれ記録する。

transferred は転送量、resources は展開後のリソースサイズです。同じ数字ではないので、分けて残します。確認する場所は、Chrome DevTools公式の集計表示の説明でも紹介されています。

今回はBraveのDevToolsで測定しました。Chromeでの実測は、まだ行っていません。 キャッシュを無効にして再読み込みし、対象アプリの通信に絞ると、14件、転送量は約396kB、展開後は約1.40MBでした。

フィルターには domain:127.0.0.1 を指定し、拡張機能の通信と分けています。実際に確認する際は、自分のアプリのドメインに合わせます。

なお、これはDevToolsを開いて行った別の測定です。前の節のFPSはDevToolsを閉じて記録しており、条件を混ぜないようにしています。

STEP 5｜歩いて、広さの感覚を確かめる

土台ができたら、画面をクリックして歩いてみます。最初は次の順に確認すると、調整する場所を見つけやすそうです。

1. まっすぐ歩き、端までの距離がどう感じられるかを見る。
2. 周囲を見回し、視野角やマウスの動きが合うか確かめる。
3. 走行とジャンプを試し、移動の速さや高さを見る。
4. 広さか速度のどちらか一方を変え、元の状態と比べる。

クリックでの開始、WASD移動、走行、ジャンプ、Escでの解除、RでのリセットはBraveで動作を確認しました。実マウスで見回したときの操作感や、歩行動画の収録は、引き続き確認していく部分です。

見た目を加えると、歩きやすさだけでなく、描画の負荷も変わります。まだ追加後の数値はありませんが、次のような点を記録していく予定です。

次回は、Blenderで寸法と配置を考える

今回は、空間の広さ、歩ける操作、性能と通信量の基準値まで用意しました。まだ白い地面だけですが、ここからモデルを足し、変化を確かめていける状態になりました。

次回はBlenderで、簡単な形を使って寸法や配置を考える「グレーボックス」を作ります。中央のフレームはどれくらいの大きさにするか。立方体の間を通れるか。今回の200m四方を仮の基準に、測りながら組み立てていく予定です。

少しずつ作り、測って、調整する。AIに実装を手伝ってもらいながら、自分でも扱える部分を増やしていくと、完成後の空間も、もっと自由に変えていけるのではないかと思うのです。