prts-terrarchive 0.2.0

package/ui/rhine/original/shelf-interior.ts

@@ -0,0 +1,142 @@
+import * as THREE from "three";
+import { bakeArrayInterior, type ArrayInteriorBake } from "./array-interior";
+
+// Keep the complete shell, engraved perimeter, fasteners and printed label.
+// Only geometry inside the substrate's front face is replaced by radiance.
+export const SHELF_INTERIOR_SURFACES = new Set([
+  "Internal_Ceramic", "Optical_Edges", "Subsurface_Optics",
+  "Optical_Film_Edge", "Amber_Optical_Inlay", "Optical_Film",
+  "Champagne_Index", "Moulded_Lettering",
+]);
+// Perspective ray through the middle of the shelf, rather than the camera's
+// optical axis (the organizer sits to the right of the frame).
+const DIRECTION = new THREE.Vector3(-1.79, 0.71, 1).normalize();
+type Representation = { full: THREE.Mesh[]; proxy: THREE.Mesh[]; views: THREE.Mesh[][]; view: number; detailed: boolean; reason: "motion" | "angle" | "texture"; parallaxPixels: number; cameraDepth: number; eyeSlope: [number, number] | null };
+
+/** Shared interior image; the original meshes remain ready for extraction. */
+export class ShelfInterior {
+  private readonly files = new Map<THREE.Group, Representation>();
+  private readonly eye = new THREE.Vector3();
+  private readonly center = new THREE.Vector3();
+  private readonly bake: ArrayInteriorBake;
+  private readonly views: { direction: THREE.Vector3; bake: ArrayInteriorBake }[] = [];
+
+  constructor(renderer: THREE.WebGLRenderer, scene: THREE.Scene, template: THREE.Group) {
+    this.bake = bakeArrayInterior(renderer, scene,
+      template.children.filter((mesh): mesh is THREE.Mesh => mesh instanceof THREE.Mesh
+        && (SHELF_INTERIOR_SURFACES.has(mesh.userData.surface) || mesh.userData.surface === "Optical_Diffuser")), {
+        surfaces: SHELF_INTERIOR_SURFACES, direction: DIRECTION, maxSize: 1536,
+        preserveOutsideSubstrate: true, name: "Shelf_Interior",
+        // The overview's shadow-casting key is behind this front face. Its
+        // shadow cannot darken ambient radiance: the array's blanket multiplier
+        // otherwise makes the stationary shelf interiors visibly too dark.
+        shadowStrength: 0,
+      });
+    this.views.push({ direction: DIRECTION, bake: this.bake });
+    try { renderer.initTexture(this.bake.texture); }
+    catch (error) { this.bake.dispose(); throw error; }
+  }
+
+  hasView(index: number) { return index >= 0 && index < this.views.length; }
+
+  /** Additional front-facing views share the same original shell and error budget. */
+  addView(renderer: THREE.WebGLRenderer, scene: THREE.Scene, template: THREE.Group, direction: THREE.Vector3) {
+    const bake = bakeArrayInterior(renderer, scene,
+      template.children.filter((mesh): mesh is THREE.Mesh => mesh instanceof THREE.Mesh
+        && (SHELF_INTERIOR_SURFACES.has(mesh.userData.surface) || mesh.userData.surface === "Optical_Diffuser")),
+      { surfaces: SHELF_INTERIOR_SURFACES, direction, maxSize: 1536, preserveOutsideSubstrate: true, name: "Shelf_Interior", shadowStrength: 0 });
+    try { renderer.initTexture(bake.texture); } catch (error) { bake.dispose(); throw error; }
+    this.views.push({ direction: direction.clone().normalize(), bake });
+    for (const [group, file] of this.files) file.views.push(this.attachProxy(group, bake));
+  }
+  private attachProxy(group: THREE.Group, bake: ArrayInteriorBake) {
+    return bake.meshes.map(source => {
+      const mesh = source.clone(); mesh.userData.sharedShelfProxy = true;
+      mesh.visible = false; group.add(mesh); return mesh;
+    });
+  }
+  attach(group: THREE.Group) {
+    if (this.files.has(group)) return;
+    const full = group.children.filter((mesh): mesh is THREE.Mesh =>
+      mesh instanceof THREE.Mesh && SHELF_INTERIOR_SURFACES.has(mesh.userData.surface));
+    const views = (this.views ?? [{ bake: this.bake }]).map(view => this.attachProxy(group, view.bake));
+    this.files.set(group, { full, proxy: views[0], views, view: 0, detailed: true, reason: "motion", parallaxPixels: 0, cameraDepth: 0, eyeSlope: null });
+    group.userData.shelfRepresentation = "geometry";
+  }
+
+  update(group: THREE.Group, moving: boolean, camera: THREE.Camera, pixelHeight: number) {
+    const file = this.files.get(group);
+    if (!file) return;
+    group.updateWorldMatrix(true, false);
+    this.center.set(0, 1.85, 0).applyMatrix4(group.matrixWorld).applyMatrix4(camera.matrixWorldInverse);
+    this.eye.setFromMatrixPosition(camera.matrixWorld);
+    group.worldToLocal(this.eye); this.eye.y -= 1.85;
+    const pixelsPerUnit = Math.abs(camera.projectionMatrix.elements[5] * pixelHeight / (2 * this.center.z));
+    const views = this.views ?? [{ direction: DIRECTION, bake: this.bake }];
+    const error = (direction: THREE.Vector3) => this.eye.z > 0 ? 0.21 * pixelsPerUnit * Math.max(
+      Math.abs(this.eye.x / this.eye.z - direction.x / direction.z),
+      Math.abs(this.eye.y / this.eye.z - direction.y / direction.z),
+    ) : Infinity;
+    let view = file.view, parallaxPixels = error(views[view].direction);
+    // Keep an acceptable current view. Enter another only below the lower
+    // threshold, so adjacent captures cannot flicker at their boundary.
+    if (file.detailed || parallaxPixels > 3) {
+      for (let index = 0; index < views.length; index++) {
+        const candidate = error(views[index].direction);
+        if (candidate < parallaxPixels) { parallaxPixels = candidate; view = index; }
+      }
+    }
+    // Return to the authored rack capture whenever it re-enters the lower
+    // threshold; arriving through another angle must not change the settled rack.
+    const primaryError = error(views[0].direction);
+    if (primaryError <= 2.5) { view = 0; parallaxPixels = primaryError; }
+    const changing = view !== file.view;
+    const detailed = moving || parallaxPixels > (file.detailed || changing ? 2.5 : 3);
+    file.reason = moving ? "motion" : detailed ? "angle" : "texture";
+    file.parallaxPixels = Number.isFinite(parallaxPixels) ? parallaxPixels : -1;
+    file.cameraDepth = -this.center.z;
+    // Scalars only; no per-frame arrays allocated for this diagnostic inventory.
+    if (this.eye.z > 0) {
+      file.eyeSlope ||= [0, 0]; file.eyeSlope[0] = this.eye.x / this.eye.z; file.eyeSlope[1] = this.eye.y / this.eye.z;
+    } else file.eyeSlope = null;
+    if (file.detailed === detailed && !changing) return;
+    file.detailed = detailed; file.view = view;
+    for (const mesh of file.full) mesh.visible = detailed;
+    for (let index = 0; index < file.views.length; index++)
+      for (const mesh of file.views[index]) mesh.visible = !detailed && index === view;
+    group.userData.shelfRepresentation = detailed ? "geometry" : "texture";
+    group.userData.shelfView = detailed ? -1 : view;
+  }
+
+  detach(group: THREE.Group) {
+    const file = this.files.get(group);
+    if (!file) return;
+    for (const mesh of file.full) mesh.visible = true;
+    for (const meshes of file.views) for (const mesh of meshes) group.remove(mesh);
+    this.files.delete(group);
+    delete group.userData.shelfRepresentation;
+    delete group.userData.shelfView;
+  }
+
+  getStats(detailedSnapshot = false) {
+    let textured = 0, detailed = 0, motion = 0, angle = 0, angleErrorMaxPixels = 0, backFacing = 0;
+    const files: { slot: number; representation: string; reason: string; view: number; errorPixels: number;
+      cameraDepth: number; eyeSlope: [number, number] | null }[] | undefined = detailedSnapshot ? [] : undefined;
+    const viewCounts = (this.views ?? [this.bake]).map(() => 0);
+    for (const [group, file] of this.files) if (group.visible && group.parent) {
+      if (file.reason === 'angle') {
+        if (file.parallaxPixels < 0) backFacing++; else angleErrorMaxPixels = Math.max(angleErrorMaxPixels, file.parallaxPixels);
+      }
+      if (files) files.push({ slot: files.length, representation: file.detailed ? 'geometry' : 'texture', reason: file.reason,
+        view: file.view, errorPixels: file.parallaxPixels, cameraDepth: file.cameraDepth, eyeSlope: file.eyeSlope ? [...file.eyeSlope] : null });
+      if (file.detailed) { detailed++; if (file.reason === "motion") motion++; else angle++; } else { textured++; viewCounts[file.view]++; }
+    }
+    return { ...this.bake.stats, angleErrorMaxPixels, backFacing,
+      ...(files ? { files, enterBelowPixels: 2.5, leaveAbovePixels: 3, directions: (this.views ?? [{ direction: DIRECTION }]).map(v => v.direction.toArray()) } : {}), views: viewCounts.length, viewCounts, totalTextureBytes: (this.views ?? [{ bake: this.bake }]).reduce((sum, view) => sum + (view.bake.stats.textureBytes ?? 0), 0), textured, detailed, reasons: { motion, angle, texture: textured } };
+  }
+
+  dispose() {
+    for (const group of this.files.keys()) this.detach(group);
+    for (const view of this.views ?? [{ bake: this.bake }]) view.bake.dispose();
+  }
+}

