leaflet-city-mapper 0.0.2 → 0.0.4

package/src/scene/restoreObject.js

@@ -0,0 +1,35 @@
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+
+
+import { createProgram } from '../rendering/createProgram.js';
+import { restoreGeometry } from './restoreGeometry.js';
+import { restoreMaterialTextures } from './restoreMaterialTextures.js';
+
+export function restoreObject(object, backend) {
+  const shared = sceneByLayer.get(backend)._shared;
+  let texture;
+  if (object.geometry && object.geometry.device !== sceneByLayer.get(shared).renderer.device) {
+    const geometry = object.geometry;
+    const material = object.program._layerMaterial;
+    const device = sceneByLayer.get(shared).renderer.device;
+    restoreGeometry(geometry, device);
+    object.bindGroup = null;
+    if (object.boundTextures) object.boundTextures.length = 0;
+    else object.boundTextures = /* alloc */ [];
+    restoreMaterialTextures(material, device);
+    object.program.pipelineCache.clear();
+    object.program = createProgram(backend, material);
+    object.device = device;
+  }
+  if (object.texture && object.texture.device !== sceneByLayer.get(shared).renderer.device) {
+    texture = object.texture;
+    texture.device = sceneByLayer.get(shared).renderer.device;
+    texture.texture = sceneByLayer.get(shared).renderer.device.createTexture(/* alloc */ {
+        size: /* alloc */ [object.texture.image.width, object.texture.image.height],
+        format: object.texture.format,
+        usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
+      });
+    texture.sampler = sceneByLayer.get(shared).renderer.device.createSampler(texture.samplerOptions);
+    texture.uploaded = null;
+  }
+}

package/src/scene/runPlacements.js

@@ -0,0 +1,9 @@
+import { pendingPlacements } from '../globals/pendingPlacements.js';
+
+
+import { placeUnderEntry } from './placeUnderEntry.js';
+
+export function runPlacements() {
+  const state = pendingPlacements.shift();
+  if (state?.map.hasLayer(state.layer)) placeUnderEntry(state);
+}

package/src/scene/showWebGPUWarning.js

@@ -0,0 +1,16 @@
+export function showWebGPUWarning(map) {
+  const container = map.getContainer();
+  if (container.querySelector('.leaflet-webgpu-warning')) return;
+  const warning = document.createElement('div');
+  warning.className = 'leaflet-webgpu-warning';
+  warning.setAttribute('role', 'alert');
+  warning.style.cssText = 'position:absolute;z-index:1000;top:50%;left:50%;transform:translate(-50%,-50%);max-width:calc(100% - 32px);box-sizing:border-box;padding:12px 16px;border:1px solid #c98b24;border-radius:6px;background:#fff8e6;box-shadow:0 3px 12px #0005;color:#30251d;font:14px/1.5 sans-serif;text-align:center;pointer-events:auto';
+  warning.append('WebGPU is not available in this browser or device. ');
+  const link = document.createElement('a');
+  link.href = 'https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API#browser_compatibility';
+  link.target = '_blank';
+  link.rel = 'noopener noreferrer';
+  link.textContent = 'Learn more';
+  warning.append(link);
+  container.append(warning);
+}

package/src/scene/startZoom.js

@@ -0,0 +1,8 @@
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+
+
+/** Preserve the outgoing tile level before Leaflet changes its logical zoom. */
+
+export function startZoom() {
+  sceneByLayer.get(this)._zoomLevel = null;
+}

package/src/scene/traverse.js

@@ -0,0 +1,7 @@
+/** Depth-first walk; a truthy callback result skips that node's descendants. */
+
+export function traverse(node, callback, context) {
+  if (callback(node, context)) return;
+  let child;
+  for (child of node.children) traverse(child, callback, context);
+}

package/src/scene/underEntry.js

@@ -0,0 +1,16 @@
+
+import { placeUnderEntry } from './placeUnderEntry.js';
+import { replaceEntry } from './replaceEntry.js';
+import { removeEntry } from './removeEntry.js';
+
+/**
+ * Keeps `element` right under `layer`'s entry in the map's layers control while the layer is on the map.
+ * Returns false when no layers control lists the layer.
+ */
+
+export function underEntry(layer, element, onPlace) {
+  const state = /* alloc */ { map: layer._map, layer, element, onPlace };
+  state.map.on('layeradd layerremove', replaceEntry, state);
+  layer.once('remove', removeEntry, state);
+  return placeUnderEntry(state);
+}

package/src/scene/update.js

@@ -0,0 +1,23 @@
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+import { pendingUpdates } from '../globals/pendingUpdates.js';
+
+
+import { render } from "../rendering/render.js";
+
+import { renderPendingUpdates } from './renderPendingUpdates.js';
+
+/** Scene graph, shared camera and frame rendering. */
+/** Content changes: render once on the next animation frame. */
+export function update(backend) {
+  const shared = sceneByLayer.get(backend)._shared;
+  if (!shared) return backend;
+  if (shared !== backend) {
+    update(shared);
+    return backend;
+  }
+  if (sceneByLayer.get(backend)._frame != null) return backend;
+  const first = pendingUpdates.values().next().value;
+  pendingUpdates.add(backend);
+  sceneByLayer.get(backend)._frame = first ? sceneByLayer.get(first)._frame : requestAnimationFrame(renderPendingUpdates);
+  return backend;
+}

