leaflet-city-mapper 0.0.3 → 0.0.5

package/src/textures/destroyTexture.js

@@ -0,0 +1,10 @@
+import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
+
+
+
+
+import { destroyAfterSubmission } from './destroyTextureAfterSubmission.js';
+
+export function destroyTexture(layer, texture) {
+  destroyAfterSubmission(layer, texture, rendererByLayer.get(layer).device.queue.onSubmittedWorkDone());
+}

package/src/{rendering/destroyAfterSubmission.js → textures/destroyTextureAfterSubmission.js}

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

package/src/textures/ensureRoofBlit.js

@@ -0,0 +1,20 @@
+import { roofShader } from '../globals/roofShader.js';
+import { roofPipeline } from '../globals/roofPipeline.js';
+import { roofBlitSampler } from '../globals/roofBlitSampler.js';
+
+export function ensureRoofBlit(renderer) {
+  const device = renderer.device;
+  if (!renderer.roofBlit) {
+    const module = device.createShaderModule(roofShader);
+    renderer.roofBlit = /* alloc */ {
+      pipeline: device.createRenderPipeline((
+      roofPipeline.vertex.module = module,
+      roofPipeline.fragment.module = module,
+      roofPipeline
+    )),
+      sampler: device.createSampler(roofBlitSampler),
+    };
+    roofPipeline.vertex.module = null;
+    roofPipeline.fragment.module = null;
+  }
+}

package/src/textures/loadModelImage.js

@@ -0,0 +1,19 @@
+import { geometryImageOptions } from '../globals/geometryImageOptions.js';
+
+
+export async function loadImage(description, directory, image) {
+  let blob;
+  if (image.bufferView !== undefined) {
+    const view = description.bufferViews[image.bufferView];
+    const buffer = description.buffers[view.buffer].binary;
+    blob = /* alloc */ new Blob(
+      /* alloc */ [buffer.slice(view.byteOffset || 0, (view.byteOffset || 0) + view.byteLength)],
+      /* alloc */ { type: image.mimeType });
+  } else {
+    const response = await fetch(/* alloc */ new URL(image.uri, directory).href);
+    if (!response.ok) throw /* alloc */ 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, geometryImageOptions);
+}

package/src/{models/textureFor.js → textures/modelTextureFor.js}

