@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/stage/GridPlane.tsx

@@ -1,9 +1,9 @@
-// The working pane's ground plane.
+// The working pane's ambient floor and active spline construction plane.
 //
 // Editor-only by exactly the three constructions FrustumGizmo's header states —
 // `layers.set(EDITOR_LAYER)`, SplitRenderer's post pass pinned to bit 0, and no
 // `SHOT_LAYER_KEY` userData — so it cannot reach the graded image, the camera
-// pane or a pick. It reads no document and writes nothing.
+// pane or a pick. It reads editor-only resolved geometry and writes nothing.
 //
 // ── WHY IT SITS UNDER THE FRAME AND NOT THROUGH THE ORIGIN ──────────────
 //
@@ -53,15 +53,26 @@
 // so they cross the gridlines rather than fight them, and still a million
 // below every layer, so the artwork covers both.
 import { useEffect, useMemo } from "react";
-import { BufferAttribute, BufferGeometry, LineSegments } from "three";
+import { BufferAttribute, BufferGeometry, LineSegments, Matrix4, Vector3 } from "three";
 import { LineBasicNodeMaterial } from "three/webgpu";
-import { cameraPosition, color, length, mix, positionWorld, smoothstep, uniform } from "three/tsl";
+import {
+  cameraPosition,
+  color,
+  length,
+  mix,
+  positionLocal,
+  positionWorld,
+  smoothstep,
+  uniform,
+} from "three/tsl";
 import { EDITOR_LAYER } from "./StageTools.js";
-import { CLAY_BACKDROP } from "./SplitRenderer.js";
 import { WORKING_FOV_DEG } from "./workingView.js";
 import { GRID_CELLS, axisOrigin, axisPositions, gridFade, gridPositions, gridStep } from "./gizmoMath.js";
 import { tokenColor } from "./tokenColor.js";
+import type { StageTheme } from "./stageTheme.js";
 import type { FrameSize } from "./view.js";
+import type { ResolvedWorkPlane } from "../bridgeTypes.js";
+import { workPlaneGridCenter } from "./splineStage.js";
 
 /** Behind everything. The mirror of the frustum's +1_000_000, for the reason
  *  its own comment gives: with depth testing off, order is the only answer to
@@ -72,6 +83,12 @@ const GRID_RENDER_ORDER = -1_000_000;
  *  the grid lines rather than fighting them, and any layer covers both. */
 const AXIS_RENDER_ORDER = GRID_RENDER_ORDER + 1;
 
+/** The selected construction plane sits above the ambient floor and axes, but
+ * remains far below authored geometry. */
+const WORK_PLANE_RENDER_ORDER = AXIS_RENDER_ORDER + 1;
+const WORK_PLANE_AXIS_RENDER_ORDER = WORK_PLANE_RENDER_ORDER + 1;
+const WORK_PLANE_CELLS = 24;
+
 /**
  * Half-length of each world axis.
  *
@@ -83,7 +100,7 @@ const AXIS_RENDER_ORDER = GRID_RENDER_ORDER + 1;
  */
 const AXIS_EXTENT = 100_000;
 
-const GRID_FALLBACK = "#2a2a31";
+const GRID_FALLBACK = "#2a2a2a";
 
 /** World axis index -> token. The one mapping (`world = (x, -y, -z)`) is a sign
  *  flip, and a line through the origin is invariant under it, so the world axes
@@ -94,17 +111,82 @@ const AXES = [
   { axis: 2 as const, token: "--axis-z", fallback: "#3b82f6" },
 ];
 
+const AXIS_PALETTE = {
+  x: { token: "--axis-x", fallback: "#ef4444" },
+  y: { token: "--axis-y", fallback: "#22c55e" },
+  z: { token: "--axis-z", fallback: "#3b82f6" },
+} as const;
+
+function workPlanePalette(
+  plane: ResolvedWorkPlane,
+): readonly [keyof typeof AXIS_PALETTE, keyof typeof AXIS_PALETTE, keyof typeof AXIS_PALETTE] {
+  switch (plane.target.kind) {
+    case "xz":
+      return ["x", "z", "y"];
+    case "yz":
+      return ["y", "z", "x"];
+    case "xy":
+      return ["x", "y", "z"];
+    // View and Selection expose local construction U/V/N. Use the established
+    // local-axis convention rather than inventing a second palette.
+    case "view":
+    case "selection":
+      return ["x", "y", "z"];
+  }
+}
+
+function localPlaneGridPositions(step: number, cells: number): number[] {
+  const half = step * cells;
+  const out: number[] = [];
+  for (let index = -cells; index <= cells; index += 1) {
+    const at = index * step;
+    out.push(at, -half, 0, at, half, 0);
+    out.push(-half, at, 0, half, at, 0);
+  }
+  return out;
+}
+
+function localPlaneAxisPositions(axis: 0 | 1 | 2, extent: number): number[] {
+  const a = [0, 0, 0];
+  const b = [0, 0, 0];
+  a[axis] = -extent;
+  b[axis] = extent;
+  return [...a, ...b];
+}
+
+function designVector(value: readonly [number, number, number]): Vector3 {
+  return new Vector3(value[0], -value[1], -value[2]);
+}
+
+function designPoint(value: readonly [number, number, number]): Vector3 {
+  return designVector(value);
+}
+
 export function GridPlane({
+  theme,
   frame,
   target,
   distance,
+  ortho,
+  showGround,
+  workPlane,
 }: {
+  /** Resolved editor theme. It rebuilds only the token-backed GL materials. */
+  theme: StageTheme;
   frame: FrameSize;
   target: readonly [number, number, number];
   /** The working camera's eye-to-target distance. Drives the spacing through
    *  `gridStep`'s ladder, so a dolly changes the geometry in jumps, and the
    *  fade band continuously, which is a uniform write and no rebuild. */
   distance: number;
