@expofp/renderer 3.42.0 → 3.43.0

package/dist/Renderer.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { StrictMode, Suspense } from 'react';
+import { StrictMode, Suspense, useEffect, useRef, } from 'react';
 import { Controls } from './controls';
 import { CanvasWithDebug, DebugOverlay } from './debug';
 import { PointerMissed } from './events/PointerMissed';
@@ -27,6 +27,27 @@ export function Renderer(props) {
     const { debug, scene, memoryLimit, minZoom, maxZoom, minPitch, maxPitch, bounds, smoothTime, controls, lighting, visibleRect, onPointerMissed, gl, requestFrame, onFrame, children, ...canvasProps } = props;
     const cameraProps = { minZoom, maxZoom, minPitch, maxPitch, bounds, smoothTime };
     const external = gl !== undefined;
+    // The context this mount created, released here rather than left to R3F. `<Canvas>`'s teardown
+    // (`unmountComponentAtNode`) defers `forceContextLoss()` behind a 500 ms `setTimeout`, inside a
+    // `try` that disconnects events first — so a host that unmounts the renderer holds a full
+    // viewport of GPU memory for half a second after it thought the surface was gone, and holds it
+    // forever if anything ahead of the loss in that block throws. An SDK `destroy()` that returns
+    // while the plan still owns a WebGL2 context is the same bug on a timer, and a plan swap pays it
+    // as a real transient: the incoming plan's context is created while the outgoing one still
+    // holds its own. R3F's deferred pass still runs afterwards and is unharmed — its remaining work
+    // (`renderLists.dispose()`, `dispose(scene)`) is no-ops on a lost context.
+    //
+    // Safe as a plain unmount effect only because `<StrictMode>` starts *below* here, wrapping the
+    // canvas rather than this component: nothing simulates a remount at this level, so the cleanup
+    // runs when the renderer is actually going away. External mode never fills the ref — the host
+    // owns that context, and `ExternalCanvas` neuters `forceContextLoss` for the same reason.
+    const rendererRef = useRef(undefined);
+    useEffect(() => {
+        return () => {
+            rendererRef.current?.forceContextLoss();
+            rendererRef.current = undefined;
+        };
+    }, []);
     // The one tree, whichever canvas it lands on. The mount decides nothing about it; the tree
     // leaves out what external mode has no object for — the controls here, the camera inside Scene.
     const tree = (_jsx(DebugOverlay, { enabled: debug, children: _jsxs(Scene, { sceneDef: scene, external: external, memoryLimit: memoryLimit, lighting: lighting, visibleRect: visibleRect, ...cameraProps, children: [!external && _jsx(Controls, { config: controls }), _jsx(PointerMissed, { onPointerMissed: onPointerMissed }), children] }) }));
@@ -59,7 +80,11 @@ export function Renderer(props) {
                 // a compile synchronous: 17 programs cost 64 ms of main thread on a large scene, in
                 // blocks of up to 12 ms, and they land in the frames where the layers are still mounting.
                 // Debug keeps the check, because a broken shader has to report itself somewhere.
+                //
+                // The root state is also this mount's one handle on the renderer, which the unmount
+                // effect above needs to release its context.
                 onCreated: (state) => {
                     state.gl.debug.checkShaderErrors = debug ?? false;
+                    rendererRef.current = state.gl;
                 }, frameloop: debug ? 'always' : 'demand', resize: { debounce: 50 }, children: tree }) }) }));
 }

package/dist/events/pointer.d.ts

@@ -1,4 +1,4 @@
-import { type ThreeEvent } from '@react-three/fiber';
+import { type RootState, type ThreeEvent } from '@react-three/fiber';
 import { type Intersection, type Object3D, type Ray, type Raycaster } from 'three';
 import { type PlanPoint, type Space } from '../space/Space';
 import { type LayerDef, type RenderableDef } from '../types/defs';
@@ -100,6 +100,23 @@ export declare function resolveHit(hit: Intersection): RenderableDef | undefined
  * @returns The nearest geometry under the pointer, or — where there is none — the floor beneath it.
  */
 export declare function missedPoint(raycaster: Raycaster, scene: Object3D, space: Space): PlanPoint;
