leaflet-city-mapper 0.0.3 → 0.0.4

package/src/rendering/ensureRoofBlit.js

@@ -1,40 +1,20 @@
+import { roofShader } from '../globals/roofShader.js';
+import { roofPipeline } from '../globals/roofPipeline.js';
+import { roofBlitSampler } from '../globals/roofBlitSampler.js';
+
 export function ensureRoofBlit(renderer) {
   const device = renderer.device;
   if (!renderer.roofBlit) {
-    const module = device.createShaderModule({
-      code: /* wgsl */ `
-      @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 module = device.createShaderModule(roofShader);
+    renderer.roofBlit = /* alloc */ {
+      pipeline: device.createRenderPipeline((
+      roofPipeline.vertex.module = module,
+      roofPipeline.fragment.module = module,
+      roofPipeline
+    )),
+      sampler: device.createSampler(roofBlitSampler),
     };
+    roofPipeline.vertex.module = null;
+    roofPipeline.fragment.module = null;
   }
 }

package/src/rendering/prepareFrameBuffer.js

@@ -0,0 +1,17 @@
+import { frameBuffer } from '../globals/frameBuffer.js';
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+import { destroyTexture } from './destroyTexture.js';
+
+export function prepareFrameBuffer(backend, meshes, shadowMeshes) {
+  const renderer = sceneByLayer.get(backend).renderer;
+  // 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);
+    renderer.uniformBuffer = renderer.device.createBuffer((
+      frameBuffer.size = Math.max(64, meshes.length * 4 + shadowMeshes.length * 2) * 256,
+      frameBuffer.usage = GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+      frameBuffer
+    ));
+    renderer.uniformData = /* alloc */ new Float32Array(renderer.uniformBuffer.size / 4);
+  }
+}

package/src/rendering/prepareFrameMeshes.js

@@ -1,21 +1,16 @@
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+
+
 import { sortMeshes } from "./sortMeshes.js";
-import { roofCoverage } from "../geometry/roofCoverage.js";
+import { revealRoofMesh } from './revealRoofMesh.js';
 
 export function prepareFrameMeshes(backend, rasters, now, meshes) {
-  const candidates = backend._visibleMeshes, shadowMeshes = backend._shadowMeshes, renderer = backend.renderer;
+  const candidates = sceneByLayer.get(backend)._visibleMeshes, shadowMeshes = sceneByLayer.get(backend)._shadowMeshes, renderer = sceneByLayer.get(backend).renderer;
   let appearing = false;
   // Visible meshes: opaque first, transparent surfaces back-to-front.
   let mesh, progress;
   for (mesh of candidates) {
-    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; continue; }
-      mesh._roofRevealed = true;
-    }
+    if (!revealRoofMesh(backend, mesh, rasters)) continue;
     if (mesh.fadeDuration) {
       mesh.fadeStart ??= mesh.tile?.loadedAt ?? now;
       progress = Math.min(1, (now - mesh.fadeStart) / mesh.fadeDuration);

package/src/rendering/prepareFrameUniforms.js

@@ -1,8 +1,11 @@
-import { destroyTexture } from './destroyTexture.js';
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+
+
+import { prepareFrameBuffer } from './prepareFrameBuffer.js';
 import { updatePointLights } from '../lighting/updatePointLights.js';
 
 export function prepareFrameUniforms(backend, meshes, shadowMeshes, sunlight) {
-  const renderer = backend.renderer, camera = backend.camera;
+  const renderer = sceneByLayer.get(backend).renderer, camera = sceneByLayer.get(backend).camera;
   const view = camera.viewMatrix, direction = sunlight?.direction;
   const x = direction ? direction[0] : -300;
   const y = direction ? direction[1] : 500;
@@ -13,19 +16,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.
-  // 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);
-    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);
-  }
+  prepareFrameBuffer(backend, meshes, shadowMeshes);
   const frameData = renderer.uniformData;
   frameData.set(camera.viewMatrix, 0);
   frameData.set(camera.projectionMatrix, 16);
-  if (backend._roofRaster?.matrix) frameData.set(backend._roofRaster.matrix, 32);
+  if (sceneByLayer.get(backend)._roofRaster?.matrix) frameData.set(sceneByLayer.get(backend)._roofRaster.matrix, 32);
   else {
     frameData.fill(0, 32, 48);
     frameData[32] = frameData[37] = frameData[42] = frameData[47] = 1;

package/src/rendering/prepareMeshCutout.js

@@ -0,0 +1,12 @@
+export function prepareMeshCutout(renderer, mesh, base) {
+  const data = renderer.uniformData;
+  const cutout = (mesh._nativeSource || mesh._rasterSource)?.options.cutout;
+  if (cutout && (!Number.isFinite(cutout.x) || !Number.isFinite(cutout.y) ||
+      !Number.isFinite(cutout.radius) || cutout.radius < 0)) {
+    throw /* alloc */ new Error('cutout requires finite x, y and a non-negative radius in CSS pixels');
+  }
+  data[base + 36] = (cutout?.x ?? 0) * renderer.dpr;
+  data[base + 37] = (cutout?.y ?? 0) * renderer.dpr;
+  data[base + 38] = (cutout?.radius ?? 0) * renderer.dpr;
+  data[base + 39] = cutout?.outside ? 1 : 0;
+}

package/src/rendering/prepareMeshTextures.js

@@ -0,0 +1,23 @@
+import { uploadMeshTexture } from './uploadMeshTexture.js';
+import { bindMeshTextures } from './bindMeshTextures.js';
+
+export function prepareMeshTextures(renderer, mesh) {
+  const { program } = mesh;
+  const { device } = renderer;
+  const textures = mesh._textures ||= /* alloc */ [];
+  textures.length = 0;
+  let binding, texture, i;
+  for (binding of program.bindings) {
+    texture = program.uniforms[binding.name]?.value;
+    if (!texture) throw /* alloc */ new Error(`Missing Layer3D texture: ${binding.name}`);
+    uploadMeshTexture(device, texture);
+    textures.push(texture);
+  }
+  let bindingsChanged = !mesh.bindGroup || mesh.boundBuffer !== renderer.uniformBuffer ||
+    textures.length !== mesh.boundTextures.length;
+  for (i = 0; !bindingsChanged && i < textures.length; i++) {
+    if (textures[i].texture !== mesh.boundTextures[i][0] ||
+      textures[i].sampler !== mesh.boundTextures[i][1]) bindingsChanged = true;
+  }
+  if (bindingsChanged) bindMeshTextures(renderer, mesh, textures);
+}

package/src/rendering/prepareMeshUniforms.js

@@ -0,0 +1,25 @@
+export function prepareMeshUniforms(renderer, mesh) {
+  const uniforms = mesh.program.uniforms;
+  const offset = renderer.uniformSlot++ * 256;
+  const data = renderer.uniformData, base = offset / 4;
+  data.set(mesh.worldMatrix, base);
+  data.set(uniforms.baseColor.value, base + 16);
+  data[base + 19] = 1;
+  data[base + 20] = uniforms.metallic.value;
+  data[base + 21] = uniforms.roughness.value;
+  data[base + 22] = uniforms.opacity.value * (mesh.ground ? mesh._appearance ?? 1 : 1);
+  data[base + 23] = uniforms.alphaCutoff.value;
+  data.set(uniforms.emissive.value, base + 24);
+  data[base + 27] = uniforms.occlusionStrength.value;
+  data[base + 28] = mesh.terrain?.[0] ?? 0;
+  data[base + 29] = mesh.terrain?.[1] ?? 0;
+  data[base + 30] = mesh.terrain?.[2] ?? 0;
+  data[base + 31] = mesh.terrain?.[3] ?? 0;
+  data[base + 32] = mesh.highlight?.[0] ?? 0;
+  data[base + 33] = mesh.highlight?.[1] ?? 0;
+  data[base + 34] = mesh.program.nightSparkle ? data[55] : 0;
+  data[base + 35] = mesh.ground ? 1 : mesh._appearance ?? 1;
+  prepareMeshCutout(renderer, mesh, base);
+  return offset;
+}
+import { prepareMeshCutout } from './prepareMeshCutout.js';

package/src/rendering/rebuildRoofAtlas.js

@@ -1,67 +1,52 @@
+import { radians } from '../globals/radians.js';
+import { earthCirc } from '../globals/earthCirc.js';
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+import { roofTiles } from '../globals/roofTiles.js';
+import { TILE_SIZE } from '../globals/TILE_SIZE.js';
+import { roofMin } from '../globals/roofMin.js';
+import { roofSize } from '../globals/roofSize.js';
+
+
 import { ensureRoofBlit } from './ensureRoofBlit.js';
 import { composeRoofAtlas } from './composeRoofAtlas.js';
-import { destroyTexture } from './destroyTexture.js';
-import { getRasterTileSize } from '../raster/getRasterTileSize.js';
+import { collectRoofTiles } from './collectRoofTiles.js';
+import { resizeRoofTexture } from './resizeRoofTexture.js';
 
 export function rebuildRoofAtlas(backend, rasters, signature, now) {
-  const map = backend._map, renderer = backend.renderer;
-  const tiles = [];
-  let zoom = -Infinity;
-  let layer, tile, coords, size2;
-  for (layer of rasters) for (tile of layer._rasterTiles.values()) {
-    if (tile.done && !tile.request.signal.aborted && tile.image) {
-      tiles.push({ tile, layer });
-      zoom = Math.max(zoom, tile.coords.z);
-    }
-  }
+  const map = backend._map, renderer = sceneByLayer.get(backend).renderer;
+  const tiles = roofTiles;
+  tiles.length = 0;
+  let zoom = collectRoofTiles(rasters, tiles);
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  let coords, tileSize;
   if (!tiles.length) zoom = map.getZoom();
-  const bounds = new L.Bounds();
-  for ({ tile: { coords }, layer } of tiles) {
-    size2 = getRasterTileSize().multiplyBy(map.getZoomScale(zoom, coords.z));
-    bounds.extend(new L.Point(coords.x, coords.y).scaleBy(size2));
-    bounds.extend(new L.Point(coords.x + 1, coords.y + 1).scaleBy(size2));
+  for ({ tile: { coords } } of tiles) {
+    tileSize = TILE_SIZE * map.getZoomScale(zoom, coords.z);
+    minX = Math.min(minX, coords.x * tileSize); minY = Math.min(minY, coords.y * tileSize);
+    maxX = Math.max(maxX, (coords.x + 1) * tileSize); maxY = Math.max(maxY, (coords.y + 1) * tileSize);
   }
-  const min = bounds.min || map.project(backend._sceneOrigin, zoom);
-  const size = bounds.isValid() ? bounds.getSize() : new L.Point(1, 1);
+  const origin = map.project(sceneByLayer.get(backend)._sceneOrigin, zoom);
+  const min = roofMin, size = roofSize;
+  min.x = tiles.length ? minX : origin.x; min.y = tiles.length ? minY : origin.y;
+  size.x = tiles.length ? maxX - minX : 1; size.y = tiles.length ? maxY - minY : 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,
-    },
+  const scale = Math.min(1, 4096 / Math.max(size.x, size.y));
+  const width = Math.max(1, Math.ceil(size.x * scale)), height = Math.max(1, Math.ceil(size.y * scale));
+  const pixels = map.options.crs.scale(zoom) / (earthCirc * Math.cos(sceneByLayer.get(backend)._sceneOrigin.lat * radians));
+  const roof = /* alloc */ {
+    matrix: /* alloc */ [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
+    texture: sceneByLayer.get(backend)._roofRaster?.texture,
   };
+  sceneByLayer.get(backend)._roofRaster = roof;
+  roof.signature = signature; roof.updatedAt = now;
+  roof.matrix[0] = pixels / size.x; roof.matrix[10] = pixels / size.y;
+  roof.matrix[12] = (origin.x - min.x) / size.x; roof.matrix[14] = (origin.y - min.y) / size.y;
+  resizeRoofTexture(backend, roof, width, height);
   // Compose the atlas on the GPU: re-uploading a large canvas stalls Firefox for hundreds of ms.
   ensureRoofBlit(renderer);
-  composeRoofAtlas(backend, tiles, zoom, min, size, width, height);
+  try {
+    composeRoofAtlas(backend, tiles, zoom, min, size, width, height);
+  } finally {
+    tiles.length = 0;
+  }
 }

package/src/rendering/render.js

@@ -1,3 +1,9 @@
+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 { synchronizeZoomView } from './synchronizeZoomView.js';
 import { resizeRenderer } from './resizeRenderer.js';
 import { updateMapCamera } from './updateMapCamera.js';
@@ -11,6 +17,7 @@ import { renderSunlight } from '../shadows/renderSunlight.js';
 import { cancelUpdate } from '../scene/cancelUpdate.js';
 import { update } from '../scene/update.js';
 import { pruneRasterTiles } from '../raster/pruneRasterTiles.js';
+import { beforeNativeRender } from '../core/beforeNativeRender.js';
 
 /**
  * Rendering owner: CSS pixels -> scene metres -> perspective camera.
@@ -20,7 +27,7 @@ import { pruneRasterTiles } from '../raster/pruneRasterTiles.js';
 
 export function render(backend) {
   cancelUpdate(backend);
-  if (backend._shared !== backend || !backend.renderer) return;
+  if (sceneByLayer.get(backend)._shared !== backend || !sceneByLayer.get(backend).renderer) return;
   const map = backend._map;
   const now = performance.now();
   const size = map.getSize();
@@ -28,20 +35,21 @@ export function render(backend) {
   synchronizeZoomView(backend, now);
   resizeRenderer(backend, size);
   updateMapCamera(backend, size);
-  updateWorldMatrix(backend.scene);
+  updateWorldMatrix(sceneByLayer.get(backend).scene);
   let sceneChanged = false;
-  let layer;
-  for (layer of backend._layers) {
-    if (!layer._beforeRender) continue;
-    layer._beforeRender();
+  let layer, native;
+  for (layer of sceneByLayer.get(backend)._layers) {
+    native = nativeRenderByLayer.get(layer);
+    if (!native) continue;
+    beforeNativeRender(native);
     sceneChanged = true;
   }
-  const sunlight = map._sunlight;
+  const sunlight = cameraByMap.get(map)._sunlight;
   collectFrameMeshes(backend, sunlight, sceneChanged);
-  const shadowMeshes = backend._shadowMeshes;
-  const renderer = backend.renderer;
+  const shadowMeshes = sceneByLayer.get(backend)._shadowMeshes;
+  const renderer = sceneByLayer.get(backend).renderer;
   const rasters = updateRoofRaster(backend, now);
-  const meshes = renderer.frameMeshes ||= [];
+  const meshes = renderer.frameMeshes ||= /* alloc */ [];
   meshes.length = 0;
   let appearing = prepareFrameMeshes(backend, rasters, now, meshes);
   const encoder = renderer.device.createCommandEncoder();
@@ -49,9 +57,13 @@ export function render(backend) {
   renderSunlight(backend, encoder, shadowMeshes, sunlight);
   drawSceneMeshes(backend, encoder, meshes);
   renderer.device.queue.writeBuffer(renderer.uniformBuffer, 0, renderer.uniformData, 0, renderer.uniformSlot * 64);
-  renderer.device.queue.submit([encoder.finish()]);
-  for (layer of backend._layers) {
-    if (layer._wantedRasterTiles) appearing = pruneRasterTiles(layer) || appearing;
+  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;
   }
   if (map._animatingZoom || appearing) update(backend);
 }

package/src/rendering/reportCompilation.js

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

package/src/rendering/resizeRenderer.js

@@ -1,19 +1,24 @@
+import { depthTexture as sharedDepthTexture } from '../globals/depthTexture.js';
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+
+
 import { destroyTexture } from './destroyTexture.js';
 
 export function resizeRenderer(backend, size) {
-  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;
+  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,
+      sharedDepthTexture.usage = GPUTextureUsage.RENDER_ATTACHMENT,
+      sharedDepthTexture
+    ));
+    sceneByLayer.get(backend)._size = size;
   }
 }

package/src/rendering/resizeRoofTexture.js

@@ -0,0 +1,24 @@
+import { roofTexture } from '../globals/roofTexture.js';
+import { roofSampler } from '../globals/roofSampler.js';
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+import { destroyTexture } from './destroyTexture.js';
+
+export function resizeRoofTexture(backend, roof, width, height) {
+  const renderer = sceneByLayer.get(backend).renderer;
+  const descriptor = roofTexture;
+  descriptor.size[0] = width; descriptor.size[1] = height;
+  descriptor.usage = GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT;
+  if (roof.texture && (roof.texture.width !== width || roof.texture.height !== height)) {
+    destroyTexture(backend, roof.texture.texture);
+    roof.texture.texture = renderer.device.createTexture(descriptor);
+    roof.texture.width = width; roof.texture.height = height;
+  }
+  roof.texture ||= /* alloc */ {
+    device: renderer.device,
+    texture: renderer.device.createTexture(descriptor),
+    sampler: renderer.device.createSampler(roofSampler),
+    samplerOptions: /* alloc */ { addressModeU: 'clamp-to-edge', addressModeV: 'clamp-to-edge' },
+    image: null, width, height,
+    format: 'rgba8unorm', srgb: false, flipY: false, uploaded: null,
+  };
+}

package/src/rendering/revealRoofMesh.js

@@ -0,0 +1,15 @@
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+import { roofCoverage } from '../geometry/roofCoverage.js';
+
+export function revealRoofMesh(backend, mesh, rasters) {
+  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 (!mesh._roofCovered) { mesh._appearance = 0; return false; }
+    mesh._roofRevealed = true;
+  }
+  return true;
+}

package/src/rendering/synchronizeZoomView.js

@@ -1,34 +1,26 @@
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+import { meshStack } from '../globals/meshStack.js';
+import { updateZoomCamera } from './updateZoomCamera.js';
+
 export function synchronizeZoomView(backend, now) {
   const map = backend._map;
   let animation, time, start;
   if (map._animatingZoom) {
-    backend._zoomTransitions ||= new Map();
-    for (animation of map.getContainer().getAnimations({ subtree: true })) {
+    sceneByLayer.get(backend)._zoomTransitions ||= /* alloc */ new Map();
+    for (animation of map.getContainer().getAnimations(meshStack)) {
       if (!(animation instanceof CSSTransition) || animation.transitionProperty !== 'transform' ||
         !animation.effect.target.classList.contains('leaflet-zoom-animated') ||
-        backend._zoomTransitions.has(animation)) {
+        sceneByLayer.get(backend)._zoomTransitions.has(animation)) {
         continue;
       }
       time = animation.currentTime || 0;
       animation.pause();
-      backend._zoomTransitions.set(animation, { start: now, time });
+      sceneByLayer.get(backend)._zoomTransitions.set(animation, /* alloc */ { start: now, time });
     }
     // Freeze CSS between rendered frames: the compositor must not outrun the canvas.
-    for ([animation, { start, time }] of backend._zoomTransitions) {
+    for ([animation, { start, time }] of sceneByLayer.get(backend)._zoomTransitions) {
       animation.currentTime = Math.min(animation.effect.getComputedTiming().endTime, time + now - start);
     }
-    if (backend._zoomView) {
-      const view = backend._zoomView;
-      let proxy;
-      for (animation of backend._zoomTransitions.keys()) {
-        if (animation.effect.target === map._proxy) { proxy = animation; break; }
-      }
-      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 (sceneByLayer.get(backend)._zoomView) updateZoomCamera(backend, now);
   }
 }

package/src/rendering/textureBinding.js

@@ -1,7 +1,7 @@
-export function textureBinding(bindings, name, enabled) {
-  if (!enabled) return '';
-  const current = 3 + bindings.length * 2;
-  bindings.push({ name, texture: current, sampler: current + 1 });
-  return /* wgsl */ `@group(0) @binding(${current}) var ${name}: texture_2d<f32>;
-      @group(0) @binding(${current + 1}) var ${name}Sampler: sampler;`;
-}
+export function textureBinding(bindings, name, enabled) {
+  if (!enabled) return '';
+  const current = 3 + bindings.length * 2;
+  bindings.push(/* alloc */ { name, texture: current, sampler: current + 1 });
+  return /* wgsl */ `@group(0) @binding(${current}) var ${name}: texture_2d<f32>;
+      @group(0) @binding(${current + 1}) var ${name}Sampler: sampler;`;
+}

package/src/rendering/updateMapCamera.js

@@ -1,32 +1,46 @@
+import { radians } from '../globals/radians.js';
+import { cameraFov } from '../globals/cameraFov.js';
+import { earthCirc } from '../globals/earthCirc.js';
+import { cameraByMap } from '../globals/cameraByMap.js';
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+import { mapMethods } from '../globals/mapMethods.js';
+import { walkByMap } from '../globals/walkByMap.js';
+import { mapGetPitch } from '../camera/mapGetPitch.js';
+import { mapGetBearing } from '../camera/mapGetBearing.js';
+
 import { updateCamera } from "../scene/updateCamera.js";
 import { getElevation } from "../terrain/getElevation.js";
 
+import { animationPoint } from '../camera/animationPoint.js';
+
 export function updateMapCamera(backend, size) {
   const map = backend._map;
   // 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 zoom = cameraByMap.get(map)._cameraView?.zoom ?? map.getZoom();
+  const pixelsPerMeter = map.options.crs.scale(zoom) / (earthCirc * Math.cos(sceneByLayer.get(backend)._sceneOrigin.lat * radians));
+  const origin = animationPoint(map, mapMethods.value.layerPointToContainerPoint.call(map,
+    map.project(sceneByLayer.get(backend)._sceneOrigin).subtract(map.getPixelOrigin())));
   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;
+  const targetX = (size.x / 2 - origin.x) / pixelsPerMeter;
+  // CSS zoom keeps the logical view's ground plane until zoomend.
+  const walker = walkByMap.get(map)?.control?._walk;
+  const targetY = ((cameraByMap.get(map)._terrain3D ? getElevation(cameraByMap.get(map)._terrain3D, map.getCenter()): undefined) ?? 0) +
+    (walker?.saved ? walker.state.height : 0);
+  const targetZ = (size.y / 2 - origin.y) / pixelsPerMeter;
+  const pitch = mapGetPitch(map) * radians;
+  const bearing = mapGetBearing(map) * radians;
+  const camera = sceneByLayer.get(backend).camera;
+  camera.fov = cameraFov;
   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.position[0] = targetX + Math.sin(bearing) * Math.sin(pitch) * distance;
+  camera.position[1] = targetY + Math.cos(pitch) * distance;
+  camera.position[2] = targetZ + 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];
+  camera.target[0] = targetX; camera.target[1] = targetY; camera.target[2] = targetZ;
   // Refresh the camera view, projection and combined projection-view matrices.
   updateCamera(camera);
 }