leaflet-city-mapper 0.0.1 → 0.0.2

package/src/{scene → utils}/render.js

@@ -1,79 +1,39 @@
-import { computeBounds } from '../utils/geometry.js';
-import { traverse, updateWorldMatrix, updateCamera } from '../utils/scene.js';
-
-/** Scene graph, shared camera and frame rendering. */
-/** Content changes: render once on the next animation frame. */
-export function update(backend) {
-  const shared = backend._shared;
-  if (!shared) return backend;
-  if (shared !== backend) {
-    shared.update();
-    return backend;
-  }
-  backend._frame ||= requestAnimationFrame(() => {
-    backend._frame = null;
-    if (backend._shared === backend && backend.renderer) backend._render();
-  });
-  return backend;
-}
-
-/** Map movement: render within the frame of Leaflet's CSS transforms, coalescing same-tick events. */
-export function onMapChange(backend) {
-  if (backend._queued) return;
-  backend._queued = true;
-  queueMicrotask(() => {
-    backend._queued = false;
-    if (backend._shared !== backend || !backend.renderer) return;
-    if (backend._map._animatingZoom) backend.update();
-    else backend._render();
-  });
-}
-
-/** Find a raster tile's active CSS level to reproduce Leaflet's animated scale/rounding. */
-export function getTileLevel(backend) {
-  let level;
-  backend._map.eachLayer(layer => {
-    if (!level && layer instanceof L.TileLayer && layer._levels) {
-      level = layer._levels[layer._tileZoom];
-    }
-  });
-  return level;
-}
-
-/** Preserve the outgoing tile level before Leaflet changes its logical zoom. */
-export function startZoom(backend) {
-  backend._zoomLevel = backend._getTileLevel();
-}
-
-/** Stop using the outgoing level after zoomend; the next redraw uses current tiles. */
-export function endZoom(backend) {
-  for (const animation of backend._zoomTransitions?.keys() || []) animation.finish();
-  backend._zoomTransitions = null;
-  backend._zoomLevel = null;
-  backend.update();
-}
+import { computeBounds } from "./computeBounds.js";
+import { traverse } from "./traverse.js";
+import { updateCamera } from "./updateCamera.js";
+import { updateWorldMatrix } from "./updateWorldMatrix.js";
+import { destroyTexture } from './destroyTexture.js';
+import { drawGeometry } from './drawGeometry.js';
+import { updatePointLights } from './updatePointLights.js';
+import { renderSunlight } from './renderSunlight.js';
+import { sortMeshes } from "./sortMeshes.js";
+import { update } from "./update.js";
+import { getRasterTileSize, pruneRasterTiles } from "./rasterTiles.js";
+import { getElevation } from "./getElevation.js";
+import { roofCoverage } from "./roofCoverage.js";
 
 /**
  * Rendering owner: CSS pixels -> scene metres -> perspective camera.
  * Lights and transparent sort centers are converted into the current camera space.
  * Without raster tiles, logical map projection supplies the same static alignment.
  */
