Add Inspector debug panel to extras with an examples toolbar toggle - #9371
Open
mvaligursky wants to merge 33 commits into
Open
mvaligursky wants to merge 33 commits into
mvaligursky wants to merge 33 commits into
Conversation
Public API reportThis PR changes the public API surface (+50 / −0), per the docs' rules (@ignore / @Private / undocumented are excluded). Show API diff+CameraFly._capture: CanvasCapture
+CameraFly._controller: FlyController
+CameraFly._fov: number
+CameraFly._frame: InputFrame<{ move: number[]; rotate: number[] }>
+CameraFly._keys: Set<string>
+CameraFly._onKeyDown(e: KeyboardEvent): void
+CameraFly._onKeyUp(e: KeyboardEvent): void
+CameraFly._onPointer(e: Event): void
+CameraFly._ortho: boolean
+CameraFly._orthoHeight: number
+CameraFly._pose: Pose
+CameraFly._saved: { fov: number; orthoHeight: number; position: Vec3; rotation: Quat } | null
+CameraFly.app: AppBase
+CameraFly.camera: CameraComponent
+CameraFly.constructor(app: AppBase, camera: CameraComponent, onEnd: () => void)
+CameraFly.get zooms(): boolean
+CameraFly.speed: number
+CanvasCapture._listener: (e: Event) => void
+CanvasCapture.canvas: HTMLCanvasElement
+CanvasCapture.constructor(canvas: HTMLCanvasElement, onEvent: (e: Event) => void)
+Inspector.constructor(app: AppBase, options?: InspectorOptions)
+Inspector.destroy(): void
+Inspector.onVisibleChange: (visible: boolean) => void | null
+Inspector.set paused(value: boolean)
+Inspector.set visible(value: boolean)
+Inspector.step(): void
+InspectorOptions.dock?: "right" | "left"
+InspectorOptions.lockedNode?: GraphNode | null
+InspectorOptions.onVisibleChange?: (visible: boolean) => void
+InspectorOptions.pauseKey?: string
+InspectorOptions.stepKey?: string
+InspectorOptions.storageKey?: string | null
+InspectorOptions.toggleKey?: string
+InspectorOptions.top?: number
+InspectorOptions.visible?: boolean
+InspectorOptions.width?: number
+ViewportPicker._picker: Picker | null
+ViewportPicker._queue: Promise<any>
+ViewportPicker.app: AppBase
+ViewportPicker.constructor(app: AppBase)
+ViewportPicker.pick(clientX: number, clientY: number): Promise<{ camera: CameraComponent; entity: Entity; instance: MeshInstance } | null>
+WireframeMode._styles: Map<MeshInstance, number>
+WireframeMode.apply(app: AppBase): void
+WireframeMode.restore(): void
+class CameraFly
+class CanvasCapture
+class Inspector
+class ViewportPicker
+class WireframeMode
+interface InspectorOptionsInformational only — this never fails the build. |
Build size reportThis PR changes the size of the minified bundles.
|
added 4 commits
September 15, 2026 12:56
added 2 commits
September 15, 2026 15:26
# Conflicts: # src/extras/renderers/texture-renderer.js
…pector - Render and model components expand into collapsed sections per mesh instance and per distinct material, with every reflected property. - New Textures tab lists the device's textures largest first, tagged when they are render target attachments, with a live corner preview and channel selection; texture values in any property panel link to it. - Texture sampler state shows as constant names in a Sampling section. - Sections can start collapsed; a depth-format helper is shared.
Materials are found through the mesh instances of the components and layers, the debug line batches and the loaded material assets. Each shows its textures, compiled variants and properties, and the mesh instances the material lists as using it, each opening in place. Material values elsewhere link to the tab, including the material of each mesh instance, and the Textures and Shaders tabs list the materials using a texture or shader. The Meshes, Materials and Memory tabs share one walk over the mesh instances, so the Memory tab now also attributes the buffers of meshes on disabled entities, and lists a material's uniform buffer once.
Hovering any texture link, in the property view or a list, draws the texture in the corner of the viewport the way the Textures tab previews its selection, until the pointer leaves the link.
The frame graph lists passes flat, in the order they execute, with the numbers aligned. A pass owning others, through its before and after passes or as a multi-view wrapper, brackets them in a gutter on the left, one lane per level, with a tick on its own row. A merged pass keeps its number.
…ered Hovering a pass in the frame graph, or any render target link, previews the target's first attachment in the corner of the viewport. A link inside a hovered row previews its own target while the pointer is over it.
Lists the script classes the script registry holds and those created on entities straight from their class, with the entities using each, its declared attributes and lifecycle methods, and its source as the browser keeps it. The script component of an entity links each of its scripts to the tab.
…t subtrees A drop down next to the filter picks whether the text matches entity names, component types or script names, suggesting the component types or script names in the scene. Each row with children shows both its child count and the number of nodes in its whole subtree.
…ssets list The render, material, texture, animation, gsplat and model assets a container creates are listed right under it, indented and bracketed, and marked embedded. Each links to its container and a container lists its contents by kind, read from the container's resource. The Textures tab follows a texture's asset on to its container.
An animation track, material or texture handed to its users without the asset is still found: the anim layers playing a track, the mesh instances drawing with a material and the materials sampling a texture are listed on the asset. A container lists which of its contents are in use.
Pick outlines the entity under the pointer and selects it on click, through the screen camera whose viewport holds the pointer. Fly moves a camera with the mouse and WASD, swapping in the flown pose and projection just for rendering so the app keeps moving its own camera, and zooms an orthographic view. Both take the pointer ahead of the app while on. The Cameras tab lists every camera in render order, draws the frustum of the selected one, and switches the render mode of one camera or all of them to the debug views of the material inputs, or the whole scene to wireframe, with a reset putting back what each had. The panel toolbar and bars wrap on a narrow panel.
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adds
Inspector, an in-page debug panel for a running app: the entity hierarchy with live component properties, the frame graph of the last frame, the render targets on the device, and the physics world drawn through Bullet's debug drawer. It docks over the canvas, can pause and single-step the app, and pops out into its own window.Changes:
Inspectorclass in extras, hooked to the app'supdateanddestroyevents, with four tabs:scripts/esm/inspector/entity-inspector.mjs: a thin Script hosting the panel, so it can be added to an Editor project like any other script.NO_INSPECTORflag. Thumbnail capture suppresses the panel.API Changes:
Inspectorin extras:new Inspector(app, options)withvisible,dock,width,top,paused,selected,physicsDraw,physicsDrawOptions,lockedNode,highlight,highlightColor, the hotkey properties,select(),step(),refresh(),popOut(),dockBack(),destroy(), and avisibleevent.InspectorOptionsandInspectorPhysicsDrawOptionstypedefs. The Ammo debug drawer itself stays internal.Examples:
debug/entity-inspector: an animated character, primitives, a camera frame with bloom, and a steady rain of physics crates that are destroyed after a few seconds, with the inspector open by default.Performance: