leaflet-city-mapper 0.0.1 → 0.0.2

package/src/utils/{picking.js → intersectMeshes.js}

@@ -1,119 +1,121 @@
-import { computeBounds } from './geometry.js';
-
-/** Nearest triangle hit per mesh, sorted by world-space distance. */
-export function intersectMeshes(ray, meshes, night = 0) {
-  const hits = [],
-             a = [0, 0, 0],
-             b = [0, 0, 0],
-             c = [0, 0, 0],
-           sub = (a, b) => a.map((v, i) => v - b[i]),
-         cross = (a, b) => [a[1] * b[2] - a[2] * b[1], a[2] * b[0] - a[0] * b[2], a[0] * b[1] - a[1] * b[0]],
-          dot  = (a, b) => a.reduce((sum, v, i) => sum + v * b[i], 0);
-  for (const mesh of meshes) {
-    // Test in mesh-local space; compare distances only after returning to shared world space.
-    const inverse       = new DOMMatrix(mesh.worldMatrix).inverse();
-    const inverseValues = inverse.toFloat64Array();
-    if (![...inverseValues].every(Number.isFinite)) {
-      throw new Error('Singular 3D transform');
-    }
-    const localOrigin    = new DOMPoint(...ray.origin, 1).matrixTransform(inverse);
-    const origin         = [
-      localOrigin.x / localOrigin.w,
-      localOrigin.y / localOrigin.w,
-      localOrigin.z / localOrigin.w
-    ];
-    const localDirection  = new DOMPoint(...ray.direction, 0).matrixTransform(inverse);
-    const direction       = [
-      localDirection.x,
-      localDirection.y,
-      localDirection.z
-    ];
-    const directionLength = Math.hypot(...direction) || 1;
-    direction[0] /= directionLength; direction[1] /= directionLength; direction[2] /= directionLength;
-    // AABB slab test reuses the same local ray as the triangle test.
-    if (!mesh.geometry.bounds) {
-      computeBounds(mesh.geometry);
-    }
-    let near = 0, far = Infinity;
-    for (let i = 0; i < 3; i++) {
-      if (Math.abs(direction[i]) < 1e-12) {
-        if (origin[i] < mesh.geometry.bounds.min[i] || origin[i] > mesh.geometry.bounds.max[i]) {
-          far = -Infinity;
-          break;
-        }
-      } else {
-        const a = (mesh.geometry.bounds.min[i] - origin[i]) / direction[i],
-              b = (mesh.geometry.bounds.max[i] - origin[i]) / direction[i];
-        near = Math.max(near, Math.min(a, b));
-        far = Math.min(far, Math.max(a, b));
-      }
-    }
-    if (far < near) {
-      continue;
-    }
-    const { position, index } = mesh.geometry.attributes;
-    let closest = Infinity, faceIndex;
-    for (let i = 0; i < (index?.count || position.count); i += 3) {
-      const ai = (index ? index.data[i] : i) * position.size;
-      const bi = (index ? index.data[i + 1] : i + 1) * position.size;
-      const ci = (index ? index.data[i + 2] : i + 2) * position.size;
-      a[0] = position.data[ai];
-      a[1] = position.data[ai + 1];
-      a[2] = position.data[ai + 2];
-      b[0] = position.data[bi];
-      b[1] = position.data[bi + 1];
-      b[2] = position.data[bi + 2];
-      c[0] = position.data[ci];
-      c[1] = position.data[ci + 1];
-      c[2] = position.data[ci + 2];
-      // Moller-Trumbore: barycentric triangle coordinates and local ray distance.
-      const e = sub(b, a),
-            f = sub(c, a),
-            p = cross(direction, f),
-            det = dot(e, p);
-      if (mesh.program.cullFace !== null ? det < 1e-9 : Math.abs(det) < 1e-9) {
-        continue;
-      }
-      const t = sub(origin, a),
-            u = dot(t, p) / det;
-      if (u < 0 || u > 1) {
-        continue;
-      }
-      const q = cross(t, e),
-            v = dot(direction, q) / det;
-      if (v < 0 || u + v > 1) {
-        continue;
-      }
-      if (mesh.program.nightLight) {
-        const uv = mesh.geometry.attributes.uv.data;
-        const ids = index ? [index.data[i], index.data[i + 1], index.data[i + 2]] : [i, i + 1, i + 2];
-        const x = uv[ids[0] * 2] * (1 - u - v) + uv[ids[1] * 2] * u + uv[ids[2] * 2] * v;
-        const y = uv[ids[0] * 2 + 1] * (1 - u - v) + uv[ids[1] * 2 + 1] * u + uv[ids[2] * 2 + 1] * v;
-        if (x <= 2 && (!night || x * x + y * y > 0.9)) continue;
-      }
-      const distance = dot(f, q) / det;
-      if (distance > 0 && distance < closest) {
-        closest = distance; faceIndex = i / 3;
-      }
-    }
-    if (faceIndex === undefined) continue;
-    const point = new DOMPoint(
-      direction[0] * closest + origin[0],
-      direction[1] * closest + origin[1],
-      direction[2] * closest + origin[2],
-      1
-    ).matrixTransform(new DOMMatrix(mesh.worldMatrix));
-    const worldPoint = [point.x / point.w, point.y / point.w, point.z / point.w];
-    hits.push({
-      faceIndex,
-      object:     mesh,
-      point:      worldPoint,
-      distance:   Math.hypot(
-        worldPoint[0] - ray.origin[0],
-        worldPoint[1] - ray.origin[1],
-        worldPoint[2] - ray.origin[2]
-      )
-    });
-  }
-  return hits.sort((a, b) => a.distance - b.distance);
-}
+import { computeBounds } from "./computeBounds.js";
+
+const sub = (a, b) => a.map((v, i) => v - b[i]);
+const cross = (a, b) => [a[1] * b[2] - a[2] * b[1], a[2] * b[0] - a[0] * b[2], a[0] * b[1] - a[1] * b[0]];
+const dot = (a, b) => a.reduce((sum, v, i) => sum + v * b[i], 0);
+
+/** Nearest triangle hit per mesh, sorted by world-space distance. */
+
+export function intersectMeshes(ray, meshes, night = 0) {
+  const hits = [],
+  a = [0, 0, 0],
+  b = [0, 0, 0],
+  c = [0, 0, 0];
+  for (const mesh of meshes) {
+    // Test in mesh-local space; compare distances only after returning to shared world space.
+    const inverse = new DOMMatrix(mesh.worldMatrix).inverse();
+    const inverseValues = inverse.toFloat64Array();
+    if (![...inverseValues].every(Number.isFinite)) {
+      throw new Error('Singular 3D transform');
+    }
+    const localOrigin = new DOMPoint(...ray.origin, 1).matrixTransform(inverse);
+    const origin = [
+      localOrigin.x / localOrigin.w,
+      localOrigin.y / localOrigin.w,
+      localOrigin.z / localOrigin.w
+    ];
+    const localDirection = new DOMPoint(...ray.direction, 0).matrixTransform(inverse);
+    const direction = [
+      localDirection.x,
+      localDirection.y,
+      localDirection.z
+    ];
+    const directionLength = Math.hypot(...direction) || 1;
+    direction[0] /= directionLength;
+    direction[1] /= directionLength;
+    direction[2] /= directionLength;
+    // AABB slab test reuses the same local ray as the triangle test.
+    if (!mesh.geometry.bounds) {
+      computeBounds(mesh.geometry);
+    }
+    let near = 0, far = Infinity;
+    for (let i = 0; i < 3; i++) {
+      if (Math.abs(direction[i]) < 1e-12) {
+        if (origin[i] < mesh.geometry.bounds.min[i] || origin[i] > mesh.geometry.bounds.max[i]) {
+          far = -Infinity;
+          break;
+        }
+      } else {
+        const a = (mesh.geometry.bounds.min[i] - origin[i]) / direction[i], b = (mesh.geometry.bounds.max[i] - origin[i]) / direction[i];
+        near = Math.max(near, Math.min(a, b));
+        far = Math.min(far, Math.max(a, b));
+      }
+    }
+    if (far < near) {
+      continue;
+    }
+    const { position, index } = mesh.geometry.attributes;
+    let closest = Infinity, faceIndex;
+    for (let i = 0; i < (index?.count || position.count); i += 3) {
+      const ai = (index ? index.data[i] : i) * position.size;
+      const bi = (index ? index.data[i + 1] : i + 1) * position.size;
+      const ci = (index ? index.data[i + 2] : i + 2) * position.size;
+      a[0] = position.data[ai];
+      a[1] = position.data[ai + 1];
+      a[2] = position.data[ai + 2];
+      b[0] = position.data[bi];
+      b[1] = position.data[bi + 1];
+      b[2] = position.data[bi + 2];
+      c[0] = position.data[ci];
+      c[1] = position.data[ci + 1];
+      c[2] = position.data[ci + 2];
+      // Moller-Trumbore: barycentric triangle coordinates and local ray distance.
+      const e = sub(b, a),
+            f = sub(c, a),
+            p = cross(direction, f),
+            det = dot(e, p);
+      if (mesh.program.cullMode === 'none' || mesh.program.cullFace === null
+        ? Math.abs(det) < 1e-9 : det < 1e-9) {
+        continue;
+      }
+      const t = sub(origin, a), u = dot(t, p) / det;
+      if (u < 0 || u > 1) {
+        continue;
+      }
+      const q = cross(t, e), v = dot(direction, q) / det;
+      if (v < 0 || u + v > 1) {
+        continue;
+      }
+      if (mesh.program.nightLight) {
+        const uv = mesh.geometry.attributes.uv.data;
+        const ids = index ? [index.data[i], index.data[i + 1], index.data[i + 2]] : [i, i + 1, i + 2];
+        const x = uv[ids[0] * 2] * (1 - u - v) + uv[ids[1] * 2] * u + uv[ids[2] * 2] * v;
+        const y = uv[ids[0] * 2 + 1] * (1 - u - v) + uv[ids[1] * 2 + 1] * u + uv[ids[2] * 2 + 1] * v;
+        if (x <= 2 && (!night || x * x + y * y > 0.9)) continue;
+      }
+      const distance = dot(f, q) / det;
+      if (distance > 0 && distance < closest) {
+        closest = distance; faceIndex = i / 3;
+      }
+    }
+    if (faceIndex === undefined) continue;
+    const point = new DOMPoint(
+      direction[0] * closest + origin[0],
+      direction[1] * closest + origin[1],
+      direction[2] * closest + origin[2],
+      1
+    ).matrixTransform(new DOMMatrix(mesh.worldMatrix));
+    const worldPoint = [point.x / point.w, point.y / point.w, point.z / point.w];
+    hits.push({
+      faceIndex,
+      object: mesh,
+      point: worldPoint,
+      distance: Math.hypot(
+        worldPoint[0] - ray.origin[0],
+        worldPoint[1] - ray.origin[1],
+        worldPoint[2] - ray.origin[2]
+      )
+    });
+  }
+  return hits.sort((a, b) => a.distance - b.distance);
+}

