leaflet-city-mapper 0.0.0-stage → 0.0.2

package/src/utils/loadModel.js

@@ -0,0 +1,217 @@
+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 response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Unable to load model: HTTP ${response.status}`);
+  }
+  const data = await response.arrayBuffer();
+  const description = decodeModel(data);
+  const directory = new URL('.', url).href;
+  await Promise.all((description.buffers || []).map(async (buffer) => {
+    if (buffer.binary) {
+      return;
+    }
+    const response = await fetch(new URL(buffer.uri, directory).href);
+    if (!response.ok) {
+      throw new Error(`Unable to load model buffer: HTTP ${response.status}`);
+    }
+    buffer.binary = await response.arrayBuffer();
+  }));
+  await backend._added.promise;
+  const images = await Promise.all((description.images || []).map(async (image) => {
+    let blob;
+    if (image.bufferView !== undefined) {
+      const view = description.bufferViews[image.bufferView];
+      const buffer = description.buffers[view.buffer].binary;
+      blob = new Blob([buffer.slice(view.byteOffset || 0, (view.byteOffset || 0) + view.byteLength)],
+        { type: image.mimeType });
+    } else {
+      const response = await fetch(new URL(image.uri, directory).href);
+      if (!response.ok) throw new Error(`Unable to load model texture: HTTP ${response.status}`);
+      blob = await response.blob();
+    }
+    // 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;
+    if ((reference.texCoord || 0) !== 0 || reference.extensions) {
+      throw new Error('Model textures currently require untransformed TEXCOORD_0 UVs');
+    }
+    const device = backend.renderer.device;
+    // A glTF image may serve both color and data maps: those cannot share a GPU format.
+    const key = `${reference.index}:${color}`;
+    if (!textures.has(key)) {
+      const texture = description.textures[reference.index];
+      const sampler = description.samplers?.[texture.sampler] || {};
+      const image = images[texture.source];
+      const format = color ? 'rgba8unorm-srgb' : 'rgba8unorm';
+      const samplerOptions = textureSampler(sampler);
+      textures.set(key, {
+        device,
+        texture: device.createTexture({
+          size: [image.width, image.height],
+          format,
+          usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
+        }),
+        sampler: device.createSampler(samplerOptions),
+        samplerOptions,
+        format,
+        srgb: color,
+        image,
+        flipY: false,
+        uploaded: null,
+      });
+    }
+    return textures.get(key);
+  };
+  // Convert glTF materials directly to the shader's retained CPU styles.
+  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],
+      occlusionStrength: material.occlusionTexture?.strength ?? 1,
+      alphaMode: backend.options.alphaMode || material.alphaMode || 'OPAQUE',
+      alphaCutoff: material.alphaCutoff ?? 0.5,
+      doubleSided: material.doubleSided,
+    };
+  });
+  let nodes;
+  {
+    // Track only the recursion path: shared mesh references are valid, cycles are not.
+    const active = new Set(), resources = [];
+    const node = index => {
+      if (active.has(index)) throw new Error('Cyclic glTF nodes');
+      const spec = description.nodes[index];
+      if (!spec) throw new Error('Invalid glTF node');
+      active.add(index);
+      const group = {
+        ...emptyNode(),
+        name: spec.name
+      };
+      group.matrix = nodeMatrix(spec);
+      if (spec.mesh !== undefined) {
+        for (const primitive of description.meshes[spec.mesh].primitives) {
+          const attributes = {};
+          for (const [semantic, name] of [['POSITION', 'position'], ['NORMAL', 'normal'], ['TEXCOORD_0', 'uv']]) {
+            if (primitive.attributes[semantic] !== undefined) attributes[name] = readAccessor(description, primitive.attributes[semantic]);
+          }
+          if (!attributes.position) throw new Error('glTF mesh has no positions');
+          const vertexCount = attributes.position.data.length / 3;
+          if (attributes.position.size !== 3 || vertexCount < 3 ||
+            Object.values(attributes).some(attribute => attribute.data.length / attribute.size !== vertexCount)) throw new Error('Invalid glTF vertex attributes');
+          if (primitive.indices !== undefined) {
+            const index = readAccessor(description, primitive.indices);
+            attributes.index = { size: 1, data: index.indices };
+            if (![Uint8Array, Uint16Array, Uint32Array].some(Type => index.indices instanceof Type) ||
+              index.size !== 1 || index.indices.length % 3 || [...index.indices].some(i => i >= vertexCount)) throw new Error('Invalid glTF triangle indices');
+          }
+          if (!attributes.index && vertexCount % 3) throw new Error('Incomplete glTF triangle');
+          if (!attributes.normal) {
+            const normals = vertexNormals(attributes.position.data, attributes.index?.data);
+            attributes.normal = { size: 3, data: normals };
+          }
+          const style = materials[primitive.material] || { color: [1, 1, 1], metallic: 1 };
+          if ([style.baseTexture, style.metalTexture, style.emissiveTexture, style.occlusionTexture].some(Boolean) && !attributes.uv) {
+            throw new Error('Textured model mesh requires UV coordinates');
+          }
+          const program = createProgram(backend, style);
+          resources.push(program);
+          const device = backend.renderer.device;
+          if (attributes.index?.data instanceof Uint8Array) {
+            attributes.index.data = Uint16Array.from(attributes.index.data);
+          }
+          for (const [name, attribute] of Object.entries(attributes)) {
+            attribute.size ||= 1;
+            attribute.count = attribute.data.length / attribute.size;
+            attribute.indexFormat = attribute.data instanceof Uint32Array ? 'uint32' : 'uint16';
+            attribute.buffer = device.createBuffer({
+              size: Math.max(4, attribute.data.byteLength),
+              usage: name === 'index'
+                ? GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST
+                : GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+            });
+            device.queue.writeBuffer(attribute.buffer, 0, attribute.data);
+          }
+          const geometry = {
+            device,
+            attributes,
+            drawRange: { start: 0, count: attributes.index?.count || attributes.position.count },
+          };
+          resources.push(geometry);
+          const mesh = {
+            ...emptyNode(),
+            device,
+            geometry,
+            program,
+            fadeDuration: 250,
+            id: L.Layer._nextId++,
+            renderOrder: 0
+          };
+          mesh.name = description.meshes[spec.mesh].name; mesh.extras = spec.extras || {};
+          setParent(mesh, group);
+        }
+      }
+      for (const child of spec.children || []) setParent(node(child), group);
+      active.delete(index);
+      return group;
+    };
+    const scene = description.scenes?.[description.scene || 0];
+    if (!scene) throw new Error('Missing glTF scene');
+    try {
+      nodes = scene.nodes.map(node);
+    } catch (error) {
+      // Parsing can fail after earlier primitives allocated buffers/programs.
+      for (const resource of resources) {
+        if (resource.attributes) {
+          for (const attribute of Object.values(resource.attributes)) attribute.buffer.destroy();
+        } else {
+          resource.pipelineCache.clear();
+        }
+      }
+      throw error;
+    }
+  }
+  const model = {
+    ...emptyNode(),
+    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);
+  backend.model = model;
+  if (backend.options.rotation) {
+    const [x, y = x, z = x] = backend.options.rotation;
+    backend.model.rotation[0] = x; backend.model.rotation[1] = y; backend.model.rotation[2] = z;
+  }
+  if (backend.options.scale) {
+    const [x, y = x, z = x] = backend.options.scale;
+    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: [] };
+}

package/src/utils/loadTerrain.js

@@ -0,0 +1,65 @@
+import { addBridges } from './addBridges.js';
+import { conformModelToTerrain } from './conformModelToTerrain.js';
+import { getElevation } from './getElevation.js';
+import { setTerrainHeight } from './setTerrainHeight.js';
+import { update } from './update.js';
+
+
+export async function loadTerrain(backend) {
+  if (backend._terrainLoading || !backend._map) return;
+  backend._terrainLoading = true;
+  backend._terrainReady = false;
+  const controller = backend._terrainController = new AbortController();
+  try {
+    if (!backend.terrainSource) throw new Error('Terrain layer requires a PMTiles elevation archive');
+    const archive = backend._terrainArchive = new L.Layer({ source: { type: 'pmtiles', url: backend.terrainSource } });
+    await archive.ready;
+    const header = archive.header;
+    if (header.tileType !== 0 || header.minZoom !== header.maxZoom) {
+      throw new Error('Expected a single-zoom Float32 PMTiles terrain archive');
+    }
+    backend._terrainZoom = header.maxZoom;
+    const map = backend._map;
+    const northwest = map.project([header.maxLat, header.minLon], backend._terrainZoom).divideBy(256).floor();
+    const southeast = map.project([header.minLat, header.maxLon], backend._terrainZoom).divideBy(256).floor();
+    backend._terrainBounds = new L.Bounds(northwest, southeast);
+    const tiles = [];
+    for (let x = northwest.x; x <= southeast.x; x++) {
+      for (let y = northwest.y; y <= southeast.y; y++) tiles.push({ z: backend._terrainZoom, x, y });
+    }
+    const center = map.project(map.getCenter(), backend._terrainZoom).divideBy(256);
+    tiles.sort((a, b) => Math.hypot(a.x + 0.5 - center.x, a.y + 0.5 - center.y) -
+      Math.hypot(b.x + 0.5 - center.x, b.y + 0.5 - center.y));
+    let next = 0;
+    await Promise.all(Array.from({ length: Math.min(4, tiles.length) }, async () => {
+      while (next < tiles.length) {
+        controller.signal.throwIfAborted();
+        const coords = tiles[next++];
+        const result = await archive.getZxy(coords.z, coords.x, coords.y, controller.signal);
+        if (!result || result.data.byteLength !== 256 * 256 * 4) {
+          throw new Error(`Missing or invalid Float32 terrain tile ${coords.z}/${coords.x}/${coords.y}`);
+        }
+        backend._terrainTiles.set(`${coords.x}/${coords.y}`, new Float32Array(result.data));
+      }
+    }));
+    const bridges = backend.options.bridges && await fetch(backend.options.bridges, { signal: controller.signal })
+      .then(response => { if (!response.ok) throw new Error(`Bridges: HTTP ${response.status}`); return response.json(); });
+    if (controller.signal.aborted || backend._map !== map) return;
+    backend._terrainReady = true;
+    backend._terrainOriginElevation = getElevation(backend, backend.location) ?? 0;
+    for (const layer of Object.values(map._layers)) {
+      setTerrainHeight(layer);
+      conformModelToTerrain(layer, backend);
+    }
+    if (bridges) addBridges(backend, bridges);
+    map.fire('terrainchange');
+    update(backend);
+    backend.fire('terrainready');
+    return true;
+  } catch (error) {
+    if (!controller.signal.aborted) backend.fire('error', { error });
+    return false;
+  } finally {
+    backend._terrainLoading = false;
+  }
+}