leaflet-city-mapper 0.0.3 → 0.0.5

package/src/rendering/collectVisibleMesh.js

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

package/src/rendering/compareMeshDepth.js

@@ -0,0 +1,6 @@
+export function compareMeshDepth(a, b) {
+  return 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/compareMeshes.js

@@ -1,10 +1,8 @@
-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);
-}
+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) ||
+    compareMeshDepth(a, b);
+}
+import { compareMeshDepth } from './compareMeshDepth.js';

package/src/rendering/createMesh.js

@@ -1,8 +1,16 @@
-import { cityMapper } from '../constants/cityMapper.js';
-import { emptyNode } from '../scene/emptyNode.js';
-import { createProgram } from './createProgram.js';
+import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
+import { rootByLayer } from '../weakmaps/rootByLayer.js';
+
+import { defaultMaterial } from '../globals/defaultMaterial.js';
+import { meshBuffer } from '../globals/meshBuffer.js';
+import { nextId } from '../globals/nextId.js';
+
+
+
+import { emptyNode } from '../scene/createSceneNode.js';
+import { createProgram } from '../materials/createProgram.js';
 import { setParent } from '../scene/setParent.js';
-import { update } from '../scene/update.js';
+import { update } from '../scene/scheduleSceneUpdate.js';
 
 /**
  * Add a non-indexed, vertex-coloured mesh from flat vec3 arrays `{ position, normal, color }` in layer-local metres.
@@ -10,24 +18,29 @@ import { update } from '../scene/update.js';
  * 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 = {};
+export function createMesh(layer, data, material = defaultMaterial, usage = 0, program) {
+  const { device } = rendererByLayer.get(layer), attributes = /* alloc */ {};
   let name, values, array, size, buffer;
   for ([name, values] of Object.entries(data)) {
-    array = new Float32Array(values);
+    array = /* alloc */ new Float32Array(values);
     size = name === 'uv' ? 2 : 3;
-    buffer = device.createBuffer({ size: Math.max(4, array.byteLength), usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST | usage });
+    buffer = device.createBuffer((
+      meshBuffer.size = Math.max(4, array.byteLength),
+      meshBuffer.usage = GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST | usage,
+      meshBuffer
+    ));
+
     device.queue.writeBuffer(buffer, 0, array);
-    attributes[name] = { size, data: array, count: array.length / size, buffer };
+    attributes[name] = /* alloc */ { size, data: array, count: array.length / size, buffer };
   }
-  const mesh = {
+  const mesh = /* alloc */ {
     ...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: {},
+    geometry: /* alloc */ { device, attributes, drawRange: /* alloc */ { start: 0, count: attributes.position.count } },
+    program: program || createProgram(layer, /* alloc */ { vertexColors: true, doubleSided: true, ...material }),
+    id: nextId.value++, renderOrder: 0, extras: /* alloc */ {},
   };
-  setParent(mesh, backend.root);
-  update(backend);
+  setParent(mesh, rootByLayer.get(layer));
+  update(layer);
   return mesh;
 }

package/src/rendering/disposeMesh.js

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

package/src/rendering/drawGeometry.js