+  /** The working pane is on its ORTHOGRAPHIC rig (numpad-5). Changes what the
+   *  fade below is measured FROM, and nothing else. */
+  ortho: boolean;
+  /** Ambient floor/axes. Definitions and isolation can suppress these while
+   *  retaining the explicitly chosen spline construction plane. */
+  showGround: boolean;
+  /** Frozen draft plane, or the live plane before the first anchor. */
+  workPlane: ResolvedWorkPlane | null;
 }) {
   const step = gridStep(frame.height, distance, WORKING_FOV_DEG);
   const height = -frame.height / 2;
@@ -135,10 +217,35 @@ export function GridPlane({
     // disagreement.
     const fadeStart = uniform(0);
     const fadeEnd = uniform(1);
+    // ── AND WHY ORTHO MEASURES IT FROM SOMEWHERE ELSE ─────────────────────
+    //
+    // From the EYE is right for the perspective rig: the fade is standing in
+    // for a horizon, and a horizon is where distance from the viewer runs out.
+    //
+    // An orthographic view HAS no such point. Parallel edges stay parallel and
+    // nothing converges, so there is no horizon to stand in for — and the eye
+    // is not even a place: `StageTools` pushes the ortho camera back by
+    // `max(distance * 8, 10_000)` so every hit test starts in front of a
+    // positive near plane. That push-back is many times `fadeEnd`, so measured
+    // from THAT point every vertex of the floor is past the far end of the band
+    // and the whole grid resolves to exactly the backdrop colour. The floor
+    // vanished in ortho while the axes, which carry a flat colour, stayed —
+    // which is what the bug looked like from the outside.
+    //
+    // So ortho fades RADIALLY from the grid's own centre, in the floor plane.
+    // Object space is centred on the snapped target (see the follow effect), so
+    // `positionLocal.xz` IS that radius with no uniform to keep in step. The
+    // band needs no adjusting either: the ortho rig's half-height is
+    // `distance * tan(fov/2)`, so `gridSpan` is exactly its visible height and
+    // "1.5 to 6 spans" means the same thing in both projections.
     material.colorNode = mix(
       color(tokenColor("--grid", GRID_FALLBACK)),
-      color(CLAY_BACKDROP),
-      smoothstep(fadeStart, fadeEnd, length(positionWorld.sub(cameraPosition))),
+      color(tokenColor("--working-bg", "#141414")),
+      smoothstep(
+        fadeStart,
+        fadeEnd,
+        ortho ? length(positionLocal.xz) : length(positionWorld.sub(cameraPosition)),
+      ),
     );
     material.depthTest = false;
     material.depthWrite = false;
@@ -160,10 +267,15 @@ export function GridPlane({
     // edit) or when the dolly crosses a ladder rung — never within a rung, so a
     // continuous dolly does no geometry work. The buffer stays static and the
     // OBJECT moves; see the follow effect below.
-  }, [step, height]);
+    //
+    // `ortho` is in here because it picks a different NODE, and a node graph is
+    // fixed once the material is built. It is a numpad press, not a gesture, so
+    // rebuilding on it costs nothing a dolly would have to pay.
+  }, [step, height, ortho, theme]);
 
-  // The three world axes. Built ONCE — their geometry has nothing to do with
-  // the grid's spacing, and their extent is already past every legal view.
+  // The three world axes. Rebuilt only when appearance changes; their geometry
+  // has nothing to do with the grid's spacing, and their extent is already
+  // past every legal view.
   //
   // Three objects with three materials rather than one buffer with vertex
   // colours: `MoveGizmo` states the same choice for the same reason, that a
@@ -193,9 +305,65 @@ export function GridPlane({
         lines.matrixAutoUpdate = false;
         return { axis, lines, geometry, material };
       }),
-    [],
+    [theme],
   );
 