package/src/utils/isClockWise.js

@@ -0,0 +1,12 @@
+/**
+ * @returns {boolean} Whether the `{x, y}` points are in clockwise order.
+ */
+
+export function isClockWise(points) {
+  let area = 0;
+  for (let i = 0; i < points.length; i++) {
+    const a = points[i], b = points[(i + 1) % points.length];
+    area += a.x * b.y - b.x * a.y;
+  }
+  return area < 0;
+}

package/src/utils/lampPostGeometry.js

@@ -0,0 +1,26 @@
+import { parseColor } from "./parseColor.js";
+
+/** Schematic support and lamp head; wall-mounted fixtures do not get an invented pole. */
+
+export function lampPostGeometry(point, style, addTriangle) {
+  const color = parseColor(0x50565a), radius = style.poleRadius;
+  if (!Number.isFinite(radius) || radius <= 0) {
+    throw new Error('Invalid lamp pole radius');
+  }
+  const ring = r => Array.from({ length: 6 }, (_, i) => ({
+    x: point.x + Math.cos(i * Math.PI / 3) * r,
+    y: point.y + Math.sin(i * Math.PI / 3) * r, ground: point.ground, uv: [3, 3],
+  }));
+  const center = { ...point, uv: [3, 3] };
+  for (const [r, low, high] of [[radius, 0, style.top], [radius * 2.5, style.top - 0.25, style.top + 0.15]]) {
+    const points = ring(r);
+    for (let i = 0; i < 6; i++) {
+      const a = points[i], b = points[(i + 1) % 6], angle = (i + 0.5) * Math.PI / 3;
+      const nx = Math.cos(angle), nz = -Math.sin(angle);
+      addTriangle(a, low, b, low, b, high, nx, 0, nz, color);
+      addTriangle(a, low, b, high, a, high, nx, 0, nz, color);
+      addTriangle(center, high, a, high, b, high, 0, 1, 0, color);
+      addTriangle(center, low, b, low, a, low, 0, -1, 0, color);
+    }
+  }
+}

