leaflet-city-mapper 0.0.2 → 0.0.3

package/src/rendering/collectFrameMeshes.js

@@ -0,0 +1,31 @@
+import { updateWorldMatrix } from "../scene/updateWorldMatrix.js";
+import { collectMeshes } from './collectMeshes.js';
+
+export function collectFrameMeshes(backend, sunlight, sceneChanged) {
+  const camera = backend.camera;
+  const projection = camera.projectionViewMatrix;
+  const renderer = backend.renderer;
+  const frustum = renderer.frustum ||= [
+    new Float64Array(4), new Float64Array(4), new Float64Array(4),
+    new Float64Array(4), new Float64Array(4), new Float64Array(4),
+  ];
+  const frustumLengths = renderer.frustumLengths ||= new Float64Array(6);
+  let i, axis, plane, j, offset;
+  for (i = 0; i < 6; i++) {
+    axis = Math.floor(i / 2);
+    plane = frustum[i];
+    for (j = 0; j < 4; j++) {
+      offset = j * 4;
+      plane[j] = i === 4 ? projection[offset + 2]
+        : i % 2 ? projection[offset + 3] - projection[offset + axis]
+        : projection[offset + 3] + projection[offset + axis];
+    }
+    frustumLengths[i] = Math.hypot(plane[0], plane[1], plane[2]);
+  }
+  const candidates = backend._visibleMeshes ||= [];
+  candidates.length = 0;
+  const shadowMeshes = backend._shadowMeshes ||= [];
+  shadowMeshes.length = 0;
+  if (sceneChanged) updateWorldMatrix(backend.scene);
+  collectMeshes(backend.scene, sunlight, projection, frustum, frustumLengths, candidates, shadowMeshes);
+}

package/src/rendering/collectMeshes.js

@@ -0,0 +1,36 @@
+import { computeBounds } from '../geometry/computeBounds.js';
+
+export function collectMeshes(mesh, sunlight, projection, frustum, frustumLengths, candidates, shadowMeshes) {
+  if (!mesh.visible) return;
+  if (mesh.geometry) {
+    if (sunlight?.altitude >= 3 && !mesh.tile && mesh._appearance !== 0 &&
+      !mesh.program.nightLight && mesh.program.depthTest !== false) shadowMeshes.push(mesh);
+    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) candidates.push(mesh);
+  }
+  let child;
+  for (child of mesh.children) {
+    collectMeshes(child, sunlight, projection, frustum, frustumLengths, candidates, shadowMeshes);
+  }
+}

package/src/rendering/compareMeshes.js

@@ -0,0 +1,10 @@
+export function compareMeshes(a, b) {
+  return Number(Boolean(b.ground)) - Number(Boolean(a.ground)) ||
+    (a.ground && b.ground ? (a.renderOrder || 0) - (b.renderOrder || 0) ||
+      a.tile.coords.z - b.tile.coords.z : 0) ||
+    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._sortDepth ?? 0) - (b._sortDepth ?? 0) || a.id - b.id);
+}

package/src/rendering/compareRoofTiles.js

@@ -0,0 +1,4 @@
+export function compareRoofTiles(a, b) {
+  return (a.layer.options.zIndex || 0) - (b.layer.options.zIndex || 0) ||
+    a.tile.coords.z - b.tile.coords.z;
+}

package/src/rendering/composeRoofAtlas.js

