@expofp/renderer 3.45.10 → 3.45.12

package/dist/objects/images/Images.js

@@ -351,7 +351,9 @@ function closeScaled(scaled) {
  *
  * Mipmaps stay on. A floor plan is zoomed far out as often as it is zoomed far in, and without
  * mipmaps every image shimmers under minification. The cost is that neighbors can bleed through
- * the deeper mip levels, where the packer's one-pixel gutter no longer separates them.
+ * the deeper mip levels. The packer's gap and `TextureMaterial`'s region clamp keep the first few
+ * levels clean (see `PADDING` in `pack-sources.ts`), and past those a strip stays about one screen
+ * pixel wide.
  * @param image - The packed atlas image: a canvas, or a bitmap a worker transferred out of one.
  * @returns The texture.
  */

package/dist/objects/images/pack-sources.js

@@ -114,12 +114,22 @@ export function packSources(sources, maxDimension, createCanvas = createAtlasCan
     return { atlases, reports };
 }
 /**
- * The gap between neighboring images on an atlas. This gap stops linear filtering at one image's
- * edge from reaching into the next image's pixels. The packer applies this gap *between* rects
- * only, so atlas edges stay flush against the pixels. This is also why a tile exactly
- * `maxDimension` across still fits in a bin.
+ * The gap between neighboring images on an atlas. This gap stops filtering at one image's edge from
+ * reaching into the next image's pixels. The packer applies this gap *between* rects only, so atlas
+ * edges stay flush against the pixels. This is also why a tile exactly `maxDimension` across still
+ * fits in a bin.
+ *
+ * One pixel is enough for the full-size texture, but not for its mipmaps. Mip level L averages
+ * blocks of 2^L pixels, so a block at an image's edge takes in the gap and, once the gap is
+ * narrower than the block, the neighbor too. That shows as a thin strip of the neighbor's color
+ * along the edge when zoomed out. `TextureMaterial` clamps each sample inside its own region, and
+ * with that clamp a gap of 2^L keeps levels 0 to L clean. Sixteen pixels cover levels 0 to 4, where
+ * an image draws at a sixteenth of its pixel size or larger. Four pixels were measured too few: a
+ * 256 px booth logo zoomed out to about 40 screen pixels read level 3 and showed the strip. Past
+ * level 4, the strip can come back, still about one screen pixel wide, against an image under 16
+ * screen pixels for a 256 px logo.
  */
-const PADDING = 1;
+const PADDING = 16;
 /**
  * Packs one kind of source, either all resizable or all fixed, into atlases. The function tags
  * each atlas with the group's kind and records each source's tile count in `reports`.

package/dist/objects/materials/TextureMaterial.d.ts

@@ -24,7 +24,8 @@ export interface TextureMaterialProps {
  * instanced/batched mesh can pack many regions into one atlas.
  *
  * When {@link TextureMaterialProps.uvOffset} is set, the patch overwrites `vMapUv` after
- * `<uv_vertex>`, replacing the stock chunk's value. Instanced meshes wrap this `onBeforeCompile`
+ * `<uv_vertex>`, replacing the stock chunk's value, and samples the map clamped to that region (see
+ * {@link SAMPLE_REGION}). Instanced meshes wrap this `onBeforeCompile`
  * and inject their uniform fetch at the top of `main()`, so the uniform is in scope here.
  * @param props - The material's texture and optional uv-offset uniform name.
  * @returns The material element.

package/dist/objects/materials/TextureMaterial.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { OneFactor } from 'three';
+import { declareBeforeMain, replaceAnchor } from '../../core/shader-source';
 import { useLayerOverlay } from '../layer/layer-context';
 import { useDimPatch } from './effects/color-dim';
 import { overlayParams, sharedParams } from './shared';
@@ -8,7 +9,8 @@ import { overlayParams, sharedParams } from './shared';
  * instanced/batched mesh can pack many regions into one atlas.
  *
  * When {@link TextureMaterialProps.uvOffset} is set, the patch overwrites `vMapUv` after
- * `<uv_vertex>`, replacing the stock chunk's value. Instanced meshes wrap this `onBeforeCompile`
+ * `<uv_vertex>`, replacing the stock chunk's value, and samples the map clamped to that region (see
+ * {@link SAMPLE_REGION}). Instanced meshes wrap this `onBeforeCompile`
  * and inject their uniform fetch at the top of `main()`, so the uniform is in scope here.
  * @param props - The material's texture and optional uv-offset uniform name.
  * @returns The material element.
@@ -20,11 +22,15 @@ export function TextureMaterial(props) {
     function onBeforeCompile(parameters) {
         applyDim(parameters);
         if (uvOffset) {
-            parameters.vertexShader = parameters.vertexShader.replace('#include <uv_vertex>', 
+            parameters.vertexShader = declareBeforeMain(parameters.vertexShader, MAP_REGION_VARYING).replace('#include <uv_vertex>', 
             /*glsl*/ `
         #include <uv_vertex>
         vMapUv = uv * ${uvOffset}.zw + ${uvOffset}.xy;
+        vMapRegion = ${uvOffset};
       `.trim());