package/ui/rhine/original/ui-transitions.ts

@@ -0,0 +1,111 @@
+const enterEase = "cubic-bezier(0.22, 1, 0.36, 1)";
+const exitEase = "cubic-bezier(0.4, 0, 1, 1)";
+
+/** Owns the visible lifetime, including a close that interrupts an opening. */
+export class SurfaceTransition {
+  private animations: Animation[] = [];
+  private revision = 0;
+
+  constructor(
+    private root: HTMLElement,
+    private panel?: HTMLElement,
+    private enterDuration = 300,
+    private exitDuration = 200,
+    private exitEasing = exitEase,
+    private enterEasing = enterEase,
+    private syncTimeline = false,
+  ) {}
+
+  show(reduced: boolean) {
+    this.run(true, reduced);
+  }
+
+  hide(reduced: boolean, finished: () => void = () => {}) {
+    this.run(false, reduced, finished);
+  }
+
+  finish() {
+    this.animations.forEach((animation) => animation.finish());
+  }
+
+  dispose() {
+    this.revision++;
+    this.animations.forEach((animation) => animation.cancel());
+    this.animations = [];
+  }
+
+  private run(show: boolean, reduced: boolean, finished?: () => void) {
+    const revision = ++this.revision;
+    const hidden = this.root.hidden;
+    const opacity = hidden ? "0" : getComputedStyle(this.root).opacity;
+    const transform = this.panel
+      ? hidden
+        ? "translateY(12px)"
+        : getComputedStyle(this.panel).transform
+      : undefined;
+    this.animations.forEach((animation) => animation.cancel());
+    this.animations = [];
+    this.root.hidden = false;
+    this.root.dataset.transition = show ? "opening" : "closing";
+    const complete = () => {
+      if (revision !== this.revision) return;
+      this.root.hidden = !show;
+      this.root.dataset.transition = show ? "open" : "closed";
+      this.animations.forEach((animation) => animation.cancel());
+      this.animations = [];
+      finished?.();
+    };
+    if (reduced || (!show && hidden)) {
+      complete();
+      return;
+    }
+    const options: KeyframeAnimationOptions = {
+      duration: show ? this.enterDuration : this.exitDuration,
+      easing: show ? this.enterEasing : this.exitEasing,
+      fill: "both",
+    };
+    const fade = this.root.animate(
+      [{ opacity }, { opacity: show ? 1 : 0 }],
+      options,
+    );
+    this.animations.push(fade);
+    if (this.panel) {
+      this.animations.push(
+        this.panel.animate(
+          [
+            { transform },
+            { transform: show ? "translateY(0)" : "translateY(8px)" },
+          ],
+          options,
+        ),
+      );
+    }
+    // Shared with scene animation when the render frame takes longer than a browser frame.
+    if (this.syncTimeline && document.timeline.currentTime !== null) {
+      for (const animation of this.animations) animation.startTime = document.timeline.currentTime;
+    }
+    void fade.finished.then(complete).catch(() => {});
+  }
+}
+
+export class ContentTransition {
+  private animation?: Animation;
+
+  reveal(element: HTMLElement, reduced: boolean) {
+    const opacity =
+      this.animation?.playState === "running"
+        ? getComputedStyle(element).opacity
+        : "0.35";
+    this.cancel();
+    if (!reduced)
+      this.animation = element.animate([{ opacity }, { opacity: 1 }], {
+        duration: 150,
+        easing: enterEase,
+      });
+  }
+
+  cancel() {
+    this.animation?.cancel();
+    this.animation = undefined;
+  }
+}

