@adobe/data-gpu 0.9.69

package/src/graphics/camera/orbit/orbit-data-plugin.ts

@@ -0,0 +1,44 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import { Database } from "@adobe/data/ecs";
+import { Camera } from "../camera.js";
+import type { Orbit } from "./orbit.js";
+
+/**
+ * Declarative orbit camera state — the authored surface.
+ * Systems in `orbit-system-plugin.ts` drive the `camera` resource from this.
+ */
+export const orbitData = Database.Plugin.create({
+    extends: Camera.plugin,
+    resources: {
+        orbit: {
+            default: {
+                center:          [0, 0, 0],
+                radius:          3,
+                height:          0,
+                angle:           0,
+                autoSpin:        true,
+                autoSpinSpeed:   0.5,
+                nearFactor:      0.01,
+                farFactor:       4,
+                fitGeometry:     0,
+                fitRadiusFactor: 1.5,
+                fitHeightFactor: 0.25,
+                fitRadiusOffset: 0,
+                fitCenter:       null,
+            } satisfies Orbit as Orbit,
+        },
+    },
+    transactions: {
+        setOrbit(t, args: Partial<Orbit>) {
+            t.resources.orbit = { ...t.resources.orbit, ...args };
+        },
+        addOrbitAngle(t, delta: number) {
+            const cur = t.resources.orbit;
+            t.resources.orbit = { ...cur, angle: cur.angle + delta, autoSpin: false };
+        },
+        resumeAutoSpin(t) {
+            t.resources.orbit = { ...t.resources.orbit, autoSpin: true };
+        },
+    },
+});

package/src/graphics/camera/orbit/orbit-plugin.ts

@@ -0,0 +1,13 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import { Database } from "@adobe/data/ecs";
+import { orbitData } from "./orbit-data-plugin.js";
+import { orbitSystem } from "./orbit-system-plugin.js";
+
+/**
+ * Orbit camera — data + systems combined. Add to any service that needs
+ * a draggable, auto-spinning, model-fitting camera.
+ *
+ * Exported as `Orbit.plugin` via orbit.ts → public.ts.
+ */
+export const plugin = Database.Plugin.combine(orbitData, orbitSystem);

package/src/graphics/camera/orbit/orbit-system-plugin.ts

@@ -0,0 +1,74 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import { Database } from "@adobe/data/ecs";
+import type { Aabb, Vec3 } from "@adobe/data/math";
+import { orbitData } from "./orbit-data-plugin.js";
+
+/**
+ * Systems that drive `camera` from the `orbit` resource each frame.
+ *
+ * - **_orbitCameraSystem**: updates camera position/target/near/far from the
+ *   orbit polar coords; auto-spins when `orbit.autoSpin` is true.
+ * - **_orbitAutoFitSystem**: when `orbit.fitGeometry` is non-zero, reads that
+ *   Geometry's `_bounds`, sizes the orbit to fit, and zeroes the field.
+ */
+export const orbitSystem = Database.Plugin.create({
+    extends: orbitData,
+    systems: {
+        _orbitCameraSystem: {
+            create: db => {
+                return () => {
+                    const { orbit, camera: cam } = db.store.resources;
+                    if (!cam) return;
+                    if (orbit.autoSpin) {
+                        const dt = db.store.resources.frameTime.dt;
+                        db.store.resources.orbit = { ...orbit, angle: orbit.angle + dt * orbit.autoSpinSpeed };
+                    }
+                    const angle = db.store.resources.orbit.angle;
+                    db.store.resources.camera = {
+                        ...cam,
+                        position: [
+                            orbit.center[0] + Math.sin(angle) * orbit.radius,
+                            orbit.center[1] + orbit.height,
+                            orbit.center[2] + Math.cos(angle) * orbit.radius,
+                        ],
+                        target: orbit.center,
+                        nearPlane: Math.max(orbit.radius * orbit.nearFactor, 0.1),
+                        farPlane:  Math.max(orbit.radius * orbit.farFactor,  100),
+                    };
+                };
+            },
+            schedule: { during: ["update"] },
+        },
+        _orbitAutoFitSystem: {
+            create: db => () => {
+                const orbit = db.store.resources.orbit;
+                if (!orbit.fitGeometry) return;
+                // orbit.fitGeometry holds a Geometry entity id. `_bounds` lives
+                // on modelLoader's schema, which orbit doesn't extend — read as
+                // unknown and narrow manually.
+                const entity = db.store.read(orbit.fitGeometry) as { _bounds?: Aabb } | null;
+                const bounds = entity?._bounds;
+                if (!bounds) return;
+                const size = Math.max(
+                    bounds.max[0] - bounds.min[0],
+                    bounds.max[1] - bounds.min[1],
+                    bounds.max[2] - bounds.min[2],
+                );
+                const center = orbit.fitCenter ?? [
+                    (bounds.min[0] + bounds.max[0]) / 2,
+                    (bounds.min[1] + bounds.max[1]) / 2,
+                    (bounds.min[2] + bounds.max[2]) / 2,
+                ] as Vec3;
+                db.store.resources.orbit = {
+                    ...orbit,
+                    center,
+                    radius: size * orbit.fitRadiusFactor + orbit.fitRadiusOffset,
+                    height: size * orbit.fitHeightFactor,
+                    fitGeometry: 0,
+                };
+            },
+            schedule: { during: ["preUpdate"] },
+        },
+    },
+});

