Inspector
Inspectorは、実行中のPlayCanvasアプリケーション用のデバッグパネルです。キャンバスの横にドッキングし、アプリケーションのシーン、GPUリソース、描画されたフレームを現在の状態で表示します。選択したもののプロパティは、下のビューでリアルタイムに更新されます。
次のような疑問を解決するのに役立ちます。
- エンティティが表示されないのはなぜか、そのコンポーネントは今どのように設定されているか。
- メッシュはどのマテリアルとシェーダーで描画され、どのテクスチャを使っているか。
- フレームは何を、どのパスで、どの順序で描画しているか。
- ビデオメモリはどこで使われているか。
Inspectorはアプリケーションを読み取るだけです。変更を加えるのは、ユーザーが指示した場合に限られます。エンティティのオン・オフ、アプリケーションの一時停止とコマ送り、そして表示だけに関わる上書き（レンダーモード、ワイヤーフレーム、飛行またはオービットするカメラ）です。これらはInspectorを閉じると元に戻ります。
Inspectorの追加
Inspectorは@playcanvas/inspectorパッケージとして公開されており、エンジン2.23以降が必要です。
npm install @playcanvas/inspector
アプリケーションに対して作成します。
import { Inspector } from '@playcanvas/inspector';
const inspector = new Inspector(app, { dock: 'left', width: 480 });
playcanvasはこのパッケージのpeer dependencyです。Inspectorはアプリケーション自身のエンジン上で動作するため、アプリケーションがimportしているものと同じplaycanvasパッケージである必要があります。削除するにはinspector.destroy()を呼び出します。
専用のエンティティにScriptとして追加し、シーンに組み込むこともできます。
import { EntityInspector } from '@playcanvas/inspector';
const entity = new Entity('inspector');
entity.addComponent('script');
entity.script.create(EntityInspector, { properties: { dock: 'left' } });
app.root.addChild(entity);
オプション
| オプション | 既定値 | 説明 |
|---|---|---|
visible | true | パネルを表示した状態で開始するかどうか。 |
dock | 'right' | パネルをドッキングするキャンバスの側。'left'または'right'。 |
width | 420 | パネルの幅（CSSピクセル）。 |
top | 0 | 他のオーバーレイと重ならないように、パネルの上に空ける間隔（CSSピクセル）。 |
toggleKey | 'Backquote' | パネルの表示・非表示を切り替えるキー。 |
pauseKey | 'F9' | アプリケーションを一時停止・再開するキー。 |
stepKey | 'F10' | 一時停止中に1フレーム進めるキー。 |
storageKey | 'pc-inspector' | アクティブなタブやパネルの幅など、パネルの設定を保存するローカルストレージのキー。nullの場合は何も保存しません。 |
ツールバー
| ボタン | 説明 |
|---|---|
| Pause / Resume（F9） | アプリケーションを一時停止します。描画は続きますが、時間は止まります。 |
| Step（F10） | 一時停止中に1フレーム進めます。 |
| Pick | ビューの上にポインターを置くとその下のエンティティの輪郭を表示し、クリックすると選択します。 |
| Fly | アプリケーション自身のカメラを動かさずに、マウスとWASDでカメラを飛行させます。 |
| Orbit | 選択したエンティティの周りでカメラをオービットさせます。ドラッグで回転、右ドラッグでパン、ホイールでズームします。 |
| Pop out | パネルを専用のウィンドウに移し、キャンバスを隠さないようにします。 |
Hide（`） | パネルを非表示にします。 |
Escキーで、ピック、飛行、オービットを終了します。
タブ
各タブは1種類のオブジェクトを一覧表示し、その下のプロパティビューに選択したオブジェクトを表示します。マテリアルのテクスチャやパスのレンダーターゲットなど、他のオブジェクトを参照する値はリンクになっており、そのオブジェクトをそれぞれのタブで選択します。
| タブ | 説明 |
|---|---|
| Hierarchy | エンティティのツリー。エンティティ名、コンポーネント、Script名で絞り込めます。プロパティビューには、選択したエンティティのトランスフォーム、すべてのコンポーネント、属性を含むすべてのScriptが表示され、エンティティはビュー上で輪郭表示されます。各行のチェックボックスでエンティティのオン・オフを切り替えます。 |
| Cameras | 描画順のカメラと、それぞれの描画先。レンダーモードを使うと、最終的な画像の代わりにアルベド、ワールド法線、ライティングなどのシーンのマテリアル入力を、1つのカメラまたはすべてのカメラで表示できます。シーンをワイヤーフレームで描画することもできます。 |
| Assets | レジストリ内のすべてのアセットと、そのファイル、読み込み状態、使用箇所。 |
| Frame graph | 直前のフレームを描画したパスを順に表示し、それぞれのレイヤー、描画、レンダーターゲットを示します。GPU timingsはデバイスが計測できる場合に各パスのGPU時間を表示し、Freezeはアプリケーションの実行中も現在のフレームを表示し続け、Previewは選択したパスのレンダーターゲットをビューの上に描画します。 |
| Render targets | デバイス上のレンダーターゲットと、そこに描画したパス、選択したアタッチメントのライブプレビュー。 |
| Textures | デバイス上のテクスチャを大きい順に表示し、ライブプレビューと表示するチャンネルの選択を提供します。 |
| Meshes | アプリケーションのメッシュを大きい順に表示し、そのジオメトリと使用箇所を示します。 |
| Materials | アプリケーションのマテリアルを使用数の多い順に表示し、テクスチャ、コンパイル済みのシェーダーバリアント、使用箇所を示します。 |
| Scripts | アプリケーションのScriptクラスと、それを使うエンティティ、属性、ソース。 |
| Memory | リソースの種類別のビデオメモリと、デバイス上のすべての頂点、インデックス、ユニフォーム、ストレージバッファ。 |
| Shaders | コンパイル済みのシェーダーとそのソース。 |
| Physics | 物理ワールドの剛体とジョイント、そしてワールドをシーンの上に描画するオプション。 |
フレームのステップ実行
Frame graphタブでは、フレームをドローコール1つずつ描画できます。画像がどのように組み上がり、どの描画が画面に何を描くのかを確認できます。
- Frame graphタブを開き、フォワードパス、またはWorldレイヤーの不透明メッシュなど、そのレイヤーステップの1つを選択します。
- Debug frameをオンにします。アプリケーションが一時停止し、パスは選択した描画までだけを描画します。ビューにはその描画までのフレームが表示されます。
- 上下の矢印キーで、描画を1つずつ戻ったり進めたりします。プロパティビューには描画されたメッシュインスタンスが一覧表示され、現在のものが強調表示されます。ビューではその輪郭が表示され、ステータスバーにはdraw 8 of 12 · World opaqueのようにその番号が表示されます。項目を展開すると、メッシュやマテリアルなどの詳細を確認できます。
- Debug frameをオフにすると、再びフレーム全体が描画されます。
描画のステップ実行にはエンジンのデバッグビルドが必要で、他のビルドではこのオプションは無効になります。Viteなどのバンドラーは、開発時にplaycanvasパッケージのdevelopmentエクスポート条件によってデバッグビルドを選択します。
サンプル
エンティティインスペクターのサンプルでは、ライト、物理ボディ、Script、アニメーションするキャラクターを含む小さなシーンでInspectorを開きます。ヒエラルキーでエンティティを選択するか、ビューでピックし、カメラを飛行またはオービットさせ、他のタブも確認してください。`キーでパネルの表示・非表示を切り替えます。