package/src/utils/lightGeometry.js

@@ -0,0 +1,22 @@
+import { parseColor } from "./parseColor.js";
+
+/** Three crossed emitter discs; illumination itself is evaluated on receiving surfaces. */
+
+export function lightGeometry(point, style, addTriangle) {
+  if (!Number.isFinite(style.lightRadius) || style.lightRadius <= 0) throw new Error('Invalid light radius');
+  const color = parseColor(style.color);
+  const quad = (a, b, c, d, height, normal) => {
+    addTriangle(a, height, b, height, c, height, ...normal, color);
+    addTriangle(a, height, c, height, d, height, ...normal, color);
+  };
+  const r = 0.65;
+  const emitter = (u, v, axis) => ({
+    x: point.x + (axis === 2 ? 0 : u * r),
+    y: point.y + (axis === 1 ? 0 : axis === 2 ? u * r : v * r),
+    ground: point.ground + (axis === 0 ? 0 : v * r), uv: [u, v],
+  });
+  for (let axis = 0; axis < 3; axis++) {
+    quad(emitter(-1, -1, axis), emitter(1, -1, axis), emitter(1, 1, axis), emitter(-1, 1, axis),
+      style.top, axis === 0 ? [0, 1, 0] : axis === 1 ? [0, 0, 1] : [1, 0, 0]);
+  }
+}

