leaflet-city-mapper 0.0.3 → 0.0.4

package/src/rendering/composeRoofAtlas.js

@@ -1,52 +1,69 @@
-import { getRasterTileSize } from '../raster/getRasterTileSize.js';
+import { roofBuffer } from '../globals/roofBuffer.js';
+import { roofPass } from '../globals/roofPass.js';
+import { uploadRoofTile } from './uploadRoofTile.js';
+import { roofBindGroup } from '../globals/roofBindGroup.js';
+import { roofCommands } from '../globals/roofCommands.js';
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+import { roofOpacities } from '../globals/roofOpacities.js';
+import { TILE_SIZE } from '../globals/TILE_SIZE.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 renderer = sceneByLayer.get(backend).renderer, device = renderer.device, map = backend._map;
+  const opacityLength = Math.max(1, tiles.length) * 64;
+  if (roofOpacities.value.length < opacityLength) {
+    roofOpacities.value = /* alloc */ new Float32Array(opacityLength);
+  }
+  const opacities = roofOpacities.value;
+  const opacityBuffer = device.createBuffer((
+    roofBuffer.size = opacities.byteLength,
+    roofBuffer.usage = GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    roofBuffer
+  ));
+
   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',
-    }],
-  });
+  const atlasPass = encoder.beginRenderPass((
+    roofPass.colorAttachments[0].view = sceneByLayer.get(backend)._roofRaster.texture.texture.createView(),
+    roofPass
+  ));
+  roofPass.colorAttachments[0].view = null;
   atlasPass.setPipeline(renderer.roofBlit.pipeline);
   tiles.sort(compareRoofTiles);
-  let i, tile, layer, coords, image, source, tileSize, offset, x, y;
+  let i, tile, layer, coords, source, tileSize, x, y;
   for ([i, { tile, layer }] of tiles.entries()) {
-    ({ coords, image } = tile);
+    ({ coords } = 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;
-    }
+    uploadRoofTile(device, tile);
 
     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 } },
-      ],
-    }));
+    tileSize = TILE_SIZE * map.getZoomScale(zoom, coords.z);
+    x = (coords.x * tileSize - min.x) * width / size.x;
+    y = (coords.y * tileSize - min.y) * height / size.y;
+    atlasPass.setViewport(x, y, Math.min(tileSize * width / size.x, width - x),
+      Math.min(tileSize * height / size.y, height - y), 0, 1);
+    atlasPass.setBindGroup(0, device.createBindGroup((
+      roofBindGroup.layout = renderer.roofBlit.pipeline.getBindGroupLayout(0),
+      roofBindGroup.entries[0].resource = source.texture.createView(),
+      roofBindGroup.entries[1].resource = renderer.roofBlit.sampler,
+      roofBindGroup.entries[2].resource.buffer = opacityBuffer,
+      roofBindGroup.entries[2].resource.offset = i * 256,
+      roofBindGroup
+    )));
+    roofBindGroup.layout = null;
+    roofBindGroup.entries[0].resource = null;
+    roofBindGroup.entries[1].resource = null;
+    roofBindGroup.entries[2].resource.buffer = null;
+
     atlasPass.draw(4);
   }
   atlasPass.end();
   device.queue.writeBuffer(opacityBuffer, 0, opacities);
-  device.queue.submit([encoder.finish()]);
+  device.queue.submit((
+    roofCommands[0] = encoder.finish(),
+    roofCommands
+  ));
+  roofCommands[0] = null;
   opacityBuffer.destroy();
 }

package/src/rendering/createMesh.js

@@ -1,4 +1,10 @@
-import { cityMapper } from '../constants/cityMapper.js';
+import { defaultMaterial } from '../globals/defaultMaterial.js';
+import { meshBuffer } from '../globals/meshBuffer.js';
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+import { nextId } from '../globals/nextId.js';
+
+
+
 import { emptyNode } from '../scene/emptyNode.js';
 import { createProgram } from './createProgram.js';
 import { setParent } from '../scene/setParent.js';
