leaflet-city-mapper 0.0.6 → 0.0.7

package/libs/leaflet.js

@@ -11,7 +11,7 @@ const openlayers = new URLSearchParams(location.search).get('engine') === 'openl
 document.write((openlayers
   ? '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@10.6.1/ol.css">' +
     '<script src="https://cdn.jsdelivr.net/npm/ol@10.6.1/dist/ol.js"><\/script>' +
-    '<script src="https://unpkg.com/leaflet-city-mapper@0.0.6/libs/openlayers-bindings.min.js"><\/script>'
+    '<script src="https://unpkg.com/leaflet-city-mapper@0.0.7/libs/openlayers-bindings.min.js"><\/script>'
   : '<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9/dist/leaflet.css"><script src="https://unpkg.com/leaflet@1.9/dist/leaflet-src.js"><\/script>'));
 
 const engineStyle = document.createElement('style');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leaflet-city-mapper",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "A small 3D rendering engine for leaflet",
   "type": "module",
   "main": "dist/leaflet-city-mapper.js",

package/src/camera/setBearing.js

@@ -0,0 +1,5 @@
+import { mapSetBearing } from './mapSetBearing.js';
+
+export function setBearing(bearing, options) {
+  return mapSetBearing(this, bearing, options);
+}

package/src/camera/setPitch.js

@@ -0,0 +1,5 @@
+import { mapSetPitch } from './mapSetPitch.js';
+
+export function setPitch(pitch, options) {
+  return mapSetPitch(this, pitch, options);
+}

package/src/cog/initCog.js

@@ -1,7 +1,7 @@
 import { initRaster } from '../raster/initRaster.js';
-import { openCog } from './openCog.js';
+import { openCogInWorker } from '../workers/openCogInWorker.js';
 
 export function initCog(layer, options) {
   initRaster(layer, /* alloc */ { ariaLabel: 'COG raster', ...options,
-    archive: options.archive || openCog(/* alloc */ new URL(options.url, document.baseURI).href, options.asset) });
+    archive: options.archive || openCogInWorker(layer, options) });
 }

package/src/core/gridlayerGetTiledPixelBounds.js

@@ -3,10 +3,43 @@ import { tiledBounds } from '../globals/tiledBounds.js';
 
 import { mapGetBearing } from '../camera/mapGetBearing.js';
 import { mapGetPitch } from '../camera/mapGetPitch.js';
+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 { groundBounds } from '../projections/groundBounds.js';
+import { animationPoint } from '../projections/transformZoomAnimationPoint.js';
 
 export function gridlayerGetTiledPixelBounds(center) {
-  if (!mapGetBearing(this._map) && !mapGetPitch(this._map)) return tiledBounds.value.call(this, center);
-  const bounds = this._map.getBounds();
-  return /* alloc */ new L.Bounds(this._map.project(bounds.getNorthWest(), this._tileZoom),
-    this._map.project(bounds.getSouthEast(), this._tileZoom));
+  const map = this._map, stream = streamTerrainByMap.get(map);
+  if (!stream && !mapGetBearing(map) && !mapGetPitch(map)) return tiledBounds.value.call(this, center);
+  const bounds = map.getBounds();
+  const result = /* alloc */ new L.Bounds(map.project(bounds.getNorthWest(), this._tileZoom),
+    map.project(bounds.getSouthEast(), this._tileZoom));
+  const shared = renderers.get(map), origin = shared && sceneOriginByLayer.get(shared);
+  if (!stream || !origin) return result;
+  let minimum = Infinity, maximum = -Infinity, key, entry;
+  for ([key, entry] of stream.terrainCache) {
+    if (!key.startsWith(`${this._tileZoom}/`) || !entry.range) continue;
+    minimum = Math.min(minimum, entry.range[0]);
+    maximum = Math.max(maximum, entry.range[1]);
+  }
+  if (!Number.isFinite(minimum) || !Number.isFinite(maximum)) return result;
+  const zoom = cameraViewByMap.get(map)?.zoom ?? map.getZoom();
+  const scale = map.options.crs.scale(zoom) / (earthCirc * Math.cos(origin.lat * radians));
+  const target = mapElevationOf(map, map.getCenter()) ?? 0;
+  let i, j, footprint, point, raw;
+  for (i = 0; i < 2; i++) {
+    footprint = groundBounds(map, undefined, ((i ? maximum : minimum) - target) * scale);
+    for (j = 0; j < 2; j++) {
+      point = j ? footprint.max : footprint.min;
+      raw = mapMethods.value.containerPointToLayerPoint.call(map, animationPoint(map, point, true));
+      result.extend(map.project(map.layerPointToLatLng(raw), this._tileZoom));
+    }
+  }
+  return result;
 }