package/src/utils/{lighting.js → lightGrid.js}

@@ -1,51 +1,50 @@
-/** Pack world-space point lights into the shader's spatial grid. */
-export function lightGrid(packed, maxBytes) {
-  const count = packed.reduce((sum, values) => sum + values.length / 8, 0), cellSize = 32;
-  let data = new Float32Array(8);
-  if (count) {
-    let minX = Infinity, minZ = Infinity, maxX = -Infinity, maxZ = -Infinity;
-    for (const values of packed) for (let i = 0; i < values.length; i += 8) {
-      minX = Math.min(minX, values[i] - values[i + 3]); maxX = Math.max(maxX, values[i] + values[i + 3]);
-      minZ = Math.min(minZ, values[i + 2] - values[i + 3]); maxZ = Math.max(maxZ, values[i + 2] + values[i + 3]);
-    }
-    const columns = Math.ceil((maxX - minX) / cellSize) + 1, rows = Math.ceil((maxZ - minZ) / cellSize) + 1;
-    const each = callback => {
-      for (const values of packed) for (let i = 0; i < values.length; i += 8) {
-        const radius = values[i + 3], x = values[i] - minX, z = values[i + 2] - minZ;
-        for (let y = Math.floor((z - radius) / cellSize); y <= Math.floor((z + radius) / cellSize); y++) {
-          for (let c = Math.floor((x - radius) / cellSize); c <= Math.floor((x + radius) / cellSize); c++) callback(y * columns + c, values, i);
-        }
-      }
-    };
-    // Counting sort: count the lights of each cell, then fill each cell's slice.
-    const counts = new Uint32Array(columns * rows), next = new Uint32Array(columns * rows);
-    each(key => counts[key]++);
-    const entries = counts.reduce((sum, value) => sum + value, 0);
-    const length = (2 + columns * rows + entries * 2) * 4;
-    if (length * 4 > maxBytes) throw new Error('Streetlight grid exceeds GPU storage limit');
-    data = new Float32Array(length);
-    data.set([minX, minZ, cellSize, columns, rows, count, 0, 0]);
-    let offset = 2 + columns * rows;
-    for (let key = 0; key < counts.length; key++) if (counts[key]) {
-      data[(2 + key) * 4] = next[key] = offset;
-      data[(2 + key) * 4 + 1] = counts[key];
-      offset += counts[key] * 2;
-    }
-    each((key, values, i) => {
-      for (let j = 0, o = next[key] * 4; j < 8; j++) data[o + j] = values[i + j];
-      next[key] += 2;
-    });
-  }
-  return { data, count };
-}
-
-/** World-space [x, y, z, radius, r, g, b, intensity] for one mesh's point lights. */
-export function worldLights(lights, m) {
-  const values = new Float32Array(lights.length * 8);
-  lights.forEach(({ position: [x, y, z], radius, color, flux }, i) => {
-    const w = m[3] * x + m[7] * y + m[11] * z + m[15];
-    values.set([(m[0] * x + m[4] * y + m[8] * z + m[12]) / w, (m[1] * x + m[5] * y + m[9] * z + m[13]) / w,
-      (m[2] * x + m[6] * y + m[10] * z + m[14]) / w, radius, ...color, flux / (4 * Math.PI) * 0.03], i * 8);
-  });
-  return values;
-}
+/** Pack world-space point lights into the shader's spatial grid. */
+export function lightGrid(packed, maxBytes) {
+  const count = packed.reduce((sum, values) => sum + values.length / 8, 0), cellSize = 32;
+  let data = new Float32Array(8);
+  if (count) {
+    let minX = Infinity, minZ = Infinity, maxX = -Infinity, maxZ = -Infinity;
+    for (const values of packed) for (let i = 0; i < values.length; i += 8) {
+      minX = Math.min(minX, values[i] - values[i + 3]);
+      maxX = Math.max(maxX, values[i] + values[i + 3]);
+      minZ = Math.min(minZ, values[i + 2] - values[i + 3]);
+      maxZ = Math.max(maxZ, values[i + 2] + values[i + 3]);
+    }
+    const columns = Math.ceil((maxX - minX) / cellSize) + 1,
+             rows = Math.ceil((maxZ - minZ) / cellSize) + 1;
+    const each = callback => {
+      for (const values of packed) for (let i = 0; i < values.length; i += 8) {
+        const radius = values[i + 3],
+                   x = values[i] - minX,
+                   z = values[i + 2] - minZ;
+        for (let y = Math.floor((z - radius) / cellSize); y <= Math.floor((z + radius) / cellSize); y++) {
+          for (let c = Math.floor((x - radius) / cellSize); c <= Math.floor((x + radius) / cellSize); c++) {
+            callback(y * columns + c, values, i);
+          }
+        }
+      }
+    };
+    // Counting sort: count the lights of each cell, then fill each cell's slice.
+    const counts = new Uint32Array(columns * rows),
+            next = new Uint32Array(columns * rows);
+    each(key => counts[key]++);
+    const entries = counts.reduce((sum, value) => sum + value, 0);
+    const length = (2 + columns * rows + entries * 2) * 4;
+    if (length * 4 > maxBytes) {
+      throw new Error('Streetlight grid exceeds GPU storage limit');
+    }
+    data = new Float32Array(length);
+    data.set([minX, minZ, cellSize, columns, rows, count, 0, 0]);
+    let offset = 2 + columns * rows;
+    for (let key = 0; key < counts.length; key++) if (counts[key]) {
+      data[(2 + key) * 4] = next[key] = offset;
+      data[(2 + key) * 4 + 1] = counts[key];
+      offset += counts[key] * 2;
+    }
+    each((key, values, i) => {
+      for (let j = 0, o = next[key] * 4; j < 8; j++) data[o + j] = values[i + j];
+      next[key] += 2;
+    });
+  }
+  return { data, count };
+}