package/src/scene/updateCamera.js

@@ -0,0 +1,57 @@
+import { halfRadians } from '../globals/halfRadians.js';
+/** Orthonormal view basis plus perspective matrices, refreshed before projecting/drawing. */
+
+export function updateCamera(camera) {
+  camera.x ||= /* alloc */ [0, 0, 0];
+  camera.y ||= /* alloc */ [0, 0, 0];
+  camera.z ||= /* alloc */ [0, 0, 0];
+  camera.viewTransform ||= /* alloc */ new DOMMatrix();
+  camera.projectionTransform ||= /* alloc */ new DOMMatrix();
+  camera.projectionViewTransform ||= /* alloc */ new DOMMatrix();
+  const { position, target, up, x, y, z, viewMatrix, projectionMatrix, projectionViewMatrix } = camera;
+  let i, value;
+  z[0] = position[0] - target[0], z[1] = position[1] - target[1], z[2] = position[2] - target[2];
+  const zLength = Math.hypot(z[0], z[1], z[2]) || 1;
+  z[0] /= zLength, z[1] /= zLength, z[2] /= zLength;
+  x[0] = up[1] * z[2] - up[2] * z[1];
+  x[1] = up[2] * z[0] - up[0] * z[2];
+  x[2] = up[0] * z[1] - up[1] * z[0];
+  const xLength = Math.hypot(x[0], x[1], x[2]) || 1;
+  x[0] /= xLength, x[1] /= xLength, x[2] /= xLength;
+  y[0] = z[1] * x[2] - z[2] * x[1];
+  y[1] = z[2] * x[0] - z[0] * x[2];
+  y[2] = z[0] * x[1] - z[1] * x[0];
+  const viewTransform = camera.viewTransform;
+  viewTransform.m11 = x[0], viewTransform.m12 = x[1], viewTransform.m13 = x[2], viewTransform.m14 = 0;
+  viewTransform.m21 = y[0], viewTransform.m22 = y[1], viewTransform.m23 = y[2], viewTransform.m24 = 0;
+  viewTransform.m31 = z[0], viewTransform.m32 = z[1], viewTransform.m33 = z[2], viewTransform.m34 = 0;
+  viewTransform.m41 = position[0], viewTransform.m42 = position[1], viewTransform.m43 = position[2], viewTransform.m44 = 1;
+  viewTransform.invertSelf();
+  viewMatrix[0] = viewTransform.m11, viewMatrix[1] = viewTransform.m12, viewMatrix[2] = viewTransform.m13, viewMatrix[3] = viewTransform.m14;
+  viewMatrix[4] = viewTransform.m21, viewMatrix[5] = viewTransform.m22, viewMatrix[6] = viewTransform.m23, viewMatrix[7] = viewTransform.m24;
+  viewMatrix[8] = viewTransform.m31, viewMatrix[9] = viewTransform.m32, viewMatrix[10] = viewTransform.m33, viewMatrix[11] = viewTransform.m34;
+  viewMatrix[12] = viewTransform.m41, viewMatrix[13] = viewTransform.m42, viewMatrix[14] = viewTransform.m43, viewMatrix[15] = viewTransform.m44;
+  for (value of viewMatrix) {
+    if (!Number.isFinite(value)) throw /* alloc */ new Error('Singular 3D transform');
+  }
+  const f = 1 / Math.tan(camera.fov * halfRadians), n = camera.near, r = camera.far;
+  projectionMatrix[0] = f / camera.aspect, projectionMatrix[1] = 0, projectionMatrix[2] = 0, projectionMatrix[3] = 0;
+  projectionMatrix[4] = 0, projectionMatrix[5] = f, projectionMatrix[6] = 0, projectionMatrix[7] = 0;
+  projectionMatrix[8] = 0, projectionMatrix[9] = 0, projectionMatrix[10] = r / (n - r), projectionMatrix[11] = -1;
+  projectionMatrix[12] = 0, projectionMatrix[13] = 0, projectionMatrix[14] = r * n / (n - r), projectionMatrix[15] = 0;
+  const projectionTransform = camera.projectionTransform;
+  projectionTransform.m11 = projectionMatrix[0], projectionTransform.m12 = projectionMatrix[1], projectionTransform.m13 = projectionMatrix[2], projectionTransform.m14 = projectionMatrix[3];
+  projectionTransform.m21 = projectionMatrix[4], projectionTransform.m22 = projectionMatrix[5], projectionTransform.m23 = projectionMatrix[6], projectionTransform.m24 = projectionMatrix[7];
+  projectionTransform.m31 = projectionMatrix[8], projectionTransform.m32 = projectionMatrix[9], projectionTransform.m33 = projectionMatrix[10], projectionTransform.m34 = projectionMatrix[11];
+  projectionTransform.m41 = projectionMatrix[12], projectionTransform.m42 = projectionMatrix[13], projectionTransform.m43 = projectionMatrix[14], projectionTransform.m44 = projectionMatrix[15];
+  const combined = camera.projectionViewTransform;
+  combined.m11 = projectionTransform.m11, combined.m12 = projectionTransform.m12, combined.m13 = projectionTransform.m13, combined.m14 = projectionTransform.m14;
+  combined.m21 = projectionTransform.m21, combined.m22 = projectionTransform.m22, combined.m23 = projectionTransform.m23, combined.m24 = projectionTransform.m24;
+  combined.m31 = projectionTransform.m31, combined.m32 = projectionTransform.m32, combined.m33 = projectionTransform.m33, combined.m34 = projectionTransform.m34;
+  combined.m41 = projectionTransform.m41, combined.m42 = projectionTransform.m42, combined.m43 = projectionTransform.m43, combined.m44 = projectionTransform.m44;
+  combined.multiplySelf(viewTransform);
+  projectionViewMatrix[0] = combined.m11, projectionViewMatrix[1] = combined.m12, projectionViewMatrix[2] = combined.m13, projectionViewMatrix[3] = combined.m14;
+  projectionViewMatrix[4] = combined.m21, projectionViewMatrix[5] = combined.m22, projectionViewMatrix[6] = combined.m23, projectionViewMatrix[7] = combined.m24;
+  projectionViewMatrix[8] = combined.m31, projectionViewMatrix[9] = combined.m32, projectionViewMatrix[10] = combined.m33, projectionViewMatrix[11] = combined.m34;
+  projectionViewMatrix[12] = combined.m41, projectionViewMatrix[13] = combined.m42, projectionViewMatrix[14] = combined.m43, projectionViewMatrix[15] = combined.m44;
+}

