メインコンテンツへ移動
AIチュートリアル

ポータルの実行・ビルド・探索：生成された471の3Dワールド

このチュートリアルでは、ソースからPortalsを実行し、デプロイ可能な静的ビルドを作成し、生成された471のワールドを探索する方法を説明します。また、ワールド、ポータル、サウンド、グラフィックス、選択システムの仕組みや、主要なコードの場所、プロジェクトを拡張する際の進め方も学べます。

約15分で読了
ポータルの実行・ビルド・探索：生成された471の3Dワールド

Portalsとは？

Portalsは、生成された471の3Dワールドを巡る、自動操縦のブラウザ飛行体験です。カメラはあらかじめ決められた経路を進み、ポータルに到達すると、カットやフェードなしで、そのまま次の実行中のワールドへ移動します。飛行を操縦することはできませんが、速度、表示、サウンド、グラフィックス、ワールドの選択を操作できます。

夕暮れの雪の町を横切るミッドウィンター・エクスプレス

このプロジェクトはJavaScriptとthree.jsで構築されています。各ワールドはブラウザ内でジオメトリとテクスチャを生成し、音声も再生中に合成されます。外部の3Dモデル、テクスチャ画像、音声ファイルは読み込みません。また、静的サイトとして動作するため、アカウント、アプリケーションサーバー、トラッキングサービスは必要ありません。

このリポジトリは、2026年11月9日時点でリリースs8fを表しています。このリリースには、約140万行のJavaScriptと471のワールドが含まれています。

主な機能

  • 471の生成ワールド：自然、都市、海、室内、空、異星の環境、先史時代の風景、アートに着想を得た場所、文学作品の世界、映画やテレビ作品に着想を得た場所、古代の驚異、AIにまつわるジョークなど、多彩なコレクションです。
  • シームレスなポータル：現在のワールドとポータルの先のワールドが同時に実行されるため、遷移画面なしでカメラが通過できます。
  • プロシージャルアセット：ジオメトリ、テクスチャ、サウンドは、従来のワールドアセットとして読み込むのではなく、ブラウザ内で生成されます。
  • 自動飛行：各ワールドがカメラの経路と所要時間を提供します。飛行時間は通常、約40〜50秒です。
  • 適応型グラフィックス：自動モードではグラフィックカードから品質レベルを推定し、滑らかな動きを保つために描画解像度を調整します。
  • ローカル設定：訪問済みワールド、お気に入り、設定はブラウザストレージに保存されます。
  • ギャラリーとジャーニー：ギャラリーではすべてのワールドを確認でき、20の厳選されたジャーニーでは、選ばれたワールドを固定順序で再生します。
  • 静的デプロイ：本番ビルドはdistに通常のファイルを生成し、静的ウェブホストで配信できます。

前提条件

Node.js 18以降とGitが必要です。ソースを直接プレビューするだけなら、インストールやビルドの手順は必要ありません。専用のグラフィックカードが望ましいものの、スマートフォンや古いノートパソコンでも、品質を下げれば実行できます。

Node.jsのバージョンを確認します。

node --version

結果がバージョン18より前の場合は、続行する前にNode.jsを更新してください。

ソースからPortalsを直接実行する

1. リポジトリをクローンする

git clone https://github.com/emollick/ai-portals.git
cd ai-portals

2. ローカルのソースサーバーを起動する

npm start

ブラウザでhttp://localhost:8000を開きます。これにより、事前のパッケージインストールやコンパイルなしで、現在のソースツリーがそのまま配信されます。

ソースプレビューには、想定される制限が2つあります。ギャラリーでは新しく追加されたワールドを識別できず、生成された説明ページも表示できません。また初回アクセス時には、ビルドプロセスでのみ生成されるatlas.jsonが見つからないため、ブラウザコンソールにその旨が表示されます。

本番ビルドを作成してプレビューする

ビルド依存関係をインストールし、デプロイ用パッケージを生成して、プレビューサーバーを起動します。

npm install
npm run build
npm run preview

生成された静的サイトはdistに書き込まれます。http://localhost:8001を開いて確認してください。

ビルドではesbuildを使ってプロジェクトのスクリプトを minify し、次のようなデプロイ専用リソースを作成します。

  • 各ワールドとジャーニー用の小さな共有プレビューページ。
  • すべてのワールドとその説明を一覧にしたプレーンページ。
  • 新しいワールドを記録するギャラリーデータ。
  • ホスティング設定ファイル。