package/src/graphics/camera/orbit/orbit.ts

@@ -0,0 +1,36 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import type { Vec3 } from "@adobe/data/math";
+
+/**
+ * Orbit camera state — a polar arrangement around a center point with an
+ * auto-spin and a one-shot auto-fit to a Geometry's bounds.
+ *
+ *   - `center` / `radius` / `height` / `angle` define the camera placement.
+ *   - `nearFactor` / `farFactor` scale the near and far planes so they
+ *     track the orbit radius (models authored in any unit render without
+ *     clipping).
+ *   - `autoSpin` / `autoSpinSpeed` rotate the camera each frame when the
+ *     user isn't dragging.
+ *   - `fitGeometry` is an entity id; when non-zero, the auto-fit system
+ *     reads that Geometry's bounds on the first available frame, sizes the
+ *     orbit, and zeros the field. `fitRadiusFactor` / `fitHeightFactor` /
+ *     `fitRadiusOffset` / `fitCenter` shape the fit.
+ */
+export interface Orbit {
+    center: Vec3;
+    radius: number;
+    height: number;
+    angle: number;
+    autoSpin: boolean;
+    autoSpinSpeed: number;
+    nearFactor: number;
+    farFactor: number;
+    fitGeometry: number;
+    fitRadiusFactor: number;
+    fitHeightFactor: number;
+    fitRadiusOffset: number;
+    fitCenter: Vec3 | null;
+}
+
+export * as Orbit from "./public.js";

package/src/graphics/camera/orbit/public.ts

@@ -0,0 +1,7 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+export { plugin } from "./orbit-plugin.js";
+export { orbitData } from "./orbit-data-plugin.js";
+export { orbitSystem } from "./orbit-system-plugin.js";
+export { attachOrbitDrag } from "./attach-orbit-drag.js";
+export type { OrbitDragService } from "./attach-orbit-drag.js";

package/src/graphics/camera/public.ts

@@ -0,0 +1,6 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+export * from "./schema.js";
+export * from "./to-view-projection.js";
+export * from "./screen-to-world-ray.js";
+export { plugin } from "./camera-plugin.js";

package/src/graphics/camera/schema.ts

@@ -0,0 +1,21 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import { F32, Vec3 } from "@adobe/data/math";
+import { Schema } from "@adobe/data/schema";
+
+export const schema = {
+    type: "object",
+    properties: {
+        aspect: F32.schema,
+        fieldOfView: F32.schema,
+        nearPlane: F32.schema,
+        farPlane: F32.schema,
+        position: Vec3.schema,
+        target: Vec3.schema,
+        up: Vec3.schema,
+        // 0 = perspective, 1 = orthographic, fractional = hybrid blend
+        orthographic: F32.schema,
+    },
+    required: ["aspect", "fieldOfView", "nearPlane", "farPlane", "position", "target", "up", "orthographic"],
+    additionalProperties: false,
+} as const satisfies Schema;

package/src/graphics/camera/screen-to-world-ray.ts