package/src/scene/updateLayerCount.js

@@ -0,0 +1,22 @@
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+import { underEntry } from './underEntry.js';
+import { renderLayerCount } from './renderLayerCount.js';
+
+export function updateLayerCount(event) {
+  const layer = event.target, scene = sceneByLayer.get(layer), status = scene._countStatus;
+  if (!layer._map) return;
+  if (event.type === 'add') underEntry(layer, status);
+  let count = 0, pending = 0, error = event.error, area;
+  if (Number.isFinite(event.loaded)) {
+    count = event.loaded;
+    pending = event.pending ?? 0;
+    error ||= event.errors?.[0];
+  } else {
+    for (area of scene._areas.values()) {
+      count += area.buildings ?? 0;
+      if (!area.done && !area.error) pending++;
+      error ||= area.error;
+    }
+  }
+  renderLayerCount(scene, count, pending, error);
+}

package/src/scene/updateWorldMatrix.js

@@ -0,0 +1,43 @@
+import { worldMatrixChanged } from './worldMatrixChanged.js';
+import { composeLocalTransform } from './composeLocalTransform.js';
+
+/** Compose parent*local matrices; a node.matrix overrides its position/rotation/scale. */
+
+export function updateWorldMatrix(node) {
+  const parent = node.parent;
+  const parentVersion = parent?._worldMatrixVersion || 0;
+  const matrixMode = Boolean(node.matrix);
+  let changed = node._worldParent !== parent || node._parentWorldVersion !== parentVersion ||
+    node._worldMatrixMode !== matrixMode;
+  let child;
+  changed = worldMatrixChanged(node, changed);
+  if (!changed) {
+    for (child of node.children) updateWorldMatrix(child);
+    return;
+  }
+  let local, world;
+  if (node.matrix) local = node.matrix;
+  else local = composeLocalTransform(node);
+  world = node._worldTransform ||= /* alloc */ new DOMMatrix();
+  if (local instanceof DOMMatrix) {
+    world.m11 = local.m11, world.m12 = local.m12, world.m13 = local.m13, world.m14 = local.m14;
+    world.m21 = local.m21, world.m22 = local.m22, world.m23 = local.m23, world.m24 = local.m24;
+    world.m31 = local.m31, world.m32 = local.m32, world.m33 = local.m33, world.m34 = local.m34;
+    world.m41 = local.m41, world.m42 = local.m42, world.m43 = local.m43, world.m44 = local.m44;
+  } else {
+    world.m11 = local[0], world.m12 = local[1], world.m13 = local[2], world.m14 = local[3];
+    world.m21 = local[4], world.m22 = local[5], world.m23 = local[6], world.m24 = local[7];
+    world.m31 = local[8], world.m32 = local[9], world.m33 = local[10], world.m34 = local[11];
+    world.m41 = local[12], world.m42 = local[13], world.m43 = local[14], world.m44 = local[15];
+  }
+  if (parent) world.preMultiplySelf(parent._worldTransform);
+  node.worldMatrix[0] = world.m11, node.worldMatrix[1] = world.m12, node.worldMatrix[2] = world.m13, node.worldMatrix[3] = world.m14;
+  node.worldMatrix[4] = world.m21, node.worldMatrix[5] = world.m22, node.worldMatrix[6] = world.m23, node.worldMatrix[7] = world.m24;
+  node.worldMatrix[8] = world.m31, node.worldMatrix[9] = world.m32, node.worldMatrix[10] = world.m33, node.worldMatrix[11] = world.m34;
+  node.worldMatrix[12] = world.m41, node.worldMatrix[13] = world.m42, node.worldMatrix[14] = world.m43, node.worldMatrix[15] = world.m44;
+  node._worldParent = parent;
+  node._parentWorldVersion = parentVersion;
+  node._worldMatrixMode = matrixMode;
+  node._worldMatrixVersion = (node._worldMatrixVersion || 0) + 1;
+  for (child of node.children) updateWorldMatrix(child);
+}