@@ -0,0 +1,52 @@
+import { getRasterTileSize } from '../raster/getRasterTileSize.js';
+import { compareRoofTiles } from './compareRoofTiles.js';
+
+export function composeRoofAtlas(backend, tiles, zoom, min, size, width, height) {
+  const renderer = backend.renderer, device = renderer.device, map = backend._map;
+  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(compareRoofTiles);
+  let i, tile, layer, coords, image, source, tileSize, offset, x, y;
+  for ([i, { tile, layer }] of tiles.entries()) {
+    ({ coords, image } = tile);
+    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;
+    tileSize = getRasterTileSize().multiplyBy(map.getZoomScale(zoom, coords.z));
+    offset = new L.Point(coords.x, coords.y).scaleBy(tileSize).subtract(min);
+    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();
+}

package/src/rendering/createMesh.js

@@ -0,0 +1,33 @@
+import { cityMapper } from '../constants/cityMapper.js';
+import { emptyNode } from '../scene/emptyNode.js';
+import { createProgram } from './createProgram.js';
+import { setParent } from '../scene/setParent.js';
+import { update } from '../scene/update.js';
+
+/**
+ * Add a non-indexed, vertex-coloured mesh from flat vec3 arrays `{ position, normal, color }` in layer-local metres.
+ * `usage` adds GPUBufferUsage flags to the vertex buffers (e.g. STORAGE for compute passes).
+ * A supplied `program` shares compiled shaders and pipelines across compatible meshes.
+ */
+
+export function createMesh(backend, data, material = {}, usage = 0, program) {
+  const { device } = backend.renderer, attributes = {};
+  let name, values, array, size, buffer;
+  for ([name, values] of Object.entries(data)) {
+    array = new Float32Array(values);
+    size = name === 'uv' ? 2 : 3;
+    buffer = device.createBuffer({ size: Math.max(4, array.byteLength), usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST | usage });
+    device.queue.writeBuffer(buffer, 0, array);
+    attributes[name] = { size, data: array, count: array.length / size, buffer };
+  }
+  const mesh = {
+    ...emptyNode(),
+    device,
+    geometry: { device, attributes, drawRange: { start: 0, count: attributes.position.count } },
+    program: program || createProgram(backend, { vertexColors: true, doubleSided: true, ...material }),
+    id: cityMapper.nextId++, renderOrder: 0, extras: {},
+  };
+  setParent(mesh, backend.root);
+  update(backend);
+  return mesh;
+}

package/src/rendering/createProgram.js

@@ -0,0 +1,92 @@
+import { materialShaders } from '../shaders/materialShaders.js';
+import { elevationWGSL } from '../constants/elevationWGSL.js';
+import { reportCompilation } from './reportCompilation.js';
+
+
+export function createProgram(backend, material = {}) {
+  const shaders = materialShaders(
+    material,
+    !!backend.options.nightSparkle,
+    material.terrain ? elevationWGSL : ''
+  );
+  const vertex = backend.renderer.device.createShaderModule({ code: shaders.vertex });
+  const fragment = backend.renderer.device.createShaderModule({ code: shaders.fragment });
+  reportCompilation(backend, [
+    vertex.getCompilationInfo(),
+    fragment.getCompilationInfo()
+  ]);
+  const vertexBuffers = [
+    { arrayStride: 12, attributes: [{ shaderLocation: 0, offset: 0, format: 'float32x3' }] },
+    { arrayStride: 12, attributes: [{ shaderLocation: 1, offset: 0, format: 'float32x3' }] },
+    material.vertexColors ? { arrayStride: 12, attributes: [{ shaderLocation: 2, offset: 0, format: 'float32x3' }] } : null,
+    shaders.textured ? { arrayStride: 8, attributes: [{ shaderLocation: 3, offset: 0, format: 'float32x2' }] } : null,
+  ];
+  if (material.instanced) vertexBuffers.push({
+    arrayStride: 16, stepMode: 'instance',
+    attributes: [{ shaderLocation: 4, offset: 0, format: 'float32x4' }],
+  });
+  const bindGroupEntries = [{
+    binding: 0,
+    visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+    buffer: { type: 'uniform', hasDynamicOffset: true },
+  }, {
+    binding: 1,
+    visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+    buffer: { type: 'uniform' },
+  }];
+  if (shaders.hasTerrain) {
+    bindGroupEntries.push({
+      binding: 2,
+      visibility: GPUShaderStage.VERTEX,
+      texture: { sampleType: 'unfilterable-float', viewDimension: '2d' },
+    });
+  }
+
+  let texture;
+  for (texture of shaders.bindings) {
+    bindGroupEntries.push({
+      binding: texture.texture,
+      visibility: GPUShaderStage.FRAGMENT,
+      texture: { sampleType: 'float', viewDimension: '2d' },
+    });
+    bindGroupEntries.push({
+      binding: texture.sampler,
+      visibility: GPUShaderStage.FRAGMENT,
+      sampler: { type: 'filtering' },
+    });
+  }
+  const bindGroupLayout = backend.renderer.device.createBindGroupLayout({ entries: bindGroupEntries });
+  const pipelineLayout = backend.renderer.device.createPipelineLayout({ bindGroupLayouts: [bindGroupLayout, backend.renderer.sunlight.layout] });
+  return {
+    device: backend.renderer.device,
+    vertex,
+    fragment,
+    bindings: shaders.bindings,
+    vertexBuffers,
+    bindGroupLayout,
+    pipelineLayout,
+    pipelineCache: new Map(),
+    cullMode: material.doubleSided ? 'none' : 'back',
+    transparent: material.alphaMode === 'BLEND',
+    depthWrite: material.depthWrite ?? material.alphaMode !== 'BLEND',
+    depthTest: material.depthTest !== false,
+    terrain: material.terrain,
+    nightLight: Boolean(material.nightLight),
+    nightSparkle: !!backend.options.nightSparkle,
+    uniforms: {
+      baseColor: { value: material.color || [1, 1, 1] },
+      metallic: { value: material.metallic ?? 0 },
+      roughness: { value: material.roughness ?? 0.85 },
+      opacity: { value: material.opacity ?? 1 },
+      alphaCutoff: { value: material.alphaCutoff ?? 0.5 },
+      occlusionStrength: { value: material.occlusionStrength ?? 1 },
+      emissive: { value: material.emissive || [0, 0, 0] },
+      ...(material.baseTexture ? { baseTexture: { value: material.baseTexture } } : {}),
+      ...(material.metalTexture ? { metalTexture: { value: material.metalTexture } } : {}),
+      ...(material.emissiveTexture ? { emissiveTexture: { value: material.emissiveTexture } } : {}),
+      ...(material.occlusionTexture ? { occlusionTexture: { value: material.occlusionTexture } } : {}),
+      ...(material.roofTexture ? { roofTexture: { value: null } } : {}),
+    },
+    _layerMaterial: material,
+  };
+}

package/src/rendering/destroyAfterSubmission.js

@@ -0,0 +1,8 @@
+export async function destroyAfterSubmission(layer, texture, submitted) {
+  try {
+    await submitted;
+  } catch (error) {
+    layer.fire('error', { error });
+  }
+  texture.destroy();
+}

package/src/rendering/destroyTexture.js

@@ -0,0 +1,6 @@
+
+import { destroyAfterSubmission } from './destroyAfterSubmission.js';
+
+export function destroyTexture(layer, texture) {
+  destroyAfterSubmission(layer, texture, layer.renderer.device.queue.onSubmittedWorkDone());
+}

package/src/rendering/disposeMesh.js

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

package/src/rendering/drawGeometry.js

@@ -0,0 +1,129 @@
+/** Upload retained CPU data and draw one mesh in the active WebGPU render pass. */
+
+export function drawGeometry(backend, mesh, pass, cullMode, frontFace) {
+  const { geometry, program } = mesh;
+  const device = backend.renderer.device;
+  // Mixed-LOD imagery composites coarse-to-fine; its depth still occludes later 3D objects.
+  // ponytail: self-occlusion during LOD blending needs separate per-LOD depth passes.
+  const depthCompare = program.depthTest === false || (mesh.ground && backend.renderer.groundOverlap)
+    ? 'always' : 'less-equal';
+  const pipelineKey = `${cullMode}:${frontFace}:${depthCompare}`;
+  let pipeline = program.pipelineCache.get(pipelineKey);
+  if (!pipeline) {
+    pipeline = device.createRenderPipeline({
+      layout: program.pipelineLayout,
+      vertex: {
+        module: program.vertex,
+        entryPoint: 'vertexMain',
+        buffers: program.vertexBuffers,
+      },
+      fragment: {
+        module: program.fragment,
+        entryPoint: 'fragmentMain',
+        targets: [{
+          format: backend.renderer.format,
+          blend: program.transparent ? {
+            color: { srcFactor: 'src-alpha', dstFactor: 'one-minus-src-alpha', operation: 'add' },
+            alpha: { srcFactor: 'one', dstFactor: 'one-minus-src-alpha', operation: 'add' },
+          } : undefined,
+          writeMask: GPUColorWrite.ALL,
+        }],
+      },
+      primitive: { topology: 'triangle-list', cullMode, frontFace },
+      depthStencil: {
+        format: 'depth24plus',
+        depthWriteEnabled: program.depthWrite,
+        depthCompare,
+      },
+    });
+    program.pipelineCache.set(pipelineKey, pipeline);
+  }
+
+  const uniforms = program.uniforms;
+  const renderer = backend.renderer;
+  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] = program.nightSparkle ? data[55] : 0;
+  data[base + 35] = mesh.ground ? 1 : mesh._appearance ?? 1;
+
+  const textures = mesh._textures ||= [];
+  textures.length = 0;
+  let binding, texture, i, attribute;
+  for (binding of program.bindings) {
+    texture = uniforms[binding.name]?.value;
+    if (!texture) throw new Error(`Missing Layer3D texture: ${binding.name}`);
+    if (texture.uploaded !== texture.image) {
+      device.queue.copyExternalImageToTexture(
+        { source: texture.image, flipY: Boolean(texture.flipY) },
+        { texture: texture.texture },
+        [texture.image.width, texture.image.height]
+      );
+      texture.uploaded = texture.image;
+    }
+    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) {
+    const entries = [
+      { binding: 0, resource: { buffer: renderer.uniformBuffer, size: 144 } },
+      { binding: 1, resource: { buffer: renderer.uniformBuffer, size: 240 } },
+    ];
+    if (program.terrain) entries.push({ binding: 2, resource: program.terrain.texture.createView() });
+    mesh.boundBuffer = renderer.uniformBuffer;
+    const boundTextures = mesh.boundTextures ||= [];
+    boundTextures.length = textures.length;
+    for (i = 0; i < textures.length; i++) {
+      binding = program.bindings[i], texture = textures[i];
+      entries.push({ binding: binding.texture, resource: texture.texture.createView() });
+      entries.push({ binding: binding.sampler, resource: texture.sampler });
+      boundTextures[i] ||= [];
+      boundTextures[i][0] = texture.texture;
+      boundTextures[i][1] = texture.sampler;
+    }
+    mesh.bindGroup = device.createBindGroup({
+      layout: program.bindGroupLayout,
+      entries,
+    });
+  }
+  pass.setPipeline(pipeline);
+  pass.setBindGroup(0, mesh.bindGroup, [offset]);
+  pass.setVertexBuffer(0, geometry.attributes.position.buffer);
+  pass.setVertexBuffer(1, geometry.attributes.normal.buffer);
+  if (geometry.attributes.color) pass.setVertexBuffer(2, geometry.attributes.color.buffer);
+  if (geometry.attributes.uv) pass.setVertexBuffer(3, geometry.attributes.uv.buffer);
+  const instances = geometry.attributes.instanceOffset;
+  if (instances) pass.setVertexBuffer(4, instances.buffer);
+  for (attribute of Object.values(geometry.attributes)) {
+    if (!attribute.needsUpdate) continue;
+    device.queue.writeBuffer(attribute.buffer, 0, attribute.data);
+    attribute.needsUpdate = false;
+    geometry.bounds = null;
+  }
+  const index = geometry.attributes.index;
+  if (index) {
+    pass.setIndexBuffer(index.buffer, index.indexFormat);
+    pass.drawIndexed(geometry.drawRange.count, instances?.count ?? 1, geometry.drawRange.start, 0, 0);
+  } else {
+    pass.draw(geometry.drawRange.count, instances?.count ?? 1, geometry.drawRange.start, 0);
+  }
+}

