leaflet-city-mapper 0.0.6 → 0.0.8

package/src/native/prepareGridTerrainRequests.js

@@ -0,0 +1,16 @@
+import { streamTerrainByMap } from '../weakmaps/streamTerrainByMap.js';
+
+export function prepareGridTerrainRequests(state) {
+  const stream = streamTerrainByMap.get(state.map);
+  if (state.terrainStream !== stream) {
+    state.terrainStream = stream;
+    state.terrainRequests = stream ? /* alloc */ new Map() : null;
+  }
+  if (state.terrainRequests) {
+    let key;
+    for (key of state.terrainRequests.keys()) {
+      if (!state.source._tiles[key]) state.terrainRequests.delete(key);
+    }
+  }
+  return stream;
+}

package/src/native/putNativeMesh.js

@@ -1,36 +1,30 @@
 import { L } from '../globals/L.js';
-import { disposeMesh } from '../rendering/disposeMesh.js';
-import { createMesh } from '../rendering/createMesh.js';
 import { styleNativeMesh } from './styleNativeMesh.js';
+import { createNativeMesh } from './createNativeMesh.js';
+import { updateNativeStrokeRadius } from './updateNativeStrokeRadius.js';
 
-export function putNativeMesh(state, key, position, color, opacity, texture, uv) {
-  const { backend: layer, source, meshes } = state;
+export function putNativeMesh(state, key, position, color, opacity, texture, uv, terrain = false) {
+  const { source, meshes } = state;
   if (!position.length) return;
+  const nativeStroke = key === 'stroke' && Boolean(state.strokeCoordinates) && source.options.interactive === false;
   let mesh = meshes.get(key);
   if (!mesh || mesh.geometry.attributes.position.data.length !== position.length ||
-    mesh.program.uniforms.baseTexture?.value !== texture) {
-    const normal = /* alloc */ [];
-    let index;
-    for (index = 0; index < position.length; index++) normal.push(index % 3 === 1 ? 1 : 0);
-    const data = /* alloc */ { position, normal };
-    if (uv) data.uv = uv;
-    const material = /* alloc */ {
-      vertexColors: false, color, opacity, unlit: true, alphaMode: 'BLEND',
-    };
-    if (texture) material.baseTexture = texture;
-    if (mesh) disposeMesh(layer, mesh);
-    mesh = createMesh(layer, data, material, 0, source instanceof L.GridLayer ? state.rasterProgram : undefined);
-    if (source instanceof L.GridLayer) {
-      state.rasterProgram ||= mesh.program;
-      mesh.texture = texture;
-    }
-    meshes.set(key, mesh);
+    (source instanceof L.GridLayer && mesh.program.depthWrite !== terrain) ||
+    mesh.program.uniforms.baseTexture?.value !== texture ||
+    Boolean(mesh.program._layerMaterial.nativeStroke) !== nativeStroke) {
+    mesh = createNativeMesh(state, key, position, color, opacity, texture, uv, terrain, nativeStroke);
   } else {
     const attribute = mesh.geometry.attributes.position;
     attribute.data.set(position);
     attribute.needsUpdate = true;
     mesh.geometry.bounds = null;
+    if (nativeStroke) {
+      mesh.geometry.attributes.normal.data.set(state.strokeAnchors);
+      mesh.geometry.attributes.normal.needsUpdate = true;
+    }
   }
+  if (nativeStroke) updateNativeStrokeRadius(mesh);
+  if (mesh.program.uniforms.strokeScale) mesh.program.uniforms.strokeScale.value = 1;
   styleNativeMesh(state, mesh, color, opacity);
   return mesh;
 }

package/src/native/refreshNativeEvent.js

@@ -1,5 +1,16 @@
 import { refreshNativeLayer } from './refreshNativeLayer.js';
+import { L } from '../globals/L.js';
+import { update } from '../scene/scheduleSceneUpdate.js';
 
-export function refreshNativeEvent() {
-  refreshNativeLayer(this);
+export function refreshNativeEvent(event) {
+  if (event?.type === 'zoomend' && this.source instanceof L.Polyline &&
+    (!this.source.options.stroke || !(Number(this.source.options.weight) > 0))) return;
+  if (event?.type === 'zoomend' && this.strokeCoordinates && (!this.dirty || this.zoomOnly)) {
+    this.zoomOnly = true;
+    this.dirty = true;
+    update(this.backend);
+    return;
+  }
+  if (event?.type === 'terrainchange' && this.marker) this.source.update();
+  refreshNativeLayer(this);
 }

package/src/native/refreshNativeLayer.js

@@ -10,6 +10,7 @@ import { update } from '../scene/scheduleSceneUpdate.js';
 import { hideTargets } from './hideTargets.js';
 
 export function refreshNativeLayer(state = this) {
+  state.zoomOnly = false;
   state.dirty = true;
   state.viewDirty = true;
   state.failed = false;

package/src/native/retainGridTerrain.js

@@ -0,0 +1,10 @@
+export function retainGridTerrain(state) {
+  let key, mesh, retained;
+  for ([key, mesh] of state.meshes) {
+    if (state.source._tiles[key] || !mesh._terrainRequest) continue;
+    retained = state.textures.get(key);
+    if (!retained) continue;
+    retained.used = true;
+    mesh._nativeUsed = true;
+  }
+}

package/src/native/syncGridLayer.js

@@ -1,29 +1,27 @@
-import { L } from '../globals/L.js';
-import { coreWhite } from '../globals/coreWhite.js';
-
-import { styleNativeMesh } from './styleNativeMesh.js';
-import { quadNativeMesh } from './quadNativeMesh.js';
-import { boundsQuad } from '../geometry/boundsQuad.js';
+import { prepareGridTerrainRequests } from './prepareGridTerrainRequests.js';
+import { syncGridTile } from './syncGridTile.js';
+import { syncTerrainGridTile } from './syncTerrainGridTile.js';
+import { retainGridTerrain } from './retainGridTerrain.js';
 
 
 export function syncGridLayer(state) {
-  const { source, textures, meshes } = state;
-  let key, tile, opacity, retained, mesh, nw, se;
+  const { source } = state;
+  const stream = prepareGridTerrainRequests(state);
+  let key, tile, opacity, mesh, pending = false;
   for (key in source._tiles) {
     if (!Object.hasOwn(source._tiles, key)) continue;
     tile = source._tiles[key];
-    if (!tile.loaded || tile.el instanceof HTMLImageElement && !tile.el.naturalWidth) continue;
-    opacity = (source.options.opacity ?? 1) * (tile._gpuOpacity ?? 1);
-    retained = textures.get(key);
-    mesh = meshes.get(key);
-    if (mesh && retained?.image === tile.el && retained.url === (tile.el.currentSrc || tile.el.src)) {
-      retained.used = true;
-      styleNativeMesh(state, mesh, coreWhite, opacity);
-    } else {
-      [nw, se] = source._tileCoordsToNwSe(tile.coords);
-      mesh = quadNativeMesh(state, key, tile.el, boundsQuad(state,
-        /* alloc */ new L.LatLngBounds(nw, se)), opacity);
+    if (!tile.loaded || tile.el instanceof HTMLImageElement && !tile.el.naturalWidth) {
+      pending = Boolean(stream);
+      continue;
     }
+    opacity = (source.options.opacity ?? 1) * (tile._gpuOpacity ?? 1);
+    mesh = state.terrainRequests ? syncTerrainGridTile(state, key, tile, opacity)
+      : syncGridTile(state, key, tile, opacity);
+    if (state.terrainRequests && !state.terrainRequests.get(key).tiles) pending = true;
     if (mesh) mesh.renderOrder += tile.coords.z / 100;
   }
+  if (stream && (pending || !Object.keys(source._tiles).length)) {
+    retainGridTerrain(state);
+  }
 }

package/src/native/syncGridTile.js

@@ -0,0 +1,18 @@
+import { L } from '../globals/L.js';
+import { coreWhite } from '../globals/coreWhite.js';
+import { styleNativeMesh } from './styleNativeMesh.js';
+import { quadNativeMesh } from './quadNativeMesh.js';
+import { boundsQuad } from '../geometry/boundsQuad.js';
+
+export function syncGridTile(state, key, tile, opacity) {
+  const retained = state.textures.get(key), mesh = state.meshes.get(key);
+  if (mesh && !mesh._terrainRequest && retained?.image === tile.el &&
+    retained.url === (tile.el.currentSrc || tile.el.src)) {
+    retained.used = true;
+    styleNativeMesh(state, mesh, coreWhite, opacity);
+    return mesh;
+  }
+  const [nw, se] = state.source._tileCoordsToNwSe(tile.coords);
+  return quadNativeMesh(state, key, tile.el,
+    boundsQuad(state, /* alloc */ new L.LatLngBounds(nw, se)), opacity);
+}

package/src/native/syncNativeStrokeAnchors.js

@@ -0,0 +1,12 @@
+export function syncNativeStrokeAnchors(state, stroke) {
+  const { source } = state;
+  if (state.strokeAnchors?.length === stroke.length && stroke.length) {
+    if (source.options.interactive === false) state.strokeCoordinates = stroke;
+    else {
+      state.strokeCoordinates = /* alloc */ new Float64Array(stroke);
+      state.strokeAnchors = /* alloc */ new Float64Array(state.strokeAnchors);
+    }
+    state.strokeZoom = state.map.getZoom();
+    state.strokeWeight = Number(source.options.weight);
+  } else state.strokeAnchors = null;
+}

package/src/native/syncNativeStrokeZoom.js

@@ -0,0 +1,29 @@
+import { styleNativeMesh } from './styleNativeMesh.js';
+import { parseColor } from '../colors/parseColor.js';
+
+export function syncNativeStrokeZoom(state) {
+  const { source, meshes, strokeCoordinates, strokeAnchors } = state;
+  const mesh = meshes.get('stroke');
+  let i, r, g, b, fill;
+  if (mesh) {
+    const factor = 2 ** (state.strokeZoom - state.map.getZoom()) *
+      Number(source.options.weight) / state.strokeWeight;
+    const attribute = mesh.geometry.attributes.position;
+    if (mesh.program.uniforms.strokeScale) {
+      mesh.program.uniforms.strokeScale.value = factor;
+    } else {
+      for (i = 0; i < strokeCoordinates.length; i++) {
+        attribute.data[i] = strokeAnchors[i] + (strokeCoordinates[i] - strokeAnchors[i]) * factor;
+      }
+      attribute.needsUpdate = true;
+      mesh.geometry.bounds = null;
+    }
+    ({ r, g, b } = parseColor(source.options.color));
+    styleNativeMesh(state, mesh, /* alloc */ [r, g, b], source.options.opacity ?? 1);
+  }
+  fill = meshes.get('fill');
+  if (fill) {
+    ({ r, g, b } = parseColor(source.options.fillColor || source.options.color));
+    styleNativeMesh(state, fill, /* alloc */ [r, g, b], source.options.fillOpacity ?? 1);
+  }
+}

package/src/native/syncTerrainGridTile.js

@@ -0,0 +1,28 @@
+import { coreWhite } from '../globals/coreWhite.js';
+import { loadGridTerrain } from './loadGridTerrain.js';
+import { styleNativeMesh } from './styleNativeMesh.js';
+import { terrainGridMesh } from './terrainGridMesh.js';
+
+export function syncTerrainGridTile(state, key, tile, opacity) {
+  const retained = state.textures.get(key), mesh = state.meshes.get(key);
+  let request = state.terrainRequests.get(key);
+  if (!request || request.tile !== tile) {
+    request = /* alloc */ { tile, stream: state.terrainStream };
+    state.terrainRequests.set(key, request);
+    loadGridTerrain(state, key, tile, request);
+  }
+  if (!request.tiles) {
+    if (mesh && retained?.image === tile.el) {
+      retained.used = true;
+      styleNativeMesh(state, mesh, coreWhite, opacity);
+    }
+    return null;
+  }
+  if (mesh && mesh._terrainRequest === request && retained?.image === tile.el &&
+    retained.url === (tile.el.currentSrc || tile.el.src)) {
+    retained.used = true;
+    styleNativeMesh(state, mesh, coreWhite, opacity);
+    return mesh;
+  }
+  return terrainGridMesh(state, key, tile, request, opacity);
+}

package/src/native/syncVectorLayer.js

@@ -1,22 +1,19 @@
-import { geometryPixelStates } from '../globals/geometryPixelStates.js';
-
-
-import { nativeGeometry } from '../geometry/nativeGeometry.js';
-import { localPixelForGeometry } from '../projections/localPixelForGeometry.js';
 import { parseColor } from '../colors/parseColor.js';
 import { putNativeMesh } from './putNativeMesh.js';
+import { syncNativeStrokeZoom } from './syncNativeStrokeZoom.js';
+import { nativeVectorGeometry } from './nativeVectorGeometry.js';
+import { syncNativeStrokeAnchors } from './syncNativeStrokeAnchors.js';
 
 export function syncVectorLayer(state) {
   const { source } = state;
-  geometryPixelStates.push(state);
-  let geometry;
-  try {
-    geometry = nativeGeometry(source, state.map, localPixelForGeometry);
-  } finally {
-    geometryPixelStates.pop();
+  if (state.zoomOnly) {
+    syncNativeStrokeZoom(state);
+    state.zoomOnly = false;
+    return;
   }
-  const { fill, stroke } = geometry;
-  let i, key, positions, color, opacity, r, g, b;
+  const { fill, stroke } = nativeVectorGeometry(state);
+  syncNativeStrokeAnchors(state, stroke);
+  let i, key, positions, color, opacity, r, g, b, attributes;
   for (i = 0; i < 2; i++) {
     key = i ? 'stroke' : 'fill';
     positions = i ? stroke : fill;
@@ -25,5 +22,10 @@ export function syncVectorLayer(state) {
     if (!positions.length) continue;
     ({ r, g, b } = parseColor(color));
     putNativeMesh(state, key, positions, /* alloc */ [r, g, b], opacity ?? 1);
+    if (key === 'stroke' && source.options.interactive === false && state.strokeCoordinates) {
+      attributes = state.meshes.get(key).geometry.attributes;
+      state.strokeCoordinates = attributes.position.data;
+      state.strokeAnchors = attributes.normal.data;
+    }
   }
 }

package/src/native/terrainGridMesh.js

@@ -0,0 +1,34 @@
+import { rootByLayer } from '../weakmaps/rootByLayer.js';
+import { coreWhite } from '../globals/coreWhite.js';
+import { textureFor } from '../textures/nativeTextureFor.js';
+import { terrainElevation } from '../terrain/terrainElevation.js';
+import { localPosition } from '../projections/localPosition.js';
+import { putNativeMesh } from './putNativeMesh.js';
+
+export function terrainGridMesh(state, key, tile, request, opacity) {
+  const texture = textureFor(state, key, tile.el);
+  if (!texture) return;
+  const { x, y, z } = tile.coords, divisions = 32;
+  const northwest = localPosition(state, state.map.unproject(/* alloc */ [x * 256, y * 256], z));
+  const southeast = localPosition(state, state.map.unproject(/* alloc */ [(x + 1) * 256, (y + 1) * 256], z));
+  const vertices = /* alloc */ [], position = /* alloc */ [], uv = /* alloc */ [];
+  const base = rootByLayer.get(state.backend).position[1];
+  let row, col, u, v, elevation, a, b, c, d, index;
+  for (row = 0; row <= divisions; row++) for (col = 0; col <= divisions; col++) {
+    u = col / divisions; v = row / divisions;
+    elevation = terrainElevation(/* alloc */ { x: (x + u) * 256, y: (y + v) * 256 }, request.tiles);
+    if (!Number.isFinite(elevation)) throw /* alloc */ new Error(`Missing elevation sample in ${z}/${x}/${y}`);
+    vertices.push(/* alloc */ [northwest[0] + (southeast[0] - northwest[0]) * u, elevation - base,
+      northwest[2] + (southeast[2] - northwest[2]) * v, u, v]);
+  }
+  for (row = 0; row < divisions; row++) for (col = 0; col < divisions; col++) {
+    a = row * (divisions + 1) + col; b = a + 1; c = a + divisions + 1; d = c + 1;
+    for (index of /* alloc */ [a, c, b, b, c, d]) {
+      position.push(vertices[index][0], vertices[index][1], vertices[index][2]);
+      uv.push(vertices[index][3], vertices[index][4]);
+    }
+  }
+  const mesh = putNativeMesh(state, key, position, coreWhite, opacity, texture, uv, true);
+  mesh._terrainRequest = request;
+  return mesh;
+}

package/src/native/updateNativeStrokeRadius.js

@@ -0,0 +1,9 @@
+export function updateNativeStrokeRadius(mesh) {
+  const attributes = mesh.geometry.attributes, positions = attributes.position.data, anchors = attributes.normal.data;
+  let i, radius = 0;
+  for (i = 0; i < positions.length; i += 3) {
+    radius = Math.max(radius, Math.hypot(positions[i] - anchors[i],
+      positions[i + 1] - anchors[i + 1], positions[i + 2] - anchors[i + 2]));
+  }
+  mesh.geometry.nativeStrokeRadius = radius;
+}

package/src/projections/displayContainerPoint.js

@@ -1,3 +1,23 @@
-export function displayPoint(map, point) {
-  return map.layerPointToContainerPoint(point).subtract(map._getMapPanePos());
-}
+import { streamTerrainByMap } from '../weakmaps/streamTerrainByMap.js';
+import { renderers } from '../weakmaps/renderers.js';
+import { sceneOriginByLayer } from '../weakmaps/sceneOriginByLayer.js';
+import { cameraViewByMap } from '../weakmaps/cameraViewByMap.js';
+import { mapMethods } from '../globals/mapMethods.js';
+import { radians } from '../globals/radians.js';
+import { earthCirc } from '../globals/earthCirc.js';
+import { mapElevationOf } from '../terrain/mapElevationOf.js';
+import { animationPoint } from './transformZoomAnimationPoint.js';
+import { project } from './projectCameraPoint.js';
+
+export function displayPoint(map, point, location) {
+  const shared = renderers.get(map), origin = shared && sceneOriginByLayer.get(shared);
+  if (!streamTerrainByMap.get(map) || !origin) {
+    return map.layerPointToContainerPoint(point).subtract(map._getMapPanePos());
+  }
+  const elevation = mapElevationOf(map, location || map.layerPointToLatLng(point)) ?? 0;
+  const center = mapElevationOf(map, map.getCenter()) ?? 0;
+  const zoom = cameraViewByMap.get(map)?.zoom ?? map.getZoom();
+  const height = (elevation - center) * map.options.crs.scale(zoom) / (earthCirc * Math.cos(origin.lat * radians));
+  const raw = animationPoint(map, mapMethods.value.layerPointToContainerPoint.call(map, point));
+  return project(map, raw, false, false, height).subtract(map._getMapPanePos());
+}

package/src/projections/groundBounds.js

@@ -4,7 +4,7 @@ import { pointOf } from './toPoint.js';
 import { project } from './projectCameraPoint.js';
 
 
-export function groundBounds(map, padding = cameraZeroPadding) {
+export function groundBounds(map, padding = cameraZeroPadding, height = 0) {
   const min = pointOf(padding).divideBy(2), max = map.getSize().subtract(min);
   const bounds = /* alloc */ new L.Bounds();
   const minX = min.x, minY = min.y;
@@ -12,7 +12,7 @@ export function groundBounds(map, padding = cameraZeroPadding) {
   for (i = 0; i < 4; i++) {
     min.x = i % 2 ? max.x : minX;
     min.y = i < 2 ? minY : max.y;
-    bounds.extend(project(map, min, true, true));
+    bounds.extend(project(map, min, true, true, height));
   }
   return bounds;
 }

package/src/projections/localPixel.js

@@ -1,5 +1,10 @@
 import { localPosition } from './localPosition.js';
 
-export function localPixel(state, point) {
-  return localPosition(state, state.map.unproject(point));
+export function localPixel(state, point) {
+  if (state.pixelProjection) {
+    const { transformation, scale, origin, metres } = state.pixelProjection;
+    const projected = transformation.untransform(point, scale);
+    return /* alloc */ [(projected.x - origin.x) * metres, 0, -(projected.y - origin.y) * metres];
+  }
+  return localPosition(state, state.map.unproject(point));
 }

package/src/projections/localPixelForGeometry.js

@@ -2,6 +2,8 @@ import { geometryPixelStates } from '../globals/geometryPixelStates.js';
 
 import { localPixel } from './localPixel.js';
 
-export function localPixelForGeometry(point) {
-  return localPixel(geometryPixelStates[geometryPixelStates.length - 1], point);
+export function localPixelForGeometry(point, anchor) {
+  const state = geometryPixelStates[geometryPixelStates.length - 1];
+  if (anchor && state.strokeAnchors) state.strokeAnchors.push(...localPixel(state, anchor));
+  return localPixel(state, point);
 }

package/src/projections/projectCameraPoint.js

@@ -3,7 +3,7 @@ import { pointOf } from './toPoint.js';
 import { angles } from './cameraAngles.js';
 
 
-export function project(map, point, inverse = false, limit = false) {
+export function project(map, point, inverse = false, limit = false, height = 0) {
   const size = map.getSize(), halfX = size.x / 2, halfY = size.y / 2, distance = size.y * 1.5;
   const result = pointOf(point);
   if (!distance) return result;
@@ -12,16 +12,17 @@ export function project(map, point, inverse = false, limit = false) {
   if (inverse) {
     const far = size.y * map.options.pitchMaxDistance;
     const denominator = tilt * distance + rise * y;
-    let v = denominator * tilt > 0 ? y * distance / denominator : -far;
+    let v = denominator * tilt > 0
+      ? (y * (distance - tilt * height) + distance * rise * height) / denominator : -far;
     if (limit) v = Math.max(-far, Math.min(far, v));
-    const u = x * (distance - rise * v) / distance;
+    const u = x * (distance - rise * v - tilt * height) / distance;
     result.x = cos * u + sin * v + halfX;
     result.y = -sin * u + cos * v + halfY;
     return result;
   }
   const u = cos * x - sin * y, v = sin * x + cos * y;
-  const scale = distance / (distance - rise * v);
+  const scale = distance / (distance - rise * v - tilt * height);
   result.x = u * scale + halfX;
-  result.y = tilt * v * scale + halfY;
+  result.y = (tilt * v - rise * height) * scale + halfY;
   return result;
 }

package/src/rendering/collectVisibleMesh.js

@@ -1,4 +1,5 @@
 import { computeBounds } from '../geometry/computeBounds.js';
+import { nativeStrokeExpansion } from './nativeStrokeExpansion.js';
 
 export function collectVisibleMesh(mesh, projection, frustum, frustumLengths, candidates) {
   if (!mesh.geometry.bounds) computeBounds(mesh.geometry);
@@ -12,16 +13,18 @@ export function collectVisibleMesh(mesh, projection, frustum, frustumLengths, ca
     sphere.x = world[0] * center[0] + world[4] * center[1] + world[8] * center[2] + world[12];
     sphere.y = world[1] * center[0] + world[5] * center[1] + world[9] * center[2] + world[13];
     sphere.z = world[2] * center[0] + world[6] * center[1] + world[10] * center[2] + world[14];
-    sphere.radius = bounds.radius * Math.max(
+    sphere.scale = Math.max(
       Math.hypot(world[0], world[1], world[2]),
       Math.hypot(world[4], world[5], world[6]),
       Math.hypot(world[8], world[9], world[10])
     );
+    sphere.radius = bounds.radius * sphere.scale;
     sphere.bounds = bounds;
     sphere.matrix = world;
     sphere.version = mesh._worldMatrixVersion;
   }
-  const { x, y, z, radius } = sphere;
+  const { x, y, z } = sphere;
+  const radius = sphere.radius + nativeStrokeExpansion(mesh) * sphere.scale;
   const clipZ = projection[2] * x + projection[6] * y + projection[10] * z + projection[14];
   const clipW = projection[3] * x + projection[7] * y + projection[11] * z + projection[15];
   mesh._sortDepth = clipZ / clipW;

package/src/rendering/drawGeometry.js

@@ -7,7 +7,7 @@ import { prepareMeshTextures } from '../textures/prepareMeshTextures.js';
 
 /** Upload retained CPU data and draw one mesh in the active WebGPU render pass. */
 export function drawGeometry(layer, mesh, pass, cullMode, frontFace) {
-  const { geometry } = mesh;
+  const { geometry } = mesh, { attributes, drawRange } = geometry;
   const renderer = rendererByLayer.get(layer);
   const { device } = renderer;
   const pipeline = drawPipeline(renderer, mesh, cullMode, frontFace);
@@ -19,25 +19,25 @@ export function drawGeometry(layer, mesh, pass, cullMode, frontFace) {
     meshOffsets
   ));
 
-  pass.setVertexBuffer(0, geometry.attributes.position.buffer);
-  pass.setVertexBuffer(1, geometry.attributes.normal.buffer);
-  if (geometry.attributes.color) pass.setVertexBuffer(2, geometry.attributes.color.buffer);
-  if (geometry.attributes.uv) pass.setVertexBuffer(3, geometry.attributes.uv.buffer);
-  const instances = geometry.attributes.instanceOffset;
+  pass.setVertexBuffer(0, attributes.position.buffer);
+  pass.setVertexBuffer(1, attributes.normal.buffer);
+  if (attributes.color) pass.setVertexBuffer(2, attributes.color.buffer);
+  if (attributes.uv) pass.setVertexBuffer(3, attributes.uv.buffer);
+  const instances = attributes.instanceOffset;
   if (instances) pass.setVertexBuffer(4, instances.buffer);
   let name, attribute;
-  for (name in geometry.attributes) {
-    attribute = geometry.attributes[name];
+  for (name in attributes) {
+    attribute = attributes[name];
     if (!attribute.needsUpdate) continue;
     device.queue.writeBuffer(attribute.buffer, 0, attribute.data);
     attribute.needsUpdate = false;
     if (name === 'position' || name === 'instanceOffset') geometry.bounds = null;
   }
-  const index = geometry.attributes.index;
+  const index = attributes.index;
   if (index) {
     pass.setIndexBuffer(index.buffer, index.indexFormat);
-    pass.drawIndexed(geometry.drawRange.count, instances?.count ?? 1, geometry.drawRange.start, 0, 0);
+    pass.drawIndexed(drawRange.count, instances?.count ?? 1, drawRange.start, 0, 0);
   } else {
-    pass.draw(geometry.drawRange.count, instances?.count ?? 1, geometry.drawRange.start, 0);
+    pass.draw(drawRange.count, instances?.count ?? 1, drawRange.start, 0);
   }
 }

package/src/rendering/drawSceneMeshes.js

@@ -9,11 +9,13 @@ import { drawGeometry } from './drawGeometry.js';
 export function drawSceneMeshes(layer, encoder, meshes) {
   const renderer = rendererByLayer.get(layer);
   const pass = encoder.beginRenderPass((
-    scenePass.colorAttachments[0].view = renderer.context.getCurrentTexture().createView(),
+    scenePass.colorAttachments[0].view = renderer.colorTexture.createView(),
+    scenePass.colorAttachments[0].resolveTarget = renderer.context.getCurrentTexture().createView(),
     scenePass.depthStencilAttachment.view = renderer.depthTexture.createView(),
     scenePass
   ));
   scenePass.colorAttachments[0].view = null;
+  scenePass.colorAttachments[0].resolveTarget = null;
   scenePass.depthStencilAttachment.view = null;
   pass.setViewport(0, 0, renderer.canvas.width, renderer.canvas.height, 0, 1);
   pass.setBindGroup(1, renderer.sunlight.bindGroup);

package/src/rendering/nativeStrokeExpansion.js

@@ -0,0 +1,4 @@
+export function nativeStrokeExpansion(mesh) {
+  const strokeScale = mesh.program?.uniforms?.strokeScale?.value ?? 1;
+  return Math.max(0, strokeScale - 1) * (mesh.geometry.nativeStrokeRadius || 0);
+}

package/src/rendering/prepareMeshUniforms.js

@@ -20,6 +20,8 @@ export function prepareMeshUniforms(renderer, mesh) {
   data[base + 34] = mesh.program.nightSparkle ? data[55] : 0;
   data[base + 35] = mesh.ground ? 1 : mesh._appearance ?? 1;
   prepareMeshCutout(renderer, mesh, base);
+  data[base + 40] = uniforms.strokeScale?.value ?? 1;
+  data[base + 41] = data[base + 42] = data[base + 43] = 0;
   return offset;
 }
 import { prepareMeshCutout } from '../materials/prepareMeshCutout.js';

package/src/rendering/resizeRenderer.js

@@ -2,22 +2,32 @@ import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
 import { sizeByLayer } from '../weakmaps/sizeByLayer.js';
 
 import { depthTexture as sharedDepthTexture } from '../globals/depthTexture.js';
+import { colorTexture as sharedColorTexture } from '../globals/colorTexture.js';
 
 
 import { destroyTexture } from '../textures/destroyTexture.js';
 
 export function resizeRenderer(layer, size) {
+  const renderer = rendererByLayer.get(layer);
   if (!sizeByLayer.get(layer) || !sizeByLayer.get(layer).equals(size)) {
-    rendererByLayer.get(layer).width = size.x;
-    rendererByLayer.get(layer).height = size.y;
-    rendererByLayer.get(layer).canvas.width = Math.round(size.x * rendererByLayer.get(layer).dpr);
-    rendererByLayer.get(layer).canvas.height = Math.round(size.y * rendererByLayer.get(layer).dpr);
-    rendererByLayer.get(layer).canvas.style.width = `${size.x}px`;
-    rendererByLayer.get(layer).canvas.style.height = `${size.y}px`;
-    if (rendererByLayer.get(layer).depthTexture) destroyTexture(layer, rendererByLayer.get(layer).depthTexture);
-    rendererByLayer.get(layer).depthTexture = rendererByLayer.get(layer).device.createTexture((
-      sharedDepthTexture.size[0] = rendererByLayer.get(layer).canvas.width,
-      sharedDepthTexture.size[1] = rendererByLayer.get(layer).canvas.height,
+    renderer.width = size.x;
+    renderer.height = size.y;
+    renderer.canvas.width = Math.round(size.x * renderer.dpr);
+    renderer.canvas.height = Math.round(size.y * renderer.dpr);
+    renderer.canvas.style.width = `${size.x}px`;
+    renderer.canvas.style.height = `${size.y}px`;
+    if (renderer.depthTexture) destroyTexture(layer, renderer.depthTexture);
+    renderer.colorTexture?.destroy();
+    renderer.colorTexture = renderer.device.createTexture((
+      sharedColorTexture.size[0] = renderer.canvas.width,
+      sharedColorTexture.size[1] = renderer.canvas.height,
+      sharedColorTexture.format = renderer.format,
+      sharedColorTexture.usage = GPUTextureUsage.RENDER_ATTACHMENT,
+      sharedColorTexture
+    ));
+    renderer.depthTexture = renderer.device.createTexture((
+      sharedDepthTexture.size[0] = renderer.canvas.width,
+      sharedDepthTexture.size[1] = renderer.canvas.height,
       sharedDepthTexture.usage = GPUTextureUsage.RENDER_ATTACHMENT,
       sharedDepthTexture
     ));

package/src/scene/initializerFor.js

@@ -1,14 +1,13 @@
-import { initializeGeoJSON } from '../sources/initializeGeoJSON.js';
 import { initRaster } from '../raster/initRaster.js';
 import { initTerrain } from '../terrain/initTerrain.js';
 import { initTraffic } from '../traffic/initTraffic.js';
 import { initCog } from '../cog/initCog.js';
+import { sceneEmptyOptions } from '../globals/sceneEmptyOptions.js';
 
-export function initializerFor(type) {
+export function initializerFor(type, options = sceneEmptyOptions) {
   switch (type) {
-    case 'geojson': return initializeGeoJSON;
-    case 'pmtiles': return initRaster;
-    case 'cog': return initCog;
+    case 'raster': return options.asset !== undefined || /\.tiff?(?:[?#]|$)/i.test(options.url)
+      ? initCog : initRaster;
     case 'terrain': return initTerrain;
     case 'traffic': return initTraffic;
     default: return null;