collada_loader

English | 日本語

概要

• main.js 内で指定した Collada (.dae) ファイルを読み込み、ModelAsset に正規化してから表示するサンプルです。
• WebgApp.loadModel() から Collada facade を呼び、parse から ModelAsset / runtime 生成までを共通入口で扱うサンプルです。
• 読み込んだ ModelAsset は D キーで JSON ファイルとしてダウンロードできます。
• Blender から Collada (.dae) を export する場合も、Y-up で出力したファイルを前提とします。
• loader の model origin policy は、スキニングモデルでは skeleton root、非スキニングモデルでは mesh node を原点とします。

実行方法

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

使用している webg 機能

• WebgApp: 標準初期化、描画ループ、Help Panel 表示
• CommandPalette: animation 操作、wireframe、screenshot、JSON 出力、camera reset をまとめる操作パレット
• WebgApp.loadModel: Collada facade の高レベル入口
• ModelLoader: DAE の text load / parse / ModelAsset 化 / build / instantiate をまとめる
• ModelAsset: データ表現の保持と JSON ダウンロード
• ModelAsset.getClipNames: build 前の clip 一覧確認
• ModelBuilder: ModelAsset から Shape / Skeleton / Animation を構築
• ModelBuilder.animationMap: clip id から runtime Animation を引く
• build() 結果 helper: instantiate() / createNodeTree() / bindAnimationBindings() / getAnimation() / getAnimationNames() / startAllAnimations() / playAllAnimations() / setAnimationsPaused()
• EyeRig(type="orbit"): バウンディングボックス基準のオービット視点

処理フロー

• サンプルは WebgApp.loadModel(COLLADA_FILE, { format: "collada" ... }) を呼び、loader の共通入口から Collada facade へ入ります。
• ModelLoader は DAE text を読み込み、ColladaShape に parse と正規化を委ねます。
• ColladaShape は mesh / skeleton / animation / node を ModelAsset 形式へまとめます。
• その後 ModelBuilder が Shape / Skeleton / Animation / Node を組み立て、サンプルはその build 結果を runtime として扱います。
• glTF と違って Collada loader 側には static bake 計画はありませんが、最終的な runtime helper は共通の ModelBuilder を通ります。

ダウンロードした JSON の見方

• meta.source は Collada、meta.upAxis は Y になっている前提です。
• meshes[] は Collada mesh を ModelAsset 共通 geometry へ変換した結果です。
• nodes[].animationBindings と animations[].targetSkeleton を見ると、どの clip がどの skeleton に接続されているかを確認できます。
• skeletons[].jointOrder は skin weight が参照する joint 順を固定するための情報で、builder 復元時にも使われます。
• animations[].tracks[].joint と skeletons[].joints[].name を見比べると、track 名と復元 bone 名が一致しているかを確認できます。

確認ポイント

• COLLADA_FILE で指定した DAE が shape / skeleton / animation へ正しく変換されるかを確認します
• Help Panel に file / model / orbit / target / anim / clip0 / wireframe 状態が表示され、viewer として必要な状態を画面上で追えることを確認します
• サンプル内では facade の戻り値 runtime を使い、animationMap 直参照ではなく getAnimation() / getAnimationNames() を使って接続確認できることを確認します
• 1 キーで先頭 clip を restartAnimation(clipId) により名前指定で再始動できることを確認します
• 2 / 3 キーで先頭 clip を pauseAnimation(clipId) / resumeAnimation(clipId) により個別停止・再開できることを確認します
• カメラ距離がモデルのバウンディングボックスから自動設定され、モデル全体が初期表示で見切れないことを確認します
• D キーで出力した JSON を json_loader で再読込しても表示できることを確認します
• Shift + Arrow と Shift + Drag で camera target を平行移動でき、細部を中央へ寄せて確認できることを確認します
• W で wireframe、S で screenshot、R で初期 framing へ戻ることを確認します
• CommandPalette から animation の replay / pause / resume、wireframe、screenshot、JSON 出力、camera reset を実行できることを確認します
• Help Panel は現在値と操作説明、CommandPalette は設定変更と実行操作という役割で読めることを確認します
• Blender export 時の up-axis 設定が Y-up でない DAE は loader の想定外とし、その場合の向きずれは asset 側の問題として扱います

AI / 利用者向けの読み取りポイント

• 「読み込みは成功したが clip が見えない」ときは、animations[] と nodes[].animationBindings を先に見ます。
• 「skeleton はあるのに動かない」ときは、skeletons[].jointOrder と animations[].tracks[].joint の対応を見ます。
• 「どの node が元 DAE のどの mesh か分からない」ときは、nodes[].colladaMeshIndex を使います。
• 「表示位置だけが怪しい」ときは、loader の model origin policy と camera 初期位置を疑い、bbox 基準の framing と PAN の動きを合わせて確認します。

操作方法

• ドラッグ / 矢印キー: オービットカメラ回転
• Shift + ドラッグ / 矢印キー: カメラ target の平行移動
• ホイール / [ / ]: ズーム
• Space: アニメーション一時停止
• 1: 先頭 clip を再生し直す
• 2: 先頭 clip を一時停止
• 3: 先頭 clip を再開
• W: wireframe 切り替え
• S: screenshot 保存
• D: ModelAsset JSON をダウンロード
• R: カメラをバウンディングボックス基準の初期位置へ戻す
• / または canvas ダブルタップ: CommandPalette を開く