package/ui/rhine/original/viewer-camera.ts

@@ -0,0 +1,92 @@
+import * as THREE from "three";
+
+const shortestAngle = (angle: number) =>
+  Math.atan2(Math.sin(angle), Math.cos(angle));
+
+// OrbitControls records the requested pose; this camera is what is rendered.
+// Spherical interpolation avoids cutting through the model on a large reset.
+export class ViewerCameraMotion {
+  readonly focus = new THREE.Vector3();
+  private pose = new THREE.Spherical();
+  private desired = new THREE.Spherical();
+  private offset = new THREE.Vector3();
+  private resetFrom = new THREE.Spherical();
+  private resetFocus = new THREE.Vector3();
+  private elapsed = 0;
+  resetting = false;
+
+  constructor(private camera: THREE.PerspectiveCamera) {}
+
+  snap(goal: THREE.PerspectiveCamera, target: THREE.Vector3) {
+    this.resetting = false;
+    this.focus.copy(target);
+    this.pose.setFromVector3(this.offset.copy(goal.position).sub(target));
+    this.apply();
+  }
+
+  reset() {
+    this.resetFrom.copy(this.pose);
+    this.resetFocus.copy(this.focus);
+    this.elapsed = 0;
+    this.resetting = true;
+  }
+
+  interruptReset(goal: THREE.PerspectiveCamera, target: THREE.Vector3) {
+    if (!this.resetting) return;
+    this.resetting = false;
+    goal.position.copy(this.camera.position);
+    target.copy(this.focus);
+    goal.lookAt(target);
+  }
+
+  update(
+    goal: THREE.PerspectiveCamera,
+    target: THREE.Vector3,
+    dt: number,
+    reduced = false,
+  ) {
+    if (reduced) {
+      this.snap(goal, target);
+      return;
+    }
+    this.desired.setFromVector3(this.offset.copy(goal.position).sub(target));
+    if (this.resetting) {
+      this.elapsed += Math.max(0, dt);
+      const t = Math.min(1, this.elapsed / 0.56);
+      const p = 1 - (1 - t) ** 3;
+      this.focus.lerpVectors(this.resetFocus, target, p);
+      this.interpolate(this.resetFrom, this.desired, p, p);
+      if (t === 1) this.resetting = false;
+    } else {
+      const pan = 1 - Math.exp(-13 * Math.max(0, dt));
+      const orbit = 1 - Math.exp(-9 * Math.max(0, dt));
+      const zoom = 1 - Math.exp(-15 * Math.max(0, dt));
+      this.focus.lerp(target, pan);
+      this.interpolate(this.pose, this.desired, orbit, zoom);
+      if (this.focus.distanceToSquared(target) < 1e-10) this.focus.copy(target);
+    }
+    this.apply();
+  }
+
+  private interpolate(
+    from: THREE.Spherical,
+    to: THREE.Spherical,
+    angle: number,
+    radius: number,
+  ) {
+    // Interpolate logarithmic distance so zoom in and zoom out feel symmetric.
+    this.pose.radius = Math.exp(
+      THREE.MathUtils.lerp(Math.log(from.radius), Math.log(to.radius), radius),
+    );
+    this.pose.phi = THREE.MathUtils.lerp(from.phi, to.phi, angle);
+    this.pose.theta = from.theta + shortestAngle(to.theta - from.theta) * angle;
+    this.pose.makeSafe();
+  }
+
+  private apply() {
+    this.camera.position
+      .copy(this.offset.setFromSpherical(this.pose))
+      .add(this.focus);
+    this.camera.lookAt(this.focus);
+  }
+}

