@navaramap/three 0.0.8 → 0.1.1

package/src/index.ts

@@ -23,7 +23,7 @@ import {
   type FontWorkerMemoryStats,
 } from "@navaramap/font";
 import FontWorkerURL from "@navaramap/font/fontWorker?worker&url";
-import { initNavaraApi } from "@navaramap/three-api";
+import { initNavaraApi, degreeToRadian } from "@navaramap/three-api";
 import {
   initializeWorkerPool,
   probeWorkerPoolHeap,
@@ -118,7 +118,12 @@ import {
 } from "./material";
 import type { TileMesh } from "./mesh/tile";
 import { RenderPassOrchestrator } from "./orchestrators/RenderPassOrchestrator";
-import { PickHelper } from "./pick/pickHelper";
+import {
+  CLICK_PIXEL_TOLERANCE,
+  isClickGesture,
+  PickHelper,
+  TAP_PIXEL_TOLERANCE,
+} from "./pick/pickHelper";
 import { TerrainPicker } from "./pick/pickTerrain";
 import { AttributionPlugin, type AttributionPluginOptions } from "./plugins";
 import { TexturizedSceneByTileCoordinates, type Scenes } from "./scene";
@@ -219,6 +224,12 @@ export * from "./layers";
 export * from "./passes";
 export * from "./evaluations";
 export { SKY_RENDER_ORDER, STARS_RENDER_ORDER } from "./renderOrder";
+export {
+  CLICK_PIXEL_TOLERANCE,
+  TAP_PIXEL_TOLERANCE,
+  PICK_RADIUS,
+  TOUCH_PICK_RADIUS,
+} from "./pick/pickHelper";
 export * from "@navaramap/three-api";
 export * from "./Color";
 export { type BlendMode, blendFunction, createReplacer } from "./utils";
@@ -309,7 +320,11 @@ export type Options = {
   atmosphere?: AtmosphereOptions;
   /** Background color of the scene. Defaults to dark color (0x0a0a0f). */
   backgroundColor?: CoreColor;
-  /** Feature picking configuration. */
+  /**
+   * Feature picking configuration (default: true). Enables the `featureClick`
+   * event (click or touch tap) and the `featureHover` / `featureEnter` /
+   * `featureLeave` events (pointer hover).
+   */
   picking?: boolean;
   /** When true, renders every frame. When false, renders only on changes or when forceUpdate() is called. */
   animation?: boolean;
@@ -400,12 +415,13 @@ export type Options = {
 } & GlobeOptions;
 
 /**
- * Mouse event extended with map coordinates at the event location.
+ * Pointer event extended with map coordinates at the event location.
+ * Fired for every input type; `pointerType` tells them apart.
  */
-export type MapMouseEvent = {
-  /** World coordinates (ECEF) at the mouse position on the globe surface. */
+export type MapPointerEvent = {
+  /** World coordinates (ECEF) at the pointer position on the globe surface. */
   map: XYZ;
-} & MouseEvent;
+} & PointerEvent;
 
 /**
  * Event types emitted by ThreeView. Subscribe using `view.on(eventName, callback)`.
@@ -413,8 +429,24 @@ export type MapMouseEvent = {
 export type ViewEvents = {
   /** Emitted when the view is resized. Receives width and height in pixels. */
   resize: (w: number, h: number) => void;
-  /** Emitted when a feature is picked. Receives picked feature info or null. */
-  pick: (info: Nullable<PickedFeature>) => void;
+  /**
+   * Emitted when a feature is clicked or tapped (click-gesture GPU pick).
+   * Receives the clicked feature, or null when empty space was clicked. For
+   * raw click coordinates use the `click` event instead.
+   */
+  featureClick: (info: Nullable<PickedFeature>) => void;
+  /**
+   * Emitted when the hovered feature changes (hover picking). Receives
+   * the newly hovered feature, or null when the pointer leaves all pickable
+   * features. Hover picking runs a GPU pick per frame while the pointer
+   * moves, and is active only while at least one `featureHover` /
+   * `featureEnter` / `featureLeave` listener is registered.
+   */
+  featureHover: (info: Nullable<PickedFeature>) => void;
+  /** Emitted when the pointer starts hovering a pickable feature. See `featureHover` for activation. */
+  featureEnter: (info: PickedFeature) => void;
+  /** Emitted when the pointer stops hovering the previously hovered feature. See `featureHover` for activation. */
+  featureLeave: (info: PickedFeature) => void;
   /** Emitted when a layer event occurs. Receives event type, layer ID, and event arguments. */
   layer: <K extends keyof LayerEvent>(
     k: K,
@@ -431,18 +463,26 @@ export type ViewEvents = {
   postRender: (t: number) => void;
   /** @private Emitted when terrain height sampling completes. */
   _sample_terrain_height_received: (ev: TerrainHeightUpdatedEvent) => void;
-  /** Emitted on mouse down with map coordinates. */
-  mousedown: (event: MapMouseEvent) => void;
-  /** Emitted when mouse enters the canvas with map coordinates. */
-  mouseenter: (event: MapMouseEvent) => void;
-  /** Emitted when mouse leaves the canvas with map coordinates. */
-  mouseleave: (event: MapMouseEvent) => void;
-  /** Emitted on mouse move with map coordinates. */
-  mousemove: (event: MapMouseEvent) => void;
-  /** Emitted on mouse up with map coordinates. */
-  mouseup: (event: MapMouseEvent) => void;
-  /** Emitted on click with map coordinates. */
-  click: (event: MapMouseEvent) => void;
+  /** Emitted on pointerdown with map coordinates, for every input type. */
+  pointerdown: (event: MapPointerEvent) => void;
+  /** Emitted when a pointer enters the canvas with map coordinates, for every input type. */
+  pointerenter: (event: MapPointerEvent) => void;
+  /** Emitted when a pointer leaves the canvas with map coordinates, for every input type. */
+  pointerleave: (event: MapPointerEvent) => void;
+  /** Emitted on pointermove with map coordinates, for every input type. */
+  pointermove: (event: MapPointerEvent) => void;
+  /** Emitted on pointerup with map coordinates, for every input type. */
+  pointerup: (event: MapPointerEvent) => void;
+  /** Emitted when the browser cancels an active pointer (e.g. a system gesture takes over). */
+  pointercancel: (event: PointerEvent) => void;
+  /**
+   * Emitted on a click or touch tap with map coordinates: a primary-pointer
+   * press and release within the travel tolerance
+   * ({@link CLICK_PIXEL_TOLERANCE}, or {@link TAP_PIXEL_TOLERANCE} for
+   * touch). Camera drags and pinches never fire it. `pointerType` tells the
+   * input kinds apart.
+   */
+  click: (event: MapPointerEvent) => void;
   /** Emitted when the engine becomes idle (no Rust-side events for `idleThreshold` ms). */
   idle: () => void;
 };
@@ -503,6 +543,9 @@ export default class ThreeView<
    *  `camera_flight_ended` events from the engine. */
   private _pendingFlights = new Map<number, (completed: boolean) => void>();
 
+  /** Currently hovered feature, used to diff-synthesize hover events. */
+  private _hoveredFeature: Nullable<PickedFeature> = null;
+
   private _meshes: MeshCache = new Map();
   private _abortControllers: AbortControllers = new Map();
   private _workerPoolPromises: WorkerPoolPromises = new Map();
@@ -1150,9 +1193,9 @@ export default class ThreeView<
   }
 
   /**
-   * Convert a mouse event to a MapMouseEvent by adding map coordinates
+   * Extend a pointer event with map coordinates at its location
    */
-  private convertMouseEventToMapEvent(event: MouseEvent): MapMouseEvent | null {
+  private convertToMapEvent(event: PointerEvent): MapPointerEvent | null {
     const rect = this._renderer.domElement.getBoundingClientRect();
     const x = event.clientX - rect.left;
     const y = event.clientY - rect.top;
@@ -1165,7 +1208,7 @@ export default class ThreeView<
           y: xyz.y,
           z: xyz.z,
         },
-      }) as MapMouseEvent;
+      });
     }
 
     return null;
