手順を徹底解説：GPT-6 Astraで大規模な宇宙探索ブラウザゲームを構築する方法

目標が単に、AI に動作する小規模なゲームプロトタイプを生成させることだけであれば、問題は比較的シンプルです。しかし、恒星間空間から惑星の地表へとシームレスに飛行できる大規模なブラウザゲームへと目標が拡大した瞬間、アートディレクション、スケール表現、地形のストリーミング読み込み、操作性、レンダリング、テスト、そしてパフォーマンスがすべて協調して機能しなければならなくなります。

OpenAI 公式は Void Explorer を事例として、Codex 内で GPT-6 Astra を使用してこのエンジニアリングプロセスをどのように進めたかを公開しました。最終的な成果物は 2,048 の星系と 10,000 個以上のプロシージャルな惑星を備え、プレイヤーは見えている恒星を選択してそこへ向かって飛行でき、宇宙空間から海岸や地表へと連続して降下することも可能です。

難所はある特定のコードを生成することではなく、いかに体験の境界を定め、Astra に問題を認識・再現させ、同じテストセットを用いて修正前後の結果を比較し、ゲームの規模を段階的に拡大していくかにあります。この制作順序に沿って進めることで、以下の各エンジニアリングの選択はすべて具体的な課題と検証方法へと結びつきます。

この作業手法では、まず明確な制約を設けて Astra にエンジニアリング実装を提案させ、人間が見た目と操作感を継続的に判断しながら、再現可能なテストとデバッグのサイクルを確立していきます。

体験先行：自然言語による物理とビジュアルの境界の確立

このプロジェクトは技術スタックの選定リストから着手するのではなく、まずプレイヤーが得るべき体験と不変の物理的境界を Astra に明確に示し、それらの制約から逆算してエンジニアリングアーキテクチャに反映させていきました。

Void Explorer の構築当初、最初の要件記述によって宇宙全体の物理法則が直接定められました：

コアプロンプト（設計原則）： 「私に見えているものはすべて到達可能でなければならない。現実的な宇宙の距離を保ちつつ、スケールと航行速度によって退屈さを解消する。宇宙から直接惑星の大気圏へと突入し、滑らかに地表へ着陸したい。惑星は地球のように巨大であり得るため、プロシージャルな地形とチャンクレンダラーが必要になる。」

この記述はシステムに3つの明確な境界を与えました：

1. 遠くに見える恒星は単なる背景の光点であってはならず、選択可能で実際に飛行できる目的地でなければならない。
2. 惑星へ接近する際、それが突如として独立した別ステージに切り替わってはならない。宇宙から地表まではシームレスに連続していなければならない。
3. 現実的な宇宙の距離を移動可能にするには pulse travel と hyperdrive が必要であり、地球スケールの惑星にはプロシージャルな地形とチャンクレンダラーが求められる。

ビジュアルの方向性も、大量のゲームコンテンツを本格的に作り込む前に画像を用いて繰り返しキャリブレーションが行われました。第1弾のコンセプトアートは写実的すぎ、次のバージョンはシンプルすぎたため、より具体的な要件を用いて修正を続けました：

コアプロンプト（ビジュアルの調整）： 「現在のバージョンはシンプルすぎます。妥協案が必要です。より優れた色彩、ネオンの光彩感、そして深宇宙のハイコントラスト。船が星や宇宙塵に囲まれながら高速航行している様子を見せてください。」

納得のいく画像が保存され、軌道飛行、高速航行、大気圏突入、そして着陸における視覚的リファレンスとなりました。これらの具体的な目標が定まったことで、後続のバージョンが期待通りに近づいているかどうかを判断することが格段に容易になりました。

アーキテクチャの進化：Three.js、WebGPU、バックグラウンドマルチスレッドの疎結合

フロントエンドの技術選定には TypeScript と Vite ビルドツール が採用され、コアレンダリング層は Three.js を基盤としました。Three.js は、低レベルのメッシュ（Mesh）、マテリアル（Material）、ライティング、そしてカスタムのプロシージャルジオメトリに対する直接的な制御権をコードに与えます。これこそが Void Explorer における大半の視覚表現の中核を担う基盤です。

