@expofp/renderer 3.38.0 → 3.39.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (59) hide show
  1. package/dist/controls/camera-api.d.ts +28 -0
  2. package/dist/controls/camera-api.js +33 -10
  3. package/dist/controls/hooks.js +2 -0
  4. package/dist/core/InstanceUniforms.d.ts +15 -0
  5. package/dist/core/InstanceUniforms.js +32 -0
  6. package/dist/core/batch/BatchedMesh.js +6 -0
  7. package/dist/core/instanced/instanced-material.js +5 -1
  8. package/dist/core/lines/BatchedLines.d.ts +9 -7
  9. package/dist/core/lines/BatchedLines.js +9 -7
  10. package/dist/core/lines/{FrustumCulling.d.ts → FrustumCullingLines.d.ts} +7 -6
  11. package/dist/core/lines/{FrustumCulling.js → FrustumCullingLines.js} +2 -2
  12. package/dist/core/lines/{Raycasting.d.ts → RaycastingLines.d.ts} +7 -6
  13. package/dist/core/lines/{Raycasting.js → RaycastingLines.js} +2 -2
  14. package/dist/core/lines/lines-material.js +10 -1
  15. package/dist/core/sprites/BatchedSprites.d.ts +115 -0
  16. package/dist/core/sprites/BatchedSprites.js +205 -0
  17. package/dist/core/sprites/RaycastingSprites.d.ts +41 -0
  18. package/dist/core/sprites/RaycastingSprites.js +71 -0
  19. package/dist/core/sprites/sprite-material.d.ts +59 -0
  20. package/dist/core/sprites/sprite-material.js +192 -0
  21. package/dist/core/text/BatchedText.d.ts +6 -0
  22. package/dist/core/text/BatchedText.js +6 -0
  23. package/dist/core/text/MemberTexture.js +55 -1
  24. package/dist/core/text/Text.d.ts +16 -1
  25. package/dist/core/text/Text.js +15 -0
  26. package/dist/core/text/batched-text-material.js +4 -2
  27. package/dist/objects/containers/hooks.d.ts +7 -2
  28. package/dist/objects/containers/hooks.js +20 -5
  29. package/dist/objects/containers/mesh-writes.js +3 -3
  30. package/dist/objects/images/ImageInstance.js +103 -35
  31. package/dist/objects/images/Images.d.ts +8 -7
  32. package/dist/objects/images/Images.js +94 -28
  33. package/dist/objects/images/image-container.d.ts +14 -3
  34. package/dist/objects/images/image-container.js +19 -5
  35. package/dist/objects/layer/Layer.d.ts +7 -6
  36. package/dist/objects/layer/Layer.js +40 -30
  37. package/dist/objects/layer/layer-context.d.ts +41 -0
  38. package/dist/objects/layer/layer-context.js +45 -0
  39. package/dist/objects/materials/ColorMaterial.js +16 -3
  40. package/dist/objects/materials/LineMaterial.js +4 -2
  41. package/dist/objects/materials/TextureMaterial.js +4 -2
  42. package/dist/objects/materials/effects/color-dim.d.ts +1 -10
  43. package/dist/objects/materials/effects/color-dim.js +4 -12
  44. package/dist/objects/materials/effects/effects-context.d.ts +6 -5
  45. package/dist/objects/materials/shared.d.ts +18 -0
  46. package/dist/objects/materials/shared.js +21 -0
  47. package/dist/objects/models/Models.js +1 -8
  48. package/dist/objects/shapes/Shapes.js +2 -9
  49. package/dist/objects/text/TextInstance.js +1 -1
  50. package/dist/objects/text/text-layout.d.ts +13 -4
  51. package/dist/objects/text/text-layout.js +30 -4
  52. package/dist/space/Space.d.ts +15 -0
  53. package/dist/space/Space.js +16 -10
  54. package/dist/types/defs.d.ts +37 -0
  55. package/dist/utils/logging.d.ts +6 -3
  56. package/dist/utils/logging.js +15 -7
  57. package/dist/utils/math.d.ts +11 -0
  58. package/dist/utils/math.js +14 -0
  59. package/package.json +2 -2
