Show HN：ガウス型スプライトをビデオゲームに変える試み

Gaussian Splatting を利用すれば、写真に写ったようなリアルな環境を無料で入手できます。ただし、注意点があります。「Splatter（スプラット）」とは、向き付いた点の群れのことだけであり、三角形やコライダー（衝突判定メッシュ）、ナビゲーションメッシュ（navmesh）、ライト情報は全く含まれていません。ここにキャラクターを配置すると、壁を無視して浮遊し、まるで別の宇宙に属しているかのような不自然な挙動を示します。この投稿では、私が構築したデモを通じてこれらの問題をすべて解決する方法を紹介しています。

👉 ブラウザで遊ぶには - WASD キーで移動、マウスカーソルで照準を合わせ、左クリックで発射してください。 👉 プロジェクトを確認するには - 本プロジェクトの完全版は PlayCanvas で公開されています。この記事で言及されたすべてのスクリプトも含まれており、そのまま読んで、フォークして、リミックスして自由に利用可能です。

このシーンは、Christoph Schindelar 氏が撮影した、実際の廃墟となっている建物の美しい室内の 3D スキャンです。Christoph 氏は、Gaussian Splats を扱うトップアーティストの一人であり、私が実在する場所のスキャンを提案してくれたため、これは逃せなかった絶好の機会でした。このスプラットデータの基础上に、物理演算用のコライダー、計算済みライトプローブのグリッド、Recast ナビゲーションメッシュ、8 人の個性的な NPC（ノンプレイヤーカー）、そしてクラシックな FPS（ファーストパーソン・シューティング）のループを全て追加しました。なんとこれらはすべて単一のブラウザタブで動作します。

🏗️ 構築過程 ここからが、一つずつ段階を追った私の構築手順です。

📥 ステップ 1：SuperSplat よりスプラットデータをダウンロードする コードを書く前にまずシーンが必要です。SuperSplat にある「Downloadable」とタグ付けされたあらゆるスプラットは、作者によってクリエイティブ・コモンズライセンスの下で公開されています。.ply または .sog ファイルをダウンロードして、すぐに自分の PlayCanvas プロジェクトにドロップしてください。私が選んだこのスキャンの照明、雑多な小物、スケールはすでにシネマティックなので、アートディレクションは一切行いませんでした。

📡 ステップ 2：スプラットデータをストリーミング対応の SOG フォーマットへ変換する これ以降に必要になるすべての作業において非常に有用なのが「splat-transform」です。これは PlayCanvas のオープンソース CLI で、スプラットデータの形式を変換するためのツールです。ここではストリーミング用の LOD（レベル・オブ・ディテール）生成と、次のステップにおけるコライダーメッシュ生成に利用します。 私のシーンは数百万個のガウス関数（Gaussian）から成り立ち、1 つの単なる .sog アセットとしてパッケージングすると、スマートフォンや低速な回線のユーザーにとって重すぎてしまうため問題となります。その解決策が「ストリーミング LOD」です。これは巨大な 1 つのファイルではなく、SuperSplat と splat-transform が出力する SOG チャンクのフォルダとマニフェスト（目次）を使用します。ランタイム側ではカメラの視点やデバイスの性能に合わせてオンデマンドでチャンクを読み込みます。高性能デスクトップはプレイヤー周りを最高解像度で読み込み、スマホは軽量なサブセットを読み込むため、どちらの場合も全ファイルのダウンロードを待たせる停滞（ストール）が起きません。

Scripts/streaming-lod.mjs

スクリプトはカメラにフックをかけ、ゲーム起動前にプレイヤー周辺にあるチャンクを完全に読み込んでおくようランタイムに依頼しています。これにより、戦闘中などにテクスチャやモデルのポップイン（表示の切り替わり）を目撃する機会がゼロになります。

🧱 ステップ 3：コライダーメッシュを生成する これが以前は最も難易度の高かった部分です。スプラットには表面がないため、物理演算シミュレーターからは「見えない」のです。その上を歩いたり、壁と衝突したり、迂回したりすることができません。そこで再び splat-transform が活躍します。必要なのは

-K / --collision-mesh

フラグです。このコマンドはスプラットデータをボクセル化し、種位置（シード位置）から内部を水泳法状にフィルリング処理して、watertight（漏水しない）な .collision.glb ファイルを出力します。これを PlayCanvas 内でそのままメッシュコライダーとしてインポートできます。

