leaflet-city-mapper 0.0.4 → 0.0.5

package/src/geometry/computeBounds.js

@@ -4,10 +4,12 @@ export function computeBounds(geometry) {
   const min = /* alloc */ [Infinity, Infinity, Infinity];
   const max = /* alloc */ [-Infinity, -Infinity, -Infinity];
   const data = geometry.attributes.position.data;
-  let i;
-  for (i = 0; i < data.length; i++) {
-    min[i % 3] = Math.min(min[i % 3], data[i]);
-    max[i % 3] = Math.max(max[i % 3], data[i]);
+  let i, x, y, z;
+  for (i = 0; i < data.length; i += 3) {
+    x = data[i], y = data[i + 1], z = data[i + 2];
+    min[0] = Math.min(min[0], x), max[0] = Math.max(max[0], x);
+    min[1] = Math.min(min[1], y), max[1] = Math.max(max[1], y);
+    min[2] = Math.min(min[2], z), max[2] = Math.max(max[2], z);
   }
   const instances = geometry.attributes.instanceOffset;
   if (instances) {
@@ -28,11 +30,20 @@ export function computeBounds(geometry) {
     (min[1] + max[1]) / 2,
     (min[2] + max[2]) / 2,
   ];
-  let radius = instances ? Math.hypot(max[0] - min[0], max[1] - min[1], max[2] - min[2]) / 2 : 0;
+  let radiusSquared = 0;
   for (i = 0; !instances && i < data.length; i += 3) {
-    radius = Math.max(radius, Math.hypot(
-      data[i] - center[0], data[i + 1] - center[1], data[i + 2] - center[2]
-    ));
+    x = data[i] - center[0], y = data[i + 1] - center[1], z = data[i + 2] - center[2];
+    radiusSquared = Math.max(radiusSquared, x * x + y * y + z * z);
+  }
+  let radius = instances ? Math.hypot(max[0] - min[0], max[1] - min[1], max[2] - min[2]) / 2
+    : Math.sqrt(radiusSquared);
+  // Preserve hypot's scaling for extreme coordinates in non-Float32 CPU geometry.
+  if (!instances && (radiusSquared === Infinity || radiusSquared < Number.MIN_VALUE / Number.EPSILON)) {
+    radius = 0;
+    for (i = 0; i < data.length; i += 3) {
+      radius = Math.max(radius, Math.hypot(
+        data[i] - center[0], data[i + 1] - center[1], data[i + 2] - center[2]));
+    }
   }
   geometry.bounds = /* alloc */ { min, max, center, radius };
 }

package/src/geometry/conformModelToTerrain.js

@@ -1,23 +1,29 @@
+import { modelByLayer } from '../weakmaps/modelByLayer.js';
+import { rootByLayer } from '../weakmaps/rootByLayer.js';
+import { sceneOriginByLayer } from '../weakmaps/sceneOriginByLayer.js';
+import { sharedByLayer } from '../weakmaps/sharedByLayer.js';
+import { terrainReadyByLayer } from '../weakmaps/terrainReadyByLayer.js';
+import { terrainZoomByLayer } from '../weakmaps/terrainZoomByLayer.js';
+
 import { radians } from '../globals/radians.js';
 import { L } from '../globals/L.js';
-import { sceneByLayer } from '../globals/sceneByLayer.js';
 import { HEIGHT } from '../globals/HEIGHT.js';
 
 
 import { computeBounds } from './computeBounds.js';
 import { getElevation } from '../terrain/getElevation.js';
-import { update } from '../scene/update.js';
-import { updateWorldMatrix } from '../scene/updateWorldMatrix.js';
+import { update } from '../scene/scheduleSceneUpdate.js';
+import { updateWorldMatrix } from '../transforms/updateWorldMatrix.js';
 import { vertexNormals } from './vertexNormals.js';
 import { collectMeshes } from '../collision/collectMeshes.js';
 
 export function conformModelToTerrain(layer, terrain) {
-  if (!sceneByLayer.get(layer).model) return;
+  if (!modelByLayer.get(layer)) return;
   const meshes = /* alloc */ [];
-  collectMeshes(sceneByLayer.get(layer).model, meshes);
+  collectMeshes(modelByLayer.get(layer), meshes);
   let mesh, positions, geometry, position, normals, attribute, normal, world, inverse, i, x, y, z;
   let worldY, weight, worldX, worldZ, point, elevation, offset;
-  if (!sceneByLayer.get(terrain)?._terrainReady || !layer.options.terrainConform) {
+  if (!terrainReadyByLayer.get(terrain) || !layer.options.terrainConform) {
     for (mesh of meshes) {
       positions = mesh.geometry._terrainBasePositions;
       if (!positions) continue;
@@ -34,11 +40,11 @@ export function conformModelToTerrain(layer, terrain) {
     return;
   }
 
-  updateWorldMatrix(sceneByLayer.get(layer).root);
+  updateWorldMatrix(rootByLayer.get(layer));
   const map = layer._map, crs = map.options.crs;
-  const origin = crs.project(sceneByLayer.get(sceneByLayer.get(layer)._shared)._sceneOrigin);
-  const metres = Math.cos(sceneByLayer.get(sceneByLayer.get(layer)._shared)._sceneOrigin.lat * radians);
-  const pixelScale = crs.scale(sceneByLayer.get(terrain)._terrainZoom);
+  const origin = crs.project(sceneOriginByLayer.get(sharedByLayer.get(layer)));
+  const metres = Math.cos(sceneOriginByLayer.get(sharedByLayer.get(layer)).lat * radians);
+  const pixelScale = crs.scale(terrainZoomByLayer.get(terrain));
 
   for (mesh of meshes) {
     geometry = mesh.geometry, attribute = geometry.attributes.position;
@@ -50,7 +56,7 @@ export function conformModelToTerrain(layer, terrain) {
     for (i = 0; i < attribute.data.length; i += 3) {
       x = attribute.data[i], y = attribute.data[i + 1], z = attribute.data[i + 2];
       worldY = world[1] * x + world[5] * y + world[9] * z + world[13];
-      weight = Math.max(0, Math.min(1, 1 - (worldY - sceneByLayer.get(layer).root.position[1]) / HEIGHT));
+      weight = Math.max(0, Math.min(1, 1 - (worldY - rootByLayer.get(layer).position[1]) / HEIGHT));
       if (!weight) continue;
       worldX = world[0] * x + world[4] * y + world[8] * z + world[12];
       worldZ = world[2] * x + world[6] * y + world[10] * z + world[14];

package/src/{models → geometry}/createModelGeometry.js

@@ -1,6 +1,7 @@
-import { sceneByLayer } from '../globals/sceneByLayer.js';
-import { vertexNormals } from '../geometry/vertexNormals.js';
-import { createProgram } from '../rendering/createProgram.js';
+import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
+
+import { vertexNormals } from './vertexNormals.js';
+import { createProgram } from '../materials/createProgram.js';
 
 export function createModelGeometry(context, primitive, attributes) {
   let normals;
@@ -16,7 +17,7 @@ export function createModelGeometry(context, primitive, attributes) {
   }
   const program = createProgram(context.backend, style);
   context.resources.push(program);
-  const device = sceneByLayer.get(context.backend).renderer.device;
+  const device = rendererByLayer.get(context.backend).device;
   if (attributes.index?.data instanceof Uint8Array) attributes.index.data = Uint16Array.from(attributes.index.data);
   let name, attribute;
   for ([name, attribute] of Object.entries(attributes)) {

package/src/geometry/disk.js

@@ -1,4 +1,4 @@
-import { triangle } from './nativeTriangle.js';
+import { triangle } from './appendNativeTriangle.js';
 import { diskAt } from './diskAt.js';
 
 export function disk(point, center, radius, target, radiusY = radius) {

package/src/geometry/indexBridge.js

@@ -1,6 +1,7 @@
-import { sceneByLayer } from '../globals/sceneByLayer.js';
+import { bridgesByLayer } from '../weakmaps/bridgesByLayer.js';
+
 
-export function indexBridge(backend, pixels, triangles) {
+export function indexBridge(layer, pixels, triangles) {
   const bridgeTriangles = /* alloc */ [];
   let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
   let t, triangle, i, p, x, y, key, bucket;
@@ -21,8 +22,8 @@ export function indexBridge(backend, pixels, triangles) {
   for (x = Math.floor(bridge.min[0] / 64); x <= Math.floor(bridge.max[0] / 64); x++) {
     for (y = Math.floor(bridge.min[1] / 64); y <= Math.floor(bridge.max[1] / 64); y++) {
       key = `${x}/${y}`;
-      bucket = sceneByLayer.get(backend)._bridges.get(key);
-      if (!bucket) sceneByLayer.get(backend)._bridges.set(key, bucket = /* alloc */ []);
+      bucket = bridgesByLayer.get(layer).get(key);
+      if (!bucket) bridgesByLayer.get(layer).set(key, bucket = /* alloc */ []);
       bucket.push(bridge);
     }
   }

package/src/geometry/lampPostGeometry.js

@@ -1,5 +1,5 @@
-import { parseColor } from "../utils/parseColor.js";
-import { ring } from './lampRing.js';
+import { parseColor } from "../colors/parseColor.js";
+import { ring } from './createLampRing.js';
 import { lampDirections } from '../globals/lampDirections.js';
 
 /** Schematic support and lamp head; wall-mounted fixtures do not get an invented pole. */

package/src/geometry/lightGeometry.js

@@ -1,4 +1,4 @@
-import { parseColor } from "../utils/parseColor.js";
+import { parseColor } from "../colors/parseColor.js";
 import { quad } from './quad.js';
 import { emitter } from './emitter.js';
 

package/src/geometry/lineJoin.js

@@ -1,5 +1,5 @@
 import { L } from '../globals/L.js';
-import { triangle } from './nativeTriangle.js';
+import { triangle } from './appendNativeTriangle.js';
 import { disk } from './disk.js';
 
 export function lineJoin(context, points, i, b, length) {

package/src/{core → geometry}/markerQuadCorners.js

@@ -1,14 +1,17 @@
-import { sceneByLayer } from '../globals/sceneByLayer.js';
+import { cameraByLayer } from '../weakmaps/cameraByLayer.js';
+import { rootByLayer } from '../weakmaps/rootByLayer.js';
+
 import { coreMatrixKeys } from '../globals/coreMatrixKeys.js';
-import { markerCameraIconPoint } from './markerCameraIconPoint.js';
+import { markerCameraIconPoint } from '../projections/markerCameraIconPoint.js';
 
-import { localPosition } from './localPosition.js';
+import { localPosition } from '../projections/localPosition.js';
 
-import { transformNativePoint } from './transformNativePoint.js';
+import { transformNativePoint } from '../transforms/transformNativePoint.js';
 import { markerImageBounds } from './markerImageBounds.js';
 
 export function markerQuadCorners(state, key, image) {
-  const { source, map, backend } = state;
+  const { source, map, backend: layer } = state;
+
   const position = localPosition(state, source.getLatLng());
   const size = map.getSize();
   const matrices = state.markerMatrices ||= /* alloc */ {
@@ -17,7 +20,7 @@ export function markerQuadCorners(state, key, image) {
     point: /* alloc */ { x: 0, y: 0, z: 0, w: 1 },
   };
   const root = matrices.root, camera = matrices.camera, point = matrices.point;
-  const worldMatrix = sceneByLayer.get(backend).root.worldMatrix, projection = sceneByLayer.get(backend).camera.projectionViewMatrix;
+  const worldMatrix = rootByLayer.get(layer).worldMatrix, projection = cameraByLayer.get(layer).projectionViewMatrix;
   let i, keyName;
   for (i = 0; i < 16; i++) {
     keyName = coreMatrixKeys[i];

package/src/geometry/nativeGeometry.js

@@ -1,5 +1,5 @@
 import { L } from '../globals/L.js';
-import { visit } from './visit.js';
+import { visit } from './visitNativeCoordinates.js';
 import { dashValues } from './dashValues.js';
 import { circleGeometry } from './circleGeometry.js';
 

package/src/geometry/polygon.js

@@ -1,4 +1,4 @@
-import { triangle } from './nativeTriangle.js';
+import { triangle } from './appendNativeTriangle.js';
 import { line } from './line.js';
 import { triangulate } from '../triangulation/triangulate.js';
 

package/src/geometry/roofCoverage.js

@@ -1,21 +1,24 @@
-import { sceneByLayer } from '../globals/sceneByLayer.js';
+import { headerByLayer } from '../weakmaps/headerByLayer.js';
+import { rasterTilesByLayer } from '../weakmaps/rasterTilesByLayer.js';
+import { tileZoomByLayer } from '../weakmaps/tileZoomByLayer.js';
+
 import { roofFootprint } from './roofFootprint.js';
 import { subtractRoofTile } from './subtractRoofTile.js';
 
 /** Test the mesh's ground footprint against loaded imagery, including coarse parent tiles. */
-export function roofCoverage(mesh, backend, rasters) {
+export function roofCoverage(mesh, layer, rasters) {
   let intersectsArchive = false, pending = false;
-  let layer, footprint, remaining, tile;
-  for (layer of rasters) {
-    if (!sceneByLayer.get(layer).header) { pending = true; continue; }
-    footprint = roofFootprint(mesh, backend, layer);
+  let rasterLayer, footprint, remaining, tile;
+  for (rasterLayer of rasters) {
+    if (!headerByLayer.get(rasterLayer)) { pending = true; continue; }
+    footprint = roofFootprint(mesh, layer, rasterLayer);
     if (!footprint) continue;
     intersectsArchive = true;
     remaining = /* alloc */ [footprint];
-    for (tile of sceneByLayer.get(layer)._rasterTiles.values()) {
+    for (tile of rasterTilesByLayer.get(rasterLayer).values()) {
       // Failed imagery already reports an error; do not hide the building indefinitely.
       if (!tile.done && !tile.error) continue;
-      remaining = subtractRoofTile(remaining, tile, sceneByLayer.get(layer)._tileZoom);
+      remaining = subtractRoofTile(remaining, tile, tileZoomByLayer.get(rasterLayer));
       if (!remaining.length) return true;
     }
   }

package/src/geometry/roofFootprint.js

@@ -1,12 +1,15 @@
+import { headerByLayer } from '../weakmaps/headerByLayer.js';
+import { sceneOriginByLayer } from '../weakmaps/sceneOriginByLayer.js';
+import { tileZoomByLayer } from '../weakmaps/tileZoomByLayer.js';
+
 import { radians } from '../globals/radians.js';
 import { earthCirc } from '../globals/earthCirc.js';
-import { sceneByLayer } from '../globals/sceneByLayer.js';
 
-export function roofFootprint(mesh, backend, layer) {
-  const map = backend._map, bounds = mesh.geometry.bounds, world = mesh.worldMatrix;
-  const state = sceneByLayer.get(layer), zoom = state._tileZoom;
-  const origin = map.project(sceneByLayer.get(backend)._sceneOrigin, zoom);
-  const scale = map.options.crs.scale(zoom) / (earthCirc * Math.cos(sceneByLayer.get(backend)._sceneOrigin.lat * radians));
+export function roofFootprint(mesh, layer, rasterLayer) {
+  const map = layer._map, bounds = mesh.geometry.bounds, world = mesh.worldMatrix;
+  const zoom = tileZoomByLayer.get(rasterLayer)
+  const origin = map.project(sceneOriginByLayer.get(layer), zoom);
+  const scale = map.options.crs.scale(zoom) / (earthCirc * Math.cos(sceneOriginByLayer.get(layer).lat * radians));
   let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
   let i, x, y, z, px, py, nw, se;
   for (i = 0; i < 8; i++) {
@@ -17,10 +20,10 @@ export function roofFootprint(mesh, backend, layer) {
     minX = Math.min(minX, px); minY = Math.min(minY, py);
     maxX = Math.max(maxX, px); maxY = Math.max(maxY, py);
   }
-  if (state.header.maxLat !== undefined && state.header.minLon !== undefined &&
-    state.header.minLat !== undefined && state.header.maxLon !== undefined) {
-    nw = map.project(/* alloc */ [state.header.maxLat, state.header.minLon], zoom);
-    se = map.project(/* alloc */ [state.header.minLat, state.header.maxLon], zoom);
+  if (headerByLayer.get(rasterLayer).maxLat !== undefined && headerByLayer.get(rasterLayer).minLon !== undefined &&
+    headerByLayer.get(rasterLayer).minLat !== undefined && headerByLayer.get(rasterLayer).maxLon !== undefined) {
+    nw = map.project(/* alloc */ [headerByLayer.get(rasterLayer).maxLat, headerByLayer.get(rasterLayer).minLon], zoom);
+    se = map.project(/* alloc */ [headerByLayer.get(rasterLayer).minLat, headerByLayer.get(rasterLayer).maxLon], zoom);
     minX = Math.max(minX, nw.x); minY = Math.max(minY, nw.y);
     maxX = Math.min(maxX, se.x); maxY = Math.min(maxY, se.y);
     if (minX >= maxX || minY >= maxY) return null;

package/src/geometry/segment.js

@@ -1,5 +1,5 @@
 import { L } from '../globals/L.js';
-import { triangle } from './nativeTriangle.js';
+import { triangle } from './appendNativeTriangle.js';
 import { disk } from './disk.js';
 
 export function segment(context, a, b, startCap, endCap) {

package/src/{shadows → geometry}/shadowBounds.js

@@ -1,4 +1,4 @@
-import { computeBounds } from '../geometry/computeBounds.js';
+import { computeBounds } from './computeBounds.js';
 import { meshShadowBounds } from './meshShadowBounds.js';
 
 export function shadowBounds(meshes, output = /* alloc */ {

package/src/geometry/surface.js

@@ -1,6 +1,6 @@
 import { ringDirections } from '../globals/ringDirections.js';
 
-import { ring } from './treeRing.js';
+import { ring } from './createTreeRing.js';
 
 export function surface(point, addTriangle, lowRadius, low, highRadius, high, color) {
   const lower = ring(point, lowRadius), upper = ring(point, highRadius);

package/src/{terrain → geometry}/terrainBuffers.js

@@ -1,10 +1,12 @@
+import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
+import { terrainGridsByLayer } from '../weakmaps/terrainGridsByLayer.js';
+
 import { demBuffer } from '../globals/demBuffer.js';
-import { sceneByLayer } from '../globals/sceneByLayer.js';
 import { terrainGrid } from './terrainGrid.js';
 
-export function terrainBuffers(backend, divisions) {
-  const state = sceneByLayer.get(backend), device = state.renderer.device;
-  let attributes = state._terrainGrids.get(divisions);
+export function terrainBuffers(layer, divisions) {
+  const device = rendererByLayer.get(layer).device
+  let attributes = terrainGridsByLayer.get(layer).get(divisions);
   if (!attributes) {
     attributes = terrainGrid(divisions);
     let name, attribute;
@@ -21,7 +23,7 @@ export function terrainBuffers(backend, divisions) {
       ));
       device.queue.writeBuffer(attribute.buffer, 0, attribute.data);
     }
-    state._terrainGrids.set(divisions, attributes);
+    terrainGridsByLayer.get(layer).set(divisions, attributes);
   }
   return attributes;
 }

package/src/geometry/terrainTileGeometry.js

@@ -0,0 +1,19 @@
+import { demByLayer } from '../weakmaps/demByLayer.js';
+import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
+import { terrainOriginElevationByLayer } from '../weakmaps/terrainOriginElevationByLayer.js';
+
+
+export function terrainTileGeometry(layer, attributes, sizeX, sizeZ) {
+  const base = terrainOriginElevationByLayer.get(layer)
+  const bottom = Math.min(demByLayer.get(layer).low, base) - base, top = Math.max(demByLayer.get(layer).high, base) - base;
+  return /* alloc */ {
+    device: rendererByLayer.get(layer).device,
+    attributes,
+    drawRange: /* alloc */ { start: 0, count: attributes.index.count },
+    // Bounds must cover the DEM-displaced tile, although picking uses the flat grid.
+    bounds: /* alloc */ {
+      min: /* alloc */ [0, bottom, 0], max: /* alloc */ [1, top, 1], center: /* alloc */ [0.5, (bottom + top) / 2, 0.5],
+      radius: Math.hypot(sizeX, top - bottom, sizeZ) / 2 / Math.max(sizeX, 1, sizeZ),
+    },
+  };
+}

package/src/geometry/treeGeometry.js

@@ -1,8 +1,8 @@
 import { roundProfile } from '../globals/roundProfile.js';
 
 
-import { parseColor } from "../utils/parseColor.js";
-import { ring } from './treeRing.js';
+import { parseColor } from "../colors/parseColor.js";
+import { ring } from './createTreeRing.js';
 import { surface } from './surface.js';
 import { validateTree } from './validateTree.js';
 

package/src/globals/geometryWorkerUrl.js

@@ -0,0 +1,3 @@
+export const geometryWorkerUrl = import.meta?.url
+  ? new URL('../workers/geometryWorker.js', import.meta.url).href
+  : new URL('leaflet-city-mapper-worker.js', document.currentScript?.src || document.baseURI).href;

package/src/globals/nativeMethodHandlers.js

@@ -1,17 +1,17 @@
-import { nativeSetLatLng } from '../core/nativeSetLatLng.js';
-import { nativeSetLatLngs } from '../core/nativeSetLatLngs.js';
-import { nativeAddLatLng } from '../core/nativeAddLatLng.js';
-import { nativeSetRadius } from '../core/nativeSetRadius.js';
-import { nativeSetStyle } from '../core/nativeSetStyle.js';
-import { nativeRedraw } from '../core/nativeRedraw.js';
-import { nativeSetIcon } from '../core/nativeSetIcon.js';
-import { nativeSetUrl } from '../core/nativeSetUrl.js';
-import { nativeSetBounds } from '../core/nativeSetBounds.js';
-import { nativeSetOpacity } from '../core/nativeSetOpacity.js';
-import { nativeSetZIndex } from '../core/nativeSetZIndex.js';
-import { nativeSetZIndexOffset } from '../core/nativeSetZIndexOffset.js';
-import { nativeBringToFront } from '../core/nativeBringToFront.js';
-import { nativeBringToBack } from '../core/nativeBringToBack.js';
+import { nativeSetLatLng } from '../native/nativeSetLatLng.js';
+import { nativeSetLatLngs } from '../native/nativeSetLatLngs.js';
+import { nativeAddLatLng } from '../native/nativeAddLatLng.js';
+import { nativeSetRadius } from '../native/nativeSetRadius.js';
+import { nativeSetStyle } from '../native/nativeSetStyle.js';
+import { nativeRedraw } from '../native/nativeRedraw.js';
+import { nativeSetIcon } from '../native/nativeSetIcon.js';
+import { nativeSetUrl } from '../native/nativeSetUrl.js';
+import { nativeSetBounds } from '../native/nativeSetBounds.js';
+import { nativeSetOpacity } from '../native/nativeSetOpacity.js';
+import { nativeSetZIndex } from '../native/nativeSetZIndex.js';
+import { nativeSetZIndexOffset } from '../native/nativeSetZIndexOffset.js';
+import { nativeBringToFront } from '../native/nativeBringToFront.js';
+import { nativeBringToBack } from '../native/nativeBringToBack.js';
 
 export const nativeMethodHandlers = {
   setLatLng: nativeSetLatLng,

package/src/{scene → gpu}/initializeRendererResources.js

@@ -1,8 +1,9 @@
-import { sceneByLayer } from '../globals/sceneByLayer.js';
+import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
+
 import { sceneSunlightUniforms } from '../globals/sceneSunlightUniforms.js';
 import { resizeSunlight } from '../shadows/resizeSunlight.js';
 
-export function initializeRendererResources(backend, device) {
+export function initializeRendererResources(layer, device) {
   const layout = device.createBindGroupLayout(/* alloc */ {
     entries: /* alloc */ [
       /* alloc */ { binding: 0, visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: /* alloc */ { type: 'uniform' } },
@@ -11,16 +12,16 @@ export function initializeRendererResources(backend, device) {
       /* alloc */ { binding: 3, visibility: GPUShaderStage.FRAGMENT, buffer: /* alloc */ { type: 'read-only-storage' } },
     ]
   });
-  const buffer = sceneByLayer.get(backend).renderer.device.createBuffer(/* alloc */ { size: 80, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });
-  const sampler = sceneByLayer.get(backend).renderer.device.createSampler(/* alloc */ { compare: 'less-equal', minFilter: 'linear', magFilter: 'linear' });
-  const lights = sceneByLayer.get(backend).renderer.device.createBuffer(/* alloc */ { size: 32, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST });
-  sceneByLayer.get(backend).renderer.sunlight = /* alloc */ { layout, buffer, sampler, lights, size: 0 };
-  sceneByLayer.get(backend).renderer.device.queue.writeBuffer(buffer, 0, sceneSunlightUniforms);
-  resizeSunlight(backend, 1);
+  const buffer = rendererByLayer.get(layer).device.createBuffer(/* alloc */ { size: 80, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });
+  const sampler = rendererByLayer.get(layer).device.createSampler(/* alloc */ { compare: 'less-equal', minFilter: 'linear', magFilter: 'linear' });
+  const lights = rendererByLayer.get(layer).device.createBuffer(/* alloc */ { size: 32, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST });
+  rendererByLayer.get(layer).sunlight = /* alloc */ { layout, buffer, sampler, lights, size: 0 };
+  rendererByLayer.get(layer).device.queue.writeBuffer(buffer, 0, sceneSunlightUniforms);
+  resizeSunlight(layer, 1);
   const emptyImage = document.createElement('canvas');
   emptyImage.width = 1;
   emptyImage.height = 1;
-  sceneByLayer.get(backend).renderer.roofFallbackTexture = /* alloc */ {
+  rendererByLayer.get(layer).roofFallbackTexture = /* alloc */ {
     device,
     texture: device.createTexture(/* alloc */ {
       size: /* alloc */ [1, 1],

package/src/gpu/initializeSharedRenderer.js

@@ -0,0 +1,52 @@
+import { cameraByLayer } from '../weakmaps/cameraByLayer.js';
+import { layersByLayer } from '../weakmaps/layersByLayer.js';
+import { locationByLayer } from '../weakmaps/locationByLayer.js';
+import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
+import { sceneByLayer } from '../weakmaps/sceneByLayer.js';
+import { sceneOriginByLayer } from '../weakmaps/sceneOriginByLayer.js';
+import { sharedByLayer } from '../weakmaps/sharedByLayer.js';
+
+import { rendererDevices } from '../weakmaps/rendererDevices.js';
+import { emptyNode } from '../scene/createSceneNode.js';
+import { failAttachment } from '../scene/failAttachment.js';
+import { requestAdapter } from './requestAdapter.js';
+import { requestDevice } from './requestDevice.js';
+import { rendererDeviceError } from './rendererDeviceError.js';
+import { rendererDeviceLost } from './rendererDeviceLost.js';
+import { createSceneCamera } from '../camera/createSceneCamera.js';
+import { initializeRendererResources } from './initializeRendererResources.js';
+import { mountRenderer } from './mountRenderer.js';
+
+export async function initializeSharedRenderer(layer, map) {
+  const canvas = document.createElement('canvas');
+  if (!navigator.gpu) {
+    failAttachment(/* alloc */ new Error('Layer3D requires WebGPU'), layer, map);
+  }
+  const adapter = await requestAdapter(layer, map);
+  const device = await requestDevice(adapter, layer, map);
+  rendererDevices.set(device, map);
+  device.addEventListener('uncapturederror', rendererDeviceError);
+  Promise.all(/* alloc */ [device.lost, Promise.resolve(device)]).then(rendererDeviceLost);
+  const context = canvas.getContext('webgpu');
+  if (!context) {
+    device.destroy();
+    failAttachment(/* alloc */ new Error('Unable to create a WebGPU canvas context'), layer, map);
+  }
+  const format = navigator.gpu.getPreferredCanvasFormat();
+  context.configure(/* alloc */ { device, format, alphaMode: 'premultiplied' });
+  map.getContainer().querySelector('.leaflet-webgpu-warning')?.remove();
+  sharedByLayer.set(layer, layer);
+  layersByLayer.set(layer, /* alloc */ new Set());
+  sceneOriginByLayer.set(layer, locationByLayer.get(layer));
+  sceneByLayer.set(layer, emptyNode());
+  cameraByLayer.set(layer, createSceneCamera());
+  rendererByLayer.set(layer, /* alloc */ {
+    device,
+    context,
+    format,
+    canvas,
+    dpr: Math.min(window.devicePixelRatio, 2)
+  });
+  initializeRendererResources(layer, device);
+  mountRenderer(layer, map, canvas);
+}

package/src/gpu/mountRenderer.js

@@ -0,0 +1,26 @@
+import { sizeByLayer } from '../weakmaps/sizeByLayer.js';
+
+import { onMapChange } from '../scene/onMapChange.js';
+import { startZoom } from '../animations/startZoom.js';
+import { onZoomAnim } from '../animations/onZoomAnim.js';
+import { endZoom } from '../animations/endZoom.js';
+
+export function mountRenderer(layer, map, canvas) {
+  sizeByLayer.set(layer, null);
+  canvas.className = 'leaflet-3d';
+  canvas.style.cssText = 'position:absolute;top:0;left:0;pointer-events:none';
+  canvas.setAttribute('role', 'img');
+  canvas.setAttribute('aria-label', layer.options.ariaLabel ?? '3D scene');
+  let pane = map.getPane('webgpuPane');
+  if (!pane) {
+    pane = map.createPane('webgpuPane', map.getContainer());
+    // The pitch sky uses 0 and may be inserted after this pane.
+    pane.style.zIndex = 1;
+    pane.style.pointerEvents = 'none';
+  }
+  pane.append(canvas);
+  map.on('move zoom rotate pitch resize viewreset layeradd layerremove', onMapChange, layer);
+  map.on('zoomstart', startZoom, layer);
+  map.on('zoomanim', onZoomAnim, layer);
+  map.on('zoomend', endZoom, layer);
+}

package/src/{scene → gpu}/releaseRenderer.js

@@ -1,4 +1,4 @@
-export async function releaseRenderer(renderer, backend) {
+export async function releaseRenderer(renderer, layer) {
   try {
     await renderer.device.queue.onSubmittedWorkDone();
     renderer.depthTexture?.destroy();
@@ -8,7 +8,7 @@ export async function releaseRenderer(renderer, backend) {
     renderer.sunlight?.buffer?.destroy();
     renderer.sunlight?.lights?.destroy();
   } catch (error) {
-    backend.fire('error', /* alloc */ { error });
+    layer.fire('error', /* alloc */ { error });
   }
   renderer.device.destroy();
 }

package/src/gpu/rendererDeviceError.js

@@ -0,0 +1,16 @@
+import { layersByLayer } from '../weakmaps/layersByLayer.js';
+import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
+
+import { rendererDevices } from '../weakmaps/rendererDevices.js';
+import { renderers } from '../weakmaps/renderers.js';
+
+
+
+export function rendererDeviceError(event) {
+  const map = rendererDevices.get(event.currentTarget);
+  const owner = renderers.get(map);
+  if (rendererByLayer.get(owner)?.device !== event.currentTarget) return;
+  if (!layersByLayer.get(owner)) return;
+  let layer;
+  for (layer of layersByLayer.get(owner)) layer.fire('error', /* alloc */ { error: event.error });
+}

package/src/gpu/rendererDeviceLost.js

@@ -0,0 +1,16 @@
+import { layersByLayer } from '../weakmaps/layersByLayer.js';
+import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
+
+import { rendererDevices } from '../weakmaps/rendererDevices.js';
+import { renderers } from '../weakmaps/renderers.js';
+
+
+
+export function rendererDeviceLost([info, device]) {
+  const map = rendererDevices.get(device);
+  const owner = renderers.get(map);
+  if (!owner || rendererByLayer.get(owner)?.device !== device) return;
+  const error = /* alloc */ new Error(`WebGPU device lost: ${info.message || info.reason}`);
+  let layer;
+  for (layer of layersByLayer.get(owner)) layer.fire('error', /* alloc */ { error });
+}

package/src/{rendering/reportCompilation.js → gpu/reportShaderCompilation.js}

@@ -1,4 +1,4 @@
-export async function reportCompilation(backend, pending) {
+export async function reportCompilation(layer, pending) {
   let info, message;
   try {
     const infos = await Promise.all(pending);
@@ -7,11 +7,11 @@ export async function reportCompilation(backend, pending) {
       for (message of info.messages) if (message.type === 'error') errors += `${errorCount++ ? '\n' : ''}${message.message}`;
     }
     if (errorCount) {
-      backend.fire('error', /* alloc */ {
+      layer.fire('error', /* alloc */ {
         error: /* alloc */ new Error(`Unable to compile Layer3D WGSL: ${errors}`),
       });
     }
   } catch (error) {
-    backend.fire('error', /* alloc */ { error });
+    layer.fire('error', /* alloc */ { error });
   }
 }

package/src/gpu/requestAdapter.js

@@ -0,0 +1,12 @@
+import { failAttachment } from '../scene/failAttachment.js';
+
+export async function requestAdapter(layer, map) {
+  let adapter;
+  try {
+    adapter = await navigator.gpu.requestAdapter();
+  } catch (error) {
+    failAttachment(error, layer, map);
+  }
+  if (!adapter) failAttachment(/* alloc */ new Error('Unable to acquire a WebGPU adapter'), layer, map);
+  return adapter;
+}