leaflet-city-mapper 0.0.3 → 0.0.4

package/src/scene/updateWorldMatrix.js

@@ -1,3 +1,6 @@
+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) {
@@ -6,40 +9,32 @@ export function updateWorldMatrix(node) {
   const matrixMode = Boolean(node.matrix);
   let changed = node._worldParent !== parent || node._parentWorldVersion !== parentVersion ||
     node._worldMatrixMode !== matrixMode;
-  let i, value, child;
-  if (node.matrix) {
-    const state = node._matrixState ||= 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 ||= 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;
-    }
-  }
+  let child;
+  changed = worldMatrixChanged(node, changed);
   if (!changed) {
     for (child of node.children) updateWorldMatrix(child);
     return;
   }
-  let local;
+  let local, world;
   if (node.matrix) local = node.matrix;
-  else {
-    const degrees = 180 / Math.PI;
-    const matrix = new DOMMatrix().translate(...node.position);
-    // Node rotations use YXZ, as did the previous renderer.
-    matrix.rotateAxisAngleSelf(0, 1, 0, node.rotation[1] * degrees);
-    matrix.rotateAxisAngleSelf(1, 0, 0, node.rotation[0] * degrees);
-    matrix.rotateAxisAngleSelf(0, 0, 1, node.rotation[2] * degrees);
-    local = matrix.scale(...node.scale).toFloat64Array();
+  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];
   }
-  const world = parent
-    ? new DOMMatrix(parent.worldMatrix).multiply(new DOMMatrix(local)).toFloat64Array()
-    : local;
-  for (i = 0; i < 16; i++) node.worldMatrix[i] = world[i];
+  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;

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

@@ -1,84 +1,21 @@
+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 = {}, sparkle = false, elevationWGSL = '') {
+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);
+  const hasRoof = Boolean(material.roofTexture || material.wallTexture);
+  validateRoofMaterial(material);
   const hasTerrain = Boolean(material.terrain);
   const textured = hasBase || hasMetal || hasEmissive || hasOcclusion || material.nightLight;