package/src/scene/worldMatrixChanged.js

@@ -0,0 +1,18 @@
+export function worldMatrixChanged(node, changed) {
+  let i, value;
+  if (node.matrix) {
+    const state = node._matrixState ||= /* alloc */ new Float64Array(16);
+    for (i = 0; i < 16; i++) {
+      if (state[i] !== node.matrix[i]) changed = true;
+      state[i] = node.matrix[i];
+    }
+  } else {
+    const state = node._transformState ||= /* alloc */ new Float64Array(9);
+    for (i = 0; i < 9; i++) {
+      value = i < 3 ? node.position[i] : i < 6 ? node.rotation[i - 3] : node.scale[i - 6];
+      if (state[i] !== value) changed = true;
+      state[i] = value;
+    }
+  }
+  return changed;
+}

package/src/shaders/materialBaseShader.js

@@ -0,0 +1,17 @@
+export function materialBaseShader(material, hasBase, hasRoof) {
+  return /* wgsl */ `
+      var normal = normalize(input.normal) * select(-1.0, 1.0, frontFacing);
+      let texel = ${hasBase ? 'textureSample(baseTexture, baseTextureSampler, input.uv)' : 'vec4<f32>(1.0)'};
+      let alpha = u.material.z * texel.a;
+      ${material.alphaMode === 'MASK' ? 'if (alpha < u.material.w) { discard; }' : ''}
+      ${material.alphaMode === 'BLEND' ? 'if (alpha < 0.01) { discard; }' : ''}
+      var base = ${material.vertexColors ? 'toLinear(min(input.color, vec3<f32>(1.0)))' : 'input.color'} *
+        ${material.baseTexture?.srgb ? 'texel.rgb' : 'toLinear(texel.rgb)'};
+      ${hasRoof ? /* wgsl */ `
+        if (input.roof > 0.0 && all(input.roofUv >= vec2<f32>(0.0)) &&
+          all(input.roofUv <= vec2<f32>(1.0))) {
+          let roof = textureSampleLevel(roofTexture, roofTextureSampler, input.roofUv, 0.0);
+          base = mix(base, toLinear(roof.rgb), roof.a * input.roof);
+        }
+      ` : ''}`;
+}

package/src/shaders/materialShaders.js