最初のプレイ可能なレンダラーは WebGL2 を使用していました。プロジェクトではその後、Three.js が視覚表現の足かせになっていないかを継続的に問い直した結果、Astra は宇宙、ナビゲーション、地形システムをそのまま維持し、レンダリング層のみを Three.js の WebGPU アーキテクチャへと移行することを提案しました。

主要技術と役割分担：

• ノードマテリアルと TSL：Three.js のノードマテリアルと Three.js Shading Language（TSL）により、大気、水、ライティングの効果をコードで定義できるようになりました。
• Web Workers：入力や描画を担当するスレッドの外側で地形生成のジオメトリデータを準備し、すべての計算が単一の実行ラインに集中するのを防ぎます。
• Vitest と Playwright：Vitest は再現性のある生成、座標計算の数学、地形コントラクトを検証し、Playwright はブラウザ内で実際にゲームを操作して完全なインタラクションを検証します。

コンセプトアートで確立された美学の方向性に合わせるため、レンダリングパイプラインには Neon Phosphor エフェクトが導入されました。これにより、ナビゲーション情報の可読性を維持しながら、画面にレトロなディスプレイの質感が加えられています。

AI への診断ツールの提供：自動検証と状態の可視化

人間は実際の試遊と判断を担当しますが、Astra には「ここは何となくおかしい」という感想よりも具体的な調査の足がかりが必要でした。そこでプロジェクトでは、ブラウザテストが接近中の天体、現在の飛行モード、地形の準備状況、アクティブなカメラを読み取れるよう、小規模な JavaScript インターフェース window.__VOID_EXPLORER__ を公開しました。また、draw calls、triangle counts、queued terrain jobs、buffered terrain data といったレンダリングおよびストリーミング読み込みに関するカウンターも提供しています。

次のステップは、繰り返し立ち戻れる名前付きテストシーンの構築でした：orbit、pulse travel、atmospheric descent、coastal landing。Playwright は特定のシーンを直接ロードし、地形の準備完了を待ってスクリーンショットを撮影し、背後にある状態を検証できます。これにより、Astra は問題が発生した地点へ毎回宇宙の反対側から飛び直す必要がなくなりました。

固定シーンだけでは完全なゲームプレイの旅を代替できません。プロジェクトには別途 journey tests が用意されており、実際の操作入力を行って飛行プロセス中の位置や状態の変化を記録し、landing、leaving the ship、walking、saving and reloading、boarding、taking off をカバーしています。これらは、衝突判定面がまだ準備できていない問題や、宇宙船の状態遷移時に位置の急激な跳躍が生じる問題など、単一のスクリーンショットでは捉えられない不具合を浮き彫りにします。

実際の試遊中には、プレイ中のブラウザタブを Astra に検査させることも可能です。例えば、ある特定の瞬間において Aurelia の雲層が依然として見えているかどうかを確認させるといった使い方ができます。ここでの境界線は重要です。これは特定の一瞬を検査しているのであって、Astra が全フレームを継続的に監視しているわけではありません。

こうして確立されたデバッグループは次の通りです：問題を再現し、スクリーンショットと状態を確認し、関連コードを追跡し、実装を修正した上で、同一の検証を再実行する。新たなゲームプロジェクトにおいては、再現可能な少数のシーン、有用な状態およびパフォーマンスカウンター、そして主要なインタラクションを検証するブラウザテストを早い段階から準備しておくことが推奨されます。

天文スケールの数学的疎結合：大きな整数のグリッドから四分木球体へ

光年スケールの位置と、宇宙船の傍らに立つ位置とでは、スケールが極端に異なります。これらの巨大な座標をそのまま GPU に渡してしまうと、地表付近で必要な精度が失われてしまいます。そのためシステムは、「宇宙内におけるオブジェクトのアドレス」と「そのフレームの描画に使用する位置」を分離して処理しています。

大きな整数のセルと局所オフセット：宇宙内の位置は、大きな整数の cell と比較的小さな local offset の組み合わせによって表現されます。レンダリングを行う直前にオブザーバーの位置を差し引くことで、カメラを常に原点に保ち、近隣のオブジェクトは小さな相対座標を継続して使用します。これにより、表示距離と相対的なサイズの整合性が保たれます。