-  const vertex = /* wgsl */ `
-    struct Mesh {
-      worldMatrix: mat4x4<f32>,
-      baseColor: vec4<f32>,
-      material: vec4<f32>,
-      emissive: vec4<f32>,
-      terrain: vec4<f32>,
-      highlight: 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${material.instanced ? ' + input.instanceOffset.xyz' : ''};
-      ${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${material.instanced ? ' + input.instanceOffset.xyz' : ''};` : ''}
-      let viewPosition = frame.viewMatrix * world;
-      output.viewPosition = viewPosition.xyz;
-      ${textured ? 'output.uv = input.uv;' : ''}
-      ${hasRoof ? /* wgsl */ `
-        output.roofUv = (frame.roofMatrix * world).xz;
-        output.roof = select(0.0, 1.0, input.normal.y >= 0.5 && !highlighted);
-      ` : ''}
-      output.position = frame.projectionMatrix * viewPosition;
-      return output;
-    }
-  `;
-  const bindings = [];
+  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);
@@ -92,6 +29,7 @@ export function materialShaders(material = {}, sparkle = false, elevationWGSL =
       emissive: vec4<f32>,
       terrain: vec4<f32>,
       highlight: vec4<f32>,
+      cutout: vec4<f32>,
     };
     struct Frame {
       viewMatrix: mat4x4<f32>,
@@ -171,6 +109,8 @@ export function materialShaders(material = {}, sparkle = false, elevationWGSL =
       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));
@@ -183,64 +123,8 @@ export function materialShaders(material = {}, sparkle = false, elevationWGSL =
       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);
-      ${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 */ `
-      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.5 && 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);
-        }
-      ` : ''}
-      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'});
-      `}
+      ${materialSurfaceShader(material, sparkle, hasBase, hasMetal, hasEmissive, hasOcclusion, hasRoof)}
     }
   `;
-  return { vertex, fragment, bindings, textured, hasTerrain };
+  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

@@ -1,12 +1,21 @@
+import { sunBindGroup } from '../globals/sunBindGroup.js';
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+
+
 
 export function bindSunlight(layer) {
-  const sun = layer.renderer.sunlight;
-  sun.bindGroup = layer.renderer.device.createBindGroup({
-    layout: sun.layout, entries: [
-      { binding: 0, resource: { buffer: sun.buffer } },
-      { binding: 1, resource: sun.texture.createView() },
-      { binding: 2, resource: sun.sampler },
-      { binding: 3, resource: { buffer: sun.lights } },
-    ]
-  });
+  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

@@ -1,12 +1,16 @@
+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 = backend.renderer, device = renderer.device, sun = renderer.sunlight;
-  const pass = encoder.beginRenderPass({
-    colorAttachments: [],
-    depthStencilAttachment: {
-      view: sun.texture.createView(), depthClearValue: 1,
-      depthLoadOp: 'clear', depthStoreOp: 'store'
-    },
-  });
+  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);
@@ -23,11 +27,13 @@ export function drawShadowMeshes(backend, encoder, meshes) {
     renderer.uniformData[offset / 4 + 35] = mesh._appearance ?? 1;
     if (mesh._shadowBuffer !== renderer.uniformBuffer) {
       mesh._shadowBuffer = renderer.uniformBuffer;
-      mesh._shadowBindGroup = device.createBindGroup({
-        layout: sun.meshLayout, entries: [
-          { binding: 0, resource: { buffer: renderer.uniformBuffer, size: 144 } },
-        ]
-      });
+      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) {
@@ -35,7 +41,11 @@ export function drawShadowMeshes(backend, encoder, meshes) {
         attribute.needsUpdate = false;
       }
     }
-    pass.setBindGroup(0, mesh._shadowBindGroup, [offset]);
+    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;

package/src/shadows/ensureShadowPipeline.js

@@ -1,24 +1,37 @@
+import { shadowMeshLayout } from '../globals/shadowMeshLayout.js';
+import { shadowDepthLayout } from '../globals/shadowDepthLayout.js';
+import { depthBindGroup as sharedDepthBindGroup } from '../globals/depthBindGroup.js';
+import { shadowShader } from '../globals/shadowShader.js';
+import { shadowPipeline } from '../globals/shadowPipeline.js';
+import { shadowPipelineLayout } from '../globals/shadowPipelineLayout.js';
+import { shadowInstanceLayouts } from '../globals/shadowInstanceLayouts.js';
+import { shadowLayouts } from '../globals/shadowLayouts.js';
+
 export function ensureShadowPipeline(device, sun, instanced = false) {
   const key = instanced ? 'instancePipeline' : 'pipeline';
   if (!sun[key]) {
     if (!sun.meshLayout) {
-      sun.meshLayout = device.createBindGroupLayout({
-        entries: [
-          { binding: 0, visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: { type: 'uniform', hasDynamicOffset: true } },
-        ]
-      });
+      sun.meshLayout = device.createBindGroupLayout((
+        shadowMeshLayout.entries[0].visibility = GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+        shadowMeshLayout
+      ));
+
       // Do not bind the sampled depth texture while it is a render attachment.
-      sun.depthLayout = device.createBindGroupLayout({
-        entries: [
-          { binding: 0, visibility: GPUShaderStage.VERTEX, buffer: { type: 'uniform' } },
-        ]
-      });
-      sun.depthBindGroup = device.createBindGroup({
-        layout: sun.depthLayout, entries: [{ binding: 0, resource: { buffer: sun.buffer } }],
-      });
+      sun.depthLayout = device.createBindGroupLayout((
+        shadowDepthLayout.entries[0].visibility = GPUShaderStage.VERTEX,
+        shadowDepthLayout
+      ));
+
+      sun.depthBindGroup = device.createBindGroup((
+        sharedDepthBindGroup.layout = sun.depthLayout,
+        sharedDepthBindGroup.entries[0].resource.buffer = sun.buffer,
+        sharedDepthBindGroup
+      ));
+      sharedDepthBindGroup.layout = null;
+      sharedDepthBindGroup.entries[0].resource.buffer = null;
     }
-    const shader = device.createShaderModule({
-      code: /* wgsl */ `
+    const shader = device.createShaderModule((
+      shadowShader.code = /* wgsl */`
       struct Mesh { world: mat4x4<f32>, padding: array<vec4<f32>, 4>, highlight: vec4<f32> };
       @group(0) @binding(0) var<uniform> mesh: Mesh;
       @group(1) @binding(0) var<uniform> matrix: mat4x4<f32>;
@@ -29,25 +42,23 @@ export function ensureShadowPipeline(device, sun, instanced = false) {
         let noise = fract(52.9829189 * fract(dot(floor(position.xy), vec2<f32>(0.06711056, 0.00583715))));
         if (mesh.highlight.w < 1.0 && noise >= mesh.highlight.w) { discard; }
       }
-    ` });
-    const buffers = [
-      { arrayStride: 12, attributes: [{ shaderLocation: 0, offset: 0, format: 'float32x3' }] },
-    ];
-    if (instanced) buffers.push({
-      arrayStride: 16, stepMode: 'instance',
-      attributes: [{ shaderLocation: 4, offset: 0, format: 'float32x4' }],
-    });
-    sun[key] = device.createRenderPipeline({
-      layout: device.createPipelineLayout({ bindGroupLayouts: [sun.meshLayout, sun.depthLayout] }),
-      vertex: {
-        module: shader, entryPoint: 'main', buffers
-      },
-      fragment: { module: shader, entryPoint: 'fragmentMain', targets: [] },
-      primitive: { topology: 'triangle-list', cullMode: 'none' },
-      depthStencil: {
-        format: 'depth32float', depthWriteEnabled: true, depthCompare: 'less',
-        depthBias: 2, depthBiasSlopeScale: 2
-      },
-    });
+    `,
+      shadowShader
+    ));
+    shadowShader.code = null;
+    const buffers = instanced ? shadowInstanceLayouts : shadowLayouts;
+    sun[key] = device.createRenderPipeline((
+      shadowPipeline.layout = device.createPipelineLayout((shadowPipelineLayout.bindGroupLayouts[0] = sun.meshLayout, shadowPipelineLayout.bindGroupLayouts[1] = sun.depthLayout, shadowPipelineLayout)),
+      shadowPipeline.vertex.module = shader,
+      shadowPipeline.vertex.buffers = buffers,
+      shadowPipeline.fragment.module = shader,
+      shadowPipeline
+    ));
+    shadowPipelineLayout.bindGroupLayouts[0] = null;
+    shadowPipelineLayout.bindGroupLayouts[1] = null;
+    shadowPipeline.layout = null;
+    shadowPipeline.vertex.module = null;
+    shadowPipeline.vertex.buffers = null;
+    shadowPipeline.fragment.module = null;
   }
 }

package/src/shadows/meshShadowBounds.js

@@ -0,0 +1,24 @@
+export function meshShadowBounds(mesh, bounds, matrix) {
+  let cached = mesh._shadowBounds;
+  if (!cached || cached.version !== mesh._worldMatrixVersion || cached.bounds !== bounds) {
+    cached ||= mesh._shadowBounds = /* alloc */ {
+      min: /* alloc */ [Infinity, Infinity, Infinity],
+      max: /* alloc */ [-Infinity, -Infinity, -Infinity],
+    };
+    cached.version = mesh._worldMatrixVersion;
+    cached.bounds = bounds;
+    cached.min.fill(Infinity); cached.max.fill(-Infinity);
+    let i, x, y, z, w, axis, value;
+    for (i = 0; i < 8; i++) {
+      x = i & 1 ? bounds.max[0] : bounds.min[0], y = i & 2 ? bounds.max[1] : bounds.min[1];
+      z = i & 4 ? bounds.max[2] : bounds.min[2];
+      w = matrix[3] * x + matrix[7] * y + matrix[11] * z + matrix[15];
+      for (axis = 0; axis < 3; axis++) {
+        value = (matrix[axis] * x + matrix[axis + 4] * y + matrix[axis + 8] * z + matrix[axis + 12]) / w;
+        cached.min[axis] = Math.min(cached.min[axis], value);
+        cached.max[axis] = Math.max(cached.max[axis], value);
+      }
+    }
+  }
+  return cached;
+}