@@ -0,0 +1,130 @@
+import { defaultMaterial } from '../globals/defaultMaterial.js';
+import { textureBinding } from '../rendering/textureBinding.js';
+import { validateRoofMaterial } from './validateRoofMaterial.js';
+import { materialVertexShader } from './materialVertexShader.js';
+import { materialSurfaceShader } from './materialSurfaceShader.js';
+
+/** Material WGSL and texture bindings, without a GPU device or Leaflet layer. */
+export function materialShaders(material = defaultMaterial, sparkle = false, elevationWGSL = '') {
+  const hasBase = Boolean(material.baseTexture);
+  const hasMetal = Boolean(material.metalTexture);
+  const hasEmissive = Boolean(material.emissiveTexture);
+  const hasOcclusion = Boolean(material.occlusionTexture);
+  const hasRoof = Boolean(material.roofTexture || material.wallTexture);
+  validateRoofMaterial(material);
+  const hasTerrain = Boolean(material.terrain);
+  const textured = hasBase || hasMetal || hasEmissive || hasOcclusion || material.nightLight;
+  const vertex = materialVertexShader(material, sparkle, elevationWGSL, hasTerrain, textured, hasRoof);
+  const bindings = /* alloc */ [];
+  const baseBinding = textureBinding(bindings, 'baseTexture', hasBase);
+  const metalBinding = textureBinding(bindings, 'metalTexture', hasMetal);
+  const emissiveBinding = textureBinding(bindings, 'emissiveTexture', hasEmissive);
+  const occlusionBinding = textureBinding(bindings, 'occlusionTexture', hasOcclusion);
+  const roofBinding = textureBinding(bindings, 'roofTexture', hasRoof);
+  const fragment = /* wgsl */ `
+    struct Mesh {
+      worldMatrix: mat4x4<f32>,
+      baseColor: vec4<f32>,
+      material: vec4<f32>,
+      emissive: vec4<f32>,
+      terrain: vec4<f32>,
+      highlight: vec4<f32>,
+      cutout: vec4<f32>,
+    };
+    struct Frame {
+      viewMatrix: mat4x4<f32>,
+      projectionMatrix: mat4x4<f32>,
+      roofMatrix: mat4x4<f32>,
+      lightDirection: vec4<f32>,
+      skyDirection: vec4<f32>,
+      atmosphereTint: vec4<f32>,
+    };
+    struct Solar {
+      matrix: mat4x4<f32>,
+      params: vec4<f32>,
+    };
+    @group(0) @binding(0) var<uniform> u: Mesh;
+    @group(0) @binding(1) var<uniform> frame: Frame;
+    @group(1) @binding(0) var<uniform> solar: Solar;
+    @group(1) @binding(1) var shadowTexture: texture_depth_2d;
+    @group(1) @binding(2) var shadowSampler: sampler_comparison;
+    @group(1) @binding(3) var<storage, read> lightGrid: array<vec4<f32>>;
+    ${baseBinding}${metalBinding}${emissiveBinding}${occlusionBinding}${roofBinding}
+    struct FragmentInput {
+      @builtin(position) position: vec4<f32>,
+      @location(0) color: vec3<f32>,
+      @location(1) normal: vec3<f32>,
+      @location(2) viewPosition: vec3<f32>,
+      @location(6) shadowPosition: vec4<f32>,
+      @location(7) worldPosition: vec3<f32>,
+      ${sparkle ? '@location(8) localPosition: vec3<f32>,' : ''}
+      ${textured ? '@location(3) uv: vec2<f32>,' : ''}
+      ${hasRoof ? '@location(4) roofUv: vec2<f32>, @location(5) roof: f32,' : ''}
+    };
+    const PI: f32 = 3.14159265;
+    fn toLinear(c: vec3<f32>) -> vec3<f32> {
+      return select(c / 12.92, pow((c + vec3<f32>(0.055)) / 1.055, vec3<f32>(2.4)), c >= vec3<f32>(0.04045));
+    }
+    fn toSRGB(c: vec3<f32>) -> vec3<f32> {
+      return select(c * 12.92, 1.055 * pow(max(c, vec3<f32>(0.0)), vec3<f32>(1.0 / 2.4)) - vec3<f32>(0.055), c >= vec3<f32>(0.0031308));
+    }
+    fn sunVisibility(position: vec4<f32>) -> f32 {
+      let p = position.xyz / position.w;
+      let uv = vec2<f32>(p.x * 0.5 + 0.5, 0.5 - p.y * 0.5);
+      if (solar.params.x < 0.5 || any(uv < vec2<f32>(0.0)) || any(uv > vec2<f32>(1.0)) || p.z < 0.0 || p.z > 1.0) {
+        return 1.0;
+      }
+      return textureSampleCompareLevel(shadowTexture, shadowSampler, uv, p.z - 0.0003);
+    }
+    fn gridLighting(position: vec3<f32>, normal: vec3<f32>, offset: u32) -> vec3<f32> {
+      let grid = lightGrid[offset];
+      if (grid.w < 1.0) { return vec3<f32>(0.0); }
+      let cell = vec2<i32>(floor((position.xz - grid.xy) / grid.z));
+      if (any(cell < vec2<i32>(0)) || cell.x >= i32(grid.w) || cell.y >= i32(lightGrid[offset + 1u].x)) {
+        return vec3<f32>(0.0);
+      }
+      let header = lightGrid[offset + 2u + u32(cell.y) * u32(grid.w) + u32(cell.x)];
+      var light = vec3<f32>(0.0);
+      for (var i = 0u; i < u32(header.y); i++) {
+        let source = lightGrid[offset + u32(header.x) + i * 2u];
+        let colour = lightGrid[offset + u32(header.x) + i * 2u + 1u];
+        let delta = source.xyz - position;
+        let distance2 = max(dot(delta, delta), 1.0);
+        let falloff = max(0.0, 1.0 - distance2 / (source.w * source.w));
+        let lambert = max(0.0, dot(normal, delta / sqrt(distance2)));
+        light += toLinear(colour.rgb) * colour.w * lambert * falloff * falloff / distance2;
+      }
+      return light;
+    }
+    fn localLighting(position: vec3<f32>, normal: vec3<f32>) -> vec3<f32> {
+      if (frame.skyDirection.w <= 0.0) { return vec3<f32>(0.0); }
+      var light = gridLighting(position, normal, 0u);
+      let moving = u32(lightGrid[1].z);
+      if (moving > 0u) { light += gridLighting(position, normal, moving); }
+      return light * frame.skyDirection.w;
+    }
+    fn appearance(position: vec2<f32>) {
+      // Screen-door dissolve keeps opaque depth writes and avoids sorting whole buildings as glass.
+      let noise = fract(52.9829189 * fract(dot(floor(position), vec2<f32>(0.06711056, 0.00583715))));
+      if (u.highlight.w < 1.0 && noise >= u.highlight.w) { discard; }
+    }
+    @fragment fn fragmentMain(input: FragmentInput, @builtin(front_facing) frontFacing: bool) -> @location(0) vec4<f32> {
+      let cutoutDistance = distance(input.position.xy, u.cutout.xy);
+      if (select((cutoutDistance < u.cutout.z), (cutoutDistance >= u.cutout.z), u.cutout.w > 0.0)) { discard; }
+      ${material.nightLight ? /* wgsl */ `
+        if (input.uv.x <= 2.0) {
+        let radial = max(0.0, 1.0 - dot(input.uv, input.uv));
+        let alpha = radial * radial * frame.skyDirection.w * 0.65;
+        if (alpha < 0.005) { discard; }
+        appearance(input.position.xy);
+        return vec4<f32>(input.color, alpha);
+        }
+      ` : ''}
+      let sunlight = sunVisibility(input.shadowPosition);
+      let worldNormal = normalize(transpose(mat3x3<f32>(frame.viewMatrix[0].xyz, frame.viewMatrix[1].xyz, frame.viewMatrix[2].xyz)) * normalize(input.normal)) * select(-1.0, 1.0, frontFacing);
+      let artificial = localLighting(input.worldPosition, worldNormal);
+      ${materialSurfaceShader(material, sparkle, hasBase, hasMetal, hasEmissive, hasOcclusion, hasRoof)}
+    }
+  `;
+  return /* alloc */ { vertex, fragment, bindings, textured, hasTerrain };
+}