@@ -0,0 +1,47 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import { Mat4x4, Vec3, Vec4, Line3 } from "@adobe/data/math";
+import type { Camera } from "./camera.js";
+import { toViewProjection } from "./to-view-projection.js";
+
+/**
+ * Builds a world-space ray from a canvas pixel coordinate.
+ * Pixel origin is top-left (matching `offsetX`/`offsetY` on pointer events).
+ * Internally converts to NDC (Normalized Device Coordinates: x/y ∈ [-1, 1],
+ * origin at canvas center, y-up) before unprojecting via the inverse
+ * view-projection matrix.
+ */
+export const screenToWorldRay = (
+    cam: Camera,
+    screenX: number,
+    screenY: number,
+    canvasWidth: number,
+    canvasHeight: number,
+    rayLength = 1000,
+): Line3 => {
+    // NDC: x ∈ [-1, 1] left→right, y ∈ [-1, 1] bottom→top.
+    const ndcX = (screenX / canvasWidth) * 2 - 1;
+    const ndcY = 1 - (screenY / canvasHeight) * 2;
+
+    // WebGPU NDC z ∈ [0, 1]: near plane at 0, far plane at 1.
+    const nearPoint: Vec4 = [ndcX, ndcY, 0, 1];
+    const farPoint: Vec4 = [ndcX, ndcY, 1, 1];
+
+    const invVP = Mat4x4.inverse(toViewProjection(cam));
+
+    const nearW = Mat4x4.multiplyVec4(invVP, nearPoint);
+    const farW = Mat4x4.multiplyVec4(invVP, farPoint);
+
+    const near: Vec3 = [nearW[0] / nearW[3], nearW[1] / nearW[3], nearW[2] / nearW[3]];
+    const far: Vec3 = [farW[0] / farW[3], farW[1] / farW[3], farW[2] / farW[3]];
+
+    const dir: Vec3 = [near[0] - far[0], near[1] - far[1], near[2] - far[2]];
+    const len = Math.sqrt(dir[0] ** 2 + dir[1] ** 2 + dir[2] ** 2);
+
+    if (len < 0.0001) return { a: near, b: far };
+
+    const norm: Vec3 = [dir[0] / len, dir[1] / len, dir[2] / len];
+    const end: Vec3 = [near[0] + norm[0] * rayLength, near[1] + norm[1] * rayLength, near[2] + norm[2] * rayLength];
+
+    return { a: near, b: end };
+};

package/src/graphics/camera/to-view-projection.ts

@@ -0,0 +1,29 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import { Mat4x4, Vec3 } from "@adobe/data/math";
+import type { Camera } from "./camera.js";
+
+export const toViewProjection = (cam: Camera): Mat4x4 => {
+    const lookAt = Mat4x4.lookAt(cam.position, cam.target, cam.up);
+
+    const f = 1.0 / Math.tan(cam.fieldOfView / 2);
+    const d = Vec3.distance(cam.position, cam.target);
+
+    // WebGPU clip-space convention: z_ndc ∈ [0, 1].
+    // Perspective wants m[2][2] = far/(near-far); orthographic wants d/(near-far)
+    // so that z_clip(z_view = -far) = (perspective: far / w_clip=far → 1)
+    //                                  (orthographic: d / w_clip=d → 1).
+    // Blend the two cases by the orthographic factor.
+    const m22 = ((1 - cam.orthographic) * cam.farPlane + cam.orthographic * d) / (cam.nearPlane - cam.farPlane);
+    const m23 = cam.nearPlane * m22;
+
+    // Fourth row blends: w' = (1 - orthographic) * (-z) + orthographic * d
+    const perspective: Mat4x4 = [
+        f / cam.aspect, 0, 0, 0,
+        0, f, 0, 0,
+        0, 0, m22, -(1 - cam.orthographic),
+        0, 0, m23, cam.orthographic * d,
+    ];
+
+    return Mat4x4.multiply(perspective, lookAt);
+};

package/src/graphics/graphics-plugin.ts