+/**
+ * Drops the hits that geometry with no handlers hides, so a booth behind a wall or a model, opaque
+ * or translucent, is not picked. R3F's `events.filter`, which runs on its nearest-first hits.
+ *
+ * R3F raycasts only interactive layers, so it cannot see what stands in front of them. This casts
+ * the same ray at the whole scene and cuts the hits at the nearest object no interactive layer
+ * holds. A wall and a logo on a booth's roof differ only in distance: the logo lies on the roof, and
+ * the wall stands apart from it. So the cut keeps a hit up to {@link ELEVATION_PRECISION} behind
+ * the occluder, the least separation at which the depth buffer draws two surfaces in order. Nearer
+ * than that, the occluder is drawn on the hit, not in front of it. A click with every hit dropped is
+ * a miss, as a click on the occluder was before.
+ * @param hits - R3F's hits, nearest first.
+ * @param state - The root's state, holding the ray already aimed at the pointer.
+ * @param space - The scene's space, whose scale turns the plan-unit separation into a world one.
+ * @returns The hits in front of the nearest occluder.
+ */
+export declare function occludeHits(hits: Intersection[], state: RootState, space: Space): Intersection[];
 /**
  * Where a ray crosses the plan plane — the floor under the pointer, whatever is drawn above it.
  *

package/dist/events/pointer.js

@@ -1,3 +1,4 @@
+import { ELEVATION_PRECISION } from '../space/clipping';
 import { useSpace } from '../space/Space';
 /**
  * The props that make a layer's group interactive: one dispatching handler per handler the def
@@ -128,6 +129,35 @@ export function missedPoint(raycaster, scene, space) {
         return space.worldToPlan(nearest.point);
     return planePoint(raycaster.ray, space);
 }
+/**
+ * Drops the hits that geometry with no handlers hides, so a booth behind a wall or a model, opaque
+ * or translucent, is not picked. R3F's `events.filter`, which runs on its nearest-first hits.
+ *
+ * R3F raycasts only interactive layers, so it cannot see what stands in front of them. This casts
+ * the same ray at the whole scene and cuts the hits at the nearest object no interactive layer
+ * holds. A wall and a logo on a booth's roof differ only in distance: the logo lies on the roof, and
+ * the wall stands apart from it. So the cut keeps a hit up to {@link ELEVATION_PRECISION} behind
+ * the occluder, the least separation at which the depth buffer draws two surfaces in order. Nearer
+ * than that, the occluder is drawn on the hit, not in front of it. A click with every hit dropped is
+ * a miss, as a click on the occluder was before.
+ * @param hits - R3F's hits, nearest first.
+ * @param state - The root's state, holding the ray already aimed at the pointer.
+ * @param space - The scene's space, whose scale turns the plan-unit separation into a world one.
+ * @returns The hits in front of the nearest occluder.
+ */
+export function occludeHits(hits, state, space) {
+    if (hits.length === 0)
+        return hits;
+    const { interaction } = state.internal;
+    const occluder = state.raycaster
+        .intersectObject(state.scene, true)
+        .find((hit) => !isInteractive(hit.object, interaction));
+    if (!occluder)
+        return hits;
+    // Along the ray, a pitched view only lengthens the gap between two surfaces, never shortens it.
+    const cut = occluder.distance + ELEVATION_PRECISION * space.scale;
+    return hits.filter((hit) => hit.distance <= cut);
+}
 /**
  * Where a ray crosses the plan plane — the floor under the pointer, whatever is drawn above it.
  *
@@ -155,6 +185,19 @@ export function planePoint(ray, space) {
 function isDrag(event) {
     return event.delta * event.delta > DRAG_SLOP_SQ_PX;
 }
+/**
+ * Whether an object sits in an interactive layer: it, or an ancestor, carries R3F handlers.
+ * @param object - The object hit.
+ * @param interaction - R3F's objects with handlers.
+ * @returns Whether R3F raycasts it for events.
+ */
+function isInteractive(object, interaction) {
+    for (let node = object; node; node = node.parent) {
+        if (interaction.includes(node))
+            return true;
+    }
+    return false;
+}
 /**
  * Squared pointer travel, in px², above which a release is a drag and not a click — so ~3.9 px of
  * slop. Squared because that is how the imperative renderer's `dragThreshold` compared it, and this

package/dist/space/Scene.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useThree } from '@react-three/fiber';
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { LayoutDriver } from '../events/LayoutDriver';
+import { occludeHits } from '../events/pointer';
 import { Background } from '../objects/Background';
 import { TextureBudget, TextureBudgetContext } from '../objects/images/texture-budget';
 import { Layer } from '../objects/layer/index';
@@ -83,6 +84,7 @@ function SceneGraph(props) {
     const { viewbox, staticTransform, rootLayer } = sceneDef;
     const { width, height, dpr } = useCanvasSize();
     const invalidate = useThree((state) => state.invalidate);
+    const setEvents = useThree((state) => state.setEvents);
     const space = useSpace();
     const [scheduler] = useState(createMountScheduler);
     // One budget for the scene's lifetime; the limit is synced rather than the budget rebuilt, so an
@@ -117,6 +119,8 @@ function SceneGraph(props) {
         if (!memoryLimit)
             logger.debug('no memory limit set, image atlases upload at full size');
     }, [budget, memoryLimit]);
+    // Here rather than on either mount, so the renderer's own canvas and a host's both pick through it.
+    useEffect(() => setEvents({ filter: (hits, state) => occludeHits(hits, state, space) }), [setEvents, space]);
     useEffect(() => {
         printScene(sceneDef, logger.debug);
     }, [sceneDef]);

package/dist/space/clipping.d.ts

@@ -52,4 +52,21 @@ export declare function nearPlane(distance: number, scale: number): number | und
  * @returns The far plane in world units.
  */
 export declare function farPlane(maxDistance: number): number;