解析軌道と統一シミュレーション時間：恒星、惑星、衛星は analytic orbits に従って運動し、レンダラーはオブザーバーと同一の simulation time を用いてそれらの位置を計算します。着陸して静止している宇宙船は自転する惑星とともに移動し、恒星の位置と色はライティングシステムへと反映されるため、地表から眺める連星の夕日と軌道上から見る恒星群は同一のものとなります。

1万個以上の惑星を保持しているからといって、1万個以上の高詳細メッシュを読み込むわけではありません。各惑星はまず半径、軌道、大気、そして seed からなる記述データとして存在します。seed により同一の地形を決定論的に繰り返し生成できるため、ゲームはプレイヤーが接近した際にのみ周辺のジオメトリを生成し、再訪時には全く同じ景観を再構築します。

キューブスフィアと四分木 LOD：遠方の惑星は、まず負荷の低い多面体 proxy として表現されます。画面内で大きく表示されるにつれて、システムは球面に投影された6枚の cube faces からなる地形を有効化します。各面は4つのより小さな正方形へと繰り返し細分化できます。これにより、視界に入っている領域や進行方向付近の地形のみを高精度化し、地表に近づいた段階で local patches がさらに緻密なジオメトリを提供する仕組みとなっています。

共有ハイトフィールド関数：粗さの異なるメッシュも、すべて同一の惑星生成関数をサンプリングします。この関数は continents、mountain ridges、craters、smaller relief を組み合わせ、elevation、water、biome などの信号を出力します。共有されたカラーリングルールにより、解像度の異なる表面間でも見た目の一貫性が保たれます。

このハイトフィールドアーキテクチャは、大規模な地形を生成する上できわめて安定かつ高効率である一方、構造上の明確な限界も抱えています。すなわち、地表の各法線方向に対して有効な高さの値を1つしか保持できないという点です。これは、垂直に切り立ったオーバーハング状の岩壁、多層に重なり合う洞窟、あるいはプレイヤーが自由に掘削・発破できる地下トンネルなどをネイティブにはサポートできないことを意味します。

大気圏の滑らかな突入：速度エンベロープ、相補的マスク、剛体物理

宇宙から地表へと接近する際は、飛行速度、地形のストリーミング読み込み、精度の異なる表面の受け渡しを統合的に処理しなければなりません。惑星に対して浅い角度で進入したある試遊テストで、次のような問題が露呈しました：

コアプロンプト（突入の最適化）： 「惑星の縁をかすめるような浅い角度で突入した際、速度が依然として速すぎて地形の読み込みが間に合わず、惑星全体がほぼ虚空に消えてしまいます。宇宙船の減速カーブと地形のストリーミング読み込みパイプラインを協調して修正する必要があります。大気散乱レイヤーを導入して、遠距離の低ポリゴンモデルと近景の高精度地形の間の急激な変化を和らげることはできますか？ 地表へ接近する過程で、惑星が一瞬たりとも消失してはなりません。」

この問題に対し、システムは飛行制御とメッシュ切り替えロジックの双方を同時に改修しました：

浅角アプローチ用の独立した速度上限：フライトコントロールは、高度および惑星の半径と重力から推定される orbital-speed に基づき、浅い角度でのアプローチに対して個別の速度上限を設定しました。さらに地表に近づいた際には、前方の地形をサンプリングして制動力を動的に調整します。

旧表面は新表面が完全に準備完了するまで待機：遠景の惑星は、6面の粗い地形メッシュがすべて出揃うまで表示され続けます。また、ある terrain tile も、その配下にある4つの children がすべて準備完了するまで保持されます。切り替えの過渡期には、complementary pixel masks が各ピクセルを旧表面または新表面のいずれかに割り当てることで、代替メッシュの読み込み中に惑星全体が同時に半透明になってしまう現象を防ぎます。

地表への接地および降機しての歩行には、専用の物理パイプラインが導入されました：

Rapier による局所物理ワールド：キャラクターが地表を歩行する際は、Rapier を用いた小規模な局所物理ワールドが駆動します。

着地に必要なデータの同時準備：1つの contact patch における可視の地面、衝突判定ポリゴン、液体の危険情報は同一の生成処理から得られ、かつ同時に準備完了しなければなりません。宇宙船の着陸ロジックも、ランディングギアの接地、傾斜角、障害物クリアランスを個別に検証します。

