leaflet-city-mapper 0.0.4 → 0.0.6

package/src/rendering/collectVisibleMesh.js

@@ -4,18 +4,27 @@ export function collectVisibleMesh(mesh, projection, frustum, frustumLengths, ca
   if (!mesh.geometry.bounds) computeBounds(mesh.geometry);
   const bounds = mesh.geometry.bounds;
   const world = mesh.worldMatrix;
-  const center = bounds.center;
-  const x = world[0] * center[0] + world[4] * center[1] + world[8] * center[2] + world[12];
-  const y = world[1] * center[0] + world[5] * center[1] + world[9] * center[2] + world[13];
-  const z = world[2] * center[0] + world[6] * center[1] + world[10] * center[2] + world[14];
+  let sphere = mesh._cullingSphere;
+  if (!sphere || sphere.bounds !== bounds || sphere.matrix !== world ||
+      sphere.version !== mesh._worldMatrixVersion || mesh._worldMatrixVersion === undefined) {
+    sphere ||= mesh._cullingSphere = /* alloc */ {};
+    const center = bounds.center;
+    sphere.x = world[0] * center[0] + world[4] * center[1] + world[8] * center[2] + world[12];
+    sphere.y = world[1] * center[0] + world[5] * center[1] + world[9] * center[2] + world[13];
+    sphere.z = world[2] * center[0] + world[6] * center[1] + world[10] * center[2] + world[14];
+    sphere.radius = bounds.radius * Math.max(
+      Math.hypot(world[0], world[1], world[2]),
+      Math.hypot(world[4], world[5], world[6]),
+      Math.hypot(world[8], world[9], world[10])
+    );
+    sphere.bounds = bounds;
+    sphere.matrix = world;
+    sphere.version = mesh._worldMatrixVersion;
+  }
+  const { x, y, z, radius } = sphere;
   const clipZ = projection[2] * x + projection[6] * y + projection[10] * z + projection[14];
   const clipW = projection[3] * x + projection[7] * y + projection[11] * z + projection[15];
   mesh._sortDepth = clipZ / clipW;
-  const radius = bounds.radius * Math.max(
-    Math.hypot(world[0], world[1], world[2]),
-    Math.hypot(world[4], world[5], world[6]),
-    Math.hypot(world[8], world[9], world[10])
-  );
   mesh._visibleInFrame =
     frustum[0][0] * x + frustum[0][1] * y + frustum[0][2] * z + frustum[0][3] >= -radius * frustumLengths[0] &&
     frustum[1][0] * x + frustum[1][1] * y + frustum[1][2] * z + frustum[1][3] >= -radius * frustumLengths[1] &&

package/src/rendering/createMesh.js

@@ -1,14 +1,16 @@
+import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
+import { rootByLayer } from '../weakmaps/rootByLayer.js';
+
 import { defaultMaterial } from '../globals/defaultMaterial.js';
 import { meshBuffer } from '../globals/meshBuffer.js';
-import { sceneByLayer } from '../globals/sceneByLayer.js';
 import { nextId } from '../globals/nextId.js';
 
 
 
-import { emptyNode } from '../scene/emptyNode.js';
-import { createProgram } from './createProgram.js';
+import { emptyNode } from '../scene/createSceneNode.js';
+import { createProgram } from '../materials/createProgram.js';
 import { setParent } from '../scene/setParent.js';
-import { update } from '../scene/update.js';
+import { update } from '../scene/scheduleSceneUpdate.js';
 
 /**
  * Add a non-indexed, vertex-coloured mesh from flat vec3 arrays `{ position, normal, color }` in layer-local metres.
@@ -16,8 +18,8 @@ import { update } from '../scene/update.js';
  * A supplied `program` shares compiled shaders and pipelines across compatible meshes.
  */
 
-export function createMesh(backend, data, material = defaultMaterial, usage = 0, program) {
-  const { device } = sceneByLayer.get(backend).renderer, attributes = /* alloc */ {};
+export function createMesh(layer, data, material = defaultMaterial, usage = 0, program) {
+  const { device } = rendererByLayer.get(layer), attributes = /* alloc */ {};
   let name, values, array, size, buffer;
   for ([name, values] of Object.entries(data)) {
     array = /* alloc */ new Float32Array(values);
@@ -35,10 +37,10 @@ export function createMesh(backend, data, material = defaultMaterial, usage = 0,
     ...emptyNode(),
     device,
     geometry: /* alloc */ { device, attributes, drawRange: /* alloc */ { start: 0, count: attributes.position.count } },
-    program: program || createProgram(backend, /* alloc */ { vertexColors: true, doubleSided: true, ...material }),
+    program: program || createProgram(layer, /* alloc */ { vertexColors: true, doubleSided: true, ...material }),
     id: nextId.value++, renderOrder: 0, extras: /* alloc */ {},
   };
-  setParent(mesh, sceneByLayer.get(backend).root);
-  update(backend);
+  setParent(mesh, rootByLayer.get(layer));
+  update(layer);
   return mesh;
 }

package/src/rendering/disposeMesh.js

@@ -1,12 +1,12 @@
 import { setParent } from '../scene/setParent.js';
-import { update } from '../scene/update.js';
+import { update } from '../scene/scheduleSceneUpdate.js';
 
-export function disposeMesh(backend, mesh) {
+export function disposeMesh(layer, mesh) {
   if (!mesh) {
     return;
   }
   setParent(mesh, null);
-  update(backend);
+  update(layer);
   let attribute;
   for (attribute of Object.values(mesh.geometry.attributes)) {
     attribute.buffer.destroy();

package/src/rendering/drawGeometry.js

@@ -1,13 +1,14 @@
+import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
+
 import { meshOffsets } from '../globals/meshOffsets.js';
-import { sceneByLayer } from '../globals/sceneByLayer.js';
 import { drawPipeline } from './drawPipeline.js';
 import { prepareMeshUniforms } from './prepareMeshUniforms.js';
-import { prepareMeshTextures } from './prepareMeshTextures.js';
+import { prepareMeshTextures } from '../textures/prepareMeshTextures.js';
 
 /** Upload retained CPU data and draw one mesh in the active WebGPU render pass. */
-export function drawGeometry(backend, mesh, pass, cullMode, frontFace) {
+export function drawGeometry(layer, mesh, pass, cullMode, frontFace) {
   const { geometry } = mesh;
-  const renderer = sceneByLayer.get(backend).renderer;
+  const renderer = rendererByLayer.get(layer);
   const { device } = renderer;
   const pipeline = drawPipeline(renderer, mesh, cullMode, frontFace);
   const offset = prepareMeshUniforms(renderer, mesh);
@@ -24,12 +25,13 @@ export function drawGeometry(backend, mesh, pass, cullMode, frontFace) {
   if (geometry.attributes.uv) pass.setVertexBuffer(3, geometry.attributes.uv.buffer);
   const instances = geometry.attributes.instanceOffset;
   if (instances) pass.setVertexBuffer(4, instances.buffer);
-  let attribute;
-  for (attribute of Object.values(geometry.attributes)) {
+  let name, attribute;
+  for (name in geometry.attributes) {
+    attribute = geometry.attributes[name];
     if (!attribute.needsUpdate) continue;
     device.queue.writeBuffer(attribute.buffer, 0, attribute.data);
     attribute.needsUpdate = false;
-    geometry.bounds = null;
+    if (name === 'position' || name === 'instanceOffset') geometry.bounds = null;
   }
   const index = geometry.attributes.index;
   if (index) {

package/src/rendering/drawSceneMeshes.js

@@ -1,11 +1,13 @@
+import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
+import { roofRasterByLayer } from '../weakmaps/roofRasterByLayer.js';
+
 import { scenePass } from '../globals/scenePass.js';
-import { sceneByLayer } from '../globals/sceneByLayer.js';
 
 
 import { drawGeometry } from './drawGeometry.js';
 
-export function drawSceneMeshes(backend, encoder, meshes) {
-  const renderer = sceneByLayer.get(backend).renderer;
+export function drawSceneMeshes(layer, encoder, meshes) {
+  const renderer = rendererByLayer.get(layer);
   const pass = encoder.beginRenderPass((
     scenePass.colorAttachments[0].view = renderer.context.getCurrentTexture().createView(),
     scenePass.depthStencilAttachment.view = renderer.depthTexture.createView(),
@@ -23,7 +25,7 @@ export function drawSceneMeshes(backend, encoder, meshes) {
       mesh.program.uniforms.opacity.value = mesh.opacity;
     }
     uniforms = mesh.program.uniforms;
-    if (uniforms.roofTexture) uniforms.roofTexture.value = sceneByLayer.get(backend)._roofRaster?.texture || renderer.roofFallbackTexture;
+    if (uniforms.roofTexture) uniforms.roofTexture.value = roofRasterByLayer.get(layer)?.texture || renderer.roofFallbackTexture;
     if (!mesh._frontFace || mesh._frontFaceWorldVersion !== mesh._worldMatrixVersion ||
         mesh._worldMatrixVersion === undefined) {
       determinant = world[0] * (world[5] * world[10] - world[6] * world[9]) -
@@ -38,10 +40,10 @@ export function drawSceneMeshes(backend, encoder, meshes) {
     frontFace = mesh._frontFace;
     program = mesh.program;
     if (program.transparent && program._layerMaterial.doubleSided && !mesh._nativeSource) {
-      drawGeometry(backend, mesh, pass, 'front', frontFace);
-      drawGeometry(backend, mesh, pass, 'back', frontFace);
+      drawGeometry(layer, mesh, pass, 'front', frontFace);
+      drawGeometry(layer, mesh, pass, 'back', frontFace);
     } else {
-      drawGeometry(backend, mesh, pass, program.cullMode, frontFace);
+      drawGeometry(layer, mesh, pass, program.cullMode, frontFace);
     }
   }
   pass.end();

package/src/rendering/prepareFrameBuffer.js

@@ -1,12 +1,13 @@
+import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
+
 import { frameBuffer } from '../globals/frameBuffer.js';
-import { sceneByLayer } from '../globals/sceneByLayer.js';
-import { destroyTexture } from './destroyTexture.js';
+import { destroyTexture } from '../textures/destroyTexture.js';
 
-export function prepareFrameBuffer(backend, meshes, shadowMeshes) {
-  const renderer = sceneByLayer.get(backend).renderer;
+export function prepareFrameBuffer(layer, meshes, shadowMeshes) {
+  const renderer = rendererByLayer.get(layer);
   // Slot 0 holds the camera; 256-byte mesh slots follow (double-sided meshes use two).
   if (!renderer.uniformBuffer || renderer.uniformBuffer.size < (meshes.length * 2 + shadowMeshes.length + 1) * 256) {
-    if (renderer.uniformBuffer) destroyTexture(backend, renderer.uniformBuffer);
+    if (renderer.uniformBuffer) destroyTexture(layer, renderer.uniformBuffer);
     renderer.uniformBuffer = renderer.device.createBuffer((
       frameBuffer.size = Math.max(64, meshes.length * 4 + shadowMeshes.length * 2) * 256,
       frameBuffer.usage = GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,

package/src/rendering/prepareFrameMeshes.js

@@ -1,16 +1,19 @@
-import { sceneByLayer } from '../globals/sceneByLayer.js';
+import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
+import { shadowMeshesByLayer } from '../weakmaps/shadowMeshesByLayer.js';
+import { visibleMeshesByLayer } from '../weakmaps/visibleMeshesByLayer.js';
 
 
-import { sortMeshes } from "./sortMeshes.js";
+
+import { compareMeshes } from './compareMeshes.js';
 import { revealRoofMesh } from './revealRoofMesh.js';
 
-export function prepareFrameMeshes(backend, rasters, now, meshes) {
-  const candidates = sceneByLayer.get(backend)._visibleMeshes, shadowMeshes = sceneByLayer.get(backend)._shadowMeshes, renderer = sceneByLayer.get(backend).renderer;
+export function prepareFrameMeshes(layer, rasters, now, meshes) {
+  const candidates = visibleMeshesByLayer.get(layer), shadowMeshes = shadowMeshesByLayer.get(layer), renderer = rendererByLayer.get(layer);
   let appearing = false;
   // Visible meshes: opaque first, transparent surfaces back-to-front.
   let mesh, progress;
   for (mesh of candidates) {
-    if (!revealRoofMesh(backend, mesh, rasters)) continue;
+    if (!revealRoofMesh(layer, mesh, rasters, now)) continue;
     if (mesh.fadeDuration) {
       mesh.fadeStart ??= mesh.tile?.loadedAt ?? now;
       progress = Math.min(1, (now - mesh.fadeStart) / mesh.fadeDuration);
@@ -20,7 +23,7 @@ export function prepareFrameMeshes(backend, rasters, now, meshes) {
     meshes.push(mesh);
   }
   candidates.length = 0;
-  sortMeshes(meshes);
+  meshes.sort(compareMeshes);
   let minGroundZoom = Infinity, maxGroundZoom = -Infinity;
   for (mesh of meshes) {
     if (!mesh.ground) continue;

package/src/rendering/prepareFrameUniforms.js

@@ -1,11 +1,14 @@
-import { sceneByLayer } from '../globals/sceneByLayer.js';
+import { cameraByLayer } from '../weakmaps/cameraByLayer.js';
+import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
+import { roofRasterByLayer } from '../weakmaps/roofRasterByLayer.js';
+
 
 
 import { prepareFrameBuffer } from './prepareFrameBuffer.js';
 import { updatePointLights } from '../lighting/updatePointLights.js';
 
-export function prepareFrameUniforms(backend, meshes, shadowMeshes, sunlight) {
-  const renderer = sceneByLayer.get(backend).renderer, camera = sceneByLayer.get(backend).camera;
+export function prepareFrameUniforms(layer, meshes, shadowMeshes, sunlight) {
+  const renderer = rendererByLayer.get(layer), camera = cameraByLayer.get(layer);
   const view = camera.viewMatrix, direction = sunlight?.direction;
   const x = direction ? direction[0] : -300;
   const y = direction ? direction[1] : 500;
@@ -16,11 +19,11 @@ export function prepareFrameUniforms(backend, meshes, shadowMeshes, sunlight) {
   const lightLength = Math.hypot(lightX, lightY, lightZ) || 1;
   const skyLength = Math.hypot(view[4], view[5], view[6]) || 1;
   // One uniform upload per frame: per-mesh writeBuffer calls dominate Firefox's GPU process.
-  prepareFrameBuffer(backend, meshes, shadowMeshes);
+  prepareFrameBuffer(layer, meshes, shadowMeshes);
   const frameData = renderer.uniformData;
   frameData.set(camera.viewMatrix, 0);
   frameData.set(camera.projectionMatrix, 16);
-  if (sceneByLayer.get(backend)._roofRaster?.matrix) frameData.set(sceneByLayer.get(backend)._roofRaster.matrix, 32);
+  if (roofRasterByLayer.get(layer)?.matrix) frameData.set(roofRasterByLayer.get(layer).matrix, 32);
   else {
     frameData.fill(0, 32, 48);
     frameData[32] = frameData[37] = frameData[42] = frameData[47] = 1;
@@ -39,6 +42,6 @@ export function prepareFrameUniforms(backend, meshes, shadowMeshes, sunlight) {
   frameData[57] = tint ? tint[1] : 1;
   frameData[58] = tint ? tint[2] : 1;
   frameData[59] = 0;
-  if (night > 0) updatePointLights(backend);
+  if (night > 0) updatePointLights(layer);
   renderer.uniformSlot = 1;
 }

package/src/rendering/prepareMeshUniforms.js

@@ -22,4 +22,4 @@ export function prepareMeshUniforms(renderer, mesh) {
   prepareMeshCutout(renderer, mesh, base);
   return offset;
 }
-import { prepareMeshCutout } from './prepareMeshCutout.js';
+import { prepareMeshCutout } from '../materials/prepareMeshCutout.js';

package/src/rendering/render.js

@@ -1,23 +1,30 @@
+import { layersByLayer } from '../weakmaps/layersByLayer.js';
+import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
+import { sceneByLayer } from '../weakmaps/sceneByLayer.js';
+import { shadowMeshesByLayer } from '../weakmaps/shadowMeshesByLayer.js';
+import { sharedByLayer } from '../weakmaps/sharedByLayer.js';
+import { wantedRasterTilesByLayer } from '../weakmaps/wantedRasterTilesByLayer.js';
+import { sunlightByMap } from '../weakmaps/sunlightByMap.js';
+
+
 import { frameCommands } from '../globals/frameCommands.js';
-import { sceneByLayer } from '../globals/sceneByLayer.js';
-import { nativeRenderByLayer } from '../globals/nativeRenderByLayer.js';
-import { cameraByMap } from '../globals/cameraByMap.js';
+import { nativeRenderByLayer } from '../weakmaps/nativeRenderByLayer.js';
 
 
-import { synchronizeZoomView } from './synchronizeZoomView.js';
+import { synchronizeZoomView } from '../animations/synchronizeZoomView.js';
 import { resizeRenderer } from './resizeRenderer.js';
-import { updateMapCamera } from './updateMapCamera.js';
+import { updateMapCamera } from '../camera/updateMapCamera.js';
 import { collectFrameMeshes } from './collectFrameMeshes.js';
-import { updateRoofRaster } from './updateRoofRaster.js';
+import { updateRoofRaster } from '../textures/updateRoofRaster.js';
 import { prepareFrameMeshes } from './prepareFrameMeshes.js';
 import { prepareFrameUniforms } from './prepareFrameUniforms.js';
 import { drawSceneMeshes } from './drawSceneMeshes.js';
-import { updateWorldMatrix } from "../scene/updateWorldMatrix.js";
+import { updateWorldMatrix } from "../transforms/updateWorldMatrix.js";
 import { renderSunlight } from '../shadows/renderSunlight.js';
 import { cancelUpdate } from '../scene/cancelUpdate.js';
-import { update } from '../scene/update.js';
+import { update } from '../scene/scheduleSceneUpdate.js';
 import { pruneRasterTiles } from '../raster/pruneRasterTiles.js';
-import { beforeNativeRender } from '../core/beforeNativeRender.js';
+import { beforeNativeRender } from '../native/beforeNativeRender.js';
 
 /**
  * Rendering owner: CSS pixels -> scene metres -> perspective camera.
@@ -25,45 +32,45 @@ import { beforeNativeRender } from '../core/beforeNativeRender.js';
  * Without raster tiles, logical map projection supplies the same static alignment.
  */
 
-export function render(backend) {
-  cancelUpdate(backend);
-  if (sceneByLayer.get(backend)._shared !== backend || !sceneByLayer.get(backend).renderer) return;
-  const map = backend._map;
+export function render(layer) {
+  cancelUpdate(layer);
+  if (sharedByLayer.get(layer) !== layer || !rendererByLayer.get(layer)) return;
+  const map = layer._map;
   const now = performance.now();
   const size = map.getSize();
   if (!size.x || !size.y) return;
-  synchronizeZoomView(backend, now);
-  resizeRenderer(backend, size);
-  updateMapCamera(backend, size);
-  updateWorldMatrix(sceneByLayer.get(backend).scene);
+  synchronizeZoomView(layer, now);
+  resizeRenderer(layer, size);
+  updateMapCamera(layer, size);
+  updateWorldMatrix(sceneByLayer.get(layer));
   let sceneChanged = false;
-  let layer, native;
-  for (layer of sceneByLayer.get(backend)._layers) {
-    native = nativeRenderByLayer.get(layer);
+  let sceneLayer, native;
+  for (sceneLayer of layersByLayer.get(layer)) {
+    native = nativeRenderByLayer.get(sceneLayer);
     if (!native) continue;
     beforeNativeRender(native);
     sceneChanged = true;
   }
-  const sunlight = cameraByMap.get(map)._sunlight;
-  collectFrameMeshes(backend, sunlight, sceneChanged);
-  const shadowMeshes = sceneByLayer.get(backend)._shadowMeshes;
-  const renderer = sceneByLayer.get(backend).renderer;
-  const rasters = updateRoofRaster(backend, now);
+  const sunlight = sunlightByMap.get(map);
+  collectFrameMeshes(layer, sunlight, sceneChanged);
+  const shadowMeshes = shadowMeshesByLayer.get(layer);
+  const renderer = rendererByLayer.get(layer);
+  const rasters = updateRoofRaster(layer, now);
   const meshes = renderer.frameMeshes ||= /* alloc */ [];
   meshes.length = 0;
-  let appearing = prepareFrameMeshes(backend, rasters, now, meshes);
+  let appearing = prepareFrameMeshes(layer, rasters, now, meshes);
   const encoder = renderer.device.createCommandEncoder();
-  prepareFrameUniforms(backend, meshes, shadowMeshes, sunlight);
-  renderSunlight(backend, encoder, shadowMeshes, sunlight);
-  drawSceneMeshes(backend, encoder, meshes);
+  prepareFrameUniforms(layer, meshes, shadowMeshes, sunlight);
+  renderSunlight(layer, encoder, shadowMeshes, sunlight);
+  drawSceneMeshes(layer, encoder, meshes);
   renderer.device.queue.writeBuffer(renderer.uniformBuffer, 0, renderer.uniformData, 0, renderer.uniformSlot * 64);
   renderer.device.queue.submit((
     frameCommands[0] = encoder.finish(),
     frameCommands
   ));
   frameCommands[0] = null;
-  for (layer of sceneByLayer.get(backend)._layers) {
-    if (sceneByLayer.get(layer)._wantedRasterTiles) appearing = pruneRasterTiles(layer) || appearing;
+  for (sceneLayer of layersByLayer.get(layer)) {
+    if (wantedRasterTilesByLayer.get(sceneLayer)) appearing = pruneRasterTiles(sceneLayer) || appearing;
   }
-  if (map._animatingZoom || appearing) update(backend);
+  if (map._animatingZoom || appearing) update(layer);
 }

package/src/rendering/resizeRenderer.js

@@ -1,24 +1,26 @@
+import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
+import { sizeByLayer } from '../weakmaps/sizeByLayer.js';
+
 import { depthTexture as sharedDepthTexture } from '../globals/depthTexture.js';
-import { sceneByLayer } from '../globals/sceneByLayer.js';
 
 
-import { destroyTexture } from './destroyTexture.js';
+import { destroyTexture } from '../textures/destroyTexture.js';
 
-export function resizeRenderer(backend, size) {
-  if (!sceneByLayer.get(backend)._size || !sceneByLayer.get(backend)._size.equals(size)) {
-    sceneByLayer.get(backend).renderer.width = size.x;
-    sceneByLayer.get(backend).renderer.height = size.y;
-    sceneByLayer.get(backend).renderer.canvas.width = Math.round(size.x * sceneByLayer.get(backend).renderer.dpr);
-    sceneByLayer.get(backend).renderer.canvas.height = Math.round(size.y * sceneByLayer.get(backend).renderer.dpr);
-    sceneByLayer.get(backend).renderer.canvas.style.width = `${size.x}px`;
-    sceneByLayer.get(backend).renderer.canvas.style.height = `${size.y}px`;
-    if (sceneByLayer.get(backend).renderer.depthTexture) destroyTexture(backend, sceneByLayer.get(backend).renderer.depthTexture);
-    sceneByLayer.get(backend).renderer.depthTexture = sceneByLayer.get(backend).renderer.device.createTexture((
-      sharedDepthTexture.size[0] = sceneByLayer.get(backend).renderer.canvas.width,
-      sharedDepthTexture.size[1] = sceneByLayer.get(backend).renderer.canvas.height,
+export function resizeRenderer(layer, size) {
+  if (!sizeByLayer.get(layer) || !sizeByLayer.get(layer).equals(size)) {
+    rendererByLayer.get(layer).width = size.x;
+    rendererByLayer.get(layer).height = size.y;
+    rendererByLayer.get(layer).canvas.width = Math.round(size.x * rendererByLayer.get(layer).dpr);
+    rendererByLayer.get(layer).canvas.height = Math.round(size.y * rendererByLayer.get(layer).dpr);
+    rendererByLayer.get(layer).canvas.style.width = `${size.x}px`;
+    rendererByLayer.get(layer).canvas.style.height = `${size.y}px`;
+    if (rendererByLayer.get(layer).depthTexture) destroyTexture(layer, rendererByLayer.get(layer).depthTexture);
+    rendererByLayer.get(layer).depthTexture = rendererByLayer.get(layer).device.createTexture((
+      sharedDepthTexture.size[0] = rendererByLayer.get(layer).canvas.width,
+      sharedDepthTexture.size[1] = rendererByLayer.get(layer).canvas.height,
       sharedDepthTexture.usage = GPUTextureUsage.RENDER_ATTACHMENT,
       sharedDepthTexture
     ));
-    sceneByLayer.get(backend)._size = size;
+    sizeByLayer.set(layer, size);
   }
 }

package/src/rendering/revealRoofMesh.js

@@ -1,14 +1,33 @@
-import { sceneByLayer } from '../globals/sceneByLayer.js';
+import { headerByLayer } from '../weakmaps/headerByLayer.js';
+import { loadingTilesByLayer } from '../weakmaps/loadingTilesByLayer.js';
+import { roofRasterByLayer } from '../weakmaps/roofRasterByLayer.js';
+import { walkByMap } from '../weakmaps/walkByMap.js';
+
 import { roofCoverage } from '../geometry/roofCoverage.js';
 
-export function revealRoofMesh(backend, mesh, rasters) {
+export function revealRoofMesh(layer, mesh, rasters, now) {
+  let raster, loading;
   if (mesh.program.uniforms.roofTexture && !rasters.length) mesh._roofRevealed = true;
   if (mesh.program.uniforms.roofTexture && !mesh._roofRevealed && rasters.length) {
-    if (mesh._roofCoverageSignature !== sceneByLayer.get(backend)._roofRaster?.signature) {
-      mesh._roofCoverageSignature = sceneByLayer.get(backend)._roofRaster?.signature;
-      mesh._roofCovered = roofCoverage(mesh, backend, rasters);
+    if (walkByMap.get(layer._map)?.control?._walk?.saved) {
+      mesh._roofRevealed = true;
+      mesh.fadeStart = now - (mesh.fadeDuration || 0);
+    }
+    if (mesh._roofCoverageSignature !== roofRasterByLayer.get(layer)?.signature) {
+      mesh._roofCoverageSignature = roofRasterByLayer.get(layer)?.signature;
+      mesh._roofCovered = roofCoverage(mesh, layer, rasters);
+    }
+    loading = false;
+    for (raster of rasters) {
+      if (!headerByLayer.get(raster) || loadingTilesByLayer.get(raster) > 0) {
+        loading = true;
+        break;
+      }
+    }
+    if (!mesh._roofRevealed && !mesh._roofCovered && loading) {
+      mesh._appearance = 0;
+      return false;
     }
-    if (!mesh._roofCovered) { mesh._appearance = 0; return false; }
     mesh._roofRevealed = true;
   }
   return true;

package/src/scene/{layerLayerAdd.js → addRegisteredLayer.js}

@@ -1,10 +1,14 @@
+import { eventMapByLayer } from '../weakmaps/eventMapByLayer.js';
+import { eventsByLayer } from '../weakmaps/eventsByLayer.js';
+import { kindByLayer } from '../weakmaps/kindByLayer.js';
+import { state3dByLayer } from '../weakmaps/state3dByLayer.js';
+
 import { L } from '../globals/L.js';
-import { sceneByLayer } from '../globals/sceneByLayer.js';
 import { layerProto } from '../globals/layerProto.js';
 
 
 
-import { initNativeGPU } from '../core/initNativeGPU.js';
+import { initNativeGPU } from '../native/initNativeGPU.js';
 import { removeLayerEvents } from './removeLayerEvents.js';
 import { addSceneLayer } from './addSceneLayer.js';
 import { get3DEvents } from './get3DEvents.js';
@@ -20,16 +24,16 @@ export function layerLayerAdd(event) {
     }
     if (this instanceof L.Marker) this.options.icon.options.crossOrigin ||= true;
   }
-  const map = event.target, state = sceneByLayer.get(this);
+  const map = event.target
   if (!map.hasLayer(this)) return;
-  if (state.kind) {
+  if (kindByLayer.get(this)) {
     this._map = map;
     this._zoomAnimated = map._zoomAnimated;
-    if (state.kind !== 'pending' && state.kind !== 'time') {
-      state.events = state.kind === 'raster' ? getRasterEvents(this) :
-        state._3d ? get3DEvents(this) : emptyEvents();
-      state.eventMap = map;
-      map.on(state.events, this);
+    if (kindByLayer.get(this) !== 'pending' && kindByLayer.get(this) !== 'time') {
+      eventsByLayer.set(this, kindByLayer.get(this) === 'raster' ? getRasterEvents(this) :
+        state3dByLayer.get(this) ? get3DEvents(this) : emptyEvents());
+      eventMapByLayer.set(this, map);
+      map.on(eventsByLayer.get(this), this);
       this.once('remove', removeLayerEvents, this);
     }
     addSceneLayer(this, map);

package/src/scene/addSceneLayer.js

@@ -1,13 +1,14 @@
-import { sceneByLayer } from '../globals/sceneByLayer.js';
+import { kindByLayer } from '../weakmaps/kindByLayer.js';
+
 
 import { onAdd3DLayer } from './onAdd3DLayer.js';
 import { onPMTileAdd } from '../raster/onPMTileAdd.js';
 import { onTerrainAdd } from '../terrain/onTerrainAdd.js';
-import { addRasterImage } from '../core/addRasterImage.js';
+import { addRasterImage } from '../textures/attachRasterImage.js';
 import { addTimeLayer } from '../sunlight/addTimeLayer.js';
 
 export function addSceneLayer(layer, map) {
-  switch (sceneByLayer.get(layer).kind) {
+  switch (kindByLayer.get(layer)) {
     case '3d': return onAdd3DLayer(layer, map);
     case 'raster': return onPMTileAdd(layer, map);
     case 'terrain': return onTerrainAdd(layer, map);

package/src/scene/attachLayer.js

@@ -1,13 +1,14 @@
-import { sceneByLayer } from '../globals/sceneByLayer.js';
+import { addedByLayer } from '../weakmaps/addedByLayer.js';
 
 
-import * as attach from './attach.js';
 
-export async function attachLayer(backend, map) {
+import * as attach from './attachSharedScene.js';
+
+export async function attachLayer(layer, map) {
   try {
-    await attach.attach(backend, map);
-    sceneByLayer.get(backend)._added.resolve();
+    await attach.attach(layer, map);
+    addedByLayer.get(layer).resolve();
   } catch (error) {
-    backend.fire('error', /* alloc */ { error });
+    layer.fire('error', /* alloc */ { error });
   }
 }

package/src/scene/attachSharedScene.js

@@ -0,0 +1,69 @@
+import { cameraByLayer } from '../weakmaps/cameraByLayer.js';
+import { geojsonByLayer } from '../weakmaps/geojsonByLayer.js';
+import { headerByLayer } from '../weakmaps/headerByLayer.js';
+import { kindByLayer } from '../weakmaps/kindByLayer.js';
+import { layersByLayer } from '../weakmaps/layersByLayer.js';
+import { locationByLayer } from '../weakmaps/locationByLayer.js';
+import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
+import { rendererReadyByLayer } from '../weakmaps/rendererReadyByLayer.js';
+import { rootByLayer } from '../weakmaps/rootByLayer.js';
+import { sceneByLayer } from '../weakmaps/sceneByLayer.js';
+import { sceneOriginByLayer } from '../weakmaps/sceneOriginByLayer.js';
+import { sharedByLayer } from '../weakmaps/sharedByLayer.js';
+import { terrainBaseYByLayer } from '../weakmaps/terrainBaseYByLayer.js';
+
+import { radians } from '../globals/radians.js';
+import { renderers } from '../weakmaps/renderers.js';
+import { setParent } from './setParent.js';
+import { render } from '../rendering/render.js';
+import { update } from './scheduleSceneUpdate.js';
+import { updateArea } from '../sources/updateArea.js';
+import { setTerrainHeight } from '../terrain/setTerrainHeight.js';
+import { noOperation } from '../utils/noOperation.js';
+import { restoreObject } from './restoreObject.js';
+import { traverse } from './traverse.js';
+import { initializeSharedRenderer } from '../gpu/initializeSharedRenderer.js';
+
+/**
+ * Join/create this map's shared scene and rebuild GPU objects if its context changed.
+ * Buffer/program handles belong to one context; typed arrays and decoded images do not.
+ * @private
+ */
+export async function attach(layer, map) {
+  let shared = renderers.get(map);
+
+  if (rendererReadyByLayer.get(shared)) {
+    await rendererReadyByLayer.get(shared).promise;
+  }
+  if (!shared) {
+    shared = layer;
+    rendererReadyByLayer.set(layer, Promise.withResolvers());
+    rendererReadyByLayer.get(layer).promise.catch(noOperation);
+    renderers.set(map, shared);
+    await initializeSharedRenderer(layer, map);
+    rendererReadyByLayer.get(layer).resolve();
+    rendererReadyByLayer.delete(shared);
+    render(shared);
+    renderers.set(map, shared);
+  }
+
+  const origin = map.options.crs.project(sceneOriginByLayer.get(shared));
+  const point = map.options.crs.project(locationByLayer.get(layer));
+  const metres = Math.cos(sceneOriginByLayer.get(shared).lat * radians);
+  if (terrainBaseYByLayer.get(layer) == null) terrainBaseYByLayer.set(layer, rootByLayer.get(layer).position[1]);
+  rootByLayer.get(layer).position[0] = (point.x - origin.x) * metres;
+  rootByLayer.get(layer).position[1] = terrainBaseYByLayer.get(layer);
+  rootByLayer.get(layer).position[2] = -(point.y - origin.y) * metres;
+  setTerrainHeight(layer);
+  // Each group's metres are measured at its own latitude, not the shared camera origin.
+  rootByLayer.get(layer).scale.fill(metres / Math.cos(locationByLayer.get(layer).lat * radians));
+  sharedByLayer.set(layer, shared);
+  rendererByLayer.set(layer, rendererByLayer.get(shared));
+  sceneByLayer.set(layer, sceneByLayer.get(shared));
+  cameraByLayer.set(layer, cameraByLayer.get(shared));
+  layersByLayer.get(shared).add(layer);
+  setParent(rootByLayer.get(layer), sceneByLayer.get(shared));
+  traverse(rootByLayer.get(layer), restoreObject, layer);
+  update(shared);
+  if ((headerByLayer.get(layer) && kindByLayer.get(layer) !== 'raster') || geojsonByLayer.get(layer)) updateArea(layer);
+}