KIRIN からだウォーズ GAME2 - Behind the scenes

KIRIN からだウォーズ GAME2は、Nuxt + Three.js で実装されたインタラクティブゲームシステムです。Hokuyo LiDAR センサーから取得したタッチ位置をOSC（Max/MSP）経由で受信し、Web ベースのゲームとしてフルスクリーン HTML で動作します。

イベント概要（からだウォーズ）

からだウォーズは、キリンホールディングス株式会社が主催する、感染症や免疫について遊びながら楽しく学べる体験型イベントです。からだの中で繰り広げられる「免疫の戦い」をテーマに、参加者は「免疫細胞軍」と「ウイルス連合軍」に分かれ、ゲーム体験やパネル展示を通じて、免疫の働きを体感しながら学ぶことができます。

  • 主催: キリンホールディングス株式会社
  • 会期: 2025年11月26日（水）〜 2026年1月25日（日）
  • 会場: 日本科学未来館 1階 企画展示ゾーンa
  • 開催時間: 10:00〜17:00（最終入場 16:30）
  • 休館日: 毎週火曜日（1月6日は開館）、12月28日〜1月1日
  • 料金: 無料（入館料も不要）
  • 後援: 公益財団法人 日本ヘルスケア協会
  • 監修: 北村 義浩氏（日本医科大学 教授）

本ページで紹介する GAME2 は、体験展示のひとつである「免疫応援ボールゲーム」に相当します。

日本科学未来館：からだウォーズ（イベント詳細）

📹 本番映像

プロジェクト全体の技術的特徴を実演した本番映像です。大画面プロジェクター（6500mm × 1830mm）での実運用、LiDAR センサーによるボール検出、免疫細胞の活性化システム、距離ベースの自動アニメーション切り替え、pDC スーパーモード時のメタボールエフェクトなどを確認できます。

6500mm 大画面でのマルチ LiDAR センサーによる大画面インタラクティブゲーム

システム構成

Hokuyo LiDARセンサー (UST-10LX-H02)
  ↓ 距離データ取得（270度、2161点、50Hz）
hokuyo2osc (openFrameworks)
  ↓ 4点キャリブレーション → 正規化座標(0-1)変換
  ↓ OSC送信 (/game2/touch x y size)
Max/MSP
  ↓ OSC受信・処理
  ↓ ボールサイズ判定 → 種類判定（白/金）
  ↓ OSC送信 (/game2/touch x y type)
Nuxt4 Game2 (Three.js)
  ↓ タッチ入力として処理
  ↓ 免疫細胞活性化

基本仕様

  • 物理スクリーンサイズ: w6500mm × h1830mm
  • 技術スタック: Nuxt4 + Three.js（WebGL2, GLSL3 Shader）+ Pinia + TypeScript

ゲームの流れ（4 フェーズ）

  1. 待機中+ルール説明画面（既定 10 秒）
  2. プレイ中（既定 60 秒）- 目標: 60 秒以内にウイルスを 100 体倒す
  3. リザルト画面（既定 10 秒）- 成功時はキャラクター演出と花吹雪演出
  4. アウトロ画面（既定 10 秒）- 映像再生後、自動的に待機フェーズに戻る

技術的にユニークなポイント

1. メタボールシェーダーによる pDC スーパーモード演出

pDC がスーパーモード（金ボールヒット時）に発動する演出は、カスタム GLSL シェーダーによるメタボールエフェクトで実現されています。 エフェクト開発ツールではパラメータ調整からプリセット保存。Midjourneyからの生成テクスチャ、明度→Alpha 変換、フレームオーバーレイ、インスタンシング最適化などを行っています。

免疫活性化のビジュアルエフェクトの調整ツール

免疫活性化のビジュアルエフェクトの調整ツール - パラメータ調整からプリセット保存まで対応した開発環境

2. 距離ベースのアニメーション自動切り替え

免疫細胞のアニメーションは、ウイルスとの距離に応じて自動的に切り替わります。

  • normal 状態: `smile`（ループ再生）
  • 探索モード（find）: ボール当たり後、黒目が動いてウイルスを見つける動き（ループ再生）
  • 接近モード（pakupaku）: 黒目はウイルス方向を見ながら口をぱくぱくさせて向かう（ループ再生）
  • 捕食モード（eat）: 黒目は下に向いたまま口が動く（1 回再生）

距離による3段階切り替え（近い順に判定）により、プレイヤーは視覚的に免疫細胞の状態を直感的に理解できます。

3. Hokuyo LiDAR センサーによるタッチ検出システム

hokuyo2oscプロジェクト（openFrameworks 実装）が、LiDAR センサーからのタッチ位置検出を担当しています。

システム構成

  1. Hokuyo UST-10LX-H02 LiDAR センサー
    • 270 度の範囲で 2161 点の距離データを取得（50Hz、20ms 間隔）
    • 測定範囲: 60mm - 30,000mm
  2. hokuyo2osc（openFrameworks）
    • 北陽電機公式 URG Library を使用
    • 複数センサー同時対応
    • 4 点キャリブレーションによる正規化座標(0-1)変換
    • ボールサイズによる種類判定（白/金ボールの区別）
      • 当初はカメラ連携による色情報取得を試みたが、精度が上がらず
      • ボールサイズを変えることでセンサーのみで判定を実現
    • OSC 送信: `/game2/touch x y type`（x, y: 正規化座標、type: 0=白、1=金）
LiDAR の RecData からノーマライズされたクリックポイントを Webカメラの4点ホモグラフィ変換エリアからカラーピックしている画像

LiDAR の RecData からノーマライズされたクリックポイントを Webカメラの4点ホモグラフィ変換エリアからカラーピックしている画像