リリースs8fを再現する

ビルドではリリーススタンプを指定できます。リポジトリのドキュメントによると、次のコマンドで、2026年11月9日時点の公開中のs8fリリースをファイル単位、バイト単位で再現できました。

npm run build -- --stamp s8f

開発中は通常のビルドを使用してください。リリースメタデータが必要な場合や、記載されたリリースを再現したい場合にスタンプを使用します。

基本操作と使い方

Portalsは自動的に飛行を開始します。サウンドは初期状態で無効になっているため、合成されたサウンドトラックを聴くにはSを押してください。キーボード操作は次のとおりです。

  • Space：飛行を一時停止または再開します。
  • 右矢印：次のポータルへ急ぎます。
  • S：サウンドのオン・オフを切り替えます。
  • G：より安定したカメラと水平な地平線を実現するジェントルモードを有効にします。
  • H：現在のワールドをお気に入りとして保存します。
  • P：画像を保存します。
  • I：ギャラリー、ジャーニー、検索インターフェースを開きます。
  • O：グラフィックス、カメラ、アートスタイル、ライド、コンパニオン、時刻のオプションを開きます。
  • F：フルスクリーンモードに入る、または終了します。

マウスを動かすと、画面下部にコントロールバーが表示されます。キーボード操作に対応するボタンに加え、PaceスライダーとEarthly to Strangeスライダーがあります。ウィンドウ幅が狭い場合、スライダーはオプション画面に移動します。

最初に試すと便利な操作

  1. ソース版または本番版のプレビューを開始します。
  2. Sを押して音声を有効にします。
  3. 1つの世界を最後まで再生し、通常のポータル通過を観察します。
  4. カメラの動きがつらい場合はGを押します。
  5. Iでギャラリーを開き、コレクション全体を検索または閲覧します。
  6. Earthly to Strangeを調整し、珍しい世界が選ばれる頻度を変えます。
  7. お気に入りとして残したい世界に出会ったらHを押します。

シームレスなポータルの仕組み

宇宙に浮かぶ小さな緑の世界を映す城のポータル

通過してから約1秒後、エンジンは次の世界を選びます。描画フレームの間に数ミリ秒ずつかけてその世界を構築し、見えない間にシェーダーとテクスチャをウォームアップします。

目的地は静止したプレビューではありません。2つ目のカメラが、毎フレーム、次に進行中の世界をポータルの開口部に描画します。カメラがゲートに到達する少し前に、エンジンは目的地を現在の世界に昇格させ、飛行を続けます。準備が終わっていない場合、現在の飛行は減速し、ポータルの前で待機します。

世界の選択方法

選択機能は、訪問者がまだ見ていない世界を優先します。訪問の最初の12個ほどの世界では、プロジェクトの評価エージェントが高く評価した世界を優先します。各世界には1から5までの品質帯があり、その帯によって序盤にどの体験が表示されるかが決まります。

選択機能はコントラストも求めます。現在の環境とは種類、明るさ、または温度が異なる目的地を選ぶ傾向があります。Earthly to Strange設定は、より風変わりな項目が表示される頻度を制御します。

プロジェクトの構成を理解する

最も重要なファイルとディレクトリは次のとおりです。

  • index.html: アプリケーションのページ。
  • src/main.js: キーボード操作、オプション、画面下部のコントロールバー。
  • src/core: 飛行、ポータル、世界の選択、サウンド、グラフィックス品質のシステム。
  • src/kit: 空、水、地形、植物、動物、建物、内装など、共有される世界構築コンポーネント。
  • src/worlds: 世界ごとのモジュール、世界レジストリ、開始ホール。
  • src/parts: 個々の世界で使用する主要なセットピース。
  • src/extras.js: 乗り物、同行者、アートスタイルの一覧。
  • src/rides、src/companions、src/styles: それらの追加要素の実装。
  • src/ui: ギャラリーと共有のコード、およびサイト唯一のスタイルシートであるui.css。
  • vendor/three: バンドルされたthree.jsライブラリ。
  • thumbs: ギャラリーのサムネイル画像。
  • design: ビルドが読み込む世界のテキストとリリース到着テーブル。
  • tools: ビルドスクリプトとローカルサーバー。

世界モジュールの構成

世界はsrc/worlds下のファイルです。デフォルトエクスポートはbuild関数を含むオブジェクトです。また、選択機能とギャラリーがその一覧を読み込むため、世界にはタイトル、種類、キャプションとともにsrc/worlds/index.jsへの登録も必要です。

