leaflet-city-mapper 0.0.0-stage → 0.0.2

package/src/utils/releaseArea.js

@@ -0,0 +1,34 @@
+import { setHighlight } from './setHighlight.js';
+import { showFeature } from './showFeature.js';
+import { setParent } from './setParent.js';
+import { update } from './update.js';
+
+/** Cancel pending work and dispose this block's GPU data, including any hover highlight. */
+
+export function releaseArea(backend, area) {
+  area.request.abort();
+  if (area.mesh) {
+    if (backend.highlightedFeature?.mesh === area.mesh) {
+      setHighlight(backend, null);
+      backend.hoveredFeature = null;
+      showFeature(backend, null);
+    }
+    setParent(area.mesh, null);
+    update(backend);
+    const geometry = area.mesh.geometry;
+    for (const attribute of Object.values(geometry.attributes)) attribute.buffer.destroy();
+    area.mesh.program.pipelineCache.clear();
+  }
+}
+/** Emit a snapshot for consumers; ready does not wait for all neighborhood tasks. */
+
+export function updateStatus(backend, enabled = true) {
+  const progress = { enabled, loaded: 0, skipped: 0, pending: 0, errors: [] };
+  for (const area of backend._areas.values()) {
+    if (area.error) progress.errors.push(area.error);
+    else if (!area.done) progress.pending++;
+    progress.loaded += area.buildings ?? 0;
+    progress.skipped += area.skipped ?? 0;
+  }
+  backend.fire('progress', progress);
+}

package/src/utils/removeRasterTile.js

@@ -0,0 +1,13 @@
+import { destroyTexture } from './destroyTexture.js';
+import { setParent } from './setParent.js';
+import { update } from './update.js';
+
+export function removeRasterTile(layer, tile) {
+  layer._terrainRequest?.abort();
+  const mesh = layer._rasterTiles.get(tile);
+  if (!mesh) return;
+  setParent(mesh, null);
+  update(layer);
+  if (mesh.texture !== tile.texture) destroyTexture(layer, mesh.texture.texture);
+  layer._rasterTiles.delete(tile);
+}

package/src/utils/render.js