+            // The region rides to the fragment shader as a varying, because the per-instance uniform
+            // fetch exists only in the vertex shader.
+            parameters.fragmentShader = replaceAnchor(declareBeforeMain(parameters.fragmentShader, `${MAP_REGION_VARYING}\n${SAMPLE_REGION}`), MAP_FRAGMENT, REGION_MAP_FRAGMENT);
         }
         if (opacityUniform) {
             // All four channels: the blend is premultiplied, so rgb already carries the texel's alpha and
@@ -46,3 +52,55 @@ export function TextureMaterial(props) {
     // premultiplied.
     return (_jsx("meshBasicMaterial", { ...sharedParams, ...(overlay ? overlayParams : null), blendSrc: OneFactor, map: map, onBeforeCompile: onBeforeCompile }));
 }
+/**
+ * The atlas region an instance samples, carried from the vertex shader's per-instance uniform to the
+ * fragment shader. `xy` is the region's origin in uv space and `zw` its size. Flat, because the value
+ * is one per instance and needs no interpolation.
+ */
+const MAP_REGION_VARYING = /* glsl */ `flat varying vec4 vMapRegion;`;
+/**
+ * Samples an atlas without reading past the edge of one region.
+ *
+ * The GPU picks a mip level from how fast uv changes across the screen, and each level averages
+ * bigger blocks of the atlas. Near a region's edge, a sample can then take in the gap and the
+ * neighbor beyond it, which draws a thin strip of the neighbor's color. The function clamps uv to
+ * the region, inset by half a texel of the coarsest level the sample reads. Bilinear filtering at
+ * the clamped point then stays on blocks that hold this region's pixels. With trilinear filtering,
+ * the GPU blends the levels on both sides of the fractional level, so the inset uses the level
+ * above it.
+ *
+ * The clamp alone cannot keep a block from straddling the edge. That is what the packer's gap is
+ * for (see `PADDING` in `pack-sources.ts`), and the two together keep a level clean while the gap
+ * is at least one block wide.
+ *
+ * `textureGrad` takes the gradients of the unclamped uv. Gradients of the clamped uv fall to zero
+ * where the clamp holds, and the GPU would then read that edge at full resolution.
+ */
+const SAMPLE_REGION = /* glsl */ `
+vec4 sampleMapRegion( sampler2D atlas, vec2 uv, vec4 region ) {
+  vec2 size = vec2( textureSize( atlas, 0 ) );
+  vec2 gradX = dFdx( uv );
+  vec2 gradY = dFdy( uv );
+  vec2 texelsX = gradX * size;
+  vec2 texelsY = gradY * size;
+  float level = 0.5 * log2( max( dot( texelsX, texelsX ), dot( texelsY, texelsY ) ) );
+  vec2 inset = 0.5 * exp2( ceil( max( level, 0.0 ) ) ) / size;
+  // A region narrower than two insets clamps to its middle, because clamp() with a lower bound
+  // above its upper bound is undefined in GLSL.
+  vec2 middle = region.xy + 0.5 * region.zw;
+  vec2 low = min( region.xy + inset, middle );
+  vec2 high = max( region.xy + region.zw - inset, middle );
+  return textureGrad( atlas, clamp( uv, low, high ), gradX, gradY );
+}
+`;
+/** Three's map chunk, which {@link REGION_MAP_FRAGMENT} takes the place of. */
+const MAP_FRAGMENT = /* glsl */ `#include <map_fragment>`;
+/**
+ * Three's `map_fragment`, with the sample taken through {@link SAMPLE_REGION}. The video decode
+ * branch is left out, because an atlas is drawn on a canvas and is never a video.
+ */
+const REGION_MAP_FRAGMENT = /* glsl */ `
+#ifdef USE_MAP
+  diffuseColor *= sampleMapRegion( map, vMapUv, vMapRegion );
+#endif
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expofp/renderer",
-  "version": "3.45.10",
+  "version": "3.45.12",
   "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.45.10"
+    "@expofp/geometry": "3.45.12"
   },
   "devDependencies": {
     "@react-three/test-renderer": "^9.1.0",