+/**
+ * Minimum z-axis separation between overlapping surfaces, in **plan** units. Picking reads it too:
+ * geometry closer than this to a hit is drawn on it, so it does not occlude it (see `occludeHits`).
+ *
+ * **For plan data providers:** shapes sharing an x/y footprint — an elevated platform over a floor
+ * area, layered decorations at one position — must be separated by at least this much on z to be
+ * ordered correctly. No minimum horizontal separation is required: screen-pixel density and depth
+ * precision both scale with camera distance and with the scene's scale, so any separation visible on
+ * screen already has depth margin, at any viewport size, zoom, scale or camera rotation.
+ *
+ * Deliberately the renderer's own constant rather than `@expofp/geometry`'s `ELEVATION_TOLERANCE`,
+ * which happens to hold the same number. They answer different questions — geometry's is "are these
+ * two elevations the same point?", this one is "must these two elevations still draw in the right
+ * order?" — and importing it would let a tuning of the geometry predicate silently re-tune the depth
+ * buffer.
+ */
+export declare const ELEVATION_PRECISION = 0.1;
 //# sourceMappingURL=clipping.d.ts.map

package/dist/space/clipping.js

@@ -72,7 +72,8 @@ export function farPlane(maxDistance) {
     return Math.max(maxDistance, 0.1) * 2;
 }
 /**
- * Minimum z-axis separation between overlapping surfaces, in **plan** units.
+ * Minimum z-axis separation between overlapping surfaces, in **plan** units. Picking reads it too:
+ * geometry closer than this to a hit is drawn on it, so it does not occlude it (see `occludeHits`).
  *
  * **For plan data providers:** shapes sharing an x/y footprint — an elevated platform over a floor
  * area, layered decorations at one position — must be separated by at least this much on z to be
@@ -86,7 +87,7 @@ export function farPlane(maxDistance) {
  * order?" — and importing it would let a tuning of the geometry predicate silently re-tune the depth
  * buffer.
  */
-const ELEVATION_PRECISION = 0.1;
+export const ELEVATION_PRECISION = 0.1;
 /**
  * Fraction of the camera's distance kept clear of the near plane at close and default zoom, so
  * depth-buffer levels are not spent on the empty space between the camera and the plan.

package/dist/types/events.d.ts

@@ -70,8 +70,10 @@ export interface PointerMissedEventData {
  * defs, arrive in the order their slots were claimed (mount order), not paint order;
  * `Pointer/Overlap` pins that.
  *
- * **Only interactive layers are hit.** A layer with no handlers is not raycast, so it never shields
- * a def behind it: a booth behind a wall still receives the event.
+ * **Everything else occludes.** Geometry in a layer with no handlers is never hit itself, but it
+ * hides the defs behind it, opaque or translucent: a booth behind a wall or a model receives no
+ * event, and a click there is a miss. Geometry coplanar with a def, such as its label, does not
+ * hide it.
  *
  * **Handlers return nothing.** One that mutates defs calls `update()` afterward, like any other code.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expofp/renderer",
-  "version": "3.42.0",
+  "version": "3.43.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/expofp/efp-app.git",
@@ -42,7 +42,7 @@
     "troika-three-text": "^0.52.5",
     "tslib": "^2.3.0",
     "webgl-memory": "^1.1.3",
-    "@expofp/geometry": "3.42.0"
+    "@expofp/geometry": "3.43.0"
   },
   "devDependencies": {
     "@react-three/test-renderer": "^9.1.0",