splat-transform scene.ply \ --seed-pos 0,1,0 \ --voxel-params 0.05,0.1 \ --voxel-carve 1.6,0.2 \ -K \ scene.sog

この単一コマンドで以下の 2 つの出力が得られます：

• scene.sog

  - キーワードでの素早いイテレーションのための単一ファイル圧縮スプラット。（本番ビルドにはステップ 2 で生成したストリーミングフォルダを使用します）

• scene.collision.glb

  - 実際の幾何形状に密着するボクセル由来のメッシュ。

この 2 つを PlayCanvas プロジェクトにドロップし、GLB を見えないエンティティにアタッチして「Collision component (mesh)」と「Rigid Body component (static)」を付与します。突然、プレイヤーには床ができて、弾丸は壁と衝突するようになり、NPC も歩くための物理的な地面を得ました。モデリングの手間やメッシュの整頓は一切不要です。

今すぐ試してみてください：1 つのコマンドで美しく見ただけのスプラットデータを遊べるものに変換できます -

splat-transform scene.ply -K scene.sog

を実行し、得られる

.collision.glb

ファイルをプロジェクト内の静かなメッシュリジッドボディとして配置してください。

💡 ステップ 4：スプラットからライトの輝度グリッドを焼き付ける（Bake） スプラットには各ガウス関数に照明情報が埋め込まれています。つまり、シーン自体は素晴らしくて不変の美しさを備えていますが、プレイヤーの武器モデル、NPC ソルジャー、拾えるアイテムなどは通常の PBR メッシュとしてライトされているものです。もしこれらが発光する照明の下にあったとすれば、それらはカーブカットアウト（紙切り物）のように浮いてしまいます。

私はスプラットデータを再度ライトし直すつもりはありませんでした。むしろ、ランタイムにおいて「地図上の特定の位置はいくら明るいか？」という情報を、通常のメッシュに対して安価に取得したいと考えていました。

Scripts/probes.js

がどのように機能するか：

1. 指定された床エンティティの AABB（軸限定ボックス）を取得し、地面から 1 メートル上にグリッド状に配置するプローブ位置を構築します。
2. オフスクリーン上の小さな 16×16 ピクセルの RenderTarget と、90°FOV のカメラを作成します。このカメラはワールド層（＝スプラットのみ）だけをレンダリングします（キャラクター、HUD、ビューモデルは含まれません）。
3. 各プローブに対して、立方体の 6 つ的面（+X, -X, +Y, -Y, +Z, -Z）をレンダリングし、16×16 の RGBA 出力を読み取り、標準の Rec. 601 ベースの重みを使用して明瞭度を計算します：

   this._faceLuminance += 0.299 * r + 0.587 * g + 0.114 * b

   ...すべての面を処理した後：

   var lightness = this._faceLuminance / 1536;

   （6 つの面 × 256 ピクセル）
4. この値を

   gridDepth x gridWidth

   の 2 次元配列に保存し、プローブ位置に発光強度を

   lightness

   に設定したデバッグ用スフィアを生成します。これによりシーンの中に浮遊する照明フィールドを目視確認できます。
5. すべてのプローブが完了したら、

   console.log(JSON.stringify(this.probeJSON))

   を出力します。これを一度コピーして

   lightness.json

   として保存し、JSON アセットとしてアタッチした後に、プローブエンティティを削除します。

ここで実行中のバーキング（焼き付け）の様子です - 各デバッグスフィアは立方体の面がレンダリングされ明瞭度が平均化された瞬間にポップイン表示されます。明るいスフィアは床の上でよく照らされていることを示し、暗いスフィアは角や覆いの下に位置しています。最終的には、JSON のバイトが書かれる前の時点で、シーンの照明をドット状のヒートマップとして読むことが可能です。

ランタイムでは、各動的なキャラクタースクリプト（武器、NPC、アイテム）が

lightness.json

を読み込み、ワールド座標で双一次補間してサンプリングし、適切な露出範囲にリマップした後、

meshInstance.setParameter('exposure', value)

を呼び出します。明るいロビーから暗い廊下へ歩くと、手元の光が滑らかに暗くなり、武器を撃った際に周囲のガウス関数から跳ね返る脈打つオムニライトを感じられます。

───プローブのバーキング：392 個（28 × 14）─── Probe 1/392 lightness: 0.4821 Probe 2/392 lightness: 0.4733...