技術的特徴

  • 4 点キャリブレーションシステム: センサー座標空間の 4 点（p0, p1, p2, p3）を設定。バイリニア補間により、任意のセンサー座標を正規化座標(0-1)に変換
  • 重複フィルタリング: 空間的クラスタリング（同一タイムスタンプで近接ステップ30ステップ以内から最小距離のポイントのみ送信）、時間的クラスタリング（連続フレーム間でもstepIndexが近いポイントを重複として排除）、時空間的な統合フィルタリング（15フレーム間隔）
  • ボールサイズによる種類判定: クラスターのステップ範囲と距離からボール直径を計算。角度分解能を動的に計算（UST-10LX 対応）。統合バッファ機能により、複数センサーからのポイントを統合バッファに蓄積。直近 5 フレームのポイントをクラスタリングし、位置の平均とボールサイズの最大値を計算

4. ビデオテクスチャシステムの実装

キャラクターアニメーションには、WebM 形式のビデオテクスチャを使用。めちゃ軽い。

連番透過tifからalph ch 付きの映像書き出しテスト

連番透過tifからalph ch 付きの映像書き出しテスト - 複数の変換方式（ProRes 4444経由、フラッドフィル版、背景色マスク版など）の比較

実装

  • eat系（捕食モード）はループなし、それ以外はループ
  • eat系（捕食モード）は1回再生後、最初に戻して準備
  • 方向判定: X 方向の速度（`vel.x`）が正（plus）か負（minus）かで自動切り替え
  • 距離による自動切り替え: ウイルスとの距離に応じて、`find` → `pakupaku` → `eat` を自動選択

5. グリッドベースのウイルス配置システム

ウイルスの配置は、16×6=96 グリッドのシステムを使用しています。

  • 各ウイルスはグリッドターゲットを起点に、cos/sin 運動で浮遊
  • 新しいウイルスは、既存のウイルスがいないグリッドを優先的に選択
  • これにより、ウイルスの均等な分布が保証されます

6. OSC + WebSocket による双方向通信

Max/MSP との通信は、OSC + WebSocketのハイブリッド方式を採用しています。

受信（Max/MSP → Web）:

  • hokuyo2osc から OSC メッセージ（`/game2/touch x y type`）を受信
  • Max/MSP で処理・中継
  • Node.js サーバー（`node-osc`）が OSC メッセージを WebSocket に変換
  • Nuxt4 クライアントが WebSocket 経由で受信

送信（Web → Max/MSP）:

  • FPS、フェーズ情報、リザルト情報、SE、Finish 情報、撃退数などを OSC 送信
  • `useOSC.ts` composable で統一管理

📹 関連映像

技術検証映像

KIRIN からだウォーズ GAME2 の技術検証過程を記録した映像です。開発の各段階での技術的な検証内容を確認できます。

マルチ LiDAR センサーによるボール位置・サイズ推定・種類判定の技術検証

映像 1: カメラ連携システムの検証

LiDAR センサーとカメラの 4 点ホモグラフィ変換からのカラーピック検証。Hokuyo LiDAR センサーとカメラ連携システムの技術検証過程を記録した映像。4 点ホモグラフィ変換によるカラーピック機能、フレームオフセット機能、REC/PLAYBACK 機能などを実演。

映像 2: 複数センサー統合システムの検証

複数 LiDAR センサー統合システム - ボールサイズ推定による種類判定の実装検証。2 台の本番用 Hokuyo UST-10LX LiDAR センサーによる位置検出とボールサイズ推定システムのテスト記録。統合バッファ機能、クラスタリングアルゴリズム、プロジェクターキャリブレーション機能などを実演。

映像 3: 本番環境デバッグモード

2 台での LiDAR センサーによる ボール位置・サイズ推定・種類判定のリアルタイム可視化。本番環境（プロジェクター投影）で、2 台の UST-10LX LiDAR センサーによるボール検出システムをデバッグモードでテストしている様子を記録。ボール位置、サイズ推定、種類判定の可視化を実演。

技術スタック

  • フロントエンド: Nuxt4 + TypeScript + Vue3 + Pinia
  • 3D 描画: Three.js (WebGL2, GLSL3)
  • 状態管理: Pinia
  • 通信: Socket.IO + OSC (node-osc)
  • 外部連携: Max/MSP (OSC 経由)
  • センサー: Hokuyo UST-10LX-H02 LiDAR センサー
  • センサー処理: openFrameworks (hokuyo2osc)

まとめ

KIRIN からだウォーズ GAME2 は、LiDAR センサー（hokuyo2osc）、Web 技術（Nuxt4 + Three.js）を組み合わせた、ユニークなゲームシステムです。

システム全体の特徴

  1. LiDAR センサーによる高精度タッチ検出
    • Hokuyo UST-10LX による 270 度、1081 点の距離データ取得（40Hz）x2台
    • 4 点キャリブレーションによる正規化座標変換
    • 空間的・時間的クラスタリングによる重複排除
    • ボールサイズによる種類判定（白/金ボールの区別）
  2. Web 技術による高品質レンダリング
    • Nuxt4 + Three.js（WebGL2）によるリアルタイム描画
    • ビデオテクスチャによるキャラクターアニメーション
    • メタボールシェーダーによる視覚効果
    • 距離ベースの自動アニメーション切り替え
  3. OSC による柔軟な連携
    • hokuyo2osc → Max/MSP → Nuxt4 Game2 の 3 段階通信
    • WebSocket による双方向通信
    • リアルタイムパラメータ調整

特に、ビデオテクスチャによるキャラクターアニメーション、メタボールシェーダーによる視覚効果、距離ベースの自動アニメーション切り替え、LiDAR センサーによる高精度タッチ検出など、IE3 ならではの技術的アイデアが実装されています。

Back