package/ui/rhine/original/viewport-layout.ts

@@ -0,0 +1,41 @@
+/** Reference coordinates remain exact during the film and at 1920 × 1080. */
+export function viewportLayout(width: number, height: number, coarse: boolean, cinematic = false) {
+  width = Math.max(1, width);
+  height = Math.max(1, height);
+  if (cinematic) return {
+    width: 1920, height: 1080, scale: Math.min(width / 1920, height / 1080),
+    kind: "cinematic" as const,
+  };
+  const portrait = width / height < 1.05;
+  const compact = portrait || width < 1100 || (coarse && height < 600);
+  const scale = compact ? 1 : height / 1080;
+  return { width: width / scale, height: height / scale, scale,
+    kind: portrait ? "portrait" as const : compact ? "compact" as const : "desktop" as const };
+}
+
+/** Preserve the long-lens perspective. Reframe only the camera, never the card. */
+export function archiveFraming(width: number, height: number, span: number, detail: number, compact: boolean) {
+  const aspect = width / height;
+  const portrait = aspect < 1.05;
+  const baseSpan = span + (5.9 - span) * detail;
+  const portraitDetailSpan = Math.max(6.3 / aspect, 3.7 * height / Math.max(100, 0.54 * height - 156));
+  const viewSpan = portrait
+    ? Math.max(baseSpan, 8.4 / aspect + (portraitDetailSpan - 8.4 / aspect) * detail)
+    : Math.max(baseSpan, baseSpan * (16 / 9) / aspect);
+  return {
+    span: viewSpan,
+    portrait,
+    // Portrait selection is deliberately above its title and navigation.
+    previewY: portrait ? 0.36 : 0.5,
+    detailX: portrait ? 0.5 : compact ? 0.27 : 550 / 1920,
+    detailY: portrait ? 0.27 + 34 / height : compact ? 0.49 : 560 / 1080,
+  };
+}
+
+export function swipeDirection(dx: number, dy: number, elapsed: number) {
+  const major = Math.max(Math.abs(dx), Math.abs(dy));
+  const minor = Math.min(Math.abs(dx), Math.abs(dy));
+  if (major < 36 || major < minor * 1.3 || elapsed > 1400) return null;
+  return { axis: Math.abs(dx) > Math.abs(dy) ? "lane" as const : "row" as const,
+    direction: (Math.abs(dx) > Math.abs(dy) ? dx : dy) < 0 ? 1 : -1 };
+}