@@ -0,0 +1,108 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import { Database } from "@adobe/data/ecs";
+import { Vec4 } from "@adobe/data/math";
+import { core } from "../core/core-plugin.js";
+
+/**
+ * Graphics presentation — extends the `core` GPU runtime with everything
+ * about drawing to a canvas: the swap-chain context, color/depth formats,
+ * the depth texture, and the per-frame render pass.
+ *
+ * Render-pass lifecycle, sandwiched between core's phase anchors with hard
+ * ordering edges (`during` is only a soft hint, so we use after/before):
+ * `beginRenderPass` runs after `preRender` and before `render` (pass open
+ * before draws); draw systems run `during: ["render"]`; `endRenderPass` runs
+ * after `render` and before `postRender` (pass closed after draws, before
+ * core submits the encoder). Compute-only consumers (e.g. `physics`) depend
+ * on `core` directly and never touch any of this.
+ */
+export const graphics = Database.Plugin.create({
+    extends: core,
+    resources: {
+        renderPassEncoder: { default: null as GPURenderPassEncoder | null, transient: true },
+        depthTexture: { default: null as GPUTexture | null, transient: true },
+        clearColor: { default: [0, 0, 0, 1] as Vec4, transient: true },
+        canvas: { default: null as HTMLCanvasElement | null, transient: true },
+        canvasContext: { default: null as GPUCanvasContext | null, transient: true },
+        // Guarded for headless hosts (Node): this default is evaluated at module
+        // load, and `navigator` is browser-only. Rendering re-derives the real
+        // preferred format when a canvas is configured; the placeholder is unused.
+        canvasFormat: {
+            default: (typeof navigator !== "undefined" && navigator.gpu
+                ? navigator.gpu.getPreferredCanvasFormat()
+                : "bgra8unorm") as GPUTextureFormat,
+            transient: true,
+        },
+        depthFormat: { default: "depth24plus" as GPUTextureFormat, transient: true },
+    },
+    transactions: {
+        setCanvas(t, canvas: HTMLCanvasElement | null) {
+            t.resources.canvas = canvas;
+        },
+    },
+    systems: {
+        configureCanvas: {
+            create: db => () => {
+                const { device } = db.store.resources;
+                if (!device) return;
+                let { canvasContext } = db.store.resources;
+                const { canvas, canvasFormat } = db.store.resources;
+                if (canvas && !canvasContext) {
+                    canvasContext = db.store.resources.canvasContext = canvas.getContext("webgpu");
+                    if (!canvasContext) {
+                        throw new Error("No WebGPU context");
+                    }
+                    canvasContext.configure({
+                        device,
+                        format: canvasFormat,
+                        alphaMode: "premultiplied",
+                    });
+                }
+            },
+            schedule: { after: ["preUpdate"], before: ["update"] },
+        },
+        beginRenderPass: {
+            create: db => () => {
+                const { canvas, commandEncoder, clearColor, canvasContext, device, depthFormat } = db.store.resources;
+                let { depthTexture } = db.store.resources;
+                if (!commandEncoder || !canvasContext || !device || !canvas) return;
+
+                const canvasSize: [number, number] = [canvas.width, canvas.height];
+                if (!depthTexture || depthTexture.width !== canvasSize[0] || depthTexture.height !== canvasSize[1]) {
+                    depthTexture = db.store.resources.depthTexture = device.createTexture({
+                        size: canvasSize,
+                        format: depthFormat,
+                        usage: GPUTextureUsage.RENDER_ATTACHMENT,
+                    });
+                }
+
+                db.store.resources.renderPassEncoder = commandEncoder.beginRenderPass({
+                    colorAttachments: [{
+                        clearValue: clearColor,
+                        loadOp: "clear",
+                        storeOp: "store",
+                        view: canvasContext.getCurrentTexture().createView(),
+                    }],
+                    depthStencilAttachment: {
+                        view: depthTexture.createView(),
+                        depthClearValue: 1.0,
+                        depthLoadOp: "clear",
+                        depthStoreOp: "store",
+                    },
+                });
+            },
+            schedule: { after: ["preRender"], before: ["render"] },
+        },
+        endRenderPass: {
+            create: db => () => {
+                const { renderPassEncoder } = db.store.resources;
+                if (renderPassEncoder) {
+                    renderPassEncoder.end();
+                    db.store.resources.renderPassEncoder = null;
+                }
+            },
+            schedule: { after: ["render"], before: ["postRender"] },
+        },
+    },
+});

package/src/graphics/picking/pick-hit.ts

@@ -0,0 +1,13 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import type { Entity } from "@adobe/data/ecs";
+
+/**
+ * One ray-pick result — the Model the ray hit and the parametric distance
+ * along the ray segment (`alpha ∈ [0,1]` where 0 is the ray's near point
+ * `a` and 1 is the far point `b` from `screenToWorldRay`).
+ */
+export interface PickHit {
+    readonly entity: Entity;
+    readonly distance: number;
+}

package/src/graphics/picking/picking-plugin.ts