package/src/rendering/drawSceneMeshes.js

@@ -0,0 +1,51 @@
+import { drawGeometry } from './drawGeometry.js';
+
+export function drawSceneMeshes(backend, encoder, meshes) {
+  const renderer = backend.renderer;
+  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);
+  let mesh, world, uniforms, determinant, frontFace, program;
+  for (mesh of meshes) {
+    world = mesh.worldMatrix;
+    if (mesh.texture) {
+      mesh.program.uniforms.baseTexture.value = mesh.texture;
+      mesh.program.uniforms.opacity.value = mesh.opacity;
+    }
+    uniforms = mesh.program.uniforms;
+    if (uniforms.roofTexture) uniforms.roofTexture.value = backend._roofRaster?.texture || renderer.roofFallbackTexture;
+    if (!mesh._frontFace || mesh._frontFaceWorldVersion !== mesh._worldMatrixVersion ||
+        mesh._worldMatrixVersion === undefined) {
+      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');
+      }
+      mesh._frontFace = determinant < 0 ? 'cw' : 'ccw';
+      mesh._frontFaceWorldVersion = mesh._worldMatrixVersion;
+    }
+    frontFace = mesh._frontFace;
+    program = mesh.program;
+    if (program.transparent && program._layerMaterial.doubleSided && !mesh._nativeSource) {
+      drawGeometry(backend, mesh, pass, 'front', frontFace);
+      drawGeometry(backend, mesh, pass, 'back', frontFace);
+    } else {
+      drawGeometry(backend, mesh, pass, program.cullMode, frontFace);
+    }
+  }
+  pass.end();
+}