@@ -1,123 +1,37 @@
-/** 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);
-  }
+import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
 
-  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;
+import { meshOffsets } from '../globals/meshOffsets.js';
+import { drawPipeline } from './drawPipeline.js';
+import { prepareMeshUniforms } from './prepareMeshUniforms.js';
+import { prepareMeshTextures } from '../textures/prepareMeshTextures.js';
 
-  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,
-    });
-  }
+/** Upload retained CPU data and draw one mesh in the active WebGPU render pass. */
+export function drawGeometry(layer, mesh, pass, cullMode, frontFace) {
+  const { geometry } = mesh;
+  const renderer = rendererByLayer.get(layer);
+  const { device } = renderer;
+  const pipeline = drawPipeline(renderer, mesh, cullMode, frontFace);
+  const offset = prepareMeshUniforms(renderer, mesh);
+  prepareMeshTextures(renderer, mesh);
   pass.setPipeline(pipeline);
-  pass.setBindGroup(0, mesh.bindGroup, [offset]);
+  pass.setBindGroup(0, mesh.bindGroup, (
+    meshOffsets[0] = offset,
+    meshOffsets
+  ));
+
   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)) {
+  let name, attribute;
+  for (name in geometry.attributes) {
+    attribute = geometry.attributes[name];
     if (!attribute.needsUpdate) continue;
     device.queue.writeBuffer(attribute.buffer, 0, attribute.data);
     attribute.needsUpdate = false;
-    geometry.bounds = null;
+    if (name === 'position' || name === 'instanceOffset') geometry.bounds = null;
   }
   const index = geometry.attributes.index;
   if (index) {

package/src/rendering/drawPipeline.js

@@ -0,0 +1,34 @@
+import { meshPipeline } from '../globals/meshPipeline.js';
+import { alphaBlend } from '../globals/alphaBlend.js';
+
+export function drawPipeline(renderer, mesh, cullMode, frontFace) {
+  const { program } = mesh;
+  // 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 && renderer.groundOverlap)
+    ? 'always' : 'less-equal';
+  const pipelineKey = `${cullMode}:${frontFace}:${depthCompare}`;
+  let pipeline = program.pipelineCache.get(pipelineKey);
+  if (!pipeline) {
+    pipeline = renderer.device.createRenderPipeline((
+      meshPipeline.layout = program.pipelineLayout,
+      meshPipeline.vertex.module = program.vertex,
+      meshPipeline.vertex.buffers = program.vertexBuffers,
+      meshPipeline.fragment.module = program.fragment,
+      meshPipeline.fragment.targets[0].format = renderer.format,
+      meshPipeline.fragment.targets[0].blend = program.transparent ? alphaBlend : undefined,
+      meshPipeline.fragment.targets[0].writeMask = GPUColorWrite.ALL,
+      meshPipeline.primitive.cullMode = cullMode,
+      meshPipeline.primitive.frontFace = frontFace,
+      meshPipeline.depthStencil.depthWriteEnabled = program.depthWrite,
+      meshPipeline.depthStencil.depthCompare = depthCompare,
+      meshPipeline
+    ));
+    meshPipeline.layout = null;
+    meshPipeline.vertex.module = null;
+    meshPipeline.vertex.buffers = null;
+    meshPipeline.fragment.module = null;
+    program.pipelineCache.set(pipelineKey, pipeline);
+  }
+  return pipeline;
+}

package/src/rendering/drawSceneMeshes.js

@@ -1,21 +1,20 @@
+import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
+import { roofRasterByLayer } from '../weakmaps/roofRasterByLayer.js';
+
+import { scenePass } from '../globals/scenePass.js';
+
+
 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',
-    },
-  });
+export function drawSceneMeshes(layer, encoder, meshes) {
+  const renderer = rendererByLayer.get(layer);
+  const pass = encoder.beginRenderPass((
+    scenePass.colorAttachments[0].view = renderer.context.getCurrentTexture().createView(),
+    scenePass.depthStencilAttachment.view = renderer.depthTexture.createView(),
+    scenePass
+  ));
+  scenePass.colorAttachments[0].view = null;
+  scenePass.depthStencilAttachment.view = null;
   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;
@@ -26,14 +25,14 @@ export function drawSceneMeshes(backend, encoder, meshes) {
       mesh.program.uniforms.opacity.value = mesh.opacity;
     }
     uniforms = mesh.program.uniforms;
-    if (uniforms.roofTexture) uniforms.roofTexture.value = backend._roofRaster?.texture || renderer.roofFallbackTexture;
+    if (uniforms.roofTexture) uniforms.roofTexture.value = roofRasterByLayer.get(layer)?.texture || renderer.roofFallbackTexture;
     if (!mesh._frontFace || mesh._frontFaceWorldVersion !== mesh._worldMatrixVersion ||
         mesh._worldMatrixVersion === undefined) {
       determinant = world[0] * (world[5] * world[10] - world[6] * world[9]) -
         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');
+        throw /* alloc */ new Error('Singular 3D transform');
       }
       mesh._frontFace = determinant < 0 ? 'cw' : 'ccw';
       mesh._frontFaceWorldVersion = mesh._worldMatrixVersion;
@@ -41,10 +40,10 @@ export function drawSceneMeshes(backend, encoder, meshes) {
     frontFace = mesh._frontFace;
     program = mesh.program;
     if (program.transparent && program._layerMaterial.doubleSided && !mesh._nativeSource) {
-      drawGeometry(backend, mesh, pass, 'front', frontFace);
-      drawGeometry(backend, mesh, pass, 'back', frontFace);
+      drawGeometry(layer, mesh, pass, 'front', frontFace);
+      drawGeometry(layer, mesh, pass, 'back', frontFace);
     } else {
-      drawGeometry(backend, mesh, pass, program.cullMode, frontFace);
+      drawGeometry(layer, mesh, pass, program.cullMode, frontFace);
     }
   }
   pass.end();

package/src/rendering/prepareFrameBuffer.js

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

package/src/rendering/prepareFrameMeshes.js

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

package/src/rendering/prepareFrameUniforms.js

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

package/src/rendering/prepareMeshUniforms.js

@@ -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 '../materials/prepareMeshCutout.js';

package/src/rendering/render.js

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