inspect-runtime

実行中のアプリを調べる

Engine 2.23 以降では、各アプリは globalThis[Symbol.for('playcanvas.inspector')] にあるフックに自身を通知します。アプリに window.app やデバッグコードを追加する代わりに、このフックを通じて実行中の状態を読み取ってください。

接続

• このスキルを基準に scripts/devtools-hook.js の場所を解決し、ページ内のスクリプトより先に実行される初期化スクリプトとして挿入します。フックを後から定義すると、既存のアプリを検出できません。その場合は再読み込みしてください。
• ページのコードは globalThis.__playcanvasApps を読み取ります。これは、各実行中のアプリを { version, revision, protocol } に対応付ける Map です。app.init() でエントリーが追加され、app.destroy() で削除されます。
• このスクリプトは、DevTools 拡張機能のフックなど、先に定義されたフックを引き継ぎます。
• エントリーがない場合、Engine が 2.23 より前のバージョンである、フックの読み込みが遅れた、またはアプリで devtools: false が設定されています。Engine はフックからスローされたエラーを握りつぶします。
• 2.23.0 では、アプリを通知するのはデバッグビルド（playcanvas/debug、build/playcanvas.dbg.*）のみです。デフォルトのインポートではフックは呼び出されません。以降の 2.23 パッチでは、すべてのビルドで修正されています。

状態を読み取る

• 値が描画済みのフレームを反映するよう、frameend の後に読み取ります。
• Engine オブジェクトではなく、通常の数値と文字列を呼び出し元に返します。
• 便利な読み取り対象：app.root.findByName() と findByTag()、ワールド座標と meshInstance.aabb、app.stats.drawCallCount と frameTime、および entity.anim.baseLayer.activeState。
• app.timeScale = 0 で一時停止します。update は dt がゼロの状態でも実行されます。1 フレーム進めるには、スケールを元に戻し、次の frameend で再びゼロにします。
• 計測のために変更した内容は、すべて元に戻してください。

インスペクターパネル

@playcanvas/inspector を使うと、ユーザー向けのパネルを追加できます。new Inspector(app) で階層、アセット、マテリアル、シェーダー、テクスチャ、レンダーターゲット、フレームグラフ、物理を表示します。アプリ自身の playcanvas パッケージをインポートする必要があるため、開発ビルドにのみ追加してください。キャンバス上に描画され、表示を上書きするため、verify-pixels でキャプチャする前に破棄してください。描画をステップ実行するには、デバッグビルドが必要です。