@@ -0,0 +1,406 @@
+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();
+    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;
+      }
+      const time = animation.currentTime || 0;
+      animation.pause();
+      backend._zoomTransitions.set(animation, { start: now, time });
+    }
+    // Freeze CSS between rendered frames: the compositor must not outrun the canvas.
+    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.canvas.style.height = `${size.y}px`;
+    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;
+  }
+
+  // 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 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;
+  const camera = backend.camera;
+  camera.fov = 2 * Math.atan(1 / 3) * 180 / Math.PI;
+  camera.aspect = size.x / size.y;
+  camera.near = Math.max(0.1, distance / 10000);
+  camera.far = Math.max(10000, distance * 10);
+  camera.position[0] = target[0] + Math.sin(bearing) * Math.sin(pitch) * distance;
+  camera.position[1] = target[1] + Math.cos(pitch) * distance;
+  camera.position[2] = target[2] + Math.cos(bearing) * Math.sin(pitch) * distance;
+  camera.up[0] = -Math.sin(bearing) * Math.cos(pitch);
+  camera.up[1] = Math.sin(pitch);
+  camera.up[2] = -Math.cos(bearing) * Math.cos(pitch);
+  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;
+  const light = [lightPoint.x / lightLength, lightPoint.y / lightLength, lightPoint.z / lightLength];
+  const skyPoint = new DOMPoint(0, 1, 0, 0).matrixTransform(new DOMMatrix(camera.viewMatrix));
+  const skyLength = Math.hypot(skyPoint.x, skyPoint.y, skyPoint.z) || 1;
+  const sky = [skyPoint.x / skyLength, skyPoint.y / skyLength, skyPoint.z / skyLength];
+  const projection = camera.projectionViewMatrix;
+  const frustum = [
+    [projection[3] + projection[0], projection[7] + projection[4], projection[11] + projection[8], projection[15] + projection[12]],
+    [projection[3] - projection[0], projection[7] - projection[4], projection[11] - projection[8], projection[15] - projection[12]],
+    [projection[3] + projection[1], projection[7] + projection[5], projection[11] + projection[9], projection[15] + projection[13]],
+    [projection[3] - projection[1], projection[7] - projection[5], projection[11] - projection[9], projection[15] - projection[13]],
+    [projection[2], projection[6], projection[10], projection[14]],
+    [projection[3] - projection[2], projection[7] - projection[6], projection[11] - projection[10], projection[15] - projection[14]],
+  ];
+  const frustumLengths = [
+    Math.hypot(frustum[0][0], frustum[0][1], frustum[0][2]),
+    Math.hypot(frustum[1][0], frustum[1][1], frustum[1][2]),
+    Math.hypot(frustum[2][0], frustum[2][1], frustum[2][2]),
+    Math.hypot(frustum[3][0], frustum[3][1], frustum[3][2]),
+    Math.hypot(frustum[4][0], frustum[4][1], frustum[4][2]),
+    Math.hypot(frustum[5][0], frustum[5][1], frustum[5][2]),
+  ];
+  updateWorldMatrix(backend.scene);
+  traverse(backend.scene, mesh => {
+    if (!mesh.visible) return true;
+    if (mesh.geometry) {
+      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];
+      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] &&
+        frustum[2][0] * x + frustum[2][1] * y + frustum[2][2] * z + frustum[2][3] >= -radius * frustumLengths[2] &&
+        frustum[3][0] * x + frustum[3][1] * y + frustum[3][2] * z + frustum[3][3] >= -radius * frustumLengths[3] &&
+        frustum[4][0] * x + frustum[4][1] * y + frustum[4][2] * z + frustum[4][3] >= -radius * frustumLengths[4] &&
+        frustum[5][0] * x + frustum[5][1] * y + frustum[5][2] * z + frustum[5][3] >= -radius * frustumLengths[5];
+      if (!mesh._visibleInFrame) return;
+    }
+  });
+  const renderer = backend.renderer;
+  let rasters = [];
+  if ([...backend._layers].some(layer => layer.options.roofTexture)) {
+    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 { 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 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();
+      matrix.m11 = pixels / size.x; matrix.m33 = pixels / size.y;
+      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)) {
+        destroyTexture(backend, texture.texture);
+        texture.texture = renderer.device.createTexture({
+          size: [width, height],
+          format: 'rgba8unorm',
+          usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
+        });
+        texture.width = width;
+        texture.height = height;
+      }
+      backend._roofRaster = {
+        signature, updatedAt: now, matrix: Array.from(matrix.toFloat64Array()),
+        texture: texture || {
+          device: renderer.device,
+          texture: renderer.device.createTexture({
+            size: [width, height],
+            format: 'rgba8unorm',
+            usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
+          }),
+          sampler: renderer.device.createSampler({
+            addressModeU: 'clamp-to-edge', addressModeV: 'clamp-to-edge',
+          }),
+          samplerOptions: { addressModeU: 'clamp-to-edge', addressModeV: 'clamp-to-edge' },
+          image: null, width, height,
+          format: 'rgba8unorm', srgb: false, flipY: false, uploaded: null,
+        },
+      };
+      // 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: `
+          @group(0) @binding(0) var source: texture_2d<f32>;
+          @group(0) @binding(1) var sourceSampler: sampler;
+          @group(0) @binding(2) var<uniform> opacity: f32;
+          struct Varyings { @builtin(position) position: vec4f, @location(0) uv: vec2f };
+          @vertex fn vertexMain(@builtin(vertex_index) index: u32) -> Varyings {
+            let uv = vec2f(f32(index & 1u), f32(index >> 1u));
+            return Varyings(vec4f(uv.x * 2.0 - 1.0, 1.0 - uv.y * 2.0, 0.0, 1.0), uv);
+          }
+          @fragment fn fragmentMain(input: Varyings) -> @location(0) vec4f {
+            let color = textureSample(source, sourceSampler, input.uv);
+            return vec4f(color.rgb, color.a * opacity);
+          }
+        `
+        });
+        renderer.roofBlit = {
+          pipeline: device.createRenderPipeline({
+            layout: 'auto',
+            vertex: { module, entryPoint: 'vertexMain' },
+            fragment: {
+              module,
+              entryPoint: 'fragmentMain',
+              targets: [{
+                format: 'rgba8unorm',
+                blend: {
+                  color: { srcFactor: 'src-alpha', dstFactor: 'one-minus-src-alpha', operation: 'add' },
+                  alpha: { srcFactor: 'one', dstFactor: 'one-minus-src-alpha', operation: 'add' },
+                },
+              }],
+            },
+            primitive: { topology: 'triangle-strip' },
+          }),
+          sampler: device.createSampler({ magFilter: 'linear', minFilter: 'linear' }),
+        };
+      }
+      const opacities = new Float32Array(Math.max(1, tiles.length) * 64);
+      const opacityBuffer = device.createBuffer({
+        size: opacities.byteLength,
+        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+      });
+      const encoder = device.createCommandEncoder();
+      const atlasPass = encoder.beginRenderPass({
+        colorAttachments: [{
+          view: backend._roofRaster.texture.texture.createView(),
+          clearValue: { r: 0, g: 0, b: 0, a: 0 },
+          loadOp: 'clear',
+          storeOp: 'store',
+        }],
+      });
+      atlasPass.setPipeline(renderer.roofBlit.pipeline);
+      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: image }, { texture: source.texture },
+            [source.texture.width, source.texture.height]);
+          source.uploaded = source.image;
+        }
+        opacities[i * 64] = layer.options.opacity;
+        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),
+          Math.min(tileSize.y * height / size.y, height - y), 0, 1);
+        atlasPass.setBindGroup(0, device.createBindGroup({
+          layout: renderer.roofBlit.pipeline.getBindGroupLayout(0),
+          entries: [
+            { binding: 0, resource: source.texture.createView() },
+            { binding: 1, resource: renderer.roofBlit.sampler },
+            { binding: 2, resource: { buffer: opacityBuffer, offset: i * 256, size: 4 } },
+          ],
+        }));
+        atlasPass.draw(4);
+      }
+      atlasPass.end();
+      device.queue.writeBuffer(opacityBuffer, 0, opacities);
+      device.queue.submit([encoder.finish()]);
+      opacityBuffer.destroy();
+    }
+  } else if (backend._roofRaster) {
+    destroyTexture(backend, backend._roofRaster.texture.texture);
+    backend._roofRaster = 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) 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();
+  // 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._type === 'terrain') continue;
+      traverse(layer.root, mesh => {
+        if (!mesh.visible) return true;
+        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) 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,
+    });
+    renderer.uniformData = new Float32Array(renderer.uniformBuffer.size / 4);
+  }
+  const frameData = renderer.uniformData;
+  frameData.set(camera.viewMatrix, 0);
+  frameData.set(camera.projectionMatrix, 16);
+  frameData.set(backend._roofRaster?.matrix || [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1], 32);
+  frameData.set(light, 48);
+  frameData[51] = sunlight && sunlight.altitude <= 0 ? 0 : 1;
+  frameData.set(sky, 52);
+  const night = sunlight ? Math.max(0, Math.min(1, (3 - sunlight.altitude) / 9)) : 0;
+  frameData[55] = night * night * (3 - 2 * night);
+  frameData.set(sunlight?.tint || [1, 1, 1], 56);
+  frameData[59] = 0;
+  if (night > 0) updatePointLights(backend);
+  renderer.uniformSlot = 1;
+  renderSunlight(backend, encoder, shadowMeshes, sunlight);
+  const pass = encoder.beginRenderPass({
+    colorAttachments: [{
+      view: renderer.context.getCurrentTexture().createView(),
+      clearValue: { r: 0, g: 0, b: 0, a: 0 },
+      loadOp: 'clear',
+      storeOp: 'store',
+    }],
+    depthStencilAttachment: {
+      view: renderer.depthTexture.createView(),
+      depthClearValue: 1,
+      depthLoadOp: 'clear',
+      depthStoreOp: 'store',
+    },
+  });
+  pass.setViewport(0, 0, renderer.canvas.width, renderer.canvas.height, 0, 1);
+  pass.setBindGroup(1, renderer.sunlight.bindGroup);
+  for (const mesh of meshes) {
+    const world = mesh.worldMatrix;
+    if (mesh.texture) {
+      mesh.program.uniforms.baseTexture.value = mesh.texture;
+      mesh.program.uniforms.opacity.value = mesh.opacity;
+    }
+    const uniforms = mesh.program.uniforms;
+    if (uniforms.roofTexture) uniforms.roofTexture.value = backend._roofRaster?.texture || renderer.roofFallbackTexture;
+    const determinant = world[0] * (world[5] * world[10] - world[6] * world[9]) -
+      world[4] * (world[1] * world[10] - world[2] * world[9]) +
+      world[8] * (world[1] * world[6] - world[2] * world[5]);
+    if (!Number.isFinite(determinant) || determinant === 0) {
+      throw new Error('Singular 3D transform');
+    }
+    const frontFace = determinant < 0 ? 'cw' : 'ccw';
+    const program = mesh.program;
+    if (program.transparent && program._layerMaterial.doubleSided && !mesh._nativeSource) {
+      drawGeometry(backend, mesh, pass, 'front', frontFace);
+      drawGeometry(backend, mesh, pass, 'back', frontFace);
+    } else {
+      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()]);
+  for (const layer of backend._layers) {
+    if (layer._wantedRasterTiles) appearing = pruneRasterTiles(layer) || appearing;
+  }
+  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);
+}