package/src/shaders/materialSurfaceShader.js

@@ -0,0 +1,47 @@
+import { materialBaseShader } from './materialBaseShader.js';
+
+export function materialSurfaceShader(material, sparkle, hasBase, hasMetal, hasEmissive, hasOcclusion, hasRoof) {
+  return material.unlit ? /* wgsl */ `
+        let rasterTexel = ${hasBase ? 'textureSample(baseTexture, baseTextureSampler, input.uv)' : 'vec4<f32>(input.color, 1.0)'};
+        return vec4<f32>(toSRGB(toLinear(rasterTexel.rgb) * (frame.atmosphereTint.rgb * (0.55 + 0.45 * sunlight) + artificial)), ${material.alphaMode === 'BLEND' ? 'u.material.z * rasterTexel.a' : '1.0'});
+      ` : /* wgsl */ `${materialBaseShader(material, hasBase, hasRoof)}
+      let mr = ${hasMetal ? 'textureSample(metalTexture, metalTextureSampler, input.uv)' : 'vec4<f32>(1.0)'};
+      let metal = clamp(u.material.x * mr.b, 0.0, 1.0);
+      let rough = clamp(u.material.y * mr.g, 0.08, 1.0);
+      let view = normalize(-input.viewPosition);
+      let halfVector = normalize(view + frame.lightDirection.xyz);
+      let nl = max(dot(normal, frame.lightDirection.xyz), 0.0) * frame.lightDirection.w * sunlight;
+      let nv = max(dot(normal, view), 0.001);
+      let nh = max(dot(normal, halfVector), 0.0);
+      let vh = max(dot(view, halfVector), 0.0);
+      let a2 = pow(rough, 4.0);
+      let d = a2 / max(PI * pow(nh * nh * (a2 - 1.0) + 1.0, 2.0), 0.0001);
+      let gv = nl * sqrt(nv * nv * (1.0 - a2) + a2);
+      let gl = nv * sqrt(nl * nl * (1.0 - a2) + a2);
+      let visibility = 0.5 / max(gv + gl, 0.0001);
+      let f0 = mix(vec3<f32>(0.04), base, metal);
+      let fresnel = f0 + (1.0 - f0) * pow(1.0 - vh, 5.0);
+      let specular = d * visibility * fresnel;
+      let diffuse = (1.0 - metal) * base / PI;
+      let sky = dot(normal, frame.skyDirection.xyz) * 0.5 + 0.5;
+      let ambient = mix(toLinear(vec3<f32>(0.455, 0.412, 0.322)), vec3<f32>(1.0), sky) * (2.0 / PI);
+      let ao = ${hasOcclusion ? 'mix(1.0, textureSample(occlusionTexture, occlusionTextureSampler, input.uv).r, u.emissive.w)' : '1.0'};
+      ${sparkle ? /* wgsl */ `
+        let lattice = (fract(input.localPosition / 2.5) - 0.5) * 2.5;
+        let pointGlow = (1.0 - smoothstep(0.16, 0.42, length(lattice))) * u.highlight.z;
+      ` : ''}
+      // Vertex colour components above 1 are self-lit (e.g. vehicle lamps): dim by day, bright at night.
+      let glow = ${sparkle ? 'vec3<f32>(3.0, 2.6, 1.8) * pointGlow +' : ''}${material.vertexColors
+      ? ' max(input.color - vec3<f32>(1.0), vec3<f32>(0.0)) * (0.3 + 5.0 * frame.skyDirection.w) +' : ''} u.emissive.rgb * ${hasEmissive
+      ? material.emissiveTexture.srgb
+        ? 'textureSample(emissiveTexture, emissiveTextureSampler, input.uv).rgb'
+        : 'toLinear(textureSample(emissiveTexture, emissiveTextureSampler, input.uv).rgb)'
+      : 'vec3<f32>(1.0)'};
+      var color = ambient * base * (1.0 - metal) * ao +
+        (diffuse + specular) * nl * toLinear(vec3<f32>(1.0, 0.937, 0.835)) * 3.0 + glow;
+      ${material.vertexColors ? 'color = base * (ambient + toLinear(vec3<f32>(1.0, 0.937, 0.835)) * (3.0 / PI) * nl) + glow;' : ''}
+      color = (color - glow) * frame.atmosphereTint.rgb + base * artificial * (1.0 - metal * 0.5) + glow;
+      appearance(input.position.xy);
+      return vec4<f32>(toSRGB(color), ${material.alphaMode === 'BLEND' ? 'alpha' : '1.0'});
+      `;
+}