@@ -54,6 +54,11 @@ export function layoutText(def) {
54
54
  const scaleX = line.fontSize;
55
55
  // Negative: the y flip. Also why the clip rect below comes out correctly ordered — dividing by a
56
56
  // negative scale swaps its min and max back.
57
+ //
58
+ // `TextImpl.orientation` looks like the right tool for this flip, but it only reaches the shader
59
+ // as a uniform. `BatchedTextImpl.raycast` and `isDrawn` pick and cull through `text.matrix` and
60
+ // its geometry's bounds on the CPU, which never read it, so using `orientation` here draws
61
+ // correctly and picks the wrong region.
57
62
  const scaleY = -scaleX;
58
63
  placed.push({
59
64
  anchorX: alignment.horizontal,
@@ -80,16 +85,25 @@ export function layoutText(def) {
80
85
  return placed;
81
86
  }
82
87
  /**
83
- * Writes a laid-out line onto its member: the bounds' rotation and position applied to the local
88
+ * Writes a laid-out line onto its member: the bounds rotation and position applied to the local
84
89
  * offset, the line's scale, and its clip rect.
85
90
  *
86
- * The post-transform half of {@link layoutText}. `updateMatrix` is what reports the move to the
87
- * batch — members are not in the scene graph, so nothing else would.
91
+ * The post-transform half of `layoutText`. `updateMatrix` is what reports the move to the batch,
92
+ * because members are not in the scene graph and nothing else would.
93
+ *
94
+ * A screen-space def also gets its sprite anchor. That is the def's bounds center, shared by every
95
+ * line: each line's member sits at its own plan position, and pivoting each about itself would
96
+ * compress the stack under tilt. The anchor carries no elevation, because every line already sits at
97
+ * the def's own elevation on `position`, and `MemberTexture` reads it from there instead.
98
+ * `MemberTexture` then composes the member per draw, so `matrixAutoUpdate` goes off and the
99
+ * position, rotation and scale written here become the inputs that compose reads rather than the
100
+ * matrix itself.
88
101
  * @param text - The member to place.
89
102
  * @param line - The line's local placement.
90
103
  * @param bounds - The def's bounds, supplying the rotation, center and elevation.
104
+ * @param screenSpace - Whether the def faces the camera.
91
105
  */
92
- export function applyPlacement(text, line, bounds) {
106
+ export function applyPlacement(text, line, bounds, screenSpace) {
93
107
  const { rotation } = bounds;
94
108
  const position = _position
95
109
  .set(line.offsetX, line.offsetY)
@@ -98,6 +112,18 @@ export function applyPlacement(text, line, bounds) {
98
112
  text.position.set(position.x, position.y, bounds.elevation);
99
113
  text.rotation.set(0, 0, rotation);
100
114
  text.scale.set(line.scaleX, line.scaleY, 1);
115
+ if (screenSpace) {
116
+ // Mutated in place rather than replaced, so a per-update write allocates nothing.
117
+ const anchor = text.spriteAnchor ?? new Vector2();
118
+ anchor.set(bounds.center.x, bounds.center.y);
119
+ text.spriteAnchor = anchor;
120
+ // The compose owns the matrix from here. Nothing may recompose it from the three fields above.
121
+ text.matrixAutoUpdate = false;
122
+ }
123
+ else {
124
+ text.spriteAnchor = null;
125
+ text.matrixAutoUpdate = true;
126
+ }
101
127
  text.updateMatrix();
102
128
  // Held as one array for the member's life: `clipRect` is not a syncable property, so this is a
103
129
  // plain per-frame read and mutating it in place avoids a per-update allocation.
@@ -307,4 +307,19 @@ export declare function castRay(raycaster: Raycaster, ndc: NDCPointLike, camera:
307
307
  * would go.
308
308
  */
309
309
  export declare const HANDEDNESS_FLIP: Matrix4;
310
+ /**
311
+ * The plan's y-down convention, mirrored for a consumer that reads y as up.
312
+ *
313
+ * One value, two unrelated roles. In `ImageInstance.tsx` it is the plan-to-view y mirror composed
314
+ * into a screen-space quad's own 2D linear map, so the quad's offset reads correctly once the
315
+ * shader plants it in the view basis. In `MemberTexture.ts` it is the camera's own rest pose
316
+ * relative to the plan. Its job there is to stop that pose being applied twice, once baked into a
317
+ * member's own matrix and once more by the ordinary view transform at draw time. That role does
318
+ * not depend on the sign of a member's own `scale.y`. The requirement is that the billboard matrix
319
+ * equal the flat matrix at the rest pose, and the scale cancels from both sides of that equality.
320
+ *
321
+ * The two roles share a value by coincidence of geometry, not by a shared derivation. Check both
322
+ * call sites before changing this constant for either reason.
323
+ */
324
+ export declare const Y_DOWN_FLIP: Matrix4;
310
325
  //# sourceMappingURL=Space.d.ts.map
@@ -2,7 +2,7 @@ import { Point } from '@expofp/geometry';
2
2
  import { createContext, use } from 'react';
3
3
  import { Matrix4, Plane, Ray, Raycaster, Vector2, Vector3, Vector4, } from 'three';
4
4
  import { createLogger } from '../utils/logging';
5
- import { clamp } from '../utils/math';
5
+ import { axisLength, clamp } from '../utils/math';
6
6
  import { projectsFromFrustum } from './camera-kind';
7
7
  const logger = createLogger('space');
8
8
  /**
@@ -302,15 +302,6 @@ export function castRay(raycaster, ndc, camera) {
302
302
  .sub(raycaster.ray.origin)
303
303
  .normalize();
304
304
  }
305
- /**
306
- * The length one unit along an axis is drawn at.
307
- * @param matrix - The matrix to measure.
308
- * @param axis - Which axis: `0` for x, `1` for y.
309
- * @returns The transformed axis's length.
310
- */
311
- function axisLength(matrix, axis) {
312
- return new Vector3().setFromMatrixColumn(matrix, axis).length();
313
- }
314
305
  /**
315
306
  * The last step of both paths into world space: mirror z.
316
307
  *
@@ -330,6 +321,21 @@ function axisLength(matrix, axis) {
330
321
  * would go.
331
322
  */
332
323
  export const HANDEDNESS_FLIP = new Matrix4().makeScale(1, 1, -1);
324
+ /**
325
+ * The plan's y-down convention, mirrored for a consumer that reads y as up.
326
+ *
327
+ * One value, two unrelated roles. In `ImageInstance.tsx` it is the plan-to-view y mirror composed
328
+ * into a screen-space quad's own 2D linear map, so the quad's offset reads correctly once the
329
+ * shader plants it in the view basis. In `MemberTexture.ts` it is the camera's own rest pose
330
+ * relative to the plan. Its job there is to stop that pose being applied twice, once baked into a
331
+ * member's own matrix and once more by the ordinary view transform at draw time. That role does
332
+ * not depend on the sign of a member's own `scale.y`. The requirement is that the billboard matrix
333
+ * equal the flat matrix at the rest pose, and the scale cancels from both sides of that equality.
334
+ *
335
+ * The two roles share a value by coincidence of geometry, not by a shared derivation. Check both
336
+ * call sites before changing this constant for either reason.
337
+ */
338
+ export const Y_DOWN_FLIP = new Matrix4().makeScale(1, -1, 1);
333
339
  /** The plan's own plane in plan space, which every pointer position is reported on. */
334
340
  const PLAN_PLANE = new Plane(new Vector3(0, 0, 1), 0);
335
341
  /**
@@ -75,6 +75,22 @@ export interface LayerDef<T extends RenderableDef = RenderableDef> extends Share
75
75
  readonly name: string;
76
76
  /** Collection of layer's children. Mixing different types of children is not supported. */
77
77
  children: RenderableDefCollection<T>;
78
+ /**
79
+ * Draws this layer and its subtree above 3D content. Depth testing goes off, and the layer is
80
+ * ordered by the overlay tier rather than by the plan tier.
81
+ *
82
+ * A layer property, and a forced one. Depth mode is per material and render order is per group, so
83
+ * no implementation can vary either per instance. A def-level override could not be honored even
84
+ * if a caller wrote one.
85
+ *
86
+ * **This is for planar content.** A volume that stops depth testing loses its own self occlusion,
87
+ * because its far faces then paint over its near ones in pack order. So a solid shape batch and a
88
+ * model batch ignore this flag. A solid batch also warns once that it did.
89
+ *
90
+ * **A descendant cannot opt back out**: three propagates a group's render order to its whole
91
+ * subtree, so a descendant left in the plan tier would invert the nesting.
92
+ */
93
+ overlay?: boolean;
78
94
  }
79
95
  /** Shape definition. */
80
96
  export interface ShapeDef extends SharedDef {
@@ -105,6 +121,21 @@ export interface ImageDef extends SharedDef {
105
121
  * [0, 0] is the top-left corner, [0.5, 0.5] is the center (default), [1, 1] is the bottom-right corner.
106
122
  */
107
123
  origin?: [number, number];
124
+ /**
125
+ * Faces the camera, pivoting about `bounds.center` at `bounds.elevation`, at the size `bounds.size`
126
+ * gives in **plan units**. That is the same meaning `bounds.size` has for a flat def. A caller that
127
+ * wants a constant on-screen size keeps doing what markers do today, which is an `onScale` rule
128
+ * that rebuilds the bounds from the pixel size.
129
+ *
130
+ * `bounds.rotation` keeps its meaning, which is a spin about the content plane's normal. For a
131
+ * screen-space def that plane is the screen, so there is no separate spin field. An `onRoll` rule
132
+ * still runs, so keep this off where the rotation carries a plan bearing. Such a def would point
133
+ * at one screen direction however the plan is turned.
134
+ *
135
+ * Changing this at runtime is supported. The def moves between the layer's flat mesh and its
136
+ * camera-facing mesh, which never touches the atlas packing.
137
+ */
138
+ screenSpace?: boolean;
108
139
  }
109
140
  /** Text definition */
110
141
  export interface TextDef extends SharedDef {
@@ -123,6 +154,12 @@ export interface TextDef extends SharedDef {
123
154
  padding: [number, number];
124
155
  /** {@link TextAlignment} object describing text's alignment */
125
156
  alignment: TextAlignment;
157
+ /**
158
+ * As `ImageDef.screenSpace`. The block faces the camera and keeps its plan anchor and its
159
+ * plan-unit font sizes. The whole block pivots about `bounds.center`, on one anchor shared by
160
+ * every line, which is what keeps a stack from splaying under tilt.
161
+ */
162
+ screenSpace?: boolean;
126
163
  }
127
164
  /** Single text line definition */
128
165
  export interface TextLineDef {
@@ -12,9 +12,12 @@ export interface Logger {
12
12
  error: Debugger;
13
13
  }
14
14
  /**
15
- * Creates a logger with the given namespace.
16
- * @param namespace - The namespace to use for the logger.
17
- * @returns A logger with the given namespace.
15
+ * Creates a logger for one namespace, nested under the root namespace.
16
+ *
17
+ * Each level prints only if you enable its namespace, for example with
18
+ * `debug.enable('efp:renderer:*')`.
19
+ * @param namespace - The namespace to nest under the root namespace.
20
+ * @returns A logger with four levels, all under that namespace.
18
21
  */
19
22
  export declare function createLogger(namespace: string): Logger;
20
23
  /**
@@ -3,20 +3,28 @@ import createLog from 'debug';
3
3
  import { isLayerDefs } from '../types/guards';
4
4
  const rootNamespace = 'efp:renderer';
5
5
  /**
6
- * Creates a logger with the given namespace.
7
- * @param namespace - The namespace to use for the logger.
8
- * @returns A logger with the given namespace.
6
+ * Creates a logger for one namespace, nested under the root namespace.
7
+ *
8
+ * Each level prints only if you enable its namespace, for example with
9
+ * `debug.enable('efp:renderer:*')`.
10
+ * @param namespace - The namespace to nest under the root namespace.
11
+ * @returns A logger with four levels, all under that namespace.
9
12
  */
10
13
  export function createLogger(namespace) {
11
14
  const fullNamespace = namespace ? `${rootNamespace}:${namespace}` : rootNamespace;
12
15
  const info = createLog(fullNamespace);
13
- info.log = console.info.bind(console);
16
+ // Each wrapper reads the console method at call time, not at setup time. A plain
17
+ // `console.warn.bind(console)` freezes the method the console object held at that
18
+ // moment. A test can later replace `console.warn`, for example with
19
+ // `vi.spyOn(console, 'warn')`. The frozen copy still calls the old method, so the
20
+ // spy never sees the call.
21
+ info.log = (...args) => console.info(...args);
14
22
  const debug = info.extend('debug');
15
- debug.log = console.debug.bind(console);
23
+ debug.log = (...args) => console.debug(...args);
16
24
  const warn = info.extend('warn');
17
- warn.log = console.warn.bind(console);
25
+ warn.log = (...args) => console.warn(...args);
18
26
  const error = info.extend('error');
19
- error.log = console.error.bind(console);
27
+ error.log = (...args) => console.error(...args);
20
28
  return {
21
29
  debug,
22
30
  info,
@@ -1,3 +1,4 @@
1
+ import { type Matrix4 } from 'three';
1
2
  /**
2
3
  * Holds a value inside an inclusive range.
3
4
  *
@@ -21,4 +22,14 @@ export declare function clamp(value: number, min: number, max: number): number;
21
22
  * @returns The value in `[0, modulus)`.
22
23
  */
23
24
  export declare function euclideanModulo(value: number, modulus: number): number;
25
+ /**
26
+ * The length one unit along an axis is drawn at, which is the scale the matrix applies there.
27
+ *
28
+ * Reads the elements directly rather than through a vector, because picking calls this per instance
29
+ * per test and a scratch vector would be one more shared object to reason about.
30
+ * @param matrix - The matrix to measure.
31
+ * @param axis - Which axis. `0` is x, `1` is y and `2` is z.
32
+ * @returns The transformed axis's length.
33
+ */
34
+ export declare function axisLength(matrix: Matrix4, axis: number): number;
24
35
  //# sourceMappingURL=math.d.ts.map
@@ -25,3 +25,17 @@ export function clamp(value, min, max) {
25
25
  export function euclideanModulo(value, modulus) {
26
26
  return ((value % modulus) + modulus) % modulus;
27
27
  }
28
+ /**
29
+ * The length one unit along an axis is drawn at, which is the scale the matrix applies there.
30
+ *
31
+ * Reads the elements directly rather than through a vector, because picking calls this per instance
32
+ * per test and a scratch vector would be one more shared object to reason about.
33
+ * @param matrix - The matrix to measure.
34
+ * @param axis - Which axis. `0` is x, `1` is y and `2` is z.
35
+ * @returns The transformed axis's length.
36
+ */
37
+ export function axisLength(matrix, axis) {
38
+ const elements = matrix.elements;
39
+ const at = axis * 4;
40
+ return Math.hypot(elements[at], elements[at + 1], elements[at + 2]);
41
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@expofp/renderer",
3
- "version": "3.38.0",
3
+ "version": "3.39.0",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "https://github.com/expofp/efp-app.git",
@@ -42,7 +42,7 @@
42
42
  "troika-three-text": "^0.52.5",
43
43
  "tslib": "^2.3.0",
44
44
  "webgl-memory": "^1.1.3",
45
- "@expofp/geometry": "3.38.0"
45
+ "@expofp/geometry": "3.39.0"
46
46
  },
47
47
  "devDependencies": {
48
48
  "@react-three/test-renderer": "^9.1.0",