フレームレート低下の原因を切り分ける：制御されたベンチマークによる計測

フレームレートが低下した際、単に「カクつくかどうか」を眺めているだけでは、その無駄がポリゴン数によるものか、データ転送によるものか、あるいは繰り返し破棄されるタスクによるものかを切り分けることができません。そのためプロジェクトでは、プレイヤーが体感した画面の問題を、再現可能で計測可能なブラウザテストへと落とし込みました。

具体的なテストにおいて、Astra は Three.js のレンダラーカウンターを用いて draw calls、triangles、geometries、textures を検証し、Playwright は90フレーム分の frame intervals を収集して平均値およびパーセンタイル値を報告します。視覚的な不具合に対しては、特定のエフェクトを有効・無効にした際の rendered pixels を比較することも可能です。例えば、地形の overlap-hiding mask のオン／オフ結果を照合することで、単に不具合のスクリーンショットを眺めて推測するのではなく、なぜ地面が消失したのかの原因を正確に特定します。

宇宙船のアセット差し替えを評価する際、Astra は WebGPU バックエンド環境下において、headless Chromium と SwiftShader を用いて新旧バージョンに対し同一の 90-frame orbital test を実行しました：

この数値の読み解き方：新型機体はポリゴン数こそ増加しているものの、この特定のテスト環境においてはドローコールと平均フレーム間隔の双方が削減されています。なお、このテストは後述する4翼の宇宙船よりも前の段階で実施されたものであり、あくまで当該テスト環境における相対的な変化を示すものであって、実ハードウェア上での実際のゲームフレームレートではありません。また、これらのツールは個々の GPU コマンドやシェーダーの実行時間を測定しているわけではありません。

読み込みと降下のプロセスを巡って、Astra は生成されたジオメトリの量、Worker とレンダラー間で転送されたデータ量、そして一度も描画に寄与することなく破棄された地形タスクの数を継続的に測定しました。

画面サイズに応じた遠景ディテールの配分：視野全体を覆う惑星には即座に十分な輪郭が求められますが、1ピクセル未満の惑星に同様のジオメトリは不要です。制御された同一の開始シーンにおいて、同一の geometry producer を用いて比較したところ、新戦略では 7,040 個の proxy triangles で済んだのに対し、旧戦略では 51,200 個を消費していました。

インデックス付きメッシュによる重複転送の削減：隣接するポリゴン間で頂点を再利用することで、位置、カラー、法線の重複転送を排除できます。「High」地形品質、6つの ground layers、241,952 個の triangles を維持したテストにおいて、転送バッファサイズは約 35 MB から 15 MB へと縮小しました。また、ground と scenery も個別のタスクへと分離され、地表のジオメトリが背景の装飾オブジェクトの完了を待たずに済むようになりました。

細分化判定の安定化：従来のセレクターは、チャンクを要求しては判定を変更して破棄し、別の代替タスクを再要求するという挙動を繰り返していました。改善後は、計算リソースのバジェットが4つの children すべての生成を許容できる場合にのみタイルを細分化するように改められ、役立つ前に廃棄される無駄な処理が削減されました。

Web Workers だけですべてのスタッターを解消できるわけではありません。メインスレッド側の地形フォールバック処理も中断・再開が可能なステップへと分割され、1フレームあたり約 4 ms のバジェットを消費するように制限することで、単一の巨大な地形タスクが一度に完了を強制される事態を防いでいます。また、システムは world resolution と interface resolution の制限を個別に分離し、ワールドの描画品質を落とした際にもナビゲーションテキストの鮮明さが損なわれないようにしました。もっとも、これらのテスト結果もシェーダーのコンパイルや GPU へのアップロード、実際のモーションの見え方まではカバーしていないため、ブラウザ上での人間による試遊確認は依然として不可欠です。

ハイブリッドアセットパイプライン：2D コンセプトアートから軽量 3D アセットへ

Void Explorer の宇宙環境は主に純粋なコードと数学的アルゴリズムによって生成されていますが、視線の中心となる宇宙船については、伝統的なアートアセットパイプラインに頼って精緻に作り込む必要がありました。