package/src/shaders/materialVertexShader.js

@@ -0,0 +1,72 @@
+import { roofVertexShader } from './roofVertexShader.js';
+
+export function materialVertexShader(material, sparkle, elevationWGSL, hasTerrain, textured, hasRoof) {
+  const instanceOffset = material.instanced ? ' + input.instanceOffset.xyz' : '';
+  return /* wgsl */ `
+    struct Mesh {
+      worldMatrix: mat4x4<f32>,
+      baseColor: vec4<f32>,
+      material: vec4<f32>,
+      emissive: vec4<f32>,
+      terrain: vec4<f32>,
+      highlight: vec4<f32>,
+      cutout: vec4<f32>,
+    };
+    struct Frame {
+      viewMatrix: mat4x4<f32>,
+      projectionMatrix: mat4x4<f32>,
+      roofMatrix: mat4x4<f32>,
+      lightDirection: vec4<f32>,
+      skyDirection: vec4<f32>,
+      atmosphereTint: vec4<f32>,
+    };
+    @group(0) @binding(0) var<uniform> u: Mesh;
+    @group(0) @binding(1) var<uniform> frame: Frame;
+    struct Solar { matrix: mat4x4<f32>, params: vec4<f32> };
+    @group(1) @binding(0) var<uniform> solar: Solar;
+    ${hasTerrain ? /* wgsl */ `@group(0) @binding(2) var dem: texture_2d<f32>;${elevationWGSL}` : ''}
+    struct VertexInput {
+      @location(0) position: vec3<f32>,
+      @location(1) normal: vec3<f32>,
+      ${material.instanced ? '@location(4) instanceOffset: vec4<f32>,' : ''}
+      ${material.vertexColors ? '@location(2) color: vec3<f32>,' : ''}
+      ${textured ? '@location(3) uv: vec2<f32>,' : ''}
+    };
+    struct VertexOutput {
+      @builtin(position) position: vec4<f32>,
+      @location(0) color: vec3<f32>,
+      @location(1) normal: vec3<f32>,
+      @location(2) viewPosition: vec3<f32>,
+      @location(6) shadowPosition: vec4<f32>,
+      @location(7) worldPosition: vec3<f32>,
+      ${sparkle ? '@location(8) localPosition: vec3<f32>,' : ''}
+      ${textured ? '@location(3) uv: vec2<f32>,' : ''}
+      ${hasRoof ? '@location(4) roofUv: vec2<f32>, @location(5) roof: f32,' : ''}
+    };
+    @vertex fn vertexMain(input: VertexInput, @builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
+      var output: VertexOutput;
+      var position = input.position${instanceOffset};
+      ${hasTerrain ? 'position.y = elevation(u.terrain.xy + input.uv * u.terrain.z, u.terrain.w) - u.terrain.w;' : ''}
+      let featureVertex = f32(vertexIndex)${material.instanced ? ' + input.instanceOffset.w' : ''};
+      let highlighted = featureVertex >= u.highlight.x && featureVertex < u.highlight.y;
+      output.color = ${material.vertexColors
+      ? 'select(input.color, vec3<f32>(72.0 / 255.0, 217.0 / 255.0, 1.0), highlighted)'
+      : 'u.baseColor.rgb'};
+      // Inverse-transpose from cofactors; the camera view matrix is orthonormal.
+      let m = mat3x3<f32>(u.worldMatrix[0].xyz, u.worldMatrix[1].xyz, u.worldMatrix[2].xyz);
+      let normal = (cross(m[1], m[2]) * input.normal.x + cross(m[2], m[0]) * input.normal.y +
+        cross(m[0], m[1]) * input.normal.z) / determinant(m);
+      output.normal = (frame.viewMatrix * vec4<f32>(normal, 0.0)).xyz;
+      let world = u.worldMatrix * vec4<f32>(position, 1.0);
+      output.shadowPosition = solar.matrix * world;
+      output.worldPosition = world.xyz / world.w;
+      ${sparkle ? `output.localPosition = input.position${instanceOffset};` : ''}
+      let viewPosition = frame.viewMatrix * world;
+      output.viewPosition = viewPosition.xyz;
+      ${textured ? 'output.uv = input.uv;' : ''}
+      ${hasRoof ? roofVertexShader(material) : ''}
+      output.position = frame.projectionMatrix * viewPosition;
+      return output;
+    }
+  `;
+}

package/src/shaders/roofVertexShader.js