@@ -0,0 +1,101 @@
+// © 2026 Adobe. MIT License. See /LICENSE for details.
+
+import { Database } from "@adobe/data/ecs";
+import { Aabb, type Line3 } from "@adobe/data/math";
+import { True } from "@adobe/data/schema";
+import { Camera } from "../camera/camera.js";
+import { screenToWorldRay } from "../camera/screen-to-world-ray.js";
+import { worldBounds } from "../scene/model/world-bounds-plugin.js";
+import type { PickHit } from "./pick-hit.js";
+
+/**
+ * Picking — ray-against-PickableModel hit testing.
+ *
+ * `PickableModel` extends `Model` with a `pickable` flag. The archetype
+ * gives a clean opt-in: insert via `insertPickableModel` and the entity
+ * participates in picking; plain `Model` entities are invisible to the
+ * ray-caster.
+ *
+ * `pickRay(ray)` scans every visible PickableModel with a `_worldBounds`
+ * column. `pickFromScreen({ x, y })` takes pixel coords (e.g. from
+ * `offsetX` / `offsetY` on a pointer event), converts them to NDC
+ * (Normalized Device Coordinates, x/y ∈ [-1, 1], origin at center),
+ * then reconstructs the eye→cursor ray and delegates to `pickRay`.
+ *
+ * Exposed as **actions** (not transactions) because picks return a
+ * `PickHit | null` value — transactions are restricted to `Entity | void`.
+ *
+ * Future: replace the linear scan with a `broadphase` resource of type
+ * `Broadphase` exposing `queryRay(ray, cb)` and `queryAabb(box, cb)`.
+ */
+
+const pickingBase = Database.Plugin.create({
+    extends: Database.Plugin.combine(worldBounds, Camera.plugin),
+    components: {
+        pickable: True.schema,
+    },
+    archetypes: {
+        PickableModel: ["geometry", "position", "rotation", "scale", "visible", "parent", "pickable"],
+    },
+    transactions: {
+        insertPickableModel(t, args: {
+            geometry: number;
+            position?: readonly [number, number, number];
+            rotation?: readonly [number, number, number, number];
+            scale?: readonly [number, number, number];
+            parent?: number;
+        }): number {
+            return t.archetypes.PickableModel.insert({
+                geometry:  args.geometry,
+                position:  args.position ?? [0, 0, 0],
+                rotation:  args.rotation ?? [0, 0, 0, 1],
+                scale:     args.scale    ?? [1, 1, 1],
+                visible:   true,
+                parent:    args.parent   ?? 0,
+                pickable:  true,
+            });
+        },
+    },
+});
+
+// `picking` adds only actions (no new C/R/A), so the `db` passed to every
+// action is structurally assignable to this type — full component typing
+// with no `any`.
+type PickingDB = Database.Plugin.ToDatabase<typeof pickingBase>;
+
+const pickRayImpl = (db: PickingDB, ray: Line3): PickHit | null => {
+    let best: PickHit | null = null;
+    for (const arch of db.queryArchetypes([
+        "geometry", "visible", "pickable", "_worldBounds",
+    ])) {
+        const ids    = arch.columns.id;
+        const vis    = arch.columns.visible;
+        const bounds = arch.columns._worldBounds;
+        for (let i = 0; i < arch.rowCount; i++) {
+            if (!vis.get(i)) continue;
+            const alpha = Aabb.lineIntersection(bounds.get(i), ray);
+            if (alpha < 0) continue;
+            if (best === null || alpha < best.distance) {
+                best = { entity: ids.get(i), distance: alpha };
+            }
+        }
+    }
+    return best;
+};
+
+export const picking = Database.Plugin.create({
+    extends: pickingBase,
+    actions: {
+        pickRay(db, ray: Line3): PickHit | null {
+            return pickRayImpl(db, ray);
+        },
+        pickFromScreen(db, args: { x: number; y: number }): PickHit | null {
+            const cam    = db.resources.camera;
+            const canvas = db.resources.canvas;
+            if (!cam || !canvas) return null;
+            // Convert pixel coords → NDC (x/y ∈ [-1, 1], origin at canvas center).
+            const ray = screenToWorldRay(cam, args.x, args.y, canvas.width, canvas.height);
+            return pickRayImpl(db, ray);
+        },
+    },
+});

package/src/graphics/plugins.md

