Viewport

The Viewport is the 3D window where you see and edit your scene. It comes in two flavours - the Editor view with a free camera, and the Game view that renders through your scene's Camera - and both are powered by their own WebGPU device.

Editor view vs Game view

The Editor and Game tabs are the same viewport in two modes:

	Editor tab	Game tab
Camera	A free fly/orbit camera you drive	Your scene's active Camera
Purpose	Building and inspecting the scene	Watching and playing the running game
During Play	Stays a free camera - you can fly around a running scene	Play surface - mouse-look, input, UI
Gizmos & overlays	Always available	Hidden (it is the player's view)
Grid	Shown	Hidden

Each viewport owns its own WebGPU device (created with initGPU and a Renderer) and keeps an independent viewpoint - switching from Editor to Game and back restores where each camera was looking. The Editor view renders through its free camera even while the game runs, so selection, gizmos, the collider overlay, and the camera preview all keep working during Play.

📸 Screenshot - save as img/editor-viewport-editor-game.png

The centre tab group showing the Editor and Game tabs, with the Editor active: a small scene with the translate gizmo on a selected object and the grid visible.

Camera navigation

All navigation happens with the pointer over the Editor viewport.

Action	Control
Fly-look	Hold right-mouse and move - look around in place
Fly move	While flying (right-mouse held): W/S forward/back, A/D strafe, E/Q up/down
WASD nav	With the pointer over the view: W/A/S/D move along the look direction, E/Q world up/down
Orbit	Alt/Option + drag - orbit around the selection
Free-look	Left-drag on empty space
Zoom	Scroll wheel
Frame selection	F, or double-click an object

While driving WASD, hold Shift to move fast (×4) or Alt to move fine (×0.25); the base speed scales with how far the camera is zoomed out, so navigation stays usable in both a tight prop scene and a sprawling imported world. Because the pointer is over the view, the global W/E/R gizmo shortcuts stand down so W means "forward", not "switch to Move".

Framing (F / double-click) tweens the camera to fit the whole object - its geometry, not just its origin - and, if the head-on angle is blocked by something in front, quietly rotates around to find a clear view rather than zooming inside it.

The Editor's free camera works in any play state, so you can fly around a scene while it runs. Number keys 1–9 (Editor view) jump the free camera onto the Nth Camera in the scene - handy for checking what a moving follow-camera sees mid-play.

Selection

• Click an object to select it. Selection uses a GPU picker that returns the frontmost object under the cursor, so clicking a ball resting on a floor selects the ball even where the floor's gizmo axis passes through it.
• Shift / Cmd / Ctrl + click adds to (or extends) a multi-selection.
• Clicking empty space clears the selection.

Selected objects show an orange outline that silhouettes the whole selected subtree. Selection stays live during Play. The Hierarchy mirrors whatever you pick here.

Transform gizmos

The active gizmo follows the transform tool chosen in the Toolbar (W Move, E Rotate, R Scale):

• Move - three arrow axes; drag one to slide along it.
• Rotate - three rings; drag one to spin around that axis.
• Scale - three knobs; drag one to scale along that axis (object-local).

Gizmos are world-aligned and drawn at a constant on-screen size, so they subtend the same angle whatever the zoom. Dragging writes the object's local Transform - for a child object, the world-space drag is converted into the child's own frame so it moves the way you expect. While you drag, the Inspector updates live; releasing records a single undo step.

Snapping

Turn on the ⊞ Snap toggle in the Toolbar to snap gizmo drags:

• Move snaps to the grid increment.
• Scale snaps to the grid increment.
• Rotate snaps to the angle increment.

A press on a gizmo axis that never crosses the drag threshold is treated as a click, so you can still select whatever is under the cursor instead of committing a no-op move.

📸 Screenshot - save as img/editor-viewport-gizmos.png

Three side-by-side captures (or one composite) of the Move arrows, Rotate rings, and Scale knobs on a selected cube.

Adding objects

Right-click empty space (in edit mode) to open the add-object context menu:

• Create ▸ Cube, Sphere, Plane, Cylinder, Capsule · Empty · Directional Light, Point Light, Camera · UI ▸ Text, Panel, Button
• Paste (⌘V) - paste a copied object here
• Focus Selection (F)

New objects drop where you are looking - at the centre-screen ray's intersection with the ground plane (or the surface under it), not at the world origin.

The Hierarchy's create menu carries a fuller palette than this one: a 2D ▸ group (Sprite, 2D Camera) and a UI ▸ Image item that the viewport's right-click menu leaves out.

Drag-drop placement (surface snap)

Drag a mesh or prefab out of the Asset Browser and drop it onto the Editor viewport to place it surface-snapped under the cursor: Awaken GPU-picks whatever geometry is under the drop point and ray-casts its mesh for the exact hit, so the object lands on the rooftop, table, or terrain you dropped it on (falling back to the ground plane when nothing is hit). Scripts and materials are not scene drops - drag those onto the Inspector instead.

Overlays and HUD

Collider debug overlay - F4

Selecting an object always shows its collider shapes as green wireframes (for the selection and its descendants) in the Editor view - a quick check that a collider actually wraps its mesh.

Press F4 while a scene is running to toggle the full physics debug overlay, which draws, in one pass:

• Every trigger (sensor) collider in cyan, at its true physics pose.
• The mesh the player is currently blocked against in green, with a ⛔ blocked by: label naming it (double-click the label to copy the name).

Mesh colliders draw their actual geometry. The overlay is Play-only, because colliders exist only while the simulation runs. See Colliders and Physics debugging.

Stats overlay - ⓘ

Click the ⓘ button (top of the viewport) to toggle a live performance readout for that view. It groups into:

• Device - GPU name, and whether GPU-driven culling is active/supported.
• Performance - FPS, frame time, CPU ms, GPU + present time, cache rebuild ms, cull/pack ms, distance-cull count, and per-pass GPU timings when timestamp queries are available.
• Scene - render resolution and DPR, triangles, vertices, draw calls, main/static batch counts, shadow draws, object count, animated-mesh count.
• Memory - mesh bytes, texture source bytes, and GPU-compressed VRAM for the textures this scene actually uses.

Double-click the stats block to copy it to the clipboard, with the perf-affecting render settings appended so a pasted readout explains itself. See Performance.

📸 Screenshot - save as img/editor-viewport-stats.png

The Editor viewport with the ⓘ stats overlay open, showing the Device / Performance / Scene / Memory sections on a moderately sized scene.

GPU picker

On a machine with more than one GPU (a hybrid-graphics laptop), a small GPU dropdown appears in the corner of the Editor view. Pick which adapter the editor renders on - switching reloads the page. This is the same preference GPU-driven culling depends on. See Performance.

Camera preview

Select a Camera in the Editor view and a preview inset appears in the top-right corner showing exactly what that camera sees, along with its frustum drawn in the scene and a billboarded camera icon.

In-game UI overlay

UI elements (UINode entities - text, panels, buttons, images) render as a WYSIWYG overlay in both views. The runtime overlay's buttons fire only in the Game view, so they do not swallow your clicks while you edit the scene. In the Editor view the UI edit layer below sits on top and makes those same elements selectable and draggable.

UI edit layer - ◱

The ◱ button (top of the Editor view; it is not on the Game tab) toggles direct editing of the screen-space UI. It starts on. With it on:

• Click a HUD element to select it (the Hierarchy and Inspector follow the pick).
• Drag the selected element's body to move it.
• Drag one of its eight resize handles to resize it.

Each move or resize writes back to the UINode's x / y / w / h and records one undo step per gesture. When HUD scaling is on (a non-zero uiReferenceHeight), the drag accounts for the scale factor so an element lands where you drop it. Turn ◱ off to orbit and fly over a busy HUD without its elements catching the pointer.

Behaviour during Play

• The Editor view keeps its free camera, selection, gizmos, and overlays - it is a live inspector on the running scene.
• The Game view is play-driven: left-click locks the pointer for FPS-style mouse-look (mirroring the shipped player), and keyboard/mouse input feed your scripts.
• Because Play is a sandbox, transform edits you make in the Editor view are cached and kept-or-discarded when you Stop - see the Toolbar keep-or-discard prompt.

See also

• Toolbar & Menus - transform tools, snap, and playback
• Hierarchy - the selection this view mirrors
• Camera - how the Game view chooses its camera
• Colliders and Physics debugging - the F4 overlay
• Keyboard Shortcuts - every navigation and gizmo key