@expofp/renderer 3.41.1 → 3.42.1

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.41.1",
+  "version": "3.42.1",
   "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.41.1"
+    "@expofp/geometry": "3.42.1"
   },
   "devDependencies": {
     "@react-three/test-renderer": "^9.1.0",