leaflet-city-mapper 0.0.2 → 0.0.4

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

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

package/src/rendering/destroyTexture.js

@@ -0,0 +1,9 @@
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+
+
+
+import { destroyAfterSubmission } from './destroyAfterSubmission.js';
+
+export function destroyTexture(layer, texture) {
+  destroyAfterSubmission(layer, texture, sceneByLayer.get(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,41 @@
+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 } = 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, (
+    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);
+    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/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

@@ -0,0 +1,48 @@
+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 = 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;
+  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 = 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 /* alloc */ 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,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(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

@@ -0,0 +1,37 @@
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+
+
+import { sortMeshes } from "./sortMeshes.js";
+import { revealRoofMesh } from './revealRoofMesh.js';
+
+export function prepareFrameMeshes(backend, rasters, now, meshes) {
+  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 (!revealRoofMesh(backend, mesh, rasters)) continue;
+    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,44 @@
+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 = 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;
+  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.
+  prepareFrameBuffer(backend, meshes, shadowMeshes);
+  const frameData = renderer.uniformData;
+  frameData.set(camera.viewMatrix, 0);
+  frameData.set(camera.projectionMatrix, 16);
+  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;
+  }
+  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;
+}

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

@@ -0,0 +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 { collectRoofTiles } from './collectRoofTiles.js';
+import { resizeRoofTexture } from './resizeRoofTexture.js';
+
+export function rebuildRoofAtlas(backend, rasters, signature, now) {
+  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();
+  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 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 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);
+  try {
+    composeRoofAtlas(backend, tiles, zoom, min, size, width, height);
+  } finally {
+    tiles.length = 0;
+  }
+}

package/src/rendering/render.js

@@ -0,0 +1,69 @@
+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';
+import { collectFrameMeshes } from './collectFrameMeshes.js';
+import { updateRoofRaster } from './updateRoofRaster.js';
+import { prepareFrameMeshes } from './prepareFrameMeshes.js';
+import { prepareFrameUniforms } from './prepareFrameUniforms.js';
+import { drawSceneMeshes } from './drawSceneMeshes.js';
+import { updateWorldMatrix } from "../scene/updateWorldMatrix.js";
+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.
+ * Lights and transparent sort centers are converted into the current camera space.
+ * Without raster tiles, logical map projection supplies the same static alignment.
+ */
+
+export function render(backend) {
+  cancelUpdate(backend);
+  if (sceneByLayer.get(backend)._shared !== backend || !sceneByLayer.get(backend).renderer) return;
+  const map = backend._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(sceneByLayer.get(backend).scene);
+  let sceneChanged = false;
+  let layer, native;
+  for (layer of sceneByLayer.get(backend)._layers) {
+    native = nativeRenderByLayer.get(layer);
+    if (!native) continue;
+    beforeNativeRender(native);
+    sceneChanged = true;
+  }
+  const sunlight = cameraByMap.get(map)._sunlight;
+  collectFrameMeshes(backend, sunlight, sceneChanged);
+  const shadowMeshes = sceneByLayer.get(backend)._shadowMeshes;
+  const renderer = sceneByLayer.get(backend).renderer;
+  const rasters = updateRoofRaster(backend, now);
+  const meshes = renderer.frameMeshes ||= /* alloc */ [];
+  meshes.length = 0;
+  let appearing = prepareFrameMeshes(backend, rasters, now, meshes);
+  const encoder = renderer.device.createCommandEncoder();
+  prepareFrameUniforms(backend, meshes, shadowMeshes, sunlight);
+  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((
+    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

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

package/src/rendering/resizeRenderer.js

@@ -0,0 +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 (!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/sortMeshes.js

@@ -0,0 +1,6 @@
+
+import { compareMeshes } from './compareMeshes.js';
+
+export function sortMeshes(meshes) {
+  return meshes.sort(compareMeshes);
+}

package/src/rendering/synchronizeZoomView.js

@@ -0,0 +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) {
+    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') ||
+        sceneByLayer.get(backend)._zoomTransitions.has(animation)) {
+        continue;
+      }
+      time = animation.currentTime || 0;
+      animation.pause();
+      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 sceneByLayer.get(backend)._zoomTransitions) {
+      animation.currentTime = Math.min(animation.effect.getComputedTiming().endTime, time + now - start);
+    }
+    if (sceneByLayer.get(backend)._zoomView) updateZoomCamera(backend, now);
+  }
+}