package/src/core/markerSetPos.js

@@ -5,7 +5,7 @@ import { markerCameraIconPoint } from '../projections/markerCameraIconPoint.js';
 import { displayPoint } from '../projections/displayContainerPoint.js';
 
 export function markerSetPos(point) {
-  markerMethods.value._setPos.call(this, displayPoint(this._map, point));
+  markerMethods.value._setPos.call(this, displayPoint(this._map, point, this.getLatLng()));
   let i, element, key, direction, options, anchor;
   for (i = 0; i < 2; i++) {
     element = i ? this._shadow : this._icon;

package/src/core/popupGetEvents.js

@@ -3,6 +3,6 @@ import { popupEvents } from '../globals/popupEvents.js';
 
 export function popupGetEvents() {
   const events = popupEvents.value.call(this);
-  events.rotate = events.pitch = events.move = this._updatePosition;
+  events.rotate = events.pitch = events.move = events.terrainchange = this._updatePosition;
   return events;
 }

package/src/core/popupUpdatePosition.js

@@ -5,13 +5,13 @@ import { popupPosition } from '../globals/popupPosition.js';
 import { displayPoint } from '../projections/displayContainerPoint.js';
 
 export function popupUpdatePosition() {
-  popupPosition.value.call(this);
-  if (!this._map) return;
-  const point = this._map.latLngToLayerPoint(this._latlng), delta = displayPoint(this._map, point).subtract(point);
-  if (this._zoomAnimated) {
-    L.DomUtil.setPosition(this._container, L.DomUtil.getPosition(this._container).add(delta));
-  } else {
-    this._container.style.left = `${this._containerLeft + delta.x}px`;
-    this._container.style.bottom = `${this._containerBottom - delta.y}px`;
+  popupPosition.value.call(this);
+  if (!this._map) return;
+  const point = this._map.latLngToLayerPoint(this._latlng), delta = displayPoint(this._map, point, this._latlng).subtract(point);
+  if (this._zoomAnimated) {
+    L.DomUtil.setPosition(this._container, L.DomUtil.getPosition(this._container).add(delta));
+  } else {
+    this._container.style.left = `${this._containerLeft + delta.x}px`;
+    this._container.style.bottom = `${this._containerBottom - delta.y}px`;
   }
 }

package/src/core/tooltipGetEvents.js

@@ -3,6 +3,6 @@ import { tooltipEvents } from '../globals/tooltipEvents.js';
 
 export function tooltipGetEvents() {
   const events = tooltipEvents.value.call(this);
-  events.rotate = events.pitch = events.move = this._updatePosition;
+  events.rotate = events.pitch = events.move = events.terrainchange = this._updatePosition;
   return events;
 }

package/src/core/tooltipSetPosition.js

@@ -5,7 +5,7 @@ import { tooltipPosition } from '../globals/tooltipPosition.js';
 import { displayPoint } from '../projections/displayContainerPoint.js';
 
 export function tooltipSetPosition(point) {
-  tooltipPosition.value.call(this, point);
-  const delta = displayPoint(this._map, point).subtract(point);
+  tooltipPosition.value.call(this, point);
+  const delta = displayPoint(this._map, point, this._latlng).subtract(point);
   L.DomUtil.setPosition(this._container, L.DomUtil.getPosition(this._container).add(delta));
 }

package/src/geometry/appendNativeTriangle.js

@@ -1,3 +1,3 @@
-export function triangle(point, target, a, b, c) {
-  return target.push(...point(a), ...point(b), ...point(c));
+export function triangle(point, target, a, b, c, anchorA, anchorB, anchorC) {
+  return target.push(...point(a, anchorA), ...point(b, anchorB), ...point(c, anchorC));
 }

package/src/geometry/createModelGeometry.js

@@ -1,14 +1,8 @@
-import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
-
-import { vertexNormals } from './vertexNormals.js';
+import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
+
 import { createProgram } from '../materials/createProgram.js';
 
 export function createModelGeometry(context, primitive, attributes) {
-  let normals;
-  if (!attributes.normal) {
-    normals = vertexNormals(attributes.position.data, attributes.index?.data);
-    attributes.normal = /* alloc */ { size: 3, data: normals };
-  }
   const style = context.materials[primitive.material] || /* alloc */ {
     color: /* alloc */ [1, 1, 1], metallic: 1,
   };
@@ -18,7 +12,6 @@ export function createModelGeometry(context, primitive, attributes) {
   const program = createProgram(context.backend, style);
   context.resources.push(program);
   const device = rendererByLayer.get(context.backend).device;
-  if (attributes.index?.data instanceof Uint8Array) attributes.index.data = Uint16Array.from(attributes.index.data);
   let name, attribute;
   for ([name, attribute] of Object.entries(attributes)) {
     attribute.size ||= 1;

package/src/geometry/dashedSegment.js

@@ -2,15 +2,20 @@ import { segment } from './segment.js';
 
 export function dashedSegment(context, a, b, length, distance, period) {
   const dash = context.dash;
-  let offset = 0, phase, index, end, delta;
+  let offset = 0, phase = ((distance % period) + period) % period, index = 0, end, delta, skipped = 0;
+  while (index < dash.length - 1 && phase >= dash[index]) phase -= dash[index++];
+  let remaining = Math.max(0, dash[index] - phase);
   while (offset < length) {
-    phase = ((distance + offset) % period + period) % period, index = 0;
-    while (phase >= dash[index]) phase -= dash[index++];
-    end = Math.min(length, offset + dash[index] - phase);
-    if (index % 2 === 0) {
+    end = Math.min(length, offset + remaining);
+    if (end > offset && index % 2 === 0) {
       delta = b.subtract(a).divideBy(length);
       segment(context, a.add(delta.multiplyBy(offset)), a.add(delta.multiplyBy(end)), true, true);
     }
+    if (end <= offset) {
+      if (++skipped >= dash.length) throw /* alloc */ new Error('Leaflet dashArray is too small for these coordinates');
+    } else skipped = 0;
     offset = end;
+    index = (index + 1) % dash.length;
+    remaining = dash[index];
   }
 }

package/src/geometry/disk.js

@@ -6,6 +6,6 @@ export function disk(point, center, radius, target, radiusY = radius) {
   const count = Math.max(12, Math.min(128, Math.ceil(Math.PI * Math.sqrt(radius))));
   let i;
   for (i = 0; i < count; i++) {
-    triangle(point, target, center, diskAt(center, radius, radiusY, count, i), diskAt(center, radius, radiusY, count, i + 1));
+    triangle(point, target, center, diskAt(center, radius, radiusY, count, i), diskAt(center, radius, radiusY, count, i + 1), center, center, center);
   }
 }

package/src/geometry/fillNativePolygon.js

@@ -0,0 +1,20 @@
+import { triangle } from './appendNativeTriangle.js';
+import { triangulate } from '../triangulation/triangulate.js';
+
+export function fillNativePolygon(context, projected) {
+  const { options, fill, point } = context;
+  if (options.triangulated) {
+    if (projected.length !== 1 || projected[0].length !== 3) {
+      throw /* alloc */ new Error('triangulated polygons require three vertices per polygon and no holes');
+    }
+    triangle(point, fill, projected[0][0], projected[0][1], projected[0][2]);
+    return;
+  }
+  const valid = /* alloc */ [];
+  let ring, indices;
+  for (ring of projected) if (ring.length >= 3) valid.push(ring);
+  const vertices = valid.flat();
+  for (indices of triangulate(valid[0], valid.slice(1))) {
+    triangle(point, fill, vertices[indices[0]], vertices[indices[1]], vertices[indices[2]]);
+  }
+}

package/src/geometry/lineJoin.js

@@ -19,8 +19,8 @@ export function lineJoin(context, points, i, b, length) {
   const from = a.add(n1.multiplyBy(radius)), to = a.add(n2.multiplyBy(radius));
   const denominator = 1 + n1.x * n2.x + n1.y * n2.y;
   const miter = denominator > 0 ? n1.add(n2).multiplyBy(radius / denominator) : null;
-  triangle(point, stroke, from, a, to);
+  triangle(point, stroke, from, a, to, a, a, a);
   if (options.lineJoin === 'miter' && miter && Math.hypot(miter.x, miter.y) <= radius * 4) {
-    triangle(point, stroke, from, a.add(miter), to);
+    triangle(point, stroke, from, a.add(miter), to, a, a, a);
   }
 }

package/src/geometry/markerQuadCorners.js

@@ -8,11 +8,17 @@ import { localPosition } from '../projections/localPosition.js';
 
 import { transformNativePoint } from '../transforms/transformNativePoint.js';
 import { markerImageBounds } from './markerImageBounds.js';
+import { streamTerrainByMap } from '../weakmaps/streamTerrainByMap.js';
+import { mapElevationOf } from '../terrain/mapElevationOf.js';
 
 export function markerQuadCorners(state, key, image) {
   const { source, map, backend: layer } = state;
 
   const position = localPosition(state, source.getLatLng());
+  if (streamTerrainByMap.get(map)) {
+    const root = rootByLayer.get(layer), elevation = mapElevationOf(map, source.getLatLng());
+    if (Number.isFinite(elevation)) position[1] = (elevation - root.position[1]) / root.scale[1];
+  }
   const size = map.getSize();
   const matrices = state.markerMatrices ||= /* alloc */ {
     root: /* alloc */ new DOMMatrix(),

package/src/geometry/nativeGeometry.js

@@ -3,7 +3,7 @@ import { visit } from './visitNativeCoordinates.js';
 import { dashValues } from './dashValues.js';
 import { circleGeometry } from './circleGeometry.js';
 
-/** Leaflet paths become flat triangles; pixel-sized strokes are rebuilt on zoom. */
+/** Leaflet paths become flat triangles; solid strokes retain stationary zoom anchors. */
 export function nativeGeometry(source, map, point) {
   const fill = /* alloc */ [];
   const stroke = /* alloc */ [];

package/src/geometry/polygon.js

@@ -1,23 +1,17 @@
-import { triangle } from './appendNativeTriangle.js';
 import { line } from './line.js';
-import { triangulate } from '../triangulation/triangulate.js';
+import { fillNativePolygon } from './fillNativePolygon.js';
 
 export function polygon(context, rings, closed) {
-  const { options, fill, point, map } = context;
+  const { options, map } = context;
   const projected = /* alloc */ [];
-  let ring, path, latlng, indices;
+  let ring, path, latlng;
   for (ring of rings) {
     path = /* alloc */ [];
     for (latlng of ring) path.push(map.project(latlng));
     projected.push(path);
   }
   if (closed && options.fill && projected[0]?.length >= 3) {
-    const valid = /* alloc */ [];
-    for (ring of projected) if (ring.length >= 3) valid.push(ring);
-    const vertices = valid.flat();
-    for (indices of triangulate(valid[0], valid.slice(1))) {
-      triangle(point, fill, vertices[indices[0]], vertices[indices[1]], vertices[indices[2]]);
-    }
+    fillNativePolygon(context, projected);
   }
   for (ring of projected) line(context, ring, closed);
 }

package/src/geometry/segment.js

@@ -1,10 +1,11 @@
-import { L } from '../globals/L.js';
+import { L } from '../globals/L.js';
 import { triangle } from './appendNativeTriangle.js';
 import { disk } from './disk.js';
 
 export function segment(context, a, b, startCap, endCap) {
   const { options, width, stroke, point } = context;
   const radius = width / 2;
+  const anchorA = a, anchorB = b;
   const length = a.distanceTo(b);
   if (!length) return;
   const direction = b.subtract(a).divideBy(length);
@@ -13,8 +14,8 @@ export function segment(context, a, b, startCap, endCap) {
     if (startCap) a = a.subtract(direction.multiplyBy(radius));
     if (endCap) b = b.add(direction.multiplyBy(radius));
   }
-  triangle(point, stroke, a.add(normal), a.subtract(normal), b.add(normal));
-  triangle(point, stroke, b.add(normal), a.subtract(normal), b.subtract(normal));
+  triangle(point, stroke, a.add(normal), a.subtract(normal), b.add(normal), anchorA, anchorA, anchorB);
+  triangle(point, stroke, b.add(normal), a.subtract(normal), b.subtract(normal), anchorB, anchorA, anchorB);
   if (options.lineCap === 'round') {
     if (startCap) disk(point, a, radius, stroke);
     if (endCap) disk(point, b, radius, stroke);

package/src/globals/colorTexture.js

@@ -0,0 +1,6 @@
+export const colorTexture = {
+  size: [null, null],
+  format: null,
+  sampleCount: 4,
+  usage: null
+};

package/src/globals/depthTexture.js

@@ -1,5 +1,6 @@
 export const depthTexture = {
   size: [null, null],
   format: 'depth24plus',
+  sampleCount: 4,
   usage: null
 };

package/src/globals/drawMeshEntry.js

@@ -2,6 +2,6 @@ export const drawMeshEntry = {
   binding: 0,
   resource: {
     buffer: null,
-    size: 160
+    size: 176
   }
 };

package/src/globals/meshPipeline.js

@@ -19,6 +19,7 @@ export const meshPipeline = {
     cullMode: null,
     frontFace: null
   },
+  multisample: { count: 4 },
   depthStencil: {
     format: 'depth24plus',
     depthWriteEnabled: null,

package/src/globals/mvtTextDecoder.js

@@ -0,0 +1 @@
+export const mvtTextDecoder = new TextDecoder('utf-8', { fatal: true });

package/src/globals/nativeScalableStyleKeys.js

@@ -0,0 +1 @@
+export const nativeScalableStyleKeys = new Set(['color', 'opacity', 'weight', 'fillColor', 'fillOpacity']);

package/src/globals/scenePass.js

@@ -1,6 +1,7 @@
 export const scenePass = {
   colorAttachments: [{
     view: null,
+    resolveTarget: null,
     clearValue: {
       r: 0,
       g: 0,

package/src/globals/vectorStyleNamedColors.js

@@ -0,0 +1,8 @@
+export const vectorStyleNamedColors = {
+  black: [0, 0, 0, 1],
+  white: [255, 255, 255, 1],
+  gray: [128, 128, 128, 1],
+  blue: [0, 0, 255, 1],
+  red: [255, 0, 0, 1],
+  green: [0, 128, 0, 1]
+};

package/src/globals/vectorTileEvents.js

@@ -0,0 +1 @@
+export const vectorTileEvents = 'move zoom rotate pitch resize viewreset';

package/src/globals/workerCogSource.js

@@ -0,0 +1 @@
+export const workerCogSource = { key: null, archive: null };

package/src/gpu/mountRenderer.js

@@ -1,5 +1,5 @@
-import { sizeByLayer } from '../weakmaps/sizeByLayer.js';
-
+import { sizeByLayer } from '../weakmaps/sizeByLayer.js';
+
 import { onMapChange } from '../scene/onMapChange.js';
 import { startZoom } from '../animations/startZoom.js';
 import { onZoomAnim } from '../animations/onZoomAnim.js';
@@ -8,17 +8,10 @@ import { endZoom } from '../animations/endZoom.js';
 export function mountRenderer(layer, map, canvas) {
   sizeByLayer.set(layer, null);
   canvas.className = 'leaflet-3d';
-  canvas.style.cssText = 'position:absolute;top:0;left:0;pointer-events:none';
+  canvas.style.cssText = 'position:absolute;top:0;left:0;z-index:1;pointer-events:none';
   canvas.setAttribute('role', 'img');
   canvas.setAttribute('aria-label', layer.options.ariaLabel ?? '3D scene');
-  let pane = map.getPane('webgpuPane');
-  if (!pane) {
-    pane = map.createPane('webgpuPane', map.getContainer());
-    // The pitch sky uses 0 and may be inserted after this pane.
-    pane.style.zIndex = 1;
-    pane.style.pointerEvents = 'none';
-  }
-  pane.append(canvas);
+  map.getPane('mapPane').before(canvas);
   map.on('move zoom rotate pitch resize viewreset layeradd layerremove', onMapChange, layer);
   map.on('zoomstart', startZoom, layer);
   map.on('zoomanim', onZoomAnim, layer);

package/src/gpu/releaseRenderer.js

@@ -2,6 +2,7 @@ export async function releaseRenderer(renderer, layer) {
   try {
     await renderer.device.queue.onSubmittedWorkDone();
     renderer.depthTexture?.destroy();
+    renderer.colorTexture?.destroy();
     renderer.roofFallbackTexture?.texture?.destroy();
     renderer.uniformBuffer?.destroy();
     renderer.sunlight?.texture?.destroy();

package/src/index.js

@@ -4,21 +4,16 @@ import { layerCallInitHooks as sharedLayerCallInitHooks } from './globals/layerC
 import { removeLayer as sharedRemoveLayer } from './globals/removeLayer.js';
 
 import './camera/mapCamera.js';
-import { init3D } from './scene/init3D.js';
-import { initNativeGPU } from './native/initNativeGPU.js';
-import { initRaster } from './raster/initRaster.js';
-import { setGeoJSONData } from './sources/setGeoJSONData.js';
-import { initTerrain } from './terrain/initTerrain.js';
 import './sunlight/initSunlight.js';
-import { initTraffic } from './traffic/initTraffic.js';
 import './walk/initWalk.js';
 
-import { initializeNativeLayer } from './core/initializeNativeLayer.js';
 import { layerLayerAdd } from './scene/addRegisteredLayer.js';
 import { layerInitialize } from './scene/layerInitialize.js';
 import { removeLayer } from './core/removeLayer.js';
 import { getPitch } from './camera/getPitch.js';
 import { getBearing } from './camera/getBearing.js';
+import { setPitch } from './camera/setPitch.js';
+import { setBearing } from './camera/setBearing.js';
 import { setRotation } from './core/setRotation.js';
 import { layerCallInitHooks } from './core/layerCallInitHooks.js';
 
@@ -39,19 +34,18 @@ import { layerCallInitHooks } from './core/layerCallInitHooks.js';
  * Operations receive the layer explicitly, without subclasses or prototype replacement.
  * Dataset-specific code and data (routes, timetables, API loaders) belong to the application, e.g. misc/.
  *
- * When `type` is omitted, inline FeatureCollections use 'geojson'; *.pmtiles URLs use
- * 'pmtiles', *.tif/*.tiff URLs use 'cog', and other sources use '3d'.
+ * When `type` is omitted, *.pmtiles and *.tif/*.tiff URLs use 'raster'; other sources use 'vector'.
  */
 
 layerProto.value = Object.defineProperties({}, Object.getOwnPropertyDescriptors(L.Layer.prototype));
 sharedLayerCallInitHooks.value = L.Layer.prototype.callInitHooks;
 
 /**
- * The '3d' layer type: native WebGPU scene synchronized with the map camera.
+ * The 'vector' layer type: native WebGPU scene synchronized with the map camera.
  * Layers on one map share a canvas, scene and camera; each has its own root transform.
  *
  * @typedef {Object} Layer3DOptions Layer options; pane and attribution remain standard L.Layer options.
- * @property {string} [type] '3d', 'geojson', 'pmtiles', 'cog', 'terrain' or 'traffic'.
+ * @property {'vector'|'raster'|'terrain'|'traffic'} [type]
  * @property {number[]} [center] Local origin [lat,lng]; defaults to the first map center.
  * @property {number} [terrainOffset=0] Vertical offset in metres when terrain is enabled.
  * @property {boolean} [terrainConform=false] Fit lower model geometry to local terrain elevation.
@@ -108,5 +102,5 @@ L.Layer.include({
 });
 
 sharedRemoveLayer.value = L.Map.prototype.removeLayer;
-L.Map.include({ removeLayer, getPitch, getBearing });
+L.Map.include({ removeLayer, getPitch, getBearing, setPitch, setBearing });
 L.Marker.include({ setRotation });

package/src/materials/createProgramUniforms.js

@@ -13,5 +13,6 @@ export function createProgramUniforms(material) {
   if (material.emissiveTexture) uniforms.emissiveTexture = /* alloc */ { value: material.emissiveTexture };
   if (material.occlusionTexture) uniforms.occlusionTexture = /* alloc */ { value: material.occlusionTexture };
   if (material.roofTexture || material.wallTexture) uniforms.roofTexture = /* alloc */ { value: null };
+  if (material.nativeStroke) uniforms.strokeScale = /* alloc */ { value: 1 };
   return uniforms;
 }

package/src/models/loadModel.js

@@ -3,14 +3,14 @@ import { modelByLayer } from '../weakmaps/modelByLayer.js';
 import { modelUrlByLayer } from '../weakmaps/modelUrlByLayer.js';
 import { rootByLayer } from '../weakmaps/rootByLayer.js';
 import { terrain3DByMap } from '../weakmaps/terrain3DByMap.js';
+import { cameraViewByMap } from '../weakmaps/cameraViewByMap.js';
 
 
 
-import { decodeModel } from './decodeModel.js';
+import { runSourceWorker } from '../workers/runSourceWorker.js';
 import { setParent } from '../scene/setParent.js';
 import { emptyNode } from '../scene/createSceneNode.js';
 import { conformModelToTerrain } from '../geometry/conformModelToTerrain.js';
-import { loadModelResources } from './loadModelResources.js';
 import { createModelContext } from './createModelContext.js';
 import { buildModelNodes } from './buildModelNodes.js';
 import { applyModelTransform } from './applyModelTransform.js';
@@ -22,14 +22,10 @@ import { applyModelTransform } from './applyModelTransform.js';
 export async function loadModel(layer) {
   await addedByLayer.get(layer).promise;
   const url = /* alloc */ new URL(modelUrlByLayer.get(layer), document.baseURI).href;
-  const response = await fetch(url);
-  if (!response.ok) {
-    throw /* alloc */ new Error(`Unable to load model: HTTP ${response.status}`);
-  }
-  const data = await response.arrayBuffer();
-  const description = decodeModel(data);
-  const directory = /* alloc */ new URL('.', url).href;
-  const images = await loadModelResources(layer, description, directory);
+  const { description, images } = await runSourceWorker(layer._map, layer.options.workerUrl,
+    /* alloc */ { type: 'model', url });
+  await addedByLayer.get(layer).promise;
+  await cameraViewByMap.get(layer._map);
   const context = createModelContext(layer, description, images);
   const scene = description.scenes?.[description.scene || 0];
   if (!scene) throw /* alloc */ new Error('Missing glTF scene');

package/src/models/loadModelResources.js

@@ -1,20 +1,14 @@
-import { addedByLayer } from '../weakmaps/addedByLayer.js';
-import { cameraViewByMap } from '../weakmaps/cameraViewByMap.js';
-
 import { geometryEmpty } from '../globals/geometryEmpty.js';
 import { loadBuffer } from './loadBuffer.js';
 import { loadImage } from '../textures/loadModelImage.js';
 
-export async function loadModelResources(layer, description, directory) {
+export async function loadModelResources(description, directory) {
   const bufferRequests = /* alloc */ [];
   let buffer;
   for (buffer of description.buffers || geometryEmpty) bufferRequests.push(loadBuffer(buffer, directory));
   await Promise.all(bufferRequests);
-  await addedByLayer.get(layer).promise;
   const imageRequests = /* alloc */ [];
   let image;
   for (image of description.images || geometryEmpty) imageRequests.push(loadImage(description, directory, image));
-  const images = await Promise.all(imageRequests);
-  await cameraViewByMap.get(layer._map);
-  return images;
+  return Promise.all(imageRequests);
 }

package/src/models/modelNode.js

@@ -4,8 +4,6 @@ import { geometryEmpty } from '../globals/geometryEmpty.js';
 import { emptyNode } from '../scene/createSceneNode.js';
 import { nodeMatrix } from '../transforms/modelNodeMatrix.js';
 import { setParent } from '../scene/setParent.js';
-import { readModelAttributes } from './readModelAttributes.js';
-import { readModelIndices } from './readModelIndices.js';
 import { createModelGeometry } from '../geometry/createModelGeometry.js';
 
 export function modelNode(context, index) {
@@ -20,13 +18,11 @@ export function modelNode(context, index) {
     name: spec.name
   };
   group.matrix = nodeMatrix(spec);
-  let primitive, attributeData, attributes, vertexCount, built, mesh, child;
+  let primitive, attributes, built, mesh, child;
   if (spec.mesh !== undefined) {
     for (primitive of description.meshes[spec.mesh].primitives) {
-      attributeData = readModelAttributes(description, primitive);
-      attributes = attributeData.attributes;
-      vertexCount = attributeData.vertexCount;
-      readModelIndices(description, primitive, attributes, vertexCount);
+      // Node instances own their CPU data and GPU buffers, even when they share a glTF mesh.
+      attributes = structuredClone(primitive.preparedAttributes);
       built = createModelGeometry(context, primitive, attributes);
       mesh = /* alloc */ {
         ...emptyNode(),

package/src/models/prepareModel.js

@@ -0,0 +1,19 @@
+import { decodeModel } from './decodeModel.js';
+import { loadModelResources } from './loadModelResources.js';
+import { prepareModelGeometry } from './prepareModelGeometry.js';
+
+export async function prepareModel(url) {
+  const response = await fetch(url);
+  if (!response.ok) throw /* alloc */ new Error(`Unable to load model: HTTP ${response.status}`);
+  const description = decodeModel(await response.arrayBuffer());
+  const scene = description.scenes?.[description.scene || 0];
+  if (!scene) throw /* alloc */ new Error('Missing glTF scene');
+  const images = await loadModelResources(description, /* alloc */ new URL('.', url).href);
+  const transfers = prepareModelGeometry(description, scene);
+  let image;
+  for (image of images) transfers.push(image);
+  delete description.buffers;
+  delete description.bufferViews;
+  delete description.accessors;
+  return /* alloc */ { description, images, transfers };
+}