Skip to content
G.

systems lab / 04

Transform Observatory

Edit one local transform, then trace how parent matrices move every descendant through a retained three-dimensional scene.

scenario 01 · local space becomes world space

Which ancestor actually moved the sensor?

Select the relay, mount, or sensor and compare local with world coordinates. Then rotate the orbit parent, switch material response, move the key light, and use camera presets to separate view transforms from object transforms.

Transform, camera, material, and light settings are authored teaching values. World coordinates and matrices are derived from them; this lab does not report browser or GPU measurements.

retained objects

Scene hierarchy

Select a row here or pick a visible object in the viewport.

Preparing WebGL viewport
Drag to orbit, scroll to zoom, or click a visible object to raycast-select it. The hierarchy and table provide the same selection and state without requiring the 3D view.

transform inspector

Relay

mesh

A box offset in its parent orbit frame.

World / Orbit frame / Relay

local position · authored
2.60, 0.00, 0.00
world position · derived
2.44, 0.20, -0.89
world scale · derived
1.00, 1.00, 1.00
orbit angle · committed
20.0°
World matrix

Row-major display of parent world matrix × local matrix. Translation occupies the final column.

0.710.000.712.44
0.001.000.000.20
-0.710.000.71-0.89
0.000.000.001.00

experiment controls

Transform the observatory

paused

Paused at a deterministic transform. Select a node, change a local value, or step the orbit parent.

Scene graph experiment settings
Camera preset

Preset moves the perspective camera; drag the viewport to orbit manually.

Field of view
42°

Smaller angles feel zoomed in; larger angles exaggerate perspective.

Material response

Lit reacts to the key light; normals encode surface direction; wire exposes triangles.

Key-light intensity
8

Compare this control in Lit and Normals mode to see which materials use lights.

Relay · local X
2.6

Local position is measured inside the selected node’s parent coordinate system.

Relay · local Y rotation
25°

Children inherit this rotation around the selected node’s local Y axis.

Relay · uniform scale
1.00×

Uniform scale keeps the same proportion on X, Y, and Z.

structured alternative

Every object without WebGL

This table exposes the same retained nodes and derived coordinates as the visual scene. “Local” belongs to a parent; “world” includes every ancestor.

Local and world positions for all scene graph objects
ObjectParentLocal XYZ · authoredWorld XYZ · derivedKind
World—0.00, 0.00, 0.000.00, 0.00, 0.00group
Hubworld0.00, 0.00, 0.000.00, 0.00, 0.00mesh
Orbit frameworld0.00, 0.20, 0.000.00, 0.20, 0.00group
Relayselectedorbit2.60, 0.00, 0.002.44, 0.20, -0.89mesh
Sensor mountrelay0.00, 0.72, 0.002.44, 0.92, -0.89group
Sensormount0.00, 0.72, 0.002.60, 1.60, -1.05mesh
Key lightworld-2.50, 3.00, 2.20-2.50, 3.00, 2.20light

Build notes

Keep transient motion outside React state

React owns durable experiment settings and the selected object. React Three Fiber owns the retained GPU scene. During playback, the orbit group mutates through a frame ref while the readable inspector samples it at a deliberately lower rate.

  • Architecture

    One typed node list and transform record drive both the nested R3F objects and the semantic HTML hierarchy. Pure row-major matrix composition derives world positions for the inspector without depending on browser or GPU state.

  • Tradeoff

    Orbit motion mutates a group ref at display rate while the HTML inspector samples its angle four times per second. That keeps animation smooth without scheduling a React render for every GPU frame.

  • Limitation

    The observatory uses authored teaching values, primitive geometry, one point light, Euler controls, and a small fixed hierarchy. It derives matrices and world coordinates but reports no browser or GPU measurements. It does not import assets, edit arbitrary graphs, solve gimbal lock, or profile a production renderer.

  • Performance

    The WebGL viewport is dynamically imported only on this route. Its pixel ratio is capped at 2×, OrbitControls damping is disabled, and R3F switches from continuous rendering to demand-driven frames whenever orbit playback is paused.