@@ -1,24 +1,28 @@
-import { textureSampler } from './textureSampler.js';
+import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
+
+
+
+import { textureSampler } from './modelTextureSampler.js';
 
 export function textureFor(context, reference, color = false) {
-  const { backend, description, images, textures } = context;
+  const { backend: layer, description, images, textures } = context;
   if (!reference) return null;
   if ((reference.texCoord || 0) !== 0 || reference.extensions) {
-    throw new Error('Model textures currently require untransformed TEXCOORD_0 UVs');
+    throw /* alloc */ new Error('Model textures currently require untransformed TEXCOORD_0 UVs');
   }
-  const device = backend.renderer.device;
+  const device = rendererByLayer.get(layer).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 sampler = description.samplers?.[texture.sampler];
     const image = images[texture.source];
     const format = color ? 'rgba8unorm-srgb' : 'rgba8unorm';
     const samplerOptions = textureSampler(sampler);
-    textures.set(key, {
+    textures.set(key, /* alloc */ {
       device,
-      texture: device.createTexture({
-        size: [image.width, image.height],
+      texture: device.createTexture(/* alloc */ {
+        size: /* alloc */ [image.width, image.height],
         format,
         usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
       }),

package/src/textures/modelTextureSampler.js

@@ -0,0 +1,10 @@
+/** Translate glTF sampler constants into WebGPU sampler options. */
+
+export function textureSampler(sampler) {
+  return /* alloc */ {
+    addressModeU: sampler?.wrapS === 33071 ? 'clamp-to-edge' : sampler?.wrapS === 33648 ? 'mirror-repeat' : 'repeat',
+    addressModeV: sampler?.wrapT === 33071 ? 'clamp-to-edge' : sampler?.wrapT === 33648 ? 'mirror-repeat' : 'repeat',
+    magFilter: sampler?.magFilter === 9728 ? 'nearest' : 'linear',
+    minFilter: sampler?.minFilter === 9728 || sampler?.minFilter === 9984 || sampler?.minFilter === 9986 ? 'nearest' : 'linear',
+  };
+}

package/src/textures/nativeImageError.js

@@ -0,0 +1,13 @@
+import { imageStates } from '../weakmaps/imageStates.js';
+
+
+export function nativeImageError(event) {
+  const states = imageStates.get(event.currentTarget);
+  if (!states) return;
+  let state;
+  for (state of states) {
+    state.source.fire('error', /* alloc */ {
+      error: /* alloc */ new Error('Unable to load native layer image'),
+    });
+  }
+}

package/src/textures/nativeImageRefresh.js

@@ -0,0 +1,11 @@
+import { imageStates } from '../weakmaps/imageStates.js';
+
+
+import { refreshNativeLayer } from '../native/refreshNativeLayer.js';
+
+export function nativeImageRefresh(event) {
+  const states = imageStates.get(event.currentTarget);
+  if (!states) return;
+  let state;
+  for (state of states) refreshNativeLayer(state);
+}

package/src/{core/textureFor.js → textures/nativeTextureFor.js}

@@ -1,48 +1,47 @@
+import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
+
+import { coreSampler } from '../globals/coreSampler.js';
+
 import { disposeMesh } from '../rendering/disposeMesh.js';
-import { destroyTexture } from '../rendering/destroyTexture.js';
+import { destroyTexture } from './destroyTexture.js';
 import { uploadCanvasTexture } from './uploadCanvasTexture.js';
+import { uploadNativeImage } from './uploadNativeImage.js';
+
 
-export function textureFor(state, key, image) {
-  if (!(image instanceof HTMLImageElement) && !(image instanceof HTMLCanvasElement)) {
-    throw new Error('WebGPU native raster layers require image or canvas tiles');
-  }
-  const { backend, textures, meshes } = state;
-  let texture = textures.get(key);
-  const url = image.currentSrc || image.src;
-  if (!texture || texture.image !== image || texture.url !== url) {
-    if (texture) {
-      const mesh = meshes.get(key);
-      if (mesh) disposeMesh(backend, mesh);
-      meshes.delete(key);
-      destroyTexture(backend, texture.texture);
-      textures.delete(key);
-    }
-    const width = image.naturalWidth || image.width, height = image.naturalHeight || image.height;
-    if (!width || !height) return;
-    const { device } = backend.renderer;
-    texture = {
-      device, image, url, format: 'rgba8unorm', uploaded: null,
-      texture: device.createTexture({
-        size: [width, height], format: 'rgba8unorm',
-        usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
-      }),
-      sampler: device.createSampler({ minFilter: 'linear', magFilter: 'linear' }),
-    };
-    textures.set(key, texture);
-    if (image instanceof HTMLCanvasElement) {
-      texture.pending = true;
-      uploadCanvasTexture(state, key, texture, image, device, width, height);
-    } else {
-      try {
-        device.queue.copyExternalImageToTexture({ source: image }, { texture: texture.texture }, [width, height]);
-      } catch (error) {
-        texture.texture.destroy();
-        textures.delete(key);
-        throw error;
-      }
-      texture.uploaded = image;
-    }
-  }
-  texture.used = true;
-  return texture.uploaded === image ? texture : undefined;
+export function textureFor(state, key, image) {
+  if (!(image instanceof HTMLImageElement) && !(image instanceof HTMLCanvasElement)) {
+    throw /* alloc */ new Error('WebGPU native raster layers require image or canvas tiles');
+  }
+  const { backend: layer, textures, meshes } = state;
+  let texture = textures.get(key);
+  const url = image.currentSrc || image.src;
+  if (!texture || texture.image !== image || texture.url !== url) {
+    if (texture) {
+      const mesh = meshes.get(key);
+      if (mesh) disposeMesh(layer, mesh);
+      meshes.delete(key);
+      destroyTexture(layer, texture.texture);
+      textures.delete(key);
+    }
+    const width = image.naturalWidth || image.width, height = image.naturalHeight || image.height;
+    if (!width || !height) return;
+    const { device } = rendererByLayer.get(layer);
+    texture = /* alloc */ {
+      device, image, url, format: 'rgba8unorm', uploaded: null,
+      texture: device.createTexture(/* alloc */ {
+        size: /* alloc */ [width, height], format: 'rgba8unorm',
+        usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
+      }),
+      sampler: device.createSampler(coreSampler),
+    };
+    textures.set(key, texture);
+    if (image instanceof HTMLCanvasElement) {
+      texture.pending = true;
+      uploadCanvasTexture(state, key, texture, image, device, width, height);
+    } else {
+      uploadNativeImage(state, key, texture, image, device, width, height);
+    }
+  }
+  texture.used = true;
+  return texture.uploaded === image ? texture : undefined;
 }

package/src/textures/prepareMeshTextures.js

@@ -0,0 +1,23 @@
+import { uploadMeshTexture } from './uploadMeshTexture.js';
+import { bindMeshTextures } from './bindMeshTextures.js';
+
+export function prepareMeshTextures(renderer, mesh) {
+  const { program } = mesh;
+  const { device } = renderer;
+  const textures = mesh._textures ||= /* alloc */ [];
+  textures.length = 0;
+  let binding, texture, i;
+  for (binding of program.bindings) {
+    texture = program.uniforms[binding.name]?.value;
+    if (!texture) throw /* alloc */ new Error(`Missing Layer3D texture: ${binding.name}`);
+    uploadMeshTexture(device, texture);
+    textures.push(texture);
+  }
+  let bindingsChanged = !mesh.bindGroup || mesh.boundBuffer !== renderer.uniformBuffer ||
+    textures.length !== mesh.boundTextures.length;
+  for (i = 0; !bindingsChanged && i < textures.length; i++) {
+    if (textures[i].texture !== mesh.boundTextures[i][0] ||
+      textures[i].sampler !== mesh.boundTextures[i][1]) bindingsChanged = true;
+  }
+  if (bindingsChanged) bindMeshTextures(renderer, mesh, textures);
+}

package/src/textures/rebuildRoofAtlas.js

@@ -0,0 +1,55 @@
+import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
+import { roofRasterByLayer } from '../weakmaps/roofRasterByLayer.js';
+import { sceneOriginByLayer } from '../weakmaps/sceneOriginByLayer.js';
+
+import { radians } from '../globals/radians.js';
+import { earthCirc } from '../globals/earthCirc.js';
+import { roofTiles } from '../globals/roofTiles.js';
+import { TILE_SIZE } from '../globals/TILE_SIZE.js';
+import { roofMin } from '../globals/roofMin.js';
+import { roofSize } from '../globals/roofSize.js';
+
+
+import { ensureRoofBlit } from './ensureRoofBlit.js';
+import { composeRoofAtlas } from './composeRoofAtlas.js';
+import { collectRoofTiles } from './collectRoofTiles.js';
+import { resizeRoofTexture } from './resizeRoofTexture.js';
+
+export function rebuildRoofAtlas(layer, rasters, signature, now) {
+  const map = layer._map, renderer = rendererByLayer.get(layer);
+  const tiles = roofTiles;
+  tiles.length = 0;
+  let zoom = collectRoofTiles(rasters, tiles);
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  let coords, tileSize;
+  if (!tiles.length) zoom = map.getZoom();
+  for ({ tile: { coords } } of tiles) {
+    tileSize = TILE_SIZE * map.getZoomScale(zoom, coords.z);
+    minX = Math.min(minX, coords.x * tileSize); minY = Math.min(minY, coords.y * tileSize);
+    maxX = Math.max(maxX, (coords.x + 1) * tileSize); maxY = Math.max(maxY, (coords.y + 1) * tileSize);
+  }
+  const origin = map.project(sceneOriginByLayer.get(layer), zoom);
+  const min = roofMin, size = roofSize;
+  min.x = tiles.length ? minX : origin.x; min.y = tiles.length ? minY : origin.y;
+  size.x = tiles.length ? maxX - minX : 1; size.y = tiles.length ? maxY - minY : 1;
+  // ponytail: cap at 4096 px; virtual textures if wide views need native detail.
+  const scale = Math.min(1, 4096 / Math.max(size.x, size.y));
+  const width = Math.max(1, Math.ceil(size.x * scale)), height = Math.max(1, Math.ceil(size.y * scale));
+  const pixels = map.options.crs.scale(zoom) / (earthCirc * Math.cos(sceneOriginByLayer.get(layer).lat * radians));
+  const roof = /* alloc */ {
+    matrix: /* alloc */ [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
+    texture: roofRasterByLayer.get(layer)?.texture,
+  };
+  roofRasterByLayer.set(layer, roof);
+  roof.signature = signature; roof.updatedAt = now;
+  roof.matrix[0] = pixels / size.x; roof.matrix[10] = pixels / size.y;
+  roof.matrix[12] = (origin.x - min.x) / size.x; roof.matrix[14] = (origin.y - min.y) / size.y;
+  resizeRoofTexture(layer, roof, width, height);
+  // Compose the atlas on the GPU: re-uploading a large canvas stalls Firefox for hundreds of ms.
+  ensureRoofBlit(renderer);
+  try {
+    composeRoofAtlas(layer, tiles, zoom, min, size, width, height);
+  } finally {
+    tiles.length = 0;
+  }
+}

package/src/textures/removeImageState.js

@@ -0,0 +1,9 @@
+import { imageStates } from '../weakmaps/imageStates.js';
+
+
+export function removeImageState(image, state) {
+  const states = imageStates.get(image);
+  if (!states) return;
+  states.delete(state);
+  if (!states.size) imageStates.delete(image);
+}

package/src/textures/resizeRoofTexture.js

@@ -0,0 +1,25 @@
+import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
+
+import { roofTexture } from '../globals/roofTexture.js';
+import { roofSampler } from '../globals/roofSampler.js';
+import { destroyTexture } from './destroyTexture.js';
+
+export function resizeRoofTexture(layer, roof, width, height) {
+  const renderer = rendererByLayer.get(layer);
+  const descriptor = roofTexture;
+  descriptor.size[0] = width; descriptor.size[1] = height;
+  descriptor.usage = GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT;
+  if (roof.texture && (roof.texture.width !== width || roof.texture.height !== height)) {
+    destroyTexture(layer, roof.texture.texture);
+    roof.texture.texture = renderer.device.createTexture(descriptor);
+    roof.texture.width = width; roof.texture.height = height;
+  }
+  roof.texture ||= /* alloc */ {
+    device: renderer.device,
+    texture: renderer.device.createTexture(descriptor),
+    sampler: renderer.device.createSampler(roofSampler),
+    samplerOptions: /* alloc */ { addressModeU: 'clamp-to-edge', addressModeV: 'clamp-to-edge' },
+    image: null, width, height,
+    format: 'rgba8unorm', srgb: false, flipY: false, uploaded: null,
+  };
+}

package/src/textures/restoreMaterialTextures.js

@@ -0,0 +1,16 @@
+export function restoreMaterialTextures(material, device) {
+  let name, texture;
+  for (name in material) {
+    if (name !== 'baseTexture' && name !== 'metalTexture' && name !== 'emissiveTexture' && name !== 'occlusionTexture') continue;
+    texture = material[name];
+    if (!texture || texture.device === device) continue;
+    texture.device = device;
+    texture.texture = device.createTexture(/* alloc */ {
+      size: /* alloc */ [texture.image.width, texture.image.height],
+      format: texture.format,
+      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
+    });
+    texture.sampler = device.createSampler(texture.samplerOptions);
+    texture.uploaded = null;
+  }
+}

package/src/{rendering → textures}/textureBinding.js

@@ -1,7 +1,7 @@
-export function textureBinding(bindings, name, enabled) {
-  if (!enabled) return '';
-  const current = 3 + bindings.length * 2;
-  bindings.push({ name, texture: current, sampler: current + 1 });
-  return /* wgsl */ `@group(0) @binding(${current}) var ${name}: texture_2d<f32>;
-      @group(0) @binding(${current + 1}) var ${name}Sampler: sampler;`;
-}
+export function textureBinding(bindings, name, enabled) {
+  if (!enabled) return '';
+  const current = 3 + bindings.length * 2;
+  bindings.push(/* alloc */ { name, texture: current, sampler: current + 1 });
+  return /* wgsl */ `@group(0) @binding(${current}) var ${name}: texture_2d<f32>;
+      @group(0) @binding(${current + 1}) var ${name}Sampler: sampler;`;
+}

package/src/textures/updateRoofAtlas.js

@@ -0,0 +1,23 @@
+import { loadingTilesByLayer } from '../weakmaps/loadingTilesByLayer.js';
+import { rasterVersionByLayer } from '../weakmaps/rasterVersionByLayer.js';
+import { roofRasterByLayer } from '../weakmaps/roofRasterByLayer.js';
+
+import { L } from '../globals/L.js';
+import { roofSignatures } from '../globals/roofSignatures.js';
+import { rebuildRoofAtlas } from './rebuildRoofAtlas.js';
+
+export function updateRoofAtlas(layer, rasters, now) {
+  const signatures = roofSignatures;
+  signatures.length = 0;
+  let loading = false, rasterLayer;
+  for (rasterLayer of rasters) {
+    signatures.push(`${L.Util.stamp(rasterLayer)}:${rasterVersionByLayer.get(rasterLayer) || 0}:${rasterLayer.options.opacity}:${rasterLayer.options.zIndex}`);
+    loading ||= Boolean(loadingTilesByLayer.get(rasterLayer));
+  }
+  const signature = signatures.join('|');
+  signatures.length = 0;
+  if (!roofRasterByLayer.get(layer) || roofRasterByLayer.get(layer).signature !== signature &&
+    (!loading || now - roofRasterByLayer.get(layer).updatedAt >= 50)) {
+    rebuildRoofAtlas(layer, rasters, signature, now);
+  }
+}

package/src/textures/updateRoofRaster.js

@@ -0,0 +1,29 @@
+import { kindByLayer } from '../weakmaps/kindByLayer.js';
+import { layersByLayer } from '../weakmaps/layersByLayer.js';
+import { rasterTilesByLayer } from '../weakmaps/rasterTilesByLayer.js';
+import { roofRasterByLayer } from '../weakmaps/roofRasterByLayer.js';
+import { roofRastersByLayer } from '../weakmaps/roofRastersByLayer.js';
+import { updateRoofAtlas } from './updateRoofAtlas.js';
+import { destroyTexture } from './destroyTexture.js';
+
+export function updateRoofRaster(layer, now) {
+  const map = layer._map;
+  let rasters = roofRastersByLayer.get(layer);
+  if (!rasters) roofRastersByLayer.set(layer, rasters = /* alloc */ []);
+  rasters.length = 0;
+  let hasRoofTexture = false;
+  let sceneLayer, rasterLayer;
+  for (sceneLayer of layersByLayer.get(layer)) {
+    if (sceneLayer.options.roofTexture || sceneLayer.options.wallTexture) { hasRoofTexture = true; break; }
+  }
+  if (hasRoofTexture) {
+    for (rasterLayer of Object.values(map._layers)) {
+      if (kindByLayer.get(rasterLayer) === 'raster' && rasterTilesByLayer.get(rasterLayer) && rasterLayer.options.opacity > 0) rasters.push(rasterLayer);
+    }
+    updateRoofAtlas(layer, rasters, now);
+  } else if (roofRasterByLayer.get(layer)) {
+    destroyTexture(layer, roofRasterByLayer.get(layer).texture.texture);
+    roofRasterByLayer.set(layer, null);
+  }
+  return rasters;
+}

package/src/{core → textures}/uploadCanvasTexture.js

@@ -1,19 +1,22 @@
-import { current } from './current.js';
-import { refreshNativeLayer } from './refreshNativeLayer.js';
+import { current } from '../native/isCurrentNativeLayer.js';
+import { refreshNativeLayer } from '../native/refreshNativeLayer.js';
 
-export async function uploadCanvasTexture(state, key, texture, image, device, width, height) {
-  let bitmap;
-  try {
-    bitmap = await createImageBitmap(image);
-    if (!current(state) || state.textures.get(key) !== texture) return;
-    device.queue.copyExternalImageToTexture({ source: bitmap }, { texture: texture.texture }, [width, height]);
-    texture.uploaded = image;
-    texture.pending = false;
-    refreshNativeLayer(state);
-  } catch (error) {
-    state.failed = true;
-    state.source.fire('error', { error });
-  } finally {
-    bitmap?.close();
-  }
+export async function uploadCanvasTexture(state, key, texture, image, device, width, height) {
+  let bitmap;
+  try {
+    bitmap = await createImageBitmap(image);
+    if (!current(state) || state.textures.get(key) !== texture) return;
+    device.queue.copyExternalImageToTexture(
+      /* alloc */ { source: bitmap },
+      /* alloc */ { texture: texture.texture },
+      /* alloc */ [width, height]);
+    texture.uploaded = image;
+    texture.pending = false;
+    refreshNativeLayer(state);
+  } catch (error) {
+    state.failed = true;
+    state.source.fire('error', /* alloc */ { error });
+  } finally {
+    bitmap?.close();
+  }
 }

package/src/textures/uploadMeshTexture.js

@@ -0,0 +1,26 @@
+import { meshImage } from '../globals/meshImage.js';
+import { meshTarget } from '../globals/meshTarget.js';
+import { meshCopySize } from '../globals/meshCopySize.js';
+
+export function uploadMeshTexture(device, texture) {
+  if (texture.uploaded === texture.image) return;
+  device.queue.copyExternalImageToTexture(
+    (
+      meshImage.source = texture.image,
+      meshImage.flipY = Boolean(texture.flipY),
+      meshImage
+    ),
+    (
+      meshTarget.texture = texture.texture,
+      meshTarget
+    ),
+    (
+      meshCopySize[0] = texture.image.width,
+      meshCopySize[1] = texture.image.height,
+      meshCopySize
+    )
+  );
+  meshImage.source = null;
+  meshTarget.texture = null;
+  texture.uploaded = texture.image;
+}

package/src/textures/uploadNativeImage.js

@@ -0,0 +1,13 @@
+export function uploadNativeImage(state, key, texture, image, device, width, height) {
+  try {
+    device.queue.copyExternalImageToTexture(
+      /* alloc */ { source: image },
+      /* alloc */ { texture: texture.texture },
+      /* alloc */ [width, height]);
+  } catch (error) {
+    texture.texture.destroy();
+    state.textures.delete(key);
+    throw error;
+  }
+  texture.uploaded = image;
+}

package/src/textures/uploadRoofTile.js

@@ -0,0 +1,23 @@
+import { roofImage } from '../globals/roofImage.js';
+import { roofTarget } from '../globals/roofTarget.js';
+import { roofCopySize } from '../globals/roofCopySize.js';
+
+export function uploadRoofTile(device, tile) {
+  const source = tile.texture;
+  if (source.uploaded !== source.image) {
+    device.queue.copyExternalImageToTexture((
+      roofImage.source = tile.image,
+      roofImage
+    ), (
+      roofTarget.texture = source.texture,
+      roofTarget
+    ), (
+      roofCopySize[0] = source.texture.width,
+      roofCopySize[1] = source.texture.height,
+      roofCopySize
+    ));
+    roofImage.source = null;
+    roofTarget.texture = null;
+    source.uploaded = source.image;
+  }
+}

package/src/traffic/addTraffic.js

@@ -1,7 +1,10 @@
+import { trafficByLayer } from '../weakmaps/trafficByLayer.js';
+
+
 import { placeTraffic } from './placeTraffic.js';
 import { startTraffic } from './startTraffic.js';
 
-export function addTraffic(state) {
-  state.layer._beforeRaycast = placeTraffic.bind(null, state);
-  if (state.ready) startTraffic(state);
+export function addTraffic(state) {
+  trafficByLayer.set(state.layer, state);
+  if (state.ready) startTraffic(state);
 }

package/src/traffic/destroyTrafficGpu.js

@@ -1,5 +1,7 @@
 export function destroyTrafficGpu(state) {
-  let buffer;
-  for (buffer of [state.gpu?.params, state.gpu?.template, state.gpu?.points, state.gpu?.vehicles]) buffer?.destroy();
+  state.gpu?.params?.destroy();
+  state.gpu?.template?.destroy();
+  state.gpu?.points?.destroy();
+  state.gpu?.vehicles?.destroy();
   state.gpu = null;
 }

package/src/traffic/disposeTrafficObject.js

@@ -1,12 +1,17 @@
+import { highlightedFeatureByLayer } from '../weakmaps/highlightedFeatureByLayer.js';
+import { hoveredFeatureByLayer } from '../weakmaps/hoveredFeatureByLayer.js';
+
+
+
 import * as disposeMesh from '../rendering/disposeMesh.js';
 import * as setHighlight from '../picking/setHighlight.js';
 import * as showFeature from '../picking/showFeature.js';
 
 export function disposeTrafficObject(state, object) {
   if (!object) return;
-  if (state.layer.highlightedFeature?.mesh === object) {
+  if (highlightedFeatureByLayer.get(state.layer)?.mesh === object) {
     setHighlight.setHighlight(state.layer, null);
-    state.layer.hoveredFeature = null;
+    hoveredFeatureByLayer.set(state.layer, null);
     showFeature.showFeature(state.layer, null);
   };
   disposeMesh.disposeMesh(state.layer, object);

package/src/traffic/drawTrafficRoute.js

@@ -1,6 +1,9 @@
-import { routeGeometry } from './routeGeometry.js';
+import { trafficRouteMaterial } from '../globals/trafficRouteMaterial.js';
+import { routeGeometry } from '../geometry/routeGeometry.js';
 import { createTrafficMesh } from './createTrafficMesh.js';
 
-export function drawTrafficRoute(state) {
-  state.route = createTrafficMesh(state, routeGeometry(state.lanes), [], { unlit: true });
+
+export function drawTrafficRoute(state) {
+  state.route = createTrafficMesh(state, routeGeometry(state.lanes),
+    /* alloc */ [], trafficRouteMaterial);
 }

package/src/traffic/failTraffic.js

@@ -1,6 +1,6 @@
 export function failTraffic(state, error) {
   state.error = error;
-  state.status.textContent = `Error: ${error.message}`;
+  state.status.textContent = `${state.vehicle}: Error: ${error.message}`;
   state.status.setAttribute('role', 'alert');
   console.error('Traffic layer', error);
-}
+}

package/src/traffic/featuresToTrafficLanes.js

@@ -0,0 +1,24 @@
+import { trafficEmptyList } from '../globals/trafficEmptyList.js';
+// GeoJSON (Multi)LineStrings become lanes ({latlngs, properties, elevation?}); prepare() adds `points` ([x, z, ground]),
+// `lengths` and `length` in layer-local metres.
+
+
+
+export function toLanes({ features = trafficEmptyList }) {
+  const lanes = /* alloc */ [];
+  let geometry, properties, lines, line, latlngs, lng, lat, i;
+  for ({ geometry, properties } of features) {
+    if (geometry?.type !== 'LineString' && geometry?.type !== 'MultiLineString') continue;
+    lines = geometry.type === 'MultiLineString' ? geometry.coordinates : null;
+    for (i = 0; i < (lines ? lines.length : 1); i++) {
+      line = lines ? lines[i] : geometry.coordinates;
+      latlngs = /* alloc */ [];
+      for ([lng, lat] of line) latlngs.push(/* alloc */ [lat, lng]);
+      lanes.push(/* alloc */ {
+        latlngs, properties: properties ?? /* alloc */ {},
+        elevation: properties?.elevation,
+      });
+    }
+  }
+  return lanes;
+}