package/src/rendering/ensureRoofBlit.js

@@ -0,0 +1,40 @@
+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' }),
+    };
+  }
+}

package/src/rendering/prepareFrameMeshes.js

@@ -0,0 +1,42 @@
+import { sortMeshes } from "./sortMeshes.js";
+import { roofCoverage } from "../geometry/roofCoverage.js";
+
+export function prepareFrameMeshes(backend, rasters, now, meshes) {
+  const candidates = backend._visibleMeshes, shadowMeshes = backend._shadowMeshes, renderer = 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 (mesh.fadeDuration) {
+      mesh.fadeStart ??= mesh.tile?.loadedAt ?? now;
+      progress = Math.min(1, (now - mesh.fadeStart) / mesh.fadeDuration);
+      mesh._appearance = progress * progress * (3 - 2 * progress);
+      appearing ||= progress < 1;
+    }
+    meshes.push(mesh);
+  }
+  candidates.length = 0;
+  sortMeshes(meshes);
+  let minGroundZoom = Infinity, maxGroundZoom = -Infinity;
+  for (mesh of meshes) {
+    if (!mesh.ground) continue;
+    minGroundZoom = Math.min(minGroundZoom, mesh.tile.coords.z);
+    maxGroundZoom = Math.max(maxGroundZoom, mesh.tile.coords.z);
+  }
+  renderer.groundOverlap = minGroundZoom !== maxGroundZoom;
+  let shadowCount = 0;
+  for (mesh of shadowMeshes) {
+    if (mesh.visible && mesh._appearance !== 0) shadowMeshes[shadowCount++] = mesh;
+  }
+  shadowMeshes.length = shadowCount;
+  return appearing;
+}