全体でのバーキングは一回実行すれば約 15 秒で済み、生成される JSON は約 40 KB です。高価なランタイムプローブや遅延された再ライト処理は一切不要で、単純なルックアップテーブルだけです。

🛠️ ステップ 5：PlayCanvas VS Code 拡張機能を使ってコーディング（Vibe Code） 私は PlayCanvas ウェブエディターのコードパネルでは何も書きませんでした。代わりに Cursor 内で動作する PlayCanvas の VS Code 拡張機能を使用しました。これにより、クロード（Claude）とのペアプログラミングが可能です。 ファイルを保存 → エディターが変更を検知 → ランチャータブをリロード → テスト。この往復プロセスは数秒で行われます。 このデモにおけるほとんどのゲームプレイロジック（character-controller.js, anim-states.js, npc-ai.js, probes.js）は Cursor から完全にイテレーションされました。

🔄 ステップ 6：PlayCanvas と GitHub を使ってプロジェクトをバージョン管理する 「昨日何を変更したのか、どう戻せばよいか？」といった疑問に対して PlayCanvas はファーストパーティのバージョン管理システムを提供しており、まさにその疑問を解消します。VS Code 拡張機能を通じてローカルにシンクされた PlayCanvas プロジェクトのルートディレクトリで GitHub も利用できます。.pcignore ファイルを追加して .git フォルダがクラウドに同期されないように忘れないでください。VS Code 拡張機能と組み合わせると、ブラウザ优先エンジンの中で「通常のレポジトリ（Git レポジトリ）」で作業しているような感覚に近い環境となります。もし NPC AI を壊してしまった場合、過去夜中のビルドまで git revert で簡単に戻すことができます。

今すぐ試してみてください：プロジェクトを始める前に GitHub リポジトリを PlayCanvas プロジェクトにリンクさせておいてください。AI コーディングエージェントが午前 1 時頃に悪いリファクタリングを実装してしまう時に、あなたは何度も自分で感謝することになるでしょう。

🧭 ステップ 7：コライダーメッシュからナビゲーションメッシュを生成する NPC もスプラットデータ上で経路探索を行うことはできません。ナビメッシュが必要です。ランタイムでは、esm.sh から動的にインポートした

recast-navigation

を使用しています。バンドラーは一切不要で、以下のようにシンプルです：

const recast = await import('https://esm.sh/recast-navigation');
await recast.init();
const imported = recast.importNavMesh(new Uint8Array(navmeshBuffer));

navmesh.bin

バイナリを生成するには、ステップ 3 で得た同一の

scene.collision.glb

を小規模なオフライン Recast ベースのジェネレーターに投入します。コライダーメッシュはすでに「歩ける床」を表しているので、Recast が行うのはそれをラスタライズし、歩行可能な領域をフィルタリングしてナビゲーション多角形を構築するだけで、数秒ほどかかります。 生成器をスタンドアロンのライブラリとして整理しており、間もなく GitHub で公開予定です - PlayCanvas プロジェクトに即座に導入できる

collision-GLB-to-navmesh-binary

です。最新情報をゲットしたい場合は私の X アカウントをフォローしてください。ゲーム内でのナビメッシュ表示をご覧になりたい場合は、デモでキー「N」を押してデバッグオーバーレイを切り替えてください。歩行可能な多角形、エージェントの位置、現在のパイ経路がスプラットの上に点灯します。 近日公開：ライブラリが公開されると、以下のようなワンライナーになります：

npx glb-to-navmesh scene.collision.glb navmesh.bin

🧠 ステップ 8：行動木と個性を備えた NPC の脳を持たせる NPC が最も楽しく取り組めた部分です。デモ内の各兵士は、2 十年前ハロースターズ 2 で普及させられた同じ抽象度を持った古典的な行動木によって駆動されています。現在でも 2026 年の AAA AI の標準となっています。

Scripts/npc-ai.js

は以下の 4 つのプリミティブを公開しています：

• sequence(...children)

  // すべてのサブノードが成功する必要がある

• selector(...children)

  // 最初の実行可能（失敗しない）枝を選ぶ

• condition(pred)

  // リーフノード：true/false

• action(fn)

  // リーフノード：'success' | 'failure' | 'running'

そして各 NPC の脳は、これらの要素を特性（traits）に基づいてコンポーゼットして構築されます：