このフェーズにおけるワークフローは、「画像生成によるフォルムの模索」から「選定した2Dリファレンスを実行可能なアセットへと変換する」段階へと移行しました。まず人間がコアとなる特徴を確定し、次に Astra が Blender 内でモデリングを推進して、その成果物をゲーム内へと統合します。

初期の機体で見られた「主翼が一体化して平坦に見える」という課題に対し、開発者は明確な局所修正の指示を出しました：

コアプロンプト（機体形状の再構築）： 「前翼と後翼の分離構造を重点的に強調した、この宇宙船のクリーンなマルチアングル図を生成してください。これらの画像をもとに 3D モデルを作り直します。現在のモデルにあるような、一体化した円弧状の主翼は好みではありません。」

最終的に選ばれたのは、4枚の独立した主翼、対称的なシルエット、そしてピンクの翼端灯を持つリファレンス画像でした。続いて Astra に対し、ゲームのアートスタイルを維持しながら Blender 内で新しいモデルを構築し、それをゲームに組み込むよう指示が出されました。このプロセスには、リファレンス画像のジオメトリへの変換、シルエットとマテリアルの検証、そしてランタイム向けアセットの準備が含まれます。Blender のソースファイルには 193 個の editable meshes が含まれています。

最終的にエクスポートされた機体は 14,968 個の triangles で構成され、8つの opaque material batches に分割されています。人間は見た目のさらなるブラッシュアップを要求し続けると同時に、エクスポートされたアセットの描画コストに注意を払うよう Astra に指示することができます。

水のシミュレーションを展開する：Sunwake と Hollowflux に見る異なる形態での実践

「単一のシミュレーションをビジュアルとゲームプレイの双方に同時に機能させる」というアプローチは、他の2つのゲームでも実践されています：

Sunwake：Astra は Three.js 内で custom water renderer を構築し、単一の wave model が目に見える海面と船体の浮力の双方を同時に駆動します。船体は波に合わせて上下動、ピッチ、ロールを行い、局所的なシミュレーションが ripples と foam を生成し、船の後方には wakes と spray が残されます。その後、Astra に Blender でより詳細な船体を制作させてゲームに追加させることで、「プロシージャルな環境 ＋ 人手でデザインされた乗り物」の組み合わせを実現しました。

Hollowflux：この 2D アクション RPG の洞窟、キャラクター、装備はすべてコードによって描画されており、sprite sheets はインポートされていません。grid cells システムが water height、currents、foam、そして electrical charge を追跡します。

ここでの水は単なる視覚効果にとどまりません。足音はさざ波を残し、槍は狭い航跡を刻み、ハンマーの打撃は円状の衝撃波を放ちます。水流は川岸に沿って渦を巻き、泡を下流へと押し流し、プレイヤーや敵をも押し流します。デンキウナギの放電は連結した水域全体を伝播しますが、乾いた岩の上に立つことでこの放電を回避することができます。

ワンクリックデプロイと個人開発者のための出発点

ゲームを共有する準備が整ったら、Codex の @Sites プラグインを使用してデプロイを要求し、公開リンクを取得できます：

Use @Sites to deploy this game and give me a link.

サイトを一般公開に設定すれば、他のプレイヤーもブラウザから直接プレイできるようになります。

Astra を使ってゲーム開発に挑戦したい場合は、以下の具体的なアプローチから始めることができます：

1. まず「手応えが正しい」と感じられる要素を1つだけに絞る：1隻の船、1つの部屋、あるいは1つのインタラクションだけで十分です。完全な宇宙から始める必要はなく、まずはプレイ可能な最小限のバージョンを作ります。
2. 少量の視覚的リファレンスを提示し、実際の試遊フィードバックに頼る：まず期待する見た目を Astra に明確に把握させます。成果物が上がってきたら自ら操作し、「何となく良くない」とだけ伝えるのではなく、どこが速すぎるのか、どこが消失しているのか、どの色が噛み合っていないのかを具体的に伝えます。
3. 再現可能な検証手段を早期に確立する：主要なフェーズごとに repeatable scenes、state and performance counters、そして browser tests を用意します。人間が見た目と操作感の判定を続け、Astra がコードを追跡し、再現性のある計測を行い、修正を施して再テストを実行します。このサイクルを軌道に乗せてから、ゲームの規模を段階的に拡大していきましょう。