@@ -10,24 +16,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(backend, data, material = defaultMaterial, usage = 0, program) {
+  const { device } = sceneByLayer.get(backend).renderer, 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(backend, /* alloc */ { vertexColors: true, doubleSided: true, ...material }),
+    id: nextId.value++, renderOrder: 0, extras: /* alloc */ {},
   };
-  setParent(mesh, backend.root);
+  setParent(mesh, sceneByLayer.get(backend).root);
   update(backend);
   return mesh;
 }

package/src/rendering/createProgram.js

@@ -1,71 +1,67 @@
+import { defaultMaterial } from '../globals/defaultMaterial.js';
+import { vertexShader } from '../globals/vertexShader.js';
+import { fragmentShader } from '../globals/fragmentShader.js';
+import { pipelineLayout as sharedPipelineLayout } from '../globals/pipelineLayout.js';
+import { elevationWGSL } from '../globals/elevationWGSL.js';
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+import { positionLayout } from '../globals/positionLayout.js';
+import { normalLayout } from '../globals/normalLayout.js';
+import { colorLayout } from '../globals/colorLayout.js';
+import { uVLayout } from '../globals/uVLayout.js';
+import { instanceLayout } from '../globals/instanceLayout.js';
+import { createProgramLayout } from './createProgramLayout.js';
+import { createProgramUniforms } from './createProgramUniforms.js';
+
+
 import { materialShaders } from '../shaders/materialShaders.js';
-import { elevationWGSL } from '../constants/elevationWGSL.js';
-import { reportCompilation } from './reportCompilation.js';
 
+import { reportCompilation } from './reportCompilation.js';
 