@@ -1562,6 +1605,17 @@ export default class ThreeView<
         this._camera.raw,
         this._meshes,
         this.onPick.bind(this),
+        this.onHoverPick.bind(this),
+        // Picks cost a GPU render (plus a re-render to restore draped
+        // atlases), so both gestures stay off until someone actually
+        // listens for the result.
+        () => !!this.size("featureClick"),
+        () =>
+          !!(
+            this.size("featureHover") ||
+            this.size("featureEnter") ||
+            this.size("featureLeave")
+          ),
         // {
         //   debug: true,
         // },
@@ -1590,47 +1644,75 @@ export default class ThreeView<
 
     this._camera.core = this._core;
 
-    this._renderer.domElement.addEventListener("mousedown", (event) => {
-      const mapEvent = this.convertMouseEventToMapEvent(event);
+    // The map events are fed from pointer events; touch produces no
+    // compatibility mouse events because the camera-input handlers call
+    // preventDefault() on touch events. `click` is a gesture, not the DOM
+    // event: a primary-pointer press and release within the travel
+    // tolerance, with no pinch and no cancellation. Camera drags never
+    // fire it.
+    let clickStart: Vector2 | undefined;
+
+    this._renderer.domElement.addEventListener("pointerdown", (event) => {
+      // A second finger turns the gesture into a pinch, not a tap.
+      clickStart =
+        event.isPrimary && event.button === 0
+          ? new Vector2(event.clientX, event.clientY)
+          : undefined;
+      const mapEvent = this.convertToMapEvent(event);
       if (mapEvent) {
-        this.emit("mousedown", mapEvent);
+        this.emit("pointerdown", mapEvent);
       }
     });
 
-    this._renderer.domElement.addEventListener("mouseenter", (event) => {
-      const mapEvent = this.convertMouseEventToMapEvent(event);
+    this._renderer.domElement.addEventListener("pointerenter", (event) => {
+      const mapEvent = this.convertToMapEvent(event);
       if (mapEvent) {
-        this.emit("mouseenter", mapEvent);
+        this.emit("pointerenter", mapEvent);
       }
     });
 
-    this._renderer.domElement.addEventListener("mouseleave", (event) => {
-      const mapEvent = this.convertMouseEventToMapEvent(event);
+    this._renderer.domElement.addEventListener("pointerleave", (event) => {
+      const mapEvent = this.convertToMapEvent(event);
       if (mapEvent) {
-        this.emit("mouseleave", mapEvent);
+        this.emit("pointerleave", mapEvent);
       }
     });
 
-    this._renderer.domElement.addEventListener("mousemove", (event) => {
-      const mapEvent = this.convertMouseEventToMapEvent(event);
+    this._renderer.domElement.addEventListener("pointermove", (event) => {
+      const mapEvent = this.convertToMapEvent(event);
       if (mapEvent) {
-        this.emit("mousemove", mapEvent);
+        this.emit("pointermove", mapEvent);
       }
     });
 
-    this._renderer.domElement.addEventListener("mouseup", (event) => {
-      const mapEvent = this.convertMouseEventToMapEvent(event);
+    this._renderer.domElement.addEventListener("pointerup", (event) => {
+      const mapEvent = this.convertToMapEvent(event);
       if (mapEvent) {
-        this.emit("mouseup", mapEvent);
+        this.emit("pointerup", mapEvent);
       }
-    });
-
-    this._renderer.domElement.addEventListener("click", (event) => {
-      const mapEvent = this.convertMouseEventToMapEvent(event);
-      if (mapEvent) {
+      if (!event.isPrimary || event.button !== 0) return;
+      const start = clickStart;
+      clickStart = undefined;
+      if (!start || !mapEvent) return;
+      const tolerance =
+        event.pointerType === "touch"
+          ? TAP_PIXEL_TOLERANCE
+          : CLICK_PIXEL_TOLERANCE;
+      if (
+        isClickGesture(
+          start,
+          new Vector2(event.clientX, event.clientY),
+          tolerance,
+        )
+      ) {
         this.emit("click", mapEvent);
       }
     });
+
+    this._renderer.domElement.addEventListener("pointercancel", (event) => {
+      clickStart = undefined;
+      this.emit("pointercancel", event);
+    });
   }
 
   /**
@@ -2040,6 +2122,33 @@ export default class ThreeView<
     return new Source(sourceId, s.type, this._core);
   }
 
+  /**
+   * Tracks a possibly-async `onCreate()` (see `BaseDesc.onCreate`): the
+   * `add*` methods still return their handle synchronously, the descriptor's
+   * instance appears when the promise settles, and a rejection is logged and
+   * reported through the descriptor's `error` event (when it declares one).
+   *
+   * `wire` binds the descriptor's lifecycle hooks (per-frame `update`,
+   * `onResize`, `needsUpdate`). It runs immediately for a synchronous
+   * creation, and only after the promise resolves for an async one — the
+   * hooks must not fire while the descriptor has no instance yet.
+   */
+  private _trackAsyncCreate(
+    kind: "mesh" | "light" | "effect",
+    desc: { emit: (event: never, ...args: never[]) => void },
+    result: void | Promise<void>,
+    wire: () => void,
+  ): void {
+    if (!(result instanceof Promise)) {
+      wire();
+      return;
+    }
+    result.then(wire, (error: unknown) => {
+      console.error(`Failed to create ${kind} descriptor:`, error);
+      (desc.emit as (event: string, payload: unknown) => void)("error", error);
+    });
+  }
+
   /**
    * Adds a 3D mesh to the scene.
    * The mesh kind is determined by the nested key (e.g., `{ box: { width: 200 } }`).
@@ -2058,28 +2167,35 @@ export default class ThreeView<
     // Create mesh descriptor instance
     const meshDesc = this.registries.mesh.create(meshType, config);
 
-    // Initialize the mesh
-    meshDesc.onCreate();
+    // Initialize the mesh; hooks are wired once the instance exists.
+    this._trackAsyncCreate("mesh", meshDesc, meshDesc.onCreate(), () => {
+      // If deleted while an async creation was loading, nothing to wire.
+      if (meshDesc.destroyed) return;
 
-    // Set up update listener
-    if (meshDesc.update) {
-      this.on("preRender", meshDesc.update.bind(meshDesc));
-    }
+      // Set up update listener
+      if (meshDesc.update) {
+        this.on("preRender", meshDesc.update.bind(meshDesc));
+      }
 
-    if (meshDesc.onResize) {
-      this.on("resize", meshDesc.onResize.bind(meshDesc));
+      if (meshDesc.onResize) {
+        this.on("resize", meshDesc.onResize.bind(meshDesc));
 
-      const canvasSize = this._getCanvasSize();
-      if (canvasSize) {
-        meshDesc.onResize(canvasSize.width, canvasSize.height);
+        const canvasSize = this._getCanvasSize();
+        if (canvasSize) {
+          meshDesc.onResize(canvasSize.width, canvasSize.height);
+        }
       }
-    }
 
-    // Trigger re-render
-    meshDesc.on("needsUpdate", this.forceUpdate);
+      // Trigger re-render
+      meshDesc.on("needsUpdate", this.forceUpdate);
+
+      this.forceUpdate();
+    });
 
     const l = new MeshHandle(meshDesc);
 
+    l.on("deleted", this.forceUpdate);
+
     // Store the mesh descriptor
     this.layersManager.add(l);
 
@@ -2105,19 +2221,26 @@ export default class ThreeView<
     // Create light descriptor instance
     const lightDesc = this.registries.light.create(lightType, config);
 
-    // Initialize the light
-    lightDesc.onCreate();
+    // Initialize the light; hooks are wired once the instance exists.
+    this._trackAsyncCreate("light", lightDesc, lightDesc.onCreate(), () => {
+      // Deleted while an async creation was loading — nothing to wire.
+      if (lightDesc.destroyed) return;
 
-    // Set up update listener if the descriptor has an update method
-    if (lightDesc.update) {
-      this.on("preRender", lightDesc.update.bind(lightDesc));
-    }
+      // Set up update listener if the descriptor has an update method
+      if (lightDesc.update) {
+        this.on("preRender", lightDesc.update.bind(lightDesc));
+      }
+
+      // Trigger re-render
+      lightDesc.on("needsUpdate", this.forceUpdate);
 
-    // Trigger re-render
-    lightDesc.on("needsUpdate", this.forceUpdate);
+      this.forceUpdate();
+    });
 
     const l = new LightHandle(lightDesc);
 
+    l.on("deleted", this.forceUpdate);
+
     // Store the light descriptor
     this.layersManager.add(l);
 
@@ -2160,18 +2283,26 @@ export default class ThreeView<
     // and recompiles shaders when the derived configuration actually changes,
     // so tune effects via `update()` rather than re-adding them.
     this._syncGBuffers();
-    l.on("deleted", this._syncGBuffers);
+    l.on("deleted", () => {
+      this._syncGBuffers();
+      this.forceUpdate();
+    });
 
-    // Initialize the effect
-    effectDesc.onCreate();
+    // Initialize the effect; hooks are wired once the instance exists.
+    this._trackAsyncCreate("effect", effectDesc, effectDesc.onCreate(), () => {
+      // Deleted while an async creation was loading — nothing to wire.
+      if (effectDesc.destroyed) return;
 
-    // Set up update listener if the descriptor has an update method
-    if (effectDesc.update) {
-      this.on("preRender", effectDesc.update.bind(effectDesc));
-    }
+      // Set up update listener if the descriptor has an update method
+      if (effectDesc.update) {
+        this.on("preRender", effectDesc.update.bind(effectDesc));
+      }
+
+      // Trigger re-render
+      effectDesc.on("needsUpdate", this.forceUpdate);
 
-    // Trigger re-render
-    effectDesc.on("needsUpdate", this.forceUpdate);
+      this.forceUpdate();
+    });
 
     // Return handle for imperative access
     return l as EffectHandle<L>;
@@ -2621,11 +2752,11 @@ export default class ThreeView<
 
   /**
    * Samples the terrain height at a given geodetic position synchronously.
-   * @param pos - Geodetic position (lat in radians, lng in radians)
+   * @param pos - Geodetic position (lat in degrees, lng in degrees)
    * @returns Terrain height in meters, or undefined if terrain data not loaded
    */
   sampleTerrainHeight(pos: LatLng): number | undefined {
-    const lle = new LLE(pos.lat, pos.lng, 0);
+    const lle = new LLE(degreeToRadian(pos.lat), degreeToRadian(pos.lng), 0);
     return this._core?.sampleTerrainHeight(lle);
   }
 
@@ -2643,7 +2774,7 @@ export default class ThreeView<
    * sampled.
    *
    * @param source - A registered terrain source (handle or id)
-   * @param positions - Geodetic positions (lat/lng in radians)
+   * @param positions - Geodetic positions (lat/lng in degrees)
    * @param options - Optional abort signal and fixed-level sampling
    * @returns One result per input position, in the same order
    */
@@ -2669,7 +2800,7 @@ export default class ThreeView<
 
   /**
    * Observes terrain height changes at a position. Callback is invoked each time terrain data updates.
-   * @param pos - Geodetic position to observe (lat in radians, lng in radians)
+   * @param pos - Geodetic position to observe (lat in degrees, lng in degrees)
    * @param cb - Callback function receiving the terrain height in meters
    * @returns Cleanup function to stop observing
    */
@@ -2681,7 +2812,7 @@ export default class ThreeView<
       return () => {};
     }
 
-    const lle = new LLE(pos.lat, pos.lng, 0);
+    const lle = new LLE(degreeToRadian(pos.lat), degreeToRadian(pos.lng), 0);
     const entityBits = this._core.registerSampleTerrainHeightEvent(lle);
 
     const callFunc = (ev: TerrainHeightUpdatedEvent) => {
@@ -2778,6 +2909,29 @@ export default class ThreeView<
     this.resize(width, height, pixelRatio);
   };
 
+  /**
+   * Resolves a picked batch ID into feature information via the engine's
+   * property store.
+   */
+  private resolvePickedFeature(batchId: number): PickedFeature {
+    const prop = this._core?.readPropertyByGlobalBatchId(batchId);
+    if (prop) {
+      return {
+        properties: prop.properties,
+        // The GPU pick returns the clicked instance's id; report the
+        // feature's canonical batch id instead so it matches the id the
+        // evaluator exposes (a MultiPoint feature spans many instances).
+        batchId: prop.batchId ?? batchId,
+        layerId: prop.layerId,
+      };
+    }
+    return {
+      properties: {},
+      batchId,
+      layerId: undefined,
+    };
+  }
+
   /**
    * Handles pick events and emits the picked feature information.
    * @param pickArr - Array of picked batch IDs
@@ -2786,28 +2940,34 @@ export default class ThreeView<
     this._renderFlag.forceUpdate = true;
 
     if (pickArr.length > 0) {
-      const batchId = pickArr[0];
-      const prop = this._core?.readPropertyByGlobalBatchId(batchId);
-      if (prop) {
-        const pickedFeature: PickedFeature = {
-          properties: prop.properties,
-          batchId,
-          layerId: prop.layerId,
-        };
-        this.emit("pick", pickedFeature);
-      } else {
-        const emptyFeature: PickedFeature = {
-          properties: {},
-          batchId,
-          layerId: undefined,
-        };
-        this.emit("pick", emptyFeature);
-      }
+      this.emit("featureClick", this.resolvePickedFeature(pickArr[0]));
     } else {
-      this.emit("pick", null);
+      this.emit("featureClick", null);
     }
   }
 
+  /**
+   * Handles hover pick results and synthesizes `featureHover` / `featureEnter` /
+   * `featureLeave` events by diffing against the previously hovered feature.
+   * @param pickArr - Array of picked batch IDs
+   */
+  private onHoverPick(pickArr: number[]) {
+    // The pick render re-bakes draped vector atlases in pick mode; a main
+    // render is needed to restore their normal colors.
+    this._renderFlag.forceUpdate = true;
+
+    const batchId = pickArr.length > 0 ? pickArr[0] : 0;
+    const prev = this._hoveredFeature;
+    if ((prev?.batchId ?? 0) === batchId) return;
+
+    const feature = batchId > 0 ? this.resolvePickedFeature(batchId) : null;
+    this._hoveredFeature = feature;
+
+    if (prev) this.emit("featureLeave", prev);
+    if (feature) this.emit("featureEnter", feature);
+    this.emit("featureHover", feature);
+  }
+
   /**
    * Gets whether continuous animation mode is enabled.
    */
@@ -2821,6 +2981,14 @@ export default class ThreeView<
     this._renderFlag.animation = v;
   }
 
+  /**
+   * Gets the canvas element the view renders into. Useful for styling,
+   * e.g. switching the cursor from a `featureHover` event listener.
+   */
+  get canvas(): HTMLCanvasElement {
+    return this._renderer.domElement;
+  }
+
   /**
    * Gets the current screen size in pixels.
    */

package/src/material/enhancer/model/modelBaseEnhancer/shader.ts

@@ -52,7 +52,7 @@ export const transformShader = (
 #include <packing>
 
 in float batchId;
-out float nvr_vBatchId;
+flat out float nvr_vBatchId;
 out vec3 vPosition;
 
 ${ShowParsVertex}
@@ -93,7 +93,7 @@ uniform float nvr_uPickable;
 // uEffectIdsMask is declared by overrideMaterialsForMRT (#ifdef USE_SELECTIVE_EFFECT block)
 ${MODEL_BASE_SHADER_MARKERS.fragment.UNIFORM_END}
 
-in float nvr_vBatchId;
+flat in float nvr_vBatchId;
 
 ${ShowParsFragment}
 

package/src/material/enhancer/polygon/polygonBaseEnhancer/shader.ts

@@ -68,7 +68,7 @@ in float attrBatchId;
 in vec4 scaleNormalAndCap;
 
 uniform vec2 uMinMaxHeight;
-out float nvr_vBatchId;
+flat out float nvr_vBatchId;
 
 ${useRTE ? RteParsVertex : ""}
 ${ShowParsVertex}
@@ -162,7 +162,7 @@ uniform float nvr_uPickable;
 uniform bool uIsTexturized;
 ${POLYGON_BASE_SHADER_MARKERS.fragment.UNIFORM_END}
 
-in float nvr_vBatchId;
+flat in float nvr_vBatchId;
 
 ${ShowParsFragment}
 

package/src/material/macro/tileShader.ts

@@ -97,8 +97,18 @@ export function generateTileMapFragment(
   }`
     : "";
   return `
-  vec4 atlasColor = texture2D(uColorAtlas, vOrigUv);
-  vec4 atlasAttr  = texture2D(uAttrAtlas,  vOrigUv);
+  // The atlases are linear-filtered for display, but the pick pass reads
+  // encoded batch ids out of atlasColor: interpolating id colors at feature
+  // edges decodes to batch ids that don't exist (a thin draped polyline is
+  // almost all edge pixels). Snap to the texel center (nearest sampling)
+  // while picking.
+  vec2 nvr_atlasUv = vOrigUv;
+  if (uPickable > 0.) {
+    vec2 nvr_atlasSize = vec2(textureSize(uColorAtlas, 0));
+    nvr_atlasUv = (floor(vOrigUv * nvr_atlasSize) + 0.5) / nvr_atlasSize;
+  }
+  vec4 atlasColor = texture2D(uColorAtlas, nvr_atlasUv);
+  vec4 atlasAttr  = texture2D(uAttrAtlas,  nvr_atlasUv);
 
   // attr.a encodes (winningSlot + 1) / 255 — 0 means no contributing slot.
   int winIdx = int(round(atlasAttr.a * 255.0)) - 1;