@dailies-studio/shot-editor 0.1.0

package/src/stage/SplitRenderer.tsx

@@ -0,0 +1,511 @@
+// The stage's render controller: two views of one scene, into one canvas.
+//
+// Mounted INSIDE `ShotRuntime`'s canvas, and only while a second pane is on
+// screen. `renderControl: "external"` is what makes that legal — see the
+// contract in packages/shot/src/ShotRuntime.tsx. `useFrame(…, 1)` is what hands
+// the present over: r3f skips its own render whenever any subscriber has a
+// priority above zero, which is the identical mechanism `PostPipeline` uses.
+//
+// ── WHY THE CAMERA PANE'S POST GOES THROUGH A RENDER TARGET ──────────────
+//
+// It is not for the resolution and it is not for the colour. It is because a
+// `RenderPipeline` rendered STRAIGHT TO A SCISSORED CANVAS wipes its neighbour
+// on the WebGPU backend.
+//
+// The mechanism, measured against three 0.185.1: `RenderPipeline.render()`
+// forces `outputColorSpace = workingColorSpace` for the duration of the chain,
+// which makes `needsFrameBufferTarget` false and leaves the pass at the
+// canvas's real sample count (4, because the stage asks for `antialias: true`).
+// A plain render's `currentSamples` is 0, because it DOES take the framebuffer
+// target. At 4 samples `WebGPUBackend.beginRender` attaches the swapchain
+// texture as the MSAA RESOLVE TARGET — and a multisample resolve is a
+// whole-attachment operation that `setScissorRect` does not reach. So the post
+// pane's resolve stamps the entire canvas from a buffer that never held the
+// other pane.
+//
+// Three things fix it and only one of them is honest. `antialias: false` costs
+// the whole canvas its AA. "Always draw the post pane first" is unwritten
+// ordering magic the next person will break. Rendering post into its OWN target
+// and blitting that into the pane is backend-agnostic, AA-agnostic and
+// order-agnostic, and it was measured identical on WebGPU and on the WebGL2
+// fallback. It is also the only one CI can protect: the pinned Chromium in this
+// repo cannot create a WebGPU device at all (dxil.dll), so every automated run
+// of this lane takes the fallback and would never see the bug.
+//
+// THE RULE THAT FALLS OUT OF THAT, for whoever adds a third pane: never mix a
+// plain render and a direct `pipeline.render()` across one scissored canvas.
+// The failure is silent, it only appears on WebGPU with AA on, and it passes CI.
+//
+// ── …AND WHY IT IS setRenderTarget AND NOT setOutputRenderTarget ─────────
+//
+// Both bind the same texture. Only one of them tells the SHADER how big it is.
+//
+// `setOutputRenderTarget` leaves `renderer._renderTarget` null, and on that
+// path `_renderScene` never calls `setRenderTarget()` (Renderer.js: the
+// `else` branch just reads the output target). So `renderer.getRenderTarget()`
+// stays null, and `ScreenNode.update` falls through to `getDrawingBufferSize()`
+// — the WHOLE canvas — while `gl_FragCoord` only spans the pane-sized target.
+// In a 50/50 split `screenUV` therefore runs 0..0.5 across the camera pane:
+// `vignette` puts its bright centre on the pane's outer edge, `edgeFade` fades
+// the wrong two sides, and `ghost` samples half the frame. The preview then
+// disagrees with the export for every scene that uses them, from one toggle.
+//
+// `setRenderTarget` makes `_renderTarget` non-null, so `screenSize` is the pane
+// and `screenUV` is 0..1 across it — matching the blit quad's own uv, which is
+// what the un-suffixed `sceneTexture` samples with. The colour argument above
+// survives unchanged: with `_renderTarget !== _outputRenderTarget` the renderer
+// reports `NoToneMapping` + working space, so `needsFrameBufferTarget` is still
+// false and there is still exactly one encode, at the blit. It additionally
+// drops `currentSamples` to the target's own 0, which removes the MSAA resolve
+// this header's first section is about rather than merely routing around it.
+//
+// NAMED CEILING: the scene PASS is still sized from the drawing buffer.
+// `PassNode.updateBefore` honours an output target's size only when it is an XR
+// target, so the pass renders the pane's frustum into a canvas-wide texture.
+// The stretch cancels at the blit (quad uv 0..1 both ways) so the IMAGE is
+// right, but bloom and chromatic aberration compute their kernels in that
+// stretched space, so a round bloom is slightly elliptical in a split. Fixing
+// it needs a pass whose target aspect can differ from the canvas's, which three
+// does not expose — not another call here.
+//
+// ── COLOUR ───────────────────────────────────────────────────────────────
+//
+// `outputColorTransform = false` on the pipeline is load-bearing. The target
+// stays in WORKING space, `texture()` decodes nothing out of it, and the blit's
+// own render applies `renderOutput()` exactly once. Leaving it true encodes at
+// the pipeline and again at the blit: a linear 0.5 lands at 223 instead of 188,
+// which looks plausible enough to ship. Same single-encode gate post.ts states.
+//
+// ── BINS ─────────────────────────────────────────────────────────────────
+//
+// A scene with a `mesh` layer draws in several passes (packages/shot/bins.ts).
+// EVERY render here goes through `renderBins` or a `SceneSource` rather than
+// `gl.render` / `pass()` directly, so both panes agree with each other and with
+// the export about what covers what. `renderBins` degenerates to exactly one
+// `gl.render` when there is nothing to split, so a scene with no model takes
+// the identical call this file always made.
+//
+// ── NOTHING IS ALLOCATED PER FRAME ───────────────────────────────────────
+//
+// The rig, the clay, the blit quad and the scratch colour are all hoisted. The
+// hot path is scissor rects and one uniform write.
+import { useEffect, useMemo } from "react";
+import { useFrame, useThree } from "@react-three/fiber";
+import { Color, ColorManagement, HalfFloatType, Layers, RenderTarget } from "three";
+import { MeshBasicNodeMaterial, QuadMesh, RenderPipeline } from "three/webgpu";
+import type { ColorSpace } from "three";
+import type { WebGPURenderer } from "three/webgpu";
+import { texture, uv } from "three/tsl";
+import {
+  binSceneSource,
+  buildPostChain,
+  hasPostChain,
+  passSceneSource,
+  postSignature,
+  renderBins,
+  transitionTap,
+} from "@dailies-studio/shot";
+import type { RenderBin, SceneEffects } from "@dailies-studio/shot/doc";
+import type { StageFeed } from "./feed.js";
+import type { PaneRect } from "./panes.js";
+import { workingDrawPlan } from "./shading.js";
+import type { ShadingMode } from "./shading.js";
+import { EDITOR_LAYER } from "./StageTools.js";
+
+/**
+ * The working pane's backdrop and its clay.
+ *
+ * NOT tokens. These are a GL clear colour and a material colour, so they cannot
+ * read the CSS custom properties the overlays use; they are picked to sit just
+ * off `--panel` so the pane reads as a workspace rather than as the shot.
+ */
+export const CLAY_BACKDROP = new Color(0x141417);
+const CLAY_FILL = new Color(0x8a8a93);
+/** The wireframe's line colour. Brighter than the clay so edges read as lines
+ *  on the same backdrop rather than as a dimmer clay. */
+const WIRE_FILL = new Color(0xb8b8c2);
+
+/** Scratch for saving the shot's own clear colour across the working pane's. */
+const _prevClear = new Color();
+
+export interface SplitRendererProps {
+  feed: StageFeed;
+  panes: { working: PaneRect | null; camera: PaneRect | null };
+  /** The active scene's effects, or null when nothing is on screen. */
+  effects: SceneEffects | null;
+  /** The active scene's render bins at this frame. Empty or single = one draw,
+   *  which is every scene without a live mesh layer. */
+  bins: readonly RenderBin[];
+  /** Whether the scene contains a mesh layer AT ALL. Static (lifetimes
+   *  ignored), because it picks the post chain's SHAPE — see ShotRuntime. */
+  hasMesh: boolean;
+  /** MASTER frame — the grain's seed, and the only clock the chain sees. */
+  frame: number;
+  /** How the WORKING pane draws. The camera pane is not addressable: it is
+   *  always the graded render, whatever this says. */
+  shading: ShadingMode;
+}
+
+export function SplitRenderer({ feed, panes, effects, bins, hasMesh, frame, shading }: SplitRendererProps): null {
+  // The runtime class IS `WebGPURenderer` (createStageGl builds one, WebGL2 is
+  // a BACKEND of it, not a different class); r3f types `gl` as the classic
+  // renderer, so the cast happens once here rather than at five call sites.
+  const gl = useThree((s) => s.gl) as unknown as WebGPURenderer;
+  const scene = useThree((s) => s.scene);
+  const shotCamera = useThree((s) => s.camera);
+  const size = useThree((s) => s.size);
+
+  /**
+   * The clay override, ONE dedicated instance and never shared.
+   *
+   * `depthTest`/`depthWrite` stay OFF, matching every layer material. It is
+   * tempting to turn them on "because the working pane is the 3D one", and it
+   * would be a second truth: this lane's paint order is `renderOrder =
+   * layer.order` and nothing else (see ShotRuntime's header), so a depth-tested
+   * working pane would disagree with the camera pane about what covers what —
+   * and, because layers default to z = 0, would z-fight the common case.
+   *
+   * `transparent` is left false. three copies the SOURCE material's
+   * `transparent` onto the override per object anyway, which is what keeps the
+   * render-list assignment consistent; setting it here as well would only add a
+   * second opinion.
+   */
+  const overrides = useMemo(() => {
+    const clay = new MeshBasicNodeMaterial();
+    clay.color.copy(CLAY_FILL);
+    clay.depthTest = false;
+    clay.depthWrite = false;
+    clay.toneMapped = false;
+    // The wireframe is the same material with the fill swapped for edges: the
+    // depth/tone rationale above holds unchanged, because a wireframe pane's
+    // paint order is still `renderOrder` and nothing else.
+    const wire = new MeshBasicNodeMaterial();
+    wire.color.copy(WIRE_FILL);
+    wire.wireframe = true;
+    wire.depthTest = false;
+    wire.depthWrite = false;
+    wire.toneMapped = false;
+    return { clay, wire };
+  }, []);
+  useEffect(
+    () => () => {
+      overrides.clay.dispose();
+      overrides.wire.dispose();
+    },
+    [overrides],
+  );
+
+  const signature = effects === null ? "" : `${postSignature(effects)}::${hasMesh}`;
+  const post = useMemo(() => {
+    if (effects === null || !hasPostChain(effects)) return null;
+    // Layer 0 only. This source is what feeds the graded image, so pinning it is
+    // what makes "an editor-only object can never appear in the camera pane"
+    // true by construction rather than by everyone remembering to set a mask.
+    // Both sources honour it identically.
+    const source = hasMesh
+      ? binSceneSource(scene, shotCamera, new Layers())
+      : passSceneSource(scene, shotCamera, new Layers());
+    const chain = buildPostChain(source.textureNode, effects);
+    const pipeline = new RenderPipeline(
+      gl as unknown as ConstructorParameters<typeof RenderPipeline>[0],
+    );
+    pipeline.outputNode = chain.outputNode;
+    pipeline.outputColorTransform = false; // see the colour note in the header
+    // Half float, working space: the chain's output is scene-referred light and
+    // an 8-bit sRGB hop here would band every gradient the bloom touches.
+    const target = new RenderTarget(1, 1, {
+      type: HalfFloatType,
+      // Read off ColorManagement rather than written as `LinearSRGBColorSpace`:
+      // the pipeline forces the WORKING space for the chain, so this target has
+      // to be whatever that is, not whatever it is today.
+      colorSpace: ColorManagement.workingColorSpace as ColorSpace,
+    });
+    const material = new MeshBasicNodeMaterial();
+    material.colorNode = texture(target.texture, uv());
+    material.depthTest = false;
+    material.depthWrite = false;
+    material.toneMapped = false;
+    // THREE'S OWN full-screen primitive, not a hand-rolled plane. Its geometry
+    // carries the v-FLIPPED uv three uses everywhere it blits a render target
+    // (`QuadGeometry`: the bottom-left vertex is uv 0,1), and its camera covers
+    // NDC exactly — so uv 0..1 lands on the current VIEWPORT, whatever pane
+    // that is, and the image comes out the same way up on both backends. A
+    // `PlaneGeometry` looks equivalent and is upside down.
+    const blit = new QuadMesh(material);
+    return { source, chain, pipeline, target, material, blit };
+    // `effects` is deliberately not a dependency: its VALUES are uniforms
+    // written every frame, and only the SIGNATURE changes the graph's shape.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [gl, scene, shotCamera, signature]);
+
+  useEffect(
+    () => () => {
+      if (post === null) return;
+      post.chain.dispose();
+      post.pipeline.dispose();
+      post.source.dispose();
+      post.target.dispose();
+      post.material.dispose();
+    },
+    [post],
+  );
+
+  /**
+   * The WORKING pane's own post rig, for "rendered" shading. Mirrors `post`
+   * with two deliberate differences:
+   *
+   *  1. Its OWN source target, drawn by `renderBins` at FRAME time with
+   *     `feed.workingCamera` — never `pass()`/`binSceneSource`, which bake a
+   *     camera at build time. The working slot's camera OBJECT is swapped by
+   *     isolation (StageTools puts an orthographic head-on rig in it), so the
+   *     camera has to be read at draw time for the swap to cost nothing.
+   *  2. The source is sized to the PANE, so the scene is drawn at the pane's
+   *     own resolution and `screenUV` spans it (the header's second section).
+   *
+   * NAMED CEILING, and it is the header's own, NOT escaped: `BloomNode`
+   * sizes its whole mip chain from `renderer.getDrawingBufferSize()` in
+   * `updateBefore` (three 0.185.1, BloomNode.js:347) rather than from the
+   * bound target, so the blur kernel is still computed in canvas space and a
+   * round bloom is as elliptical in this pane as in the camera one. Sizing
+   * the source to the pane does not reach that, and no call here can — it
+   * needs a pass whose target aspect may differ from the canvas's.
+   *
+   * Keyed on the mode so the rig exists only while rendered shading is on:
+   * solid users pay nothing, and leaving the mode disposes the pipeline. It
+   * is keyed on the EFFECTS signature alone and not on `signature`, which
+   * carries `hasMesh`: that bit picks the camera pane's SOURCE KIND (bin vs
+   * pass) and this rig has neither — it always draws its own target with
+   * `renderBins` — so folding it in would tear down and recompile the whole
+   * working pipeline every time a mesh layer entered or left the scene.
+   */
+  const wantWorkingGrade = shading === "rendered";
+  const workingSignature = effects === null ? "" : postSignature(effects);
+  const wpost = useMemo(() => {
+    if (!wantWorkingGrade || effects === null || !hasPostChain(effects)) return null;
+    const src = new RenderTarget(1, 1, { type: HalfFloatType });
+    const chain = buildPostChain(texture(src.texture, uv()), effects);
+    const pipeline = new RenderPipeline(
+      gl as unknown as ConstructorParameters<typeof RenderPipeline>[0],
+    );
+    pipeline.outputNode = chain.outputNode;
+    pipeline.outputColorTransform = false; // one encode, at the blit — header
+    const target = new RenderTarget(1, 1, {
+      type: HalfFloatType,
+      colorSpace: ColorManagement.workingColorSpace as ColorSpace,
+    });
+    const material = new MeshBasicNodeMaterial();
+    material.colorNode = texture(target.texture, uv());
+    material.depthTest = false;
+    material.depthWrite = false;
+    material.toneMapped = false;
+    const blit = new QuadMesh(material);
+    return { src, chain, pipeline, target, material, blit };
+    // Same rule as `post`: `effects` values are uniforms written per frame,
+    // only the SIGNATURE changes the graph's shape.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [gl, workingSignature, wantWorkingGrade]);
+
+  useEffect(
+    () => () => {
+      if (wpost === null) return;
+      wpost.chain.dispose();
+      wpost.pipeline.dispose();
+      wpost.src.dispose();
+      wpost.target.dispose();
+      wpost.material.dispose();
+    },
+    [wpost],
+  );
+
+  // The props are read straight out of the closure. r3f re-points `useFrame`'s
+  // callback ref in a layout effect on every render, and `ClockDriver` — the
+  // LAST child of the scene — is what calls `advance`, so the callback that
+  // draws is always the one this render produced.
+  useFrame(() => {
+    const working = panes.working;
+    const camera = panes.camera;
+    const fx = effects;
+    const at = frame;
+    const workingCamera = feed.workingCamera;
+
+    // The shot's own clear colour is ShotBackground's, written on a layout
+    // effect. Borrowing it for one pane and handing it back is cheaper than
+    // re-deriving the background here, and cannot drift from it.
+    gl.getClearColor(_prevClear);
+    const prevAlpha = gl.getClearAlpha();
+
+    // 0. A transition window owns the camera pane outright: the compositor
+    //    below in @dailies-studio/shot has captured nothing yet, because under
+    //    `renderControl: "external"` it deliberately does not present. Its
+    //    capture goes here, in the same unscissored slot as our own post and
+    //    for the same reason, at the PANE's size so the blend is not stretched
+    //    across a frustum it was not rendered for. Without this the editor
+    //    would show hard cuts in split view where the export dissolves.
+    const blend = camera === null ? null : transitionTap();
+    if (blend !== null && camera !== null) {
+      gl.setScissorTest(false);
+      blend.capture(camera.width, camera.height);
+    }
+
+    // 1. The camera pane's post chain, OFFSCREEN and UNSCISSORED. See the
+    //    header for why this cannot go straight to the canvas. Skipped inside a
+    //    window: the compositor rendered this scene into its own operand target
+    //    already, with the same chain.
+    if (blend === null && camera !== null && post !== null && fx !== null) {
+      // The target is PANE sized, in device px: the pane gets its own
+      // resolution for free, and `setSize` already no-ops when it matches.
+      const dpr = gl.getPixelRatio();
+      post.target.setSize(
+        Math.max(1, Math.round(camera.width * dpr)),
+        Math.max(1, Math.round(camera.height * dpr)),
+      );
+      post.chain.write(fx, at);
+      gl.setScissorTest(false);
+      // The bins first, into whatever the source owns. A `pass()`-backed source
+      // no-ops here and renders itself from inside `pipeline.render()` below,
+      // which is the untouched single-render path.
+      post.source.draw(gl, bins);
+      gl.setRenderTarget(post.target);
+      post.pipeline.render();
+      gl.setRenderTarget(null);
+    }
+
+    // 1b. The WORKING pane's grade, offscreen and unscissored — rendered
+    //     shading with a chain only. The same offscreen-then-blit construction
+    //     as the camera pane, so the WebGPU MSAA resolve can never reach the
+    //     neighbour. The source draw masks the working camera to LAYER 0: the
+    //     gizmo and any future editor-layer object must never be graded — the
+    //     same pin the camera source takes via `Layers`, done inline because
+    //     this camera's mask is per-draw state we restore. The clear colour is
+    //     still the shot's own (`_prevClear`): a graded working pane previews
+    //     the export's image, so it sits on the export's background.
+    if (working !== null && workingCamera !== null && wpost !== null && fx !== null) {
+      const dpr = gl.getPixelRatio();
+      const w = Math.max(1, Math.round(working.width * dpr));
+      const h = Math.max(1, Math.round(working.height * dpr));
+      // Mirrors binSceneSource's target discipline: the renderer's own sample
+      // count and output buffer type, so the image is scene-referred with MSAA
+      // on the model silhouettes.
+      wpost.src.samples = gl.samples;
+      wpost.src.texture.type = gl.getOutputBufferType();
+      wpost.src.setSize(w, h);
+      wpost.target.setSize(w, h);
+      wpost.chain.write(fx, at);
+      gl.setScissorTest(false);
+      const prevMask = workingCamera.layers.mask;
+      workingCamera.layers.mask = 1; // bit 0 only
+      gl.setRenderTarget(wpost.src);
+      renderBins(gl, scene, workingCamera, bins);
+      gl.setRenderTarget(null);
+      workingCamera.layers.mask = prevMask;
+      gl.setRenderTarget(wpost.target);
+      wpost.pipeline.render();
+      gl.setRenderTarget(null);
+    }
+
+    gl.setScissorTest(true);
+
+    // 2. The working pane. `autoClear` stays on, so each pane clears its own
+    //    scissor rect with its own colour — measured to hold on both backends,
+    //    because every render here takes the intermediate framebuffer target
+    //    (the canvas's output colour space is sRGB and the working space is
+    //    linear, so `needsFrameBufferTarget` is true whatever the tone mapping).
+    //
+    //    What it draws is the shading mode's plan (shading.ts):
+    //      solid / wireframe — the override path. The override reaches a model
+    //        too (`allowOverride` is left at its default on the mesh materials,
+    //        see mesh.tsx) and the gizmo escapes via its own
+    //        `allowOverride = false`. Ceiling: three copies only
+    //        `transparent`/`alphaTest`/`alphaMap` onto an override, not
+    //        `depthTest`, so an overridden model does not self-occlude here.
+    //      material — NO override: real layer materials, textures, opacity and
+    //        alpha stencils, drawn ungraded. Two documented consequences, both
+    //        correct for a materials preview and neither to be "fixed": the
+    //        DOF mip-LOD (`layerLod`) is written from the SHOT camera's rig,
+    //        so per-layer blur reflects the shot's focus and not this pane's
+    //        viewpoint; and isolation's dimming becomes visible here, because
+    //        dim rides the opacity uniform the clay used to strip.
+    //      rendered — handled as `graded` when the scene has a chain (the
+    //        `wpost` rig below); an effect-less scene degrades to the material
+    //        plan, which is what `workingDrawPlan` returns for it.
+    //    The camera pane is always the one that matches the export.
+    if (working !== null && workingCamera !== null) {
+      const plan = workingDrawPlan(shading, wpost !== null);
+      applyRect(gl, working);
+      if (plan.graded && wpost !== null) {
+        // The graded image already carries the shot's own background, so the
+        // pane clears with it rather than the clay backdrop.
+        gl.setClearColor(_prevClear, prevAlpha);
+        wpost.blit.render(gl);
+        // The EDITOR-LAYER overpaint: the gizmo draws crisp OVER the graded
+        // image, ungraded. Mask the camera to the editor bit alone and draw
+        // with `autoClear` off so the blit is kept; both are renderer/camera
+        // state we restore inline, on the same line of sight.
+        const prevMask = workingCamera.layers.mask;
+        const prevAutoClear = gl.autoClear;
+        workingCamera.layers.mask = 1 << EDITOR_LAYER;
+        gl.autoClear = false;
+        gl.render(scene, workingCamera);
+        gl.autoClear = prevAutoClear;
+        workingCamera.layers.mask = prevMask;
+      } else if (plan.override !== null) {
+        gl.setClearColor(CLAY_BACKDROP, 1);
+        scene.overrideMaterial = plan.override === "wire" ? overrides.wire : overrides.clay;
+        renderBins(gl, scene, workingCamera, bins);
+        scene.overrideMaterial = null;
+      } else {
+        // RENDERED WITHOUT A CHAIN keeps the SHOT's backdrop, not the clay
+        // one. It degrades to the material plan here (nothing to grade), but
+        // its job is still to preview the export — clearing to the workspace
+        // grey would disagree with the camera pane and the MP4, and would
+        // then snap to the shot's background the moment any effect was
+        // enabled, from a toggle that says nothing about the backdrop.
+        // Material mode keeps the clay backdrop on purpose: it previews the
+        // MATERIALS against the workspace, not the shot.
+        if (shading === "rendered") gl.setClearColor(_prevClear, prevAlpha);
+        else gl.setClearColor(CLAY_BACKDROP, 1);
+        renderBins(gl, scene, workingCamera, bins);
+      }
+    }
+
+    // 3. The camera pane: the blit, or a plain render when the scene has no
+    //    post at all (no pass, no target, no cost — the same call ShotRuntime
+    //    would have made).
+    if (camera !== null) {
+      applyRect(gl, camera);
+      gl.setClearColor(_prevClear, prevAlpha);
+      // `QuadMesh.render` is `renderer.render(quad, itsOwnCamera)` — the same
+      // call, through the object that owns the right camera for it.
+      if (blend !== null) blend.quad.render(gl);
+      else if (post !== null && fx !== null) post.blit.render(gl);
+      else renderBins(gl, scene, shotCamera, bins);
+    }
+
+    // 4. Hand the renderer back exactly as it was found. Every one of these is
+    //    global state on a renderer this component does not own; leaking one
+    //    surfaces on the NEXT frame, in a component that never touched it.
+    scene.overrideMaterial = null;
+    gl.setScissorTest(false);
+    gl.setViewport(0, 0, size.width, size.height);
+    gl.setScissor(0, 0, size.width, size.height);
+    gl.setClearColor(_prevClear, prevAlpha);
+  }, 1);
+
+  return null;
+}
+
+/**
+ * Point the renderer at one pane.
+ *
+ * CSS px, not device px: three multiplies both rects by the pixel ratio itself
+ * (`renderContext.viewportValue.copy(viewport).multiplyScalar(pixelRatio)`), so
+ * a caller that pre-scaled would scale twice.
+ *
+ * The panes are full-height columns, so y is 0 in both and the backends' y
+ * origins cannot disagree here. Check that before building a top/bottom split
+ * or an inset: WebGPU's `setViewport` is top-left native and WebGL's is not.
+ */
+function applyRect(gl: WebGPURenderer, rect: PaneRect): void {
+  gl.setViewport(rect.x, rect.y, rect.width, rect.height);
+  gl.setScissor(rect.x, rect.y, rect.width, rect.height);
+}