return selector(
    sequence(isDead, autoRespawn),
    sequence(
        isAlive,
        selector(
            sequence(isReloading, stopShooting),
            sequence(ammoEmpty, doReload),
            ...(traits.healPriority > 0.4   ? [sequence(hpBelow(retreat), hasPickupsNearby, goToPickup)] : []),
            ...(traits.lootPriority > 0.7   ? [sequence(hasPickupsNearby, goToPickup)] : []),
            ...(traits.retreatThreshold > 0.3 ? [sequence(hpBelow(retreat), retreat)] : []),
            ...(traits.aggression > 0.2     ? [sequence(hasEnemiesInRange(range), engageEnemy)] : []),
            guard
        )
    )
);

8 つの異なる個性を持つ 8 人の NPC をスポーンさせます。Sgt. Havoc（攻撃的、突進する）、Ghost（警戒心が高く、回復を優先する）、Captain Valor（英雄的な行動）、Strategist（戦術的）、Chaos（ランダム性 0.8 で読めない）、Loot Goblin（貪欲でマップ全体を移動してアイテムを探す）、Chicken（臆病で HP が 80% 以下だと撤退する）、Grumps（機嫌が悪い）などです。同じ行動木が特性に基づいて劇的に異なる優先順位秩序に収束するため、それぞれが個性的な印象を与えます。各エージェントの位置、aimAngle、animBits は毎ティック更新されます。PlayCanvas 側である

npc-controller.js

は、単にこれらのフィールドを読み取りエンティティの変換を設定し、アニメーション状態を選択して銃口フラッシュレイを発射し、サウンドをトリガーするだけの愚かなブリッジです。AI そのものは PlayCanvas の依存関係を持たず（例外：

pc.Vec3

）、Three.js、Babylon.js、ヘッドレスシミュレーターなど何処へでも持ち出せる可能性があります。

今すぐ試してみてください：行動木に対して不安を感じている場合は、Chris Simpson 氏の入門記事を読み、私の 4 つ機能の実装をコピーしてください。たった 20 行のコードで生産レベルの AI を unlock（解放）できます。

🎮 これらのデモを構築する際に必要なこと 全体のスーパースタック（技術スタック）を要約すると：

• 📥 環境 - SuperSplat のダウンロード可能なスプラット、または独自のキャプチャデータ。
• 📡 ストリーミング -

  splat-transform

  でストリーミング対応の SOG フォルダに変換し、スマホや低速回線でも停滞させない。
• 🧱 コライダー -

  splat-transform -K

  →

  .collision.glb

  を PlayCanvas 内の静かなメッシュリジッドボディとしてドロップ。
• 💡 照明 -

  probes.js

  で

  lightness.json

  グリッドをバーキングし、ランタイムで各メッシュインスタンスごとにサンプリングする。
• 🛠️ オートリング - PlayCanvas VS Code 拡張機能を使用して、通常のリセーブ・リロードの開発ループを実現。
• 🔄 バージョン管理 - PlayCanvas のバージョン管理システムおよび GitHub（VS Code 拡張機能経由）を使用。
• 🧭 パスファインディング - esm.sh から取得した recast-navigation に、事前焼き付けされた navmesh.bin を投入（生成器ライブラリは近日公開予定）。
• 🧠 AI - 行動木と個性に基づく特性駆動のシステム。

これらのすべての要素は無料でオープンソースです。プロジェクト全体を静的ファイルとして CDN から配信されています。私のビルドサイズは 68 MB で、AWS S3 よりスプラット環境データを別途ストリーミングしており、冷間ロードでも数秒で読み込み可能です。

💚 無料かつオープンソース SuperSplat, splat-transform, recast-navigation および PlayCanvas Engine はすべてオープンソースです。このデモも同様で、PlayCanvas プロジェクト全体が公開されています。無料で PlayCanvas アカウントを作成し、プロジェクトをフォークしてください。上記のすべてのスクリプト（probes.js, npc-ai.js, npc-controller.js、ナビメッシュラッパーなど）を読んでリミックスする権利があります。もしそれをクールな場所に持って行くなら、ぜひ成果を見せてください。

👂 試して壊し、声をかけてください デモを遊んでみてください。明るい部屋に立ち、NPC が影へと歩き込む様子を見てください。壁の隣で武器を撃ち、スプラットが閃光するのを確認してください。角へしゃがみ込み、足音が静かになることに気づいてください。 次に独自のものを構築してください。質問があれば、PlayCanvas Discord 上で私とスプラットクリエイターのコミュニティに参加してください。そこで現在、興味深い「スプラットからゲームへの」会話が行われています。

では、その中で会いましょう。