package/src/utils/limbs.js

@@ -0,0 +1,9 @@
+// [part, pivot x, pivot y, swing sign]
+
+export const limbs = [
+  ['body', 0, 0, 0],
+  ['leg', -0.09, 0.9, 1],
+  ['leg', 0.09, 0.9, -1],
+  ['arm', -0.25, 1.42, -1],
+  ['arm', 0.25, 1.42, 1]
+];

package/src/{scene/model.js → utils/loadModel.js}

@@ -1,11 +1,19 @@
-import { decodeModel, readAccessor, nodeMatrix, vertexNormals, textureSampler } from '../utils/model.js';
-import { emptyNode, setParent } from '../utils/scene.js';
+import { decodeModel } from './decodeModel.js';
+import { emptyNode } from './emptyNode.js';
+import { nodeMatrix } from './nodeMatrix.js';
+import { readAccessor } from './readAccessor.js';
+import { setParent } from './setParent.js';
+import { textureSampler } from './textureSampler.js';
+import { vertexNormals } from './vertexNormals.js';
+import { createProgram } from './createProgram.js';
+import { conformModelToTerrain } from './conformModelToTerrain.js';
 
 /** glTF/GLB model loading. */
 /** Load the configured GLB/glTF (static triangles) under `root`; GPU resources need attachment. */
