scene

English | 日本語

概要

• Scene JSON を SceneAsset.load() で読み込み、WebgApp.validateScene() と WebgApp.loadScene() を通してそのまま表示するサンプルです。
• 1 つの scene 定義の中に camera, primitives, models, hud, input mapping をまとめ、JavaScript 側では action handler だけを実装する構成にしています。
• 画面上には OverlayPanel ベースの DOM UI も重ねてあり、Scene JSON の action をボタンからも起動できるようにしています。これにより、scene 側の input 定義と JavaScript 側 handler のつながりを見比べやすくしています。

実行方法

• 実行ファイルは ./scene.html です
• WebGPU に対応したブラウザで開き、必要に応じて help panel や HUD と合わせて確認してください

使用している webg 機能

• WebgApp: 標準初期化、描画ループ、Scene JSON 読み込み
• SceneAsset.load: Scene JSON ファイルのロード
• WebgApp.validateScene: Scene JSON の妥当性検証
• WebgApp.loadScene: scene を現在の app 上へ配置
• SceneLoader: camera / hud / primitives / models / input mapping の復元
• SceneValidator: path 付き schema validation
• ModelAsset: scene 内 model の中間表現
• ModelBuilder: scene 内の model / primitive を runtime shape 群へ変換
• EyeRig(type="orbit"): scene 全体を見回す視点操作
• Message: Scene JSON 内 hud.guideLines / hud.statusLines を HUD として表示

確認ポイント

• scene.json の validator が通り、camera, hud, primitives, models, input をまとめて読み込めることを確認します。
• scene.json の hud.guideLines / hud.statusLines は、各行を x / y / text / color を持つ object で明示する形式になっていることを確認します。
• floor primitive と marker primitive が表示され、primitive 定義が SceneLoader 経由で配置できることを確認します。
• ../json_loader/modelasset.json を読み込んだモデルが同じ scene 内に表示され、scene 側からも ModelAsset の既存経路を再利用できることを確認します。
• 左側 OverlayPanel の actionボタンから pause / replay / floor wire / reset / download を実行でき、キーボードと同じ処理フローが呼ばれることを確認します。
• p, 1, 2, r, d の action が sceneRuntime.createInputHandler() 経由で JavaScript 側 handler へ届き、Scene JSON の input mapping が metadata として使えることを確認します。
• p で scene 内 model の animation 一括 pause / resume が切り替わることを確認します。
• 1 で model animation が先頭から再始動することを確認します。
• 2 で floor primitive の wireframe 表示が切り替わることを確認します。
• r でオービットカメラが scene 定義の初期角度と距離へ戻ることを確認します。
• d で現在の Scene JSON を再ダウンロードでき、scene export の最小入口として使えることを確認します。
• 右側 OverlayPanel に、scene file, entry 数, primitive 数, model 数, action 名一覧, validator warnings 数が表示され、Scene JSON 読み込み状況を画面上から追えることを確認します。

操作方法

• ドラッグ / 矢印キー: オービットカメラ回転
• ホイール / [ / ]: ズーム
• 画面左上 ボタン: Pause Scene, Replay Model, Floor Wire, Reset Camera, Download Scene JSON
• P: scene animation の pause / resume
• 1: model animation の再始動
• 2: floor wireframe の切り替え
• R: カメラを初期位置へ戻す
• D: 現在の Scene JSON をダウンロード