@@ -0,0 +1,120 @@
+```mermaid
+graph LR
+
+%% ── Infrastructure ───────────────────────────────────────────────────────────
+    graphics["**graphics**
+    res: device, canvas, commandEncoder
+    renderPassEncoder, clearColor, depthTexture
+    phases: input › preUpdate › update
+    physics › preRender › render"]
+
+%% ── Core model plugins ───────────────────────────────────────────────────────
+    Node["**Node.plugin**
+    comp: position, rotation, scale
+    parent, visible, pickable
+    arch: Node"]
+
+    Camera["**Camera.plugin**
+    res: camera: Camera"]
+
+    Light["**Light.plugin**
+    res: light: Light
+    {direction, color, ambientStrength, environmentUrl}"]
+
+    Model["**Model.plugin**
+    comp: geometry, modelUrl
+    arch: Geometry, Model"]
+
+    scene["**scene**
+    (combines Node, Camera, Light, Model)"]
+
+%% ── Authoring abstractions ───────────────────────────────────────────────────
+    animation["**animation**
+    comp: animationClipTracks, animationClipDuration
+    animationClipRef, animationTargets, animationTime
+    animationSpeed, animationLoop, animationPlaying
+    arch: AnimationClip, Animation, AnimationObservable"]
+
+    Orbit["**Orbit.plugin**
+    res: orbit: Orbit
+    {center, radius, height, angle, autoSpin, fitGeometry…}"]
+
+%% ── System plugins ───────────────────────────────────────────────────────────
+    sceneUniforms["**SceneUniforms.plugin**
+    (packs camera + light into GPU uniform buffer)"]
+
+    transform["**transform**
+    (derives _worldMatrix per-frame from TRS)"]
+
+    pbrCore["**pbrCore**
+    arch: _VisibleMaterial, _PbrPrimitive"]
+
+    modelLoader["**modelLoader**
+    (async glTF → GPU primitives,
+    writes _bounds to Geometry)"]
+
+    pbrSkinning["**pbrSkinning**
+    (joint matrices per-frame, arch: _Skeleton)"]
+
+    picking["**picking**
+    actions: pickRay, pickFromNdc → PickHit"]
+
+%% ── Render aggregators ───────────────────────────────────────────────────────
+    pbrIblRender["**pbrIblRender**
+    res: _iblEnvironment, _iblIrradiance
+    _iblPrefiltered, _iblBrdfLut"]
+
+    pbrDirectRender["**pbrDirectRender**
+    (direct lighting, no IBL)"]
+
+%% ── Extends edges ────────────────────────────────────────────────────────────
+    Camera          --> graphics
+    Light           --> graphics
+    modelLoader     --> graphics
+    Model           --> Node
+    scene           --> Node
+    scene           --> Camera
+    scene           --> Light
+    scene           --> Model
+
+    Orbit           --> Camera
+    sceneUniforms   --> Camera
+    sceneUniforms   --> Light
+
+    transform       --> Node
+    modelLoader     --> pbrCore
+    modelLoader     --> Model
+    modelLoader     --> animation
+
+    pbrSkinning     --> modelLoader
+    pbrSkinning     --> pbrCore
+    pbrSkinning     --> transform
+    pbrSkinning     --> animation
+
+    picking         --> modelLoader
+    picking         --> transform
+    picking         --> Camera
+
+    pbrIblRender    --> pbrCore
+    pbrIblRender    --> modelLoader
+    pbrIblRender    --> sceneUniforms
+    pbrIblRender    --> transform
+
+    pbrDirectRender --> pbrCore
+    pbrDirectRender --> modelLoader
+    pbrDirectRender --> sceneUniforms
+    pbrDirectRender --> transform
+
+%% ── Styling ──────────────────────────────────────────────────────────────────
+    classDef core     fill:#1a3a5c,stroke:#4a8fc4,color:#fff
+    classDef authoring fill:#2a4a2a,stroke:#6ab06a,color:#fff
+    classDef system   fill:#3a2a1a,stroke:#c48a4a,color:#fff
+    classDef renderer fill:#3a1a3a,stroke:#c46ab0,color:#fff
+    classDef infra    fill:#1a1a3a,stroke:#6a6ab0,color:#fff
+
+    class Node,Camera,Light,Model,scene core
+    class animation,Orbit authoring
+    class transform,pbrCore,modelLoader,pbrSkinning,sceneUniforms,picking system
+    class pbrIblRender,pbrDirectRender renderer
+    class graphics infra
+```