+  // ── THE ACTIVE CONSTRUCTION PLANE ──────────────────────────────────────
+  //
+  // Unlike the ambient floor, this grid is the plane pointer rays intersect.
+  // Its basis and origin therefore come from the exact ResolvedWorkPlane the
+  // draft owns. Geometry is local XY and static within a spacing rung; orbit,
+  // selection motion and panning update one matrix instead of rebuilding a
+  // buffer on every frame.
+  const construction = useMemo(() => {
+    if (workPlane === null) return null;
+    const geometry = new BufferGeometry();
+    geometry.setAttribute(
+      "position",
+      new BufferAttribute(new Float32Array(localPlaneGridPositions(step, WORK_PLANE_CELLS)), 3),
+    );
+    const material = new LineBasicNodeMaterial();
+    material.color.copy(tokenColor("--grid", GRID_FALLBACK));
+    material.depthTest = false;
+    material.depthWrite = false;
+    material.toneMapped = false;
+    material.allowOverride = false;
+    const lines = new LineSegments(geometry, material);
+    lines.layers.set(EDITOR_LAYER);
+    lines.renderOrder = WORK_PLANE_RENDER_ORDER;
+    lines.frustumCulled = false;
+    lines.matrixAutoUpdate = false;
+
+    const extent = step * WORK_PLANE_CELLS;
+    const normalExtent = Math.max(step * 0.35, 1);
+    const palette = workPlanePalette(workPlane);
+    const axes = palette.map((axisName, index) => {
+      const axis = index as 0 | 1 | 2;
+      const axisGeometry = new BufferGeometry();
+      axisGeometry.setAttribute(
+        "position",
+        new BufferAttribute(
+          new Float32Array(localPlaneAxisPositions(axis, axis === 2 ? normalExtent : extent)),
+          3,
+        ),
+      );
+      const axisMaterial = new LineBasicNodeMaterial();
+      const colorSpec = AXIS_PALETTE[axisName];
+      axisMaterial.color.copy(tokenColor(colorSpec.token, colorSpec.fallback));
+      axisMaterial.depthTest = false;
+      axisMaterial.depthWrite = false;
+      axisMaterial.toneMapped = false;
+      axisMaterial.allowOverride = false;
+      const axisLines = new LineSegments(axisGeometry, axisMaterial);
+      axisLines.layers.set(EDITOR_LAYER);
+      axisLines.renderOrder = WORK_PLANE_AXIS_RENDER_ORDER;
+      axisLines.frustumCulled = false;
+      axisLines.matrixAutoUpdate = false;
+      return { lines: axisLines, geometry: axisGeometry, material: axisMaterial };
+    });
+    return { lines, geometry, material, axes };
+  }, [step, theme, workPlane?.target.kind, workPlane === null]);
+
   // ── THE GRID FOLLOWS THE AUTHOR ─────────────────────────────────────────
   //
   // It was 24 cells nailed to the world origin, so panning far enough left it
@@ -245,6 +413,26 @@ export function GridPlane({
     }
   }, [axes, target, height]);
 
+  useEffect(() => {
+    if (construction === null || workPlane === null) return;
+    const focusDesign: [number, number, number] = [target[0], -target[1], -target[2]];
+    const center = workPlaneGridCenter(workPlane, focusDesign, step);
+    const basis = new Matrix4().makeBasis(
+      designVector(workPlane.xAxis).normalize(),
+      designVector(workPlane.yAxis).normalize(),
+      designVector(workPlane.normal).normalize(),
+    );
+    const gridMatrix = basis.clone().setPosition(designPoint(center));
+    construction.lines.matrix.copy(gridMatrix);
+    construction.lines.matrixWorldNeedsUpdate = true;
+
+    const axisMatrix = basis.setPosition(designPoint(workPlane.origin));
+    for (const axis of construction.axes) {
+      axis.lines.matrix.copy(axisMatrix);
+      axis.lines.matrixWorldNeedsUpdate = true;
+    }
+  }, [construction, step, target, workPlane]);
+
   useEffect(
     () => () => {
       grid.geometry.dispose();
@@ -263,12 +451,33 @@ export function GridPlane({
     [axes],
   );
 
+  useEffect(
+    () => () => {
+      if (construction === null) return;
+      construction.geometry.dispose();
+      construction.material.dispose();
+      for (const axis of construction.axes) {
+        axis.geometry.dispose();
+        axis.material.dispose();
+      }
+    },
+    [construction],
+  );
+
   return (
     <>
-      <primitive object={grid.lines} />
-      {axes.map((a) => (
-        <primitive key={a.axis} object={a.lines} />
-      ))}
+      {showGround ? <primitive object={grid.lines} /> : null}
+      {showGround
+        ? axes.map((a) => <primitive key={a.axis} object={a.lines} />)
+        : null}
+      {construction === null ? null : (
+        <>
+          <primitive object={construction.lines} />
+          {construction.axes.map((axis, index) => (
+            <primitive key={`work-plane-axis-${index}`} object={axis.lines} />
+          ))}
+        </>
+      )}
     </>
   );
 }