+
 export async function loadModel(backend) {
   await backend._added.promise;
-  const url      = new URL(backend.modelUrl, document.baseURI).href;
+  const url = new URL(backend.modelUrl, document.baseURI).href;
   const response = await fetch(url);
   if (!response.ok) {
     throw new Error(`Unable to load model: HTTP ${response.status}`);
@@ -13,7 +21,7 @@ export async function loadModel(backend) {
   const data = await response.arrayBuffer();
   const description = decodeModel(data);
   const directory = new URL('.', url).href;
-  await Promise.all((description.buffers || []).map(async buffer => {
+  await Promise.all((description.buffers || []).map(async (buffer) => {
     if (buffer.binary) {
       return;
     }
@@ -24,7 +32,7 @@ export async function loadModel(backend) {
     buffer.binary = await response.arrayBuffer();
   }));
   await backend._added.promise;
-  const images = await Promise.all((description.images || []).map(async image => {
+  const images = await Promise.all((description.images || []).map(async (image) => {
     let blob;
     if (image.bufferView !== undefined) {
       const view = description.bufferViews[image.bufferView];
@@ -39,6 +47,7 @@ export async function loadModel(backend) {
     // Preserve straight alpha and raw samples; GPU sRGB formats do color decoding.
     return createImageBitmap(blob, { premultiplyAlpha: 'none', colorSpaceConversion: 'none' });
   }));
+  await backend._map?._terrain3D?._terrainPromise;
   const textures = new Map();
   const textureFor = (reference, color = false) => {
     if (!reference) return null;
@@ -66,7 +75,7 @@ export async function loadModel(backend) {
         format,
         srgb: color,
         image,
-        flipY:          false,
+        flipY: false,
         uploaded: null,
       });
     }
@@ -76,19 +85,19 @@ export async function loadModel(backend) {
   const materials = (description.materials || []).map(material => {
     const pbr = material.pbrMetallicRoughness || {};
     return {
-      color:             (pbr.baseColorFactor || [1, 1, 1, 1]).slice(0, 3),
-      opacity:           pbr.baseColorFactor?.[3] ?? 1,
-      metallic:          pbr.metallicFactor ?? 1,
-      roughness:         pbr.roughnessFactor ?? 1,
-      baseTexture:       textureFor(pbr.baseColorTexture, true),
-      metalTexture:      textureFor(pbr.metallicRoughnessTexture),
-      emissiveTexture:   textureFor(material.emissiveTexture, true),
-      occlusionTexture:  textureFor(material.occlusionTexture),
-      emissive:          material.emissiveFactor || [0, 0, 0],
+      color: (pbr.baseColorFactor || [1, 1, 1, 1]).slice(0, 3),
+      opacity: pbr.baseColorFactor?.[3] ?? 1,
+      metallic: pbr.metallicFactor ?? 1,
+      roughness: pbr.roughnessFactor ?? 1,
+      baseTexture: textureFor(pbr.baseColorTexture, true),
+      metalTexture: textureFor(pbr.metallicRoughnessTexture),
+      emissiveTexture: textureFor(material.emissiveTexture, true),
+      occlusionTexture: textureFor(material.occlusionTexture),
+      emissive: material.emissiveFactor || [0, 0, 0],
       occlusionStrength: material.occlusionTexture?.strength ?? 1,
-      alphaMode:         material.alphaMode || 'OPAQUE',
-      alphaCutoff:       material.alphaCutoff ?? 0.5,
-      doubleSided:       material.doubleSided,
+      alphaMode: backend.options.alphaMode || material.alphaMode || 'OPAQUE',
+      alphaCutoff: material.alphaCutoff ?? 0.5,
+      doubleSided: material.doubleSided,
     };
   });
   let nodes;
@@ -102,7 +111,7 @@ export async function loadModel(backend) {
       active.add(index);
       const group = {
         ...emptyNode(),
-        name:        spec.name
+        name: spec.name
       };
       group.matrix = nodeMatrix(spec);
       if (spec.mesh !== undefined) {
@@ -130,7 +139,7 @@ export async function loadModel(backend) {
           if ([style.baseTexture, style.metalTexture, style.emissiveTexture, style.occlusionTexture].some(Boolean) && !attributes.uv) {
             throw new Error('Textured model mesh requires UV coordinates');
           }
-          const program = backend._createProgram(style);
+          const program = createProgram(backend, style);
           resources.push(program);
           const device = backend.renderer.device;
           if (attributes.index?.data instanceof Uint8Array) {
@@ -159,7 +168,8 @@ export async function loadModel(backend) {
             device,
             geometry,
             program,
-            id: L.Layer.types['3d']._nextId++,
+            fadeDuration: 250,
+            id: L.Layer._nextId++,
             renderOrder: 0
           };
           mesh.name = description.meshes[spec.mesh].name; mesh.extras = spec.extras || {};
@@ -179,15 +189,17 @@ export async function loadModel(backend) {
       for (const resource of resources) {
         if (resource.attributes) {
           for (const attribute of Object.values(resource.attributes)) attribute.buffer.destroy();
-        } else backend._removeProgram(resource);
+        } else {
+          resource.pipelineCache.clear();
+        }
       }
       throw error;
     }
   }
   const model = {
     ...emptyNode(),
-    id:          url,
-    extras:      description.extras || {},
+    id: url,
+    extras: description.extras || {},
   };
   if (!nodes.length) throw new Error('Expected a glTF model with a non-empty scene');
   for (const node of nodes) setParent(node, model);
@@ -201,4 +213,5 @@ export async function loadModel(backend) {
     backend.model.scale[0] = x; backend.model.scale[1] = y; backend.model.scale[2] = z;
   }
   setParent(backend.model, backend.root);
+  conformModelToTerrain(backend, backend._map?._terrain3D);
 }

package/src/utils/loadSource.js

@@ -0,0 +1,17 @@
+import { getZxy } from './getZxy.js';
+
+export async function loadSource(backend, area) {
+  if (backend._geojson) {
+    const { data, url } = backend.options;
+    if (data !== undefined && url) throw new Error('GeoJSON source requires either data or url');
+    if (data !== undefined) return data;
+    if (!url) throw new Error('GeoJSON source requires either data or url');
+    const response = await fetch(new URL(url, document.baseURI), { signal: area.request.signal });
+    if (!response.ok) throw new Error(`Unable to load GeoJSON: HTTP ${response.status}`);
+    return response.json();
+  }
+  const result = await getZxy(backend, area.coords.z, area.coords.x, area.coords.y, area.request.signal);
+  return result
+    ? JSON.parse(new TextDecoder().decode(result.data))
+    : { type: 'FeatureCollection', features: [] };
+}