build関数は、次の3つの必須要素を返します。

  • three.jsのシーン。
  • カメラパス。
  • 飛行時間。

ほとんどの世界では、主要なセットピースをsrc/parts下の別ファイルに配置します。src/kitの共有機能は再利用可能なコンポーネントを提供するため、各世界で共通の風景を個別に実装する必要はありません。

世界を調査または拡張するための安全なワークフロー

  1. 理解したい環境の種類に似た、src/worlds下の既存の世界を選びます。
  2. そのインポートをsrc/partsとsrc/kitまでたどり、シーンがどのように組み立てられているかを確認します。
  3. デフォルトエクスポートとbuild関数を調べ、リポジトリで実際に使われているオブジェクトの形とカメラパスの規則を学びます。
  4. src/worlds/index.jsの対応する登録を確認し、必要なタイトル、種類、キャプションのメタデータを把握します。
  5. 簡単なソーステストにはnpm startを実行します。
  6. 本番ビルドを作成し、生成されたギャラリーと共有リソースを確認します。

このリポジトリは非常に大規模なため、文書化されていないAPIを推測したり、モジュールをゼロから構築したりするより、近い既存の世界を応用するほうが安全です。

サウンドとグラフィックスの動作

サウンド合成

すべての世界には、ゆっくりした和音と複数のベルが設定されます。ほとんどの世界では、風、水、室内音、一定した宇宙のハム音など、静かな環境音も使用します。世界には、雨、波、鳥、遠くのベルなど、19種類の利用可能な効果から最大3つのレイヤーを追加できます。ブラウザーのオーディオエンジンは、音声ファイルを読み込む代わりにこれらの音を合成します。

自動グラフィックス品質

グラフィックスをAutoに設定すると、Portalsはグラフィックスカードから適切な品質レベルを推定します。その後、スムーズな飛行を維持できるよう描画解像度を上げ下げします。古いノートパソコンやスマートフォンでは、より負荷の高い設定を試す前にAutoを有効にしておいてください。

高度なヒント

アクセシビリティのためにGentleモードを使う

Gキーを押すと、カメラが安定し、水平線が保たれます。通常の飛行で不快感がある場合は、まずこの設定を試してください。

ソース版とビルド版の両方をテストする

素早く反復するにはソースサーバーを使いますが、デプロイ前には必ずdistビルドを確認してください。ギャラリーデータ、説明ページ、共有プレビュー、ホスティング設定の一部は、ビルド後にのみ生成されます。

シーンの見た目だけでなく、ポータルの準備状態もテストする

ワールドは移動前に準備が整っていなければなりません。ワールドのコードを変更したときは、移動先のシーンだけでなく、そのポータルへの接近中の動作も確認してください。重い生成処理やシェーダーの準備により、待機中に飛行速度が低下することがあります。

再現可能なシーケンスにはジャーニーを使う

Portalsには、ワールドを固定された順序で再生する20個のジャーニーがあります。例として、ひょうから深海へ移動するOne Drop of Waterや、生きた細胞の内部から始まるZooming Outがあります。通常のピッカーよりも進行方向が明確な体験にしたい場合、固定シーケンスが役立ちます。

ストレージとプライバシーの境界を尊重する

このアプリケーションにはバックエンドがなく、アカウント、トラッキング、お気に入り、設定のデータをサーバーへ送信しません。お気に入りや閲覧済みワールドの動作をデバッグするときは、これらの値がブラウザに保存されていることを覚えておいてください。

変更を公開する前にライセンスを確認する

このリポジトリはCC BY-NC-SA 4.0の下で配布されており、帰属表示と同一ライセンスの適用を条件に、非営利での共有と改変が認められています。three.jsと一部の短い関数には、別の利用条件が適用されます。変更したビルドを再配布する前に、LICENSEとTHIRD-PARTY-NOTICES.txtを確認してください。特にREADMEには、追加のシェーダーやユーティリティ関数の出典が記載されています。

まとめ

Portalsは、プロシージャルなthree.jsシーン、合成音声、適応型グラフィックス、バックグラウンドでのワールド生成、2つのワールドの同時レンダリングを組み合わせ、途切れのないブラウザ上の旅を作り出します。npm startですぐにソースを探索でき、npm run buildでデプロイ可能な完全なサイトを生成できます。また、アーキテクチャを学習したり拡張したりする際は、プロジェクト構成と既存のワールドモジュールを手引きとして利用できます。