@@ -0,0 +1,9 @@
+export function roofVertexShader(material) {
+  const roofOpacity = Number(material.roofTexture ?? 0);
+  const wallOpacity = Number(material.wallTexture ?? 0);
+  return /* wgsl */ `
+        output.roofUv = (frame.roofMatrix * world).xz;
+        output.roof = select(0.0, select(${wallOpacity.toFixed(8)}, ${roofOpacity.toFixed(8)}, input.normal.y >= 0.5), ((${Boolean(material.roofTexture)} && input.normal.y >= 0.5) ||
+          (${Boolean(material.wallTexture)} && abs(input.normal.y) < 0.5)) && !highlighted);
+      `;
+}

package/src/shaders/validateRoofMaterial.js

@@ -0,0 +1,10 @@
+export function validateRoofMaterial(material) {
+  let name, value;
+  for (name of /* alloc */ ['roofTexture', 'wallTexture']) {
+    value = material[name];
+    if (value !== undefined && typeof value !== 'boolean' &&
+      (!Number.isFinite(value) || value < 0 || value > 1)) {
+      throw /* alloc */ new Error(`${name} must be a boolean or a finite number between 0 and 1`);
+    }
+  }
+}

package/src/shadows/bindSunlight.js

@@ -0,0 +1,21 @@
+import { sunBindGroup } from '../globals/sunBindGroup.js';
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+
+
+
+export function bindSunlight(layer) {
+  const sun = sceneByLayer.get(layer).renderer.sunlight;
+  sun.bindGroup = sceneByLayer.get(layer).renderer.device.createBindGroup((
+    sunBindGroup.layout = sun.layout,
+    sunBindGroup.entries[0].resource.buffer = sun.buffer,
+    sunBindGroup.entries[1].resource = sun.texture.createView(),
+    sunBindGroup.entries[2].resource = sun.sampler,
+    sunBindGroup.entries[3].resource.buffer = sun.lights,
+    sunBindGroup
+  ));
+  sunBindGroup.layout = null;
+  sunBindGroup.entries[0].resource.buffer = null;
+  sunBindGroup.entries[1].resource = null;
+  sunBindGroup.entries[2].resource = null;
+  sunBindGroup.entries[3].resource.buffer = null;
+}

package/src/shadows/drawShadowMeshes.js

@@ -0,0 +1,58 @@
+import { shadowPass } from '../globals/shadowPass.js';
+import { shadowBindGroup } from '../globals/shadowBindGroup.js';
+import { shadowOffsets } from '../globals/shadowOffsets.js';
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+
+
+export function drawShadowMeshes(backend, encoder, meshes) {
+  const renderer = sceneByLayer.get(backend).renderer, device = renderer.device, sun = renderer.sunlight;
+  const pass = encoder.beginRenderPass((
+    shadowPass.depthStencilAttachment.view = sun.texture.createView(),
+    shadowPass
+  ));
+  shadowPass.depthStencilAttachment.view = null;
+  let pipeline = sun.pipeline;
+  pass.setPipeline(pipeline);
+  pass.setBindGroup(1, sun.depthBindGroup);
+  let mesh, instances, nextPipeline, offset, attribute, index, range;
+  for (mesh of meshes) {
+    instances = mesh.geometry.attributes.instanceOffset;
+    nextPipeline = instances ? sun.instancePipeline : sun.pipeline;
+    if (nextPipeline !== pipeline) {
+      pipeline = nextPipeline;
+      pass.setPipeline(pipeline);
+    }
+    offset = renderer.uniformSlot++ * 256;
+    renderer.uniformData.set(mesh.worldMatrix, offset / 4);
+    renderer.uniformData[offset / 4 + 35] = mesh._appearance ?? 1;
+    if (mesh._shadowBuffer !== renderer.uniformBuffer) {
+      mesh._shadowBuffer = renderer.uniformBuffer;
+      mesh._shadowBindGroup = device.createBindGroup((
+        shadowBindGroup.layout = sun.meshLayout,
+        shadowBindGroup.entries[0].resource.buffer = renderer.uniformBuffer,
+        shadowBindGroup
+      ));
+      shadowBindGroup.layout = null;
+      shadowBindGroup.entries[0].resource.buffer = null;
+    }
+    for (attribute of Object.values(mesh.geometry.attributes)) {
+      if (attribute.needsUpdate) {
+        device.queue.writeBuffer(attribute.buffer, 0, attribute.data);
+        attribute.needsUpdate = false;
+      }
+    }
+    pass.setBindGroup(0, mesh._shadowBindGroup, (
+      shadowOffsets[0] = offset,
+      shadowOffsets
+    ));
+
+    pass.setVertexBuffer(0, mesh.geometry.attributes.position.buffer);
+    if (instances) pass.setVertexBuffer(1, instances.buffer);
+    index = mesh.geometry.attributes.index, range = mesh.geometry.drawRange;
+    if (index) {
+      pass.setIndexBuffer(index.buffer, index.indexFormat);
+      pass.drawIndexed(range.count, instances?.count ?? 1, range.start, 0, 0);
+    } else pass.draw(range.count, instances?.count ?? 1, range.start, 0);
+  }
+  pass.end();
+}