+
 export function render(backend) {
   cancelAnimationFrame(backend._frame);
   backend._frame = null;
   if (backend._shared !== backend || !backend.renderer) return;
   const map = backend._map;
+  const now = performance.now();
+  let appearing = false;
   const size = map.getSize();
   if (!size.x || !size.y) return;
   if (map._animatingZoom) {
     backend._zoomTransitions ||= new Map();
-    const now = performance.now();
     for (const animation of map.getContainer().getAnimations({ subtree: true })) {
       if (!(animation instanceof CSSTransition) || animation.transitionProperty !== 'transform' ||
         !animation.effect.target.classList.contains('leaflet-zoom-animated') ||
-        backend._zoomTransitions.has(animation)
-      ) {
-          continue;
+        backend._zoomTransitions.has(animation)) {
+        continue;
       }
       const time = animation.currentTime || 0;
       animation.pause();
@@ -83,44 +43,42 @@ export function render(backend) {
     for (const [animation, { start, time }] of backend._zoomTransitions) {
       animation.currentTime = Math.min(animation.effect.getComputedTiming().endTime, time + now - start);
     }
+    if (backend._zoomView) {
+      const view = backend._zoomView;
+      const proxy = [...backend._zoomTransitions.keys()].find(animation => animation.effect.target === map._proxy);
+      const progress = proxy?.effect.getComputedTiming().progress ?? Math.min(1, (now - view.start) / 250);
+      const targetScale = map.getZoomScale(view.targetZoom, view.zoom), scale = 1 + (targetScale - 1) * progress;
+      const from = map.project(view.from, view.zoom), to = map.project(view.to, view.zoom);
+      map._cameraView = { zoom: map.getScaleZoom(scale, view.zoom),
+        center: map.unproject(from.add(to.subtract(from).multiplyBy(targetScale * progress / scale)), view.zoom) };
+      map._updateCameraOverlays();
+    }
   }
   if (!backend._size || !backend._size.equals(size)) {
-    backend.renderer.width                  = size.x;
-    backend.renderer.height                 = size.y;
-    backend.renderer.canvas.width        = Math.round(size.x * backend.renderer.dpr);
-    backend.renderer.canvas.height       = Math.round(size.y * backend.renderer.dpr);
-    backend.renderer.canvas.style.width  = `${size.x}px`;
+    backend.renderer.width = size.x;
+    backend.renderer.height = size.y;
+    backend.renderer.canvas.width = Math.round(size.x * backend.renderer.dpr);
+    backend.renderer.canvas.height = Math.round(size.y * backend.renderer.dpr);
+    backend.renderer.canvas.style.width = `${size.x}px`;
     backend.renderer.canvas.style.height = `${size.y}px`;
-    if (backend.renderer.depthTexture) backend._destroyTexture(backend.renderer.depthTexture);
+    if (backend.renderer.depthTexture) destroyTexture(backend, backend.renderer.depthTexture);
     backend.renderer.depthTexture = backend.renderer.device.createTexture({
       size: [backend.renderer.canvas.width, backend.renderer.canvas.height],
       format: 'depth24plus',
       usage: GPUTextureUsage.RENDER_ATTACHMENT,
     });
-    backend._size                           = size;
+    backend._size = size;
   }
 
-  // Match the map's CSS camera: a perspective distance of 1.5 viewport heights.
-  let pixelsPerMeter = map.options.crs.scale(map.getZoom()) / (40075016.68557849 * Math.cos(backend._sceneOrigin.lat * Math.PI / 180));
-  let origin         = map.project(backend._sceneOrigin).subtract(map.getPixelOrigin());
-  const level        = backend._zoomLevel?.el.isConnected ? backend._zoomLevel : backend._getTileLevel();
-  if (level && map._animatingZoom) {
-    backend._zoomLevel = level;
-  }
-  // Leaflet's logical zoom jumps before its tile CSS transition finishes.
-  // Use the rendered tile transform, including its rounding, on every animation frame.
-  if (level) {
-    const transform = new DOMMatrix(map._animatingZoom ? getComputedStyle(level.el).transform : level.el.style.transform);
-    const point     = map.project(backend._sceneOrigin, level.zoom).subtract(level.origin);
-    origin          = new L.Point(point.x * transform.a + transform.e, point.y * transform.d + transform.f);
-    pixelsPerMeter *= map.getZoomScale(level.zoom, map.getZoom()) * transform.a;
-  }
+  // Match the map's perspective, including the intermediate view of an animated zoom.
+  const zoom = map._cameraView?.zoom ?? map.getZoom(), center = map._cameraView?.center ?? map.getCenter();
+  const pixelsPerMeter = map.options.crs.scale(zoom) / (40075016.68557849 * Math.cos(backend._sceneOrigin.lat * Math.PI / 180));
+  const offset = map.project(center, zoom).subtract(map.project(backend._sceneOrigin, zoom));
   const distance = size.y * 1.5 / pixelsPerMeter;
-  const center   = map.containerPointToLayerPoint(size.divideBy(2));
-  const target   = [
-    (center.x - origin.x) / pixelsPerMeter,
-    map._terrain3D?._getElevation(map.getCenter()) ?? 0,
-    (center.y - origin.y) / pixelsPerMeter
+  const target = [
+    offset.x / pixelsPerMeter,
+    (map._terrain3D ? getElevation(map._terrain3D, center): undefined) ?? 0,
+    offset.y / pixelsPerMeter
   ];
   const pitch = map.getPitch() * Math.PI / 180;
   const bearing = map.getBearing() * Math.PI / 180;
@@ -138,6 +96,8 @@ export function render(backend) {
   camera.target[0] = target[0]; camera.target[1] = target[1]; camera.target[2] = target[2];
   // Refresh the camera view, projection and combined projection-view matrices.
   updateCamera(camera);
+  updateWorldMatrix(backend.scene);
+  for (const layer of backend._layers) layer._beforeRender?.();
   const sunlight = map._sunlight;
   const lightPoint = new DOMPoint(...(sunlight?.direction || [-300, 500, 300]), 0).matrixTransform(new DOMMatrix(camera.viewMatrix));
   const lightLength = Math.hypot(lightPoint.x, lightPoint.y, lightPoint.z) || 1;
@@ -173,6 +133,9 @@ export function render(backend) {
       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];
+      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]),
@@ -187,46 +150,32 @@ export function render(backend) {
         frustum[5][0] * x + frustum[5][1] * y + frustum[5][2] * z + frustum[5][3] >= -radius * frustumLengths[5];
       if (!mesh._visibleInFrame) return;
     }
-    if (mesh.program?.transparent) {
-      if (!mesh.geometry.bounds) computeBounds(mesh.geometry);
-      const center = mesh.geometry.bounds.center, world = mesh.worldMatrix;
-      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];
-      const projection = camera.projectionViewMatrix;
-      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 renderer = backend.renderer;
+  let rasters = [];
   if ([...backend._layers].some(layer => layer.options.roofTexture)) {
-    const rasters = Object.values(map._layers).filter(layer =>
-      layer instanceof L.Layer.types.pmtiles && layer._tiles && layer.options.opacity > 0);
-    const tiles = rasters.flatMap(layer => Object.values(layer._tiles)
-      .filter(tile => tile.el.done && !tile.el.request.signal.aborted && tile.el.isConnected)
-      .map(tile => ({ ...tile, layer })));
-    const signature = tiles.map(({ el, coords, layer }) =>
-      `${L.Util.stamp(el)}:${coords.z}:${coords.x}:${coords.y}:${layer.options.opacity}:${layer.options.zIndex}`).join('|');
-    const selection = rasters.map(layer =>
-      `${L.Util.stamp(layer)}:${layer.options.opacity}:${layer.options.zIndex}`).join('|');
-    // Retain the geographically aligned atlas until a tile batch finishes loading.
-    if (!backend._roofRaster || backend._roofRaster.selection !== selection ||
-      (!rasters.some(layer => layer.isLoading()) && backend._roofRaster.signature !== signature)) {
-      const zoom = tiles.length ? Math.max(...tiles.map(tile => tile.coords.z)) : map.getZoom();
+    rasters = Object.values(map._layers).filter(layer => layer._type === 'pmtiles' && layer._rasterTiles && layer.options.opacity > 0);
+    const signature = rasters.map(layer =>
+      `${L.Util.stamp(layer)}:${layer._rasterVersion || 0}:${layer.options.opacity}:${layer.options.zIndex}`).join('|');
+    if (!backend._roofRaster || backend._roofRaster.signature !== signature &&
+      (!rasters.some(layer => layer._loadingTiles) || now - backend._roofRaster.updatedAt >= 50)) {
+      const tiles = rasters.flatMap(layer => [...layer._rasterTiles.values()]
+        .filter(tile => tile.done && !tile.request.signal.aborted && tile.image)
+        .map(tile => ({ tile, layer })));
+      const zoom = tiles.length ? Math.max(...tiles.map(({ tile }) => tile.coords.z)) : map.getZoom();
       const bounds = new L.Bounds();
-      for (const { coords, layer } of tiles) {
-        const size = layer.getTileSize().multiplyBy(map.getZoomScale(zoom, coords.z));
+      for (const { tile: { coords }, layer } of tiles) {
+        const size = getRasterTileSize().multiplyBy(map.getZoomScale(zoom, coords.z));
         bounds.extend(new L.Point(coords.x, coords.y).scaleBy(size));
         bounds.extend(new L.Point(coords.x + 1, coords.y + 1).scaleBy(size));
       }
       const min = bounds.min || map.project(backend._sceneOrigin, zoom);
       const size = bounds.isValid() ? bounds.getSize() : new L.Point(1, 1);
       // ponytail: cap at 4096 px; virtual textures if wide views need native detail.
-      const limit   = 4096;
-      const scale   = Math.min(1, limit / Math.max(size.x, size.y));
-      const width   = Math.max(1, Math.ceil(size.x * scale));
-      const height  = Math.max(1, Math.ceil(size.y * scale));
+      const limit = 4096;
+      const scale = Math.min(1, limit / Math.max(size.x, size.y));
+      const width = Math.max(1, Math.ceil(size.x * scale));
+      const height = Math.max(1, Math.ceil(size.y * scale));
       const origin = map.project(backend._sceneOrigin, zoom);
       const pixels = map.options.crs.scale(zoom) / (40075016.68557849 * Math.cos(backend._sceneOrigin.lat * Math.PI / 180));
       const matrix = new DOMMatrix();
@@ -234,7 +183,7 @@ export function render(backend) {
       matrix.m41 = (origin.x - min.x) / size.x; matrix.m43 = (origin.y - min.y) / size.y;
       const texture = backend._roofRaster?.texture;
       if (texture && (texture.width !== width || texture.height !== height)) {
-        backend._destroyTexture(texture.texture);
+        destroyTexture(backend, texture.texture);
         texture.texture = renderer.device.createTexture({
           size: [width, height],
           format: 'rgba8unorm',
@@ -244,7 +193,7 @@ export function render(backend) {
         texture.height = height;
       }
       backend._roofRaster = {
-        signature, selection, matrix: Array.from(matrix.toFloat64Array()),
+        signature, updatedAt: now, matrix: Array.from(matrix.toFloat64Array()),
         texture: texture || {
           device: renderer.device,
           texture: renderer.device.createTexture({
@@ -263,7 +212,8 @@ export function render(backend) {
       // Compose the atlas on the GPU: re-uploading a large canvas stalls Firefox for hundreds of ms.
       const device = renderer.device;
       if (!renderer.roofBlit) {
-        const module = device.createShaderModule({ code: `
+        const module = device.createShaderModule({
+          code: `
           @group(0) @binding(0) var source: texture_2d<f32>;
           @group(0) @binding(1) var sourceSampler: sampler;
           @group(0) @binding(2) var<uniform> opacity: f32;
@@ -276,7 +226,8 @@ export function render(backend) {
             let color = textureSample(source, sourceSampler, input.uv);
             return vec4f(color.rgb, color.a * opacity);
           }
-        ` });
+        `
+        });
         renderer.roofBlit = {
           pipeline: device.createRenderPipeline({
             layout: 'auto',
@@ -297,14 +248,6 @@ export function render(backend) {
           sampler: device.createSampler({ magFilter: 'linear', minFilter: 'linear' }),
         };
       }
-      // Raster tiles keep their GPU copy; terrain meshes already own one for the same image.
-      const roofTiles = backend._roofTiles ||= new Map();
-      for (const [el, source] of roofTiles) {
-        if (!tiles.some(tile => tile.el === el) || map._terrain3D?._rasterTiles.has(el)) {
-          source.texture.destroy();
-          roofTiles.delete(el);
-        }
-      }
       const opacities = new Float32Array(Math.max(1, tiles.length) * 64);
       const opacityBuffer = device.createBuffer({
         size: opacities.byteLength,
@@ -320,27 +263,18 @@ export function render(backend) {
         }],
       });
       atlasPass.setPipeline(renderer.roofBlit.pipeline);
-      tiles.sort((a, b) => (a.layer.options.zIndex || 0) - (b.layer.options.zIndex || 0) || a.coords.z - b.coords.z);
-      for (const [i, { coords, el, layer }] of tiles.entries()) {
-        let source = map._terrain3D?._rasterTiles.get(el)?.texture || roofTiles.get(el);
-        if (!source) {
-          source = {
-            texture: device.createTexture({
-              size: [el.naturalWidth, el.naturalHeight],
-              format: 'rgba8unorm',
-              usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
-            }),
-            image: el, uploaded: null,
-          };
-          roofTiles.set(el, source);
-        }
+      tiles.sort((a, b) => (a.layer.options.zIndex || 0) - (b.layer.options.zIndex || 0) ||
+        a.tile.coords.z - b.tile.coords.z);
+      for (const [i, { tile, layer }] of tiles.entries()) {
+        const { coords, image } = tile;
+        const source = tile.texture;
         if (source.uploaded !== source.image) {
-          device.queue.copyExternalImageToTexture({ source: el }, { texture: source.texture },
+          device.queue.copyExternalImageToTexture({ source: image }, { texture: source.texture },
             [source.texture.width, source.texture.height]);
           source.uploaded = source.image;
         }
         opacities[i * 64] = layer.options.opacity;
-        const tileSize = layer.getTileSize().multiplyBy(map.getZoomScale(zoom, coords.z));
+        const tileSize = getRasterTileSize().multiplyBy(map.getZoomScale(zoom, coords.z));
         const offset = new L.Point(coords.x, coords.y).scaleBy(tileSize).subtract(min);
         const x = offset.x * width / size.x, y = offset.y * height / size.y;
         atlasPass.setViewport(x, y, Math.min(tileSize.x * width / size.x, width - x),
@@ -361,36 +295,48 @@ export function render(backend) {
       opacityBuffer.destroy();
     }
   } else if (backend._roofRaster) {
-    backend._destroyTexture(backend._roofRaster.texture.texture);
+    destroyTexture(backend, backend._roofRaster.texture.texture);
     backend._roofRaster = null;
-    for (const source of backend._roofTiles?.values() || []) source.texture.destroy();
-    backend._roofTiles = null;
   }
   // Visible meshes: opaque first, transparent surfaces back-to-front.
   const meshes = [];
-  traverse(backend.scene, mesh => { if (!mesh.visible) return true; if (mesh.geometry && mesh._visibleInFrame) meshes.push(mesh); });
-  meshes.sort((a, b) => Number(a.program.transparent) - Number(b.program.transparent) ||
-    (a.program.transparent
-      ? (a.renderOrder || 0) - (b.renderOrder || 0) ||
-      b._sortDepth - a._sortDepth || a.id - b.id
-      : a.id - b.id)
-  );
+  traverse(backend.scene, mesh => {
+    if (!mesh.visible) return true;
+    if (!mesh.geometry || !mesh._visibleInFrame) return;
+    if (mesh.program.uniforms.roofTexture && !rasters.length) mesh._roofRevealed = true;
+    if (mesh.program.uniforms.roofTexture && !mesh._roofRevealed && rasters.length) {
+      if (mesh._roofCoverageSignature !== backend._roofRaster?.signature) {
+        mesh._roofCoverageSignature = backend._roofRaster?.signature;
+        mesh._roofCovered = roofCoverage(mesh, backend, rasters);
+      }
+      if (!mesh._roofCovered) { mesh._appearance = 0; return; }
+      mesh._roofRevealed = true;
+    }
+    if (mesh.fadeDuration) {
+      mesh.fadeStart ??= mesh.tile?.loadedAt ?? now;
+      const progress = Math.min(1, (now - mesh.fadeStart) / mesh.fadeDuration);
+      mesh._appearance = progress * progress * (3 - 2 * progress);
+      appearing ||= progress < 1;
+    }
+    meshes.push(mesh);
+  });
+  sortMeshes(meshes);
   const encoder = renderer.device.createCommandEncoder();
-  const pendingRasterTiles = [];
   // One uniform upload per frame: per-mesh writeBuffer calls dominate Firefox's GPU process.
   // Slot 0 holds the camera; 256-byte mesh slots follow (double-sided meshes use two).
   const shadowMeshes = [];
   if (sunlight?.altitude >= 3) {
     for (const layer of backend._layers) {
-      if (layer instanceof L.Layer.types.terrain) continue;
+      if (layer._type === 'terrain') continue;
       traverse(layer.root, mesh => {
         if (!mesh.visible) return true;
-        if (mesh.geometry && !mesh.tile && !mesh.program.nightLight && mesh.program.depthTest !== false) shadowMeshes.push(mesh);
+        if (mesh.geometry && !mesh.tile && mesh._appearance !== 0 &&
+          !mesh.program.nightLight && mesh.program.depthTest !== false) shadowMeshes.push(mesh);
       });
     }
   }
   if (!renderer.uniformBuffer || renderer.uniformBuffer.size < (meshes.length * 2 + shadowMeshes.length + 1) * 256) {
-    if (renderer.uniformBuffer) backend._destroyTexture(renderer.uniformBuffer);
+    if (renderer.uniformBuffer) destroyTexture(backend, renderer.uniformBuffer);
     renderer.uniformBuffer = renderer.device.createBuffer({
       size: Math.max(64, meshes.length * 4 + shadowMeshes.length * 2) * 256,
       usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
@@ -408,9 +354,9 @@ export function render(backend) {
   frameData[55] = night * night * (3 - 2 * night);
   frameData.set(sunlight?.tint || [1, 1, 1], 56);
   frameData[59] = 0;
-  if (night > 0) backend._updatePointLights();
+  if (night > 0) updatePointLights(backend);
   renderer.uniformSlot = 1;
-  backend._renderSunlight(encoder, shadowMeshes, sunlight);
+  renderSunlight(backend, encoder, shadowMeshes, sunlight);
   const pass = encoder.beginRenderPass({
     colorAttachments: [{
       view: renderer.context.getCurrentTexture().createView(),
@@ -428,7 +374,6 @@ export function render(backend) {
   pass.setViewport(0, 0, renderer.canvas.width, renderer.canvas.height, 0, 1);
   pass.setBindGroup(1, renderer.sunlight.bindGroup);
   for (const mesh of meshes) {
-    if (mesh.tile && mesh.tile.style.visibility !== 'hidden') pendingRasterTiles.push(mesh.tile);
     const world = mesh.worldMatrix;
     if (mesh.texture) {
       mesh.program.uniforms.baseTexture.value = mesh.texture;
@@ -444,24 +389,18 @@ export function render(backend) {
     }
     const frontFace = determinant < 0 ? 'cw' : 'ccw';
     const program = mesh.program;
-    if (program.transparent && program._layerMaterial.doubleSided) {
-      backend._drawGeometry(mesh, pass, 'front', frontFace);
-      backend._drawGeometry(mesh, pass, 'back', frontFace);
+    if (program.transparent && program._layerMaterial.doubleSided && !mesh._nativeSource) {
+      drawGeometry(backend, mesh, pass, 'front', frontFace);
+      drawGeometry(backend, mesh, pass, 'back', frontFace);
     } else {
-      backend._drawGeometry(mesh, pass, program.cullMode, frontFace);
+      drawGeometry(backend, mesh, pass, program.cullMode, frontFace);
     }
   }
   pass.end();
   renderer.device.queue.writeBuffer(renderer.uniformBuffer, 0, renderer.uniformData, 0, renderer.uniformSlot * 64);
   renderer.device.queue.submit([encoder.finish()]);
-  if (pendingRasterTiles.length) {
-    renderer.device.queue.onSubmittedWorkDone().then(() => {
-      for (const tile of pendingRasterTiles) {
-        if (tile.isConnected && tile._terrainVisibility !== undefined) tile.style.visibility = 'hidden';
-      }
-    }, error => {
-      for (const layer of backend._layers || []) layer.fire('error', { error });
-    });
+  for (const layer of backend._layers) {
+    if (layer._wantedRasterTiles) appearing = pruneRasterTiles(layer) || appearing;
   }
-  if (map._animatingZoom) backend.update();
+  if (map._animatingZoom || appearing) update(backend);
 }

package/src/utils/renderSunlight.js

@@ -0,0 +1,170 @@
+import { computeBounds } from './computeBounds.js';
+import { updateCamera } from './updateCamera.js';
+import { resizeSunlight } from './resizeSunlight.js';
+
+/** One shared directional depth map. Off-screen but loaded geometry can cast shadows. */
+
+export function renderSunlight(backend, encoder, meshes, sunlight) {
+  const renderer = backend.renderer, device = renderer.device, sun = renderer.sunlight;
+  if (!meshes.length || !sunlight || sunlight.altitude < 3) {
+    if (!sun.enabled) return;
+    const values = new Float32Array(20);
+    values.set([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
+    device.queue.writeBuffer(sun.buffer, 0, values);
+    sun.enabled = false;
+    sun.cache = null;
+    return;
+  }
+  const cache = sun.cache;
+  const unchanged = sun.enabled && cache?.meshes.size === meshes.length &&
+    sunlight.direction.every((value, i) => value === cache.direction[i]) &&
+    meshes.every(mesh => {
+      const previous = cache.meshes.get(mesh), range = mesh.geometry.drawRange;
+      return previous && previous.world === mesh._worldMatrixVersion && previous.geometry === mesh.geometry &&
+        previous.start === range.start && previous.count === range.count &&
+        previous.appearance === (mesh._appearance ?? 1) &&
+        Object.values(mesh.geometry.attributes).every(attribute => !attribute.needsUpdate);
+    });
+  if (unchanged) return;
+  const values = new Float32Array(20);
+  sun.enabled = true;
+  resizeSunlight(backend, Math.min(2048, device.limits.maxTextureDimension2D));
+  const min = [Infinity, Infinity, Infinity], max = [-Infinity, -Infinity, -Infinity];
+  for (const mesh of meshes) {
+    if (!mesh.geometry.bounds || mesh.geometry.attributes.position.needsUpdate) computeBounds(mesh.geometry);
+    const bounds = mesh.geometry.bounds, matrix = mesh.worldMatrix;
+    let cached = mesh._shadowBounds;
+    if (!cached || cached.version !== mesh._worldMatrixVersion || cached.bounds !== bounds) {
+      cached = mesh._shadowBounds = { version: mesh._worldMatrixVersion, bounds,
+        min: [Infinity, Infinity, Infinity], max: [-Infinity, -Infinity, -Infinity] };
+      for (let i = 0; i < 8; i++) {
+        const x = i & 1 ? bounds.max[0] : bounds.min[0], y = i & 2 ? bounds.max[1] : bounds.min[1];
+        const z = i & 4 ? bounds.max[2] : bounds.min[2];
+        const w = matrix[3] * x + matrix[7] * y + matrix[11] * z + matrix[15];
+        for (let axis = 0; axis < 3; axis++) {
+          const value = (matrix[axis] * x + matrix[axis + 4] * y + matrix[axis + 8] * z + matrix[axis + 12]) / w;
+          cached.min[axis] = Math.min(cached.min[axis], value);
+          cached.max[axis] = Math.max(cached.max[axis], value);
+        }
+      }
+    }
+    for (let axis = 0; axis < 3; axis++) {
+      min[axis] = Math.min(min[axis], cached.min[axis]);
+      max[axis] = Math.max(max[axis], cached.max[axis]);
+    }
+  }
+  // Include ground receivers below/around the loaded buildings and trees.
+  min[1] = Math.min(0, min[1]);
+  const radius = Math.max(100, Math.hypot(...min.map((v, i) => max[i] - v)));
+  const center = min.map((v, i) => (v + max[i]) / 2);
+  const lightCamera = {
+    position: center.map((v, i) => v + sunlight.direction[i] * radius * 2),
+    target: center, up: [0, 0, -1], fov: 45, aspect: 1, near: 1, far: radius * 5,
+    viewMatrix: [], projectionMatrix: [], projectionViewMatrix: [],
+  };
+  updateCamera(lightCamera);
+  const view = new DOMMatrix(lightCamera.viewMatrix);
+  const low = [Infinity, Infinity, Infinity], high = [-Infinity, -Infinity, -Infinity];
+  for (let i = 0; i < 8; i++) {
+    const point = new DOMPoint(...min.map((v, axis) => (i & (1 << axis)) ? max[axis] : v), 1).matrixTransform(view);
+    [point.x, point.y, point.z].forEach((value, axis) => {
+      low[axis] = Math.min(low[axis], value - 20);
+      high[axis] = Math.max(high[axis], value + 20);
+    });
+  }
+  const span = low.map((v, i) => high[i] - v);
+  const projection = new DOMMatrix([
+    2 / span[0], 0, 0, 0, 0, 2 / span[1], 0, 0, 0, 0, -1 / span[2], 0,
+    -(high[0] + low[0]) / span[0], -(high[1] + low[1]) / span[1], high[2] / span[2], 1,
+  ]);
+  values.set(projection.multiply(view).toFloat32Array());
+  values[16] = 1;
+  device.queue.writeBuffer(sun.buffer, 0, values);
+  if (!sun.pipeline) {
+    sun.meshLayout = device.createBindGroupLayout({
+      entries: [
+        { binding: 0, visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: { type: 'uniform', hasDynamicOffset: true } },
+      ]
+    });
+    // Do not bind the sampled depth texture while it is a render attachment.
+    sun.depthLayout = device.createBindGroupLayout({
+      entries: [
+        { binding: 0, visibility: GPUShaderStage.VERTEX, buffer: { type: 'uniform' } },
+      ]
+    });
+    sun.depthBindGroup = device.createBindGroup({
+      layout: sun.depthLayout, entries: [{ binding: 0, resource: { buffer: sun.buffer } }],
+    });
+    const shader = device.createShaderModule({
+      code: `
+      struct Mesh { world: mat4x4<f32>, padding: array<vec4<f32>, 4>, highlight: vec4<f32> };
+      @group(0) @binding(0) var<uniform> mesh: Mesh;
+      @group(1) @binding(0) var<uniform> matrix: mat4x4<f32>;
+      @vertex fn main(@location(0) position: vec3<f32>) -> @builtin(position) vec4<f32> {
+        return matrix * mesh.world * vec4<f32>(position, 1.0);
+      }
+      @fragment fn fragmentMain(@builtin(position) position: vec4<f32>) {
+        let noise = fract(52.9829189 * fract(dot(floor(position.xy), vec2<f32>(0.06711056, 0.00583715))));
+        if (mesh.highlight.w < 1.0 && noise >= mesh.highlight.w) { discard; }
+      }
+    ` });
+    sun.pipeline = device.createRenderPipeline({
+      layout: device.createPipelineLayout({ bindGroupLayouts: [sun.meshLayout, sun.depthLayout] }),
+      vertex: {
+        module: shader, entryPoint: 'main', buffers: [
+          { arrayStride: 12, attributes: [{ shaderLocation: 0, offset: 0, format: 'float32x3' }] },
+        ]
+      },
+      fragment: { module: shader, entryPoint: 'fragmentMain', targets: [] },
+      primitive: { topology: 'triangle-list', cullMode: 'none' },
+      depthStencil: {
+        format: 'depth32float', depthWriteEnabled: true, depthCompare: 'less',
+        depthBias: 2, depthBiasSlopeScale: 2
+      },
+    });
+  }
+  const pass = encoder.beginRenderPass({
+    colorAttachments: [],
+    depthStencilAttachment: {
+      view: sun.texture.createView(), depthClearValue: 1,
+      depthLoadOp: 'clear', depthStoreOp: 'store'
+    },
+  });
+  pass.setPipeline(sun.pipeline);
+  pass.setBindGroup(1, sun.depthBindGroup);
+  for (const mesh of meshes) {
+    const offset = renderer.uniformSlot++ * 256;
+    renderer.uniformData.set(mesh.worldMatrix, offset / 4);
+    renderer.uniformData[offset / 4 + 35] = mesh._appearance ?? 1;
+    if (mesh._shadowBuffer !== renderer.uniformBuffer) {
+      mesh._shadowBuffer = renderer.uniformBuffer;
+      mesh._shadowBindGroup = device.createBindGroup({
+        layout: sun.meshLayout, entries: [
+          { binding: 0, resource: { buffer: renderer.uniformBuffer, size: 144 } },
+        ]
+      });
+    }
+    for (const attribute of Object.values(mesh.geometry.attributes)) {
+      if (attribute.needsUpdate) {
+        device.queue.writeBuffer(attribute.buffer, 0, attribute.data);
+        attribute.needsUpdate = false;
+      }
+    }
+    pass.setBindGroup(0, mesh._shadowBindGroup, [offset]);
+    pass.setVertexBuffer(0, mesh.geometry.attributes.position.buffer);
+    const index = mesh.geometry.attributes.index, range = mesh.geometry.drawRange;
+    if (index) {
+      pass.setIndexBuffer(index.buffer, index.indexFormat);
+      pass.drawIndexed(range.count, 1, range.start, 0, 0);
+    } else pass.draw(range.count, 1, range.start, 0);
+  }
+  pass.end();
+  sun.cache = {
+    direction: [...sunlight.direction],
+    meshes: new Map(meshes.map(mesh => [mesh, {
+      world: mesh._worldMatrixVersion, geometry: mesh.geometry,
+      start: mesh.geometry.drawRange.start, count: mesh.geometry.drawRange.count,
+      appearance: mesh._appearance ?? 1,
+    }])),
+  };
+}

package/src/utils/renderers.js

@@ -0,0 +1,2 @@
+/** Rendering owner per map; entries are removed on the last layer removal. */
+export const renderers = new WeakMap();

package/src/utils/resizeSunlight.js

@@ -0,0 +1,15 @@
+import { bindSunlight } from './bindSunlight.js';
+import { destroyTexture } from './destroyTexture.js';
+
+
+export function resizeSunlight(backend, size) {
+  const device = backend.renderer.device, sun = backend.renderer.sunlight;
+  if (sun.size === size) return;
+  if (sun.texture) destroyTexture(backend, sun.texture);
+  sun.size = size;
+  sun.texture = device.createTexture({
+    size: [size, size], format: 'depth32float',
+    usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_SRC,
+  });
+  bindSunlight(backend);
+}