-export function createProgram(backend, material = {}) {
+export function createProgram(backend, material = defaultMaterial) {
   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, [
+  const vertex = sceneByLayer.get(backend).renderer.device.createShaderModule((
+    vertexShader.code = shaders.vertex,
+    vertexShader
+  ));
+  vertexShader.code = null;
+  const fragment = sceneByLayer.get(backend).renderer.device.createShaderModule((
+    fragmentShader.code = shaders.fragment,
+    fragmentShader
+  ));
+  fragmentShader.code = null;
+  reportCompilation(backend, /* alloc */ [
     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,
+  const vertexBuffers = /* alloc */ [
+    positionLayout,
+    normalLayout,
+    material.vertexColors ? colorLayout : null,
+    shaders.textured ? uVLayout : 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,
+  if (material.instanced) vertexBuffers.push(instanceLayout);
+  const bindGroupLayout = createProgramLayout(sceneByLayer.get(backend).renderer.device, shaders);
+  const pipelineLayout = sceneByLayer.get(backend).renderer.device.createPipelineLayout((
+    sharedPipelineLayout.bindGroupLayouts[0] = bindGroupLayout,
+    sharedPipelineLayout.bindGroupLayouts[1] = sceneByLayer.get(backend).renderer.sunlight.layout,
+    sharedPipelineLayout
+  ));
+  sharedPipelineLayout.bindGroupLayouts[0] = null;
+  sharedPipelineLayout.bindGroupLayouts[1] = null;
+  const uniforms = createProgramUniforms(material);
+  return /* alloc */ {
+    device: sceneByLayer.get(backend).renderer.device,
     vertex,
     fragment,
     bindings: shaders.bindings,
     vertexBuffers,
     bindGroupLayout,
     pipelineLayout,
-    pipelineCache: new Map(),
+    pipelineCache: /* alloc */ new Map(),
     cullMode: material.doubleSided ? 'none' : 'back',
     transparent: material.alphaMode === 'BLEND',
     depthWrite: material.depthWrite ?? material.alphaMode !== 'BLEND',
@@ -73,20 +69,7 @@ export function createProgram(backend, material = {}) {
     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 } } : {}),
-    },
+    uniforms,
     _layerMaterial: material,
   };
 }

package/src/rendering/createProgramLayout.js

@@ -0,0 +1,36 @@
+import { programLayout } from '../globals/programLayout.js';
+import { programEntries } from '../globals/programEntries.js';
+import { meshLayoutEntry } from '../globals/meshLayoutEntry.js';
+import { frameLayoutEntry } from '../globals/frameLayoutEntry.js';
+import { terrainLayoutEntry } from '../globals/terrainLayoutEntry.js';
+import { textureLayoutEntries } from '../globals/textureLayoutEntries.js';
+import { samplerLayoutEntries } from '../globals/samplerLayoutEntries.js';
+
+export function createProgramLayout(device, shaders) {
+  const bindGroupEntries = programEntries;
+  bindGroupEntries.length = 0;
+  meshLayoutEntry.visibility = GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT;
+  frameLayoutEntry.visibility = GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT;
+  bindGroupEntries.push(meshLayoutEntry, frameLayoutEntry);
+  if (shaders.hasTerrain) {
+    terrainLayoutEntry.visibility = GPUShaderStage.VERTEX;
+    bindGroupEntries.push(terrainLayoutEntry);
+  }
+  let texture, entry, index = 0;
+  for (texture of shaders.bindings) {
+    entry = textureLayoutEntries[index];
+    entry.binding = texture.texture;
+    entry.visibility = GPUShaderStage.FRAGMENT;
+    bindGroupEntries.push(entry);
+    entry = samplerLayoutEntries[index++];
+    entry.binding = texture.sampler;
+    entry.visibility = GPUShaderStage.FRAGMENT;
+    bindGroupEntries.push(entry);
+  }
+  const layout = device.createBindGroupLayout((
+    programLayout.entries = bindGroupEntries,
+    programLayout
+  ));
+  programLayout.entries = null;
+  return layout;
+}

package/src/rendering/createProgramUniforms.js

@@ -0,0 +1,17 @@
+export function createProgramUniforms(material) {
+  const uniforms = /* alloc */ {
+    baseColor: /* alloc */ { value: material.color || /* alloc */ [1, 1, 1] },
+    metallic: /* alloc */ { value: material.metallic ?? 0 },
+    roughness: /* alloc */ { value: material.roughness ?? 0.85 },
+    opacity: /* alloc */ { value: material.opacity ?? 1 },
+    alphaCutoff: /* alloc */ { value: material.alphaCutoff ?? 0.5 },
+    occlusionStrength: /* alloc */ { value: material.occlusionStrength ?? 1 },
+    emissive: /* alloc */ { value: material.emissive || /* alloc */ [0, 0, 0] },
+  };
+  if (material.baseTexture) uniforms.baseTexture = /* alloc */ { value: material.baseTexture };
+  if (material.metalTexture) uniforms.metalTexture = /* alloc */ { value: material.metalTexture };
+  if (material.emissiveTexture) uniforms.emissiveTexture = /* alloc */ { value: material.emissiveTexture };
+  if (material.occlusionTexture) uniforms.occlusionTexture = /* alloc */ { value: material.occlusionTexture };
+  if (material.roofTexture || material.wallTexture) uniforms.roofTexture = /* alloc */ { value: null };
+  return uniforms;
+}

package/src/rendering/destroyAfterSubmission.js

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

package/src/rendering/destroyTexture.js

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

package/src/rendering/drawGeometry.js

@@ -1,118 +1,30 @@
-/** Upload retained CPU data and draw one mesh in the active WebGPU render pass. */
+import { meshOffsets } from '../globals/meshOffsets.js';
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+import { drawPipeline } from './drawPipeline.js';
+import { prepareMeshUniforms } from './prepareMeshUniforms.js';
+import { prepareMeshTextures } from './prepareMeshTextures.js';
 
+/** 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,
-    });
-  }
+  const { geometry } = mesh;
+  const renderer = sceneByLayer.get(backend).renderer;
+  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);
+  let attribute;
   for (attribute of Object.values(geometry.attributes)) {
     if (!attribute.needsUpdate) continue;
     device.queue.writeBuffer(attribute.buffer, 0, attribute.data);

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,18 @@
+import { scenePass } from '../globals/scenePass.js';
+import { sceneByLayer } from '../globals/sceneByLayer.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',
-    },
-  });
+  const renderer = sceneByLayer.get(backend).renderer;
+  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 +23,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 = sceneByLayer.get(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');
+        throw /* alloc */ new Error('Singular 3D transform');
       }
       mesh._frontFace = determinant < 0 ? 'cw' : 'ccw';
       mesh._frontFaceWorldVersion = mesh._worldMatrixVersion;