package/src/rendering/prepareFrameUniforms.js

@@ -0,0 +1,49 @@
+import { destroyTexture } from './destroyTexture.js';
+import { updatePointLights } from '../lighting/updatePointLights.js';
+
+export function prepareFrameUniforms(backend, meshes, shadowMeshes, sunlight) {
+  const renderer = backend.renderer, camera = backend.camera;
+  const view = camera.viewMatrix, direction = sunlight?.direction;
+  const x = direction ? direction[0] : -300;
+  const y = direction ? direction[1] : 500;
+  const z = direction ? direction[2] : 300;
+  const lightX = view[0] * x + view[4] * y + view[8] * z;
+  const lightY = view[1] * x + view[5] * y + view[9] * z;
+  const lightZ = view[2] * x + view[6] * y + view[10] * z;
+  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);
+  }
+  const frameData = renderer.uniformData;
+  frameData.set(camera.viewMatrix, 0);
+  frameData.set(camera.projectionMatrix, 16);
+  if (backend._roofRaster?.matrix) frameData.set(backend._roofRaster.matrix, 32);
+  else {
+    frameData.fill(0, 32, 48);
+    frameData[32] = frameData[37] = frameData[42] = frameData[47] = 1;
+  }
+  frameData[48] = lightX / lightLength;
+  frameData[49] = lightY / lightLength;
+  frameData[50] = lightZ / lightLength;
+  frameData[51] = sunlight && sunlight.altitude <= 0 ? 0 : 1;
+  frameData[52] = view[4] / skyLength;
+  frameData[53] = view[5] / skyLength;
+  frameData[54] = view[6] / skyLength;
+  const night = sunlight ? Math.max(0, Math.min(1, (3 - sunlight.altitude) / 9)) : 0;
+  frameData[55] = night * night * (3 - 2 * night);
+  const tint = sunlight?.tint;
+  frameData[56] = tint ? tint[0] : 1;
+  frameData[57] = tint ? tint[1] : 1;
+  frameData[58] = tint ? tint[2] : 1;
+  frameData[59] = 0;
+  if (night > 0) updatePointLights(backend);
+  renderer.uniformSlot = 1;
+}