Class Inspector

An in-page inspector for a running application. It docks a panel over the canvas with four tabs above a live property view of whatever is selected:

• Hierarchy: the entity tree. The property view shows the node's transform, every component it carries and every script instance with its attributes. The selected node is outlined in the viewport.
• Frame graph: the render passes of the last frame in execution order, as the render pass trace prints them, with the layer steps of forward passes, the light of shadow passes and optional GPU timings. Render target cells link to the next tab.
• Render targets: every render target on the device including the backbuffer, with its attachments and the passes that rendered into it this frame, linking back to the frame graph. The selected target's attachment can be previewed live in a corner of the viewport.
• Textures: every texture on the device, largest GPU footprint first, with the same live preview. Texture values elsewhere, such as the maps of a material, link here.
• Meshes: every mesh found through the components, layers and assets using it, largest first, with its geometry and users. Nothing keeps a list of meshes, so a note counts the vertex buffers on the device that belong to no mesh found. Mesh values elsewhere link here.
• Materials: every material found through the mesh instances and assets using it, most used first, with its textures, compiled variants and users. Material values elsewhere link here, and the Textures and Shaders tabs list the materials using a texture or shader.
• Scripts: every script class the script registry holds or an entity uses, with the entities using it, its declared attributes and its source as the browser keeps it. The script sections of an entity link here.
• Memory: video memory by kind of resource, and every buffer on the device, largest first, named after the mesh, material or asset it was found to belong to. Buffer values elsewhere link here.
• Shaders: every shader on the device with its language, state and vertex attributes. The compiled variants listed on a material link here.
• Assets: every asset in the registry with its file, load state and the components using it. Asset references on a component link here, and a texture names the asset it came from.
• Physics: the rigid bodies and joints of the scene, with the physics world drawn over the scene through the engine's debug drawer when Ammo is loaded.

The app can be paused and stepped a frame at a time, and the panel can be popped out into its own window to leave the canvas unobscured.

The view is read-only, with one exception: the checkbox on each hierarchy row flips the node's enabled flag.

const inspector = new Inspector(app, { dock: 'left' });
inspector.visible = false; // show again with the backquote key
Copy

Default keys: backquote toggles the panel, F9 pauses and resumes, F10 steps one frame while paused. Pausing sets AppBase#timeScale to zero and suspends the sound manager, so rendering continues while every time-driven system stands still. Scripts that read the wall clock rather than the frame delta keep moving.

The property view is generic: it reflects on the public getters of each component and script, so components it has never heard of show up with all of their state.