leaflet-city-mapper 0.0.2 → 0.0.3

package/src/scene/onAdd3DLayer.js

@@ -0,0 +1,35 @@
+import * as attach from './attach.js';
+import * as onClick from '../picking/onClick.js';
+import * as onPointerLeave from '../picking/onPointerLeave.js';
+import * as onPointerMove from '../picking/onPointerMove.js';
+import { pointerMove } from '../picking/pointerMove.js';
+import { pointerClick } from '../picking/pointerClick.js';
+import { pointerLeave } from '../picking/pointerLeave.js';
+import { attachLayer } from './attachLayer.js';
+
+/** Attach interaction immediately; initialization may finish before or after onAdd. */
+export function onAdd3DLayer(backend, map) {
+  if (!backend.location) {
+    const center = map.getCenter();
+    backend.location = new L.LatLng(center.lat, center.lng);
+  }
+  if (backend.url || backend._geojson || backend.options.tooltip || backend.modelUrl) {
+    backend.container = map.getContainer();
+    backend._pointerEvents ||= {
+      mousemove: pointerMove,
+      click: pointerClick,
+      mouseleave: pointerLeave,
+    };
+    if (backend.options.tooltip) {
+      backend._tooltip = L.DomUtil.create('div', 'leaflet-3d-tooltip', backend.container);
+      backend._tooltip.hidden = true;
+      backend._tooltip.setAttribute('role', 'tooltip');
+      backend._tooltip.setAttribute('aria-live', 'polite');
+      backend._tooltip.style.cssText = 'position:absolute;z-index:600;max-width:220px;padding:10px 12px;border:1px solid #6b5140;border-radius:6px;background:#fffaf0;box-shadow:0 3px 12px #0005;color:#30251d;font:13px/1.45 sans-serif;pointer-events:none';
+    }
+    L.DomEvent.on(backend.container, backend._pointerEvents, backend);
+  }
+  if (backend.root) {
+    attachLayer(backend, map);
+  }
+}

package/src/scene/onMapChange.js

@@ -0,0 +1,16 @@
+import { update } from './update.js';
+import { render } from "../rendering/render.js";
+import { onMapChangeState } from '../constants/onMapChangeState.js';
+import { renderPendingMapChange } from './renderPendingMapChange.js';
+
+/** Map movement: render within the frame of Leaflet's CSS transforms, coalescing same-tick events. */
+
+onMapChangeState.pendingMapChanges = [];
+
+export function onMapChange() {
+  const layer = this;
+  if (layer._queued) return;
+  layer._queued = true;
+  onMapChangeState.pendingMapChanges.push(layer);
+  queueMicrotask(renderPendingMapChange);
+}

package/src/scene/onRemove3DLayer.js

@@ -0,0 +1,69 @@
+import { cityMapper } from '../constants/cityMapper.js';
+import * as destroyTexture from '../rendering/destroyTexture.js';
+import * as endZoom from './endZoom.js';
+import * as onMapChange from './onMapChange.js';
+import * as onPointerLeave from '../picking/onPointerLeave.js';
+import * as onZoomAnim from './onZoomAnim.js';
+import { releaseArea } from '../sources/releaseArea.js';
+import { updateStatus } from '../sources/updateStatus.js';
+import { setParent } from './setParent.js';
+import * as startZoom from './startZoom.js';
+import { cancelUpdate } from './cancelUpdate.js';
+import { update } from './update.js';
+import { releaseRenderer } from './releaseRenderer.js';
+
+/** Release source meshes/UI; retain manually added objects and model CPU data. */
+export function onRemove3DLayer(backend, map) {
+  backend._added = Promise.withResolvers();
+  if (backend.container) {
+    onPointerLeave.onPointerLeave(backend);
+    L.DomEvent.off(backend.container, backend._pointerEvents, backend);
+    backend.container = null;
+  }
+  let area, key, layer, animation;
+  for (area of backend._areas.values()) releaseArea(backend, area);
+  backend._areas.clear();
+  backend._tooltip?.remove();
+  backend._tooltip = null;
+  if (backend.url || backend._geojson) updateStatus(backend, false);
+  const shared = backend._shared;
+  if (!shared) return;
+  setParent(backend.root, null);
+  shared._layers.delete(backend);
+  if (shared === backend) {
+    map.off('move zoom rotate pitch resize viewreset layeradd layerremove', onMapChange.onMapChange, backend);
+    map.off('zoomstart', startZoom.startZoom, backend);
+    map.off('zoomanim', onZoomAnim.onZoomAnim, backend);
+    map.off('zoomend', endZoom.endZoom, backend);
+    cancelUpdate(backend);
+    if (backend._layers.size) {
+      // Keep the original scene origin and GPU resources when ownership changes.
+      const next = backend._layers.values().next().value;
+      for (key of ['_layers', '_sceneOrigin', '_size', '_zoomLevel', '_zoomTransitions', '_zoomView', '_cursor', '_roofRaster']) {
+        next[key] = backend[key];
+        delete backend[key];
+      }
+      for (layer of next._layers) layer._shared = next;
+      cityMapper.renderers.set(map, next);
+      map.on('move zoom rotate pitch resize viewreset layeradd layerremove', onMapChange.onMapChange, next);
+      map.on('zoomstart', startZoom.startZoom, next);
+      map.on('zoomanim', onZoomAnim.onZoomAnim, next);
+      map.on('zoomend', endZoom.endZoom, next);
+      update(next);
+    } else {
+      if (backend._roofRaster) destroyTexture.destroyTexture(backend, backend._roofRaster.texture.texture);
+      backend._roofRaster = null;
+      for (animation of backend._zoomTransitions?.keys() || []) animation.play();
+      backend._zoomTransitions = null;
+      backend._zoomView = null;
+      delete map._cameraView;
+      map.getContainer().classList.remove('leaflet-camera-zoom');
+      const renderer = backend.renderer;
+      renderer.canvas.remove();
+      releaseRenderer(renderer, backend);
+      cityMapper.renderers.delete(map);
+      for (key of ['_layers', '_sceneOrigin', '_size', '_zoomLevel', '_cursor']) delete backend[key];
+    }
+  } else update(shared);
+  backend._shared = backend.renderer = backend.scene = backend.camera = null;
+}

package/src/scene/onZoomAnim.js

@@ -0,0 +1,16 @@
+import { render } from "../rendering/render.js";
+import { onZoomAnimState } from '../constants/onZoomAnimState.js';
+import { renderPendingZoomAnimation } from './renderPendingZoomAnimation.js';
+
+onZoomAnimState.pendingZoomAnimations = [];
+
+export function onZoomAnim(event) {
+  const map = this._map;
+  if (event && !this._zoomView) {
+    this._zoomView = { from: map.getCenter(), zoom: map.getZoom(), to: event.center,
+      targetZoom: event.zoom, start: performance.now() };
+    map.getContainer().classList.add('leaflet-camera-zoom');
+  }
+  onZoomAnimState.pendingZoomAnimations.push(this);
+  queueMicrotask(renderPendingZoomAnimation);
+}

package/src/scene/placeEntry.js

@@ -0,0 +1,11 @@
+export function placeEntry(map, layer, element) {
+  let input, entry;
+  for (input of map.getContainer().querySelectorAll('.leaflet-control-layers-selector')) {
+    entry = map._layers[input.layerId];
+    if (input.layerId === L.Util.stamp(layer) || entry instanceof L.LayerGroup && entry.hasLayer(layer)) {
+      input.closest('label').after(element);
+      return true;
+    }
+  }
+  return false;
+}

package/src/scene/placeUnderEntry.js

@@ -0,0 +1,8 @@
+import { placeEntry } from './placeEntry.js';
+
+export function placeUnderEntry(state) {
+  const nested = placeEntry(state.map, state.layer, state.element);
+  const onPlace = state.onPlace;
+  onPlace?.(nested);
+  return nested;
+}

package/src/scene/ready3D.js

@@ -0,0 +1,25 @@
+import { emptyNode } from './emptyNode.js';
+import { getHeader } from '../archives/getHeader.js';
+import { attach } from './attach.js';
+import { loadModel } from '../models/loadModel.js';
+import { update } from './update.js';
+
+export async function ready3D(layer) {
+  try {
+    layer.root = emptyNode();
+    layer.raycaster = { origin: [0, 0, 0], direction: [0, 0, 0] };
+    if (layer.url || layer._geojson) {
+      layer.group = layer.root;
+      if (layer.url) layer.header = await getHeader(layer);
+    }
+    if (layer._map) {
+      await attach(layer, layer._map);
+      layer._added.resolve();
+    }
+    if (layer.modelUrl) await loadModel(layer);
+    if (layer._shared) update(layer);
+    layer.fire('ready');
+  } catch (error) {
+    layer.fire('error', { error });
+  }
+}

package/src/scene/releaseRenderer.js

@@ -0,0 +1,14 @@
+export async function releaseRenderer(renderer, backend) {
+  try {
+    await renderer.device.queue.onSubmittedWorkDone();
+    renderer.depthTexture?.destroy();
+    renderer.roofFallbackTexture?.texture?.destroy();
+    renderer.uniformBuffer?.destroy();
+    renderer.sunlight?.texture?.destroy();
+    renderer.sunlight?.buffer?.destroy();
+    renderer.sunlight?.lights?.destroy();
+  } catch (error) {
+    backend.fire('error', { error });
+  }
+  renderer.device.destroy();
+}

package/src/scene/removeEntry.js

@@ -0,0 +1,6 @@
+import { replaceEntry } from './replaceEntry.js';
+
+export function removeEntry() {
+  this.map.off('layeradd layerremove', replaceEntry, this);
+  this.element.remove();
+}

package/src/scene/renderPendingMapChange.js

@@ -0,0 +1,11 @@
+import { onMapChangeState } from '../constants/onMapChangeState.js';
+import { update } from './update.js';
+import { render } from '../rendering/render.js';
+
+export function renderPendingMapChange() {
+  const layer = onMapChangeState.pendingMapChanges.shift();
+  layer._queued = false;
+  if (layer._shared !== layer || !layer.renderer) return;
+  if (layer._map._animatingZoom) update(layer);
+  else render(layer);
+}

package/src/scene/renderPendingUpdates.js

@@ -0,0 +1,19 @@
+import { pendingUpdates } from '../constants/pendingUpdates.js';
+import { render } from '../rendering/render.js';
+
+export function renderPendingUpdates() {
+  const updates = [...pendingUpdates];
+  pendingUpdates.clear();
+  let failure;
+  let backend;
+  for (backend of updates) {
+    backend._frame = null;
+    if (backend._shared !== backend || !backend.renderer) continue;
+    try {
+      render(backend);
+    } catch (error) {
+      failure ||= error;
+    }
+  }
+  if (failure) throw failure;
+}

package/src/scene/renderPendingZoomAnimation.js

@@ -0,0 +1,7 @@
+import { onZoomAnimState } from '../constants/onZoomAnimState.js';
+import { render } from '../rendering/render.js';
+
+export function renderPendingZoomAnimation() {
+  const layer = onZoomAnimState.pendingZoomAnimations.shift();
+  if (layer._shared === layer && layer.renderer) render(layer);
+}

package/src/scene/rendererDeviceError.js

@@ -0,0 +1,10 @@
+import { attachState } from '../constants/attachState.js';
+import { cityMapper } from '../constants/cityMapper.js';
+
+export function rendererDeviceError(event) {
+  const map = attachState.rendererDevices.get(event.currentTarget);
+  const owner = cityMapper.renderers.get(map);
+  if (owner?.renderer?.device !== event.currentTarget) return;
+  let layer;
+  for (layer of owner._layers || []) layer.fire('error', { error: event.error });
+}

package/src/scene/rendererDeviceLost.js

@@ -0,0 +1,11 @@
+import { attachState } from '../constants/attachState.js';
+import { cityMapper } from '../constants/cityMapper.js';
+
+export function rendererDeviceLost([info, device]) {
+  const map = attachState.rendererDevices.get(device);
+  const owner = cityMapper.renderers.get(map);
+  if (!owner || owner.renderer?.device !== device) return;
+  const error = new Error(`WebGPU device lost: ${info.message || info.reason}`);
+  let layer;
+  for (layer of owner._layers) layer.fire('error', { error });
+}

package/src/scene/replaceEntry.js

@@ -0,0 +1,7 @@
+import { underEntryState } from '../constants/underEntryState.js';
+import { runPlacements } from './runPlacements.js';
+
+export function replaceEntry() {
+  underEntryState.pendingPlacements.push(this);
+  queueMicrotask(runPlacements);
+}

package/src/scene/reportError.js

@@ -0,0 +1,3 @@
+export function reportError(source, error) {
+  source.fire('error', { error });
+}

package/src/scene/requestAdapter.js

@@ -0,0 +1,12 @@
+import { failAttachment } from './failAttachment.js';
+
+export async function requestAdapter(backend, map) {
+  let adapter;
+  try {
+    adapter = await navigator.gpu.requestAdapter();
+  } catch (error) {
+    failAttachment(error, backend, map);
+  }
+  if (!adapter) failAttachment(new Error('Unable to acquire a WebGPU adapter'), backend, map);
+  return adapter;
+}

package/src/scene/requestDevice.js

@@ -0,0 +1,9 @@
+import { failAttachment } from './failAttachment.js';
+
+export async function requestDevice(adapter, backend, map) {
+  try {
+    return await adapter.requestDevice();
+  } catch (error) {
+    failAttachment(error, backend, map);
+  }
+}

package/src/scene/resolveNextInitialization.js

@@ -0,0 +1,12 @@
+import { indexState } from '../constants/indexState.js';
+import { initializerFor } from './initializerFor.js';
+
+export function resolveNextInitialization() {
+  const task = indexState.pendingInitializations.shift();
+  try {
+    task.initialize = initializerFor(task.type);
+  } catch (error) {
+    task.error = error;
+  }
+  return task;
+}

package/src/scene/restoreObject.js

@@ -0,0 +1,71 @@
+import { createProgram } from '../rendering/createProgram.js';
+
+export function restoreObject(backend, shared, object) {
+  let name, attribute, data, size, count, normalized, key, texture;
+  if (object.geometry && object.geometry.device !== shared.renderer.device) {
+    const geometry = object.geometry;
+    const material = object.program._layerMaterial;
+    const attributes = {};
+    for (name of ['position', 'normal', 'color', 'uv', 'index', 'instanceOffset']) {
+      attribute = geometry.attributes[name];
+      if (!attribute) continue;
+      ({ data, size, count, normalized } = attribute);
+      attributes[name] = { data: data.slice(0, count * size), size, normalized };
+    }
+    const device = shared.renderer.device;
+    if (attributes.index?.data instanceof Uint8Array) {
+      attributes.index.data = Uint16Array.from(attributes.index.data);
+    }
+    for ([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);
+    }
+    object.geometry = {
+      device,
+      attributes,
+      drawRange: { start: 0, count: attributes.index?.count || attributes.position.count },
+    };
+    for (attribute of Object.values(geometry.attributes)) attribute.buffer.destroy();
+    object.bindGroup = null;
+    object.boundTextures = [];
+    for (key of ['baseTexture', 'metalTexture', 'emissiveTexture', 'occlusionTexture']) {
+      texture = material[key];
+      if (!texture || texture.device === device) continue;
+      material[key] = {
+        ...texture,
+        device,
+        texture: device.createTexture({
+          size: [texture.image.width, texture.image.height],
+          format: texture.format,
+          usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
+        }),
+        sampler: device.createSampler(texture.samplerOptions),
+        uploaded: null,
+      };
+    }
+    object.program.pipelineCache.clear();
+    object.program = createProgram(backend, material);
+    object.device = device;
+  }
+  if (object.texture && object.texture.device !== shared.renderer.device) {
+    object.texture = {
+      ...object.texture,
+      device: shared.renderer.device,
+      texture: shared.renderer.device.createTexture({
+        size: [object.texture.image.width, object.texture.image.height],
+        format: object.texture.format,
+        usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
+      }),
+      sampler: shared.renderer.device.createSampler(object.texture.samplerOptions),
+      uploaded: null,
+    };
+  }
+}

package/src/scene/runPlacements.js

@@ -0,0 +1,7 @@
+import { underEntryState } from '../constants/underEntryState.js';
+import { placeUnderEntry } from './placeUnderEntry.js';
+
+export function runPlacements() {
+  const state = underEntryState.pendingPlacements.shift();
+  if (state?.map.hasLayer(state.layer)) placeUnderEntry(state);
+}

package/src/scene/showWebGPUWarning.js

@@ -0,0 +1,16 @@
+export function showWebGPUWarning(map) {
+  const container = map.getContainer();
+  if (container.querySelector('.leaflet-webgpu-warning')) return;
+  const warning = document.createElement('div');
+  warning.className = 'leaflet-webgpu-warning';
+  warning.setAttribute('role', 'alert');
+  warning.style.cssText = 'position:absolute;z-index:1000;top:50%;left:50%;transform:translate(-50%,-50%);max-width:calc(100% - 32px);box-sizing:border-box;padding:12px 16px;border:1px solid #c98b24;border-radius:6px;background:#fff8e6;box-shadow:0 3px 12px #0005;color:#30251d;font:14px/1.5 sans-serif;text-align:center;pointer-events:auto';
+  warning.append('WebGPU is not available in this browser or device. ');
+  const link = document.createElement('a');
+  link.href = 'https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API#browser_compatibility';
+  link.target = '_blank';
+  link.rel = 'noopener noreferrer';
+  link.textContent = 'Learn more';
+  warning.append(link);
+  container.append(warning);
+}

package/src/scene/traverse.js

@@ -0,0 +1,7 @@
+/** Depth-first walk; a truthy callback result skips that node's descendants. */
+
+export function traverse(node, callback, context) {
+  if (callback(node, context)) return;
+  let child;
+  for (child of node.children) traverse(child, callback, context);
+}

package/src/scene/underEntry.js

@@ -0,0 +1,17 @@
+import { underEntryState } from '../constants/underEntryState.js';
+import { placeUnderEntry } from './placeUnderEntry.js';
+import { replaceEntry } from './replaceEntry.js';
+import { removeEntry } from './removeEntry.js';
+
+/**
+ * Keeps `element` right under `layer`'s entry in the map's layers control while the layer is on the map.
+ * Returns false when no layers control lists the layer.
+ */
+underEntryState.pendingPlacements = [];
+
+export function underEntry(layer, element, onPlace) {
+  const state = { map: layer._map, layer, element, onPlace };
+  state.map.on('layeradd layerremove', replaceEntry, state);
+  layer.once('remove', removeEntry, state);
+  return placeUnderEntry(state);
+}

package/src/scene/update.js

@@ -0,0 +1,19 @@
+import { render } from "../rendering/render.js";
+import { pendingUpdates } from '../constants/pendingUpdates.js';
+import { renderPendingUpdates } from './renderPendingUpdates.js';
+
+/** Scene graph, shared camera and frame rendering. */
+/** Content changes: render once on the next animation frame. */
+export function update(backend) {
+  const shared = backend._shared;
+  if (!shared) return backend;
+  if (shared !== backend) {
+    update(shared);
+    return backend;
+  }
+  if (backend._frame != null) return backend;
+  const first = pendingUpdates.values().next().value;
+  pendingUpdates.add(backend);
+  backend._frame = first ? first._frame : requestAnimationFrame(renderPendingUpdates);
+  return backend;
+}

package/src/scene/updateCamera.js

@@ -0,0 +1,34 @@
+import { cross } from '../geometry/cross.js';
+
+/** Orthonormal view basis plus perspective matrices, refreshed before projecting/drawing. */
+
+export function updateCamera(camera) {
+  const z = [];
+  let i, value;
+  for (i = 0; i < camera.position.length; i++) z.push(camera.position[i] - camera.target[i]);
+  const zLength = Math.hypot(...z) || 1;
+  for (i = 0; i < 3; i++) {
+    z[i] /= zLength;
+  }
+  const x = cross(camera.up, z), xLength = Math.hypot(...x) || 1;
+  for (i = 0; i < 3; i++) {
+    x[i] /= xLength;
+  }
+  const y = cross(z, x);
+  const view = new DOMMatrix([x[0], x[1], x[2], 0, y[0], y[1], y[2], 0, z[0], z[1], z[2], 0, ...camera.position, 1]).inverse().toFloat64Array();
+  for (value of view) {
+    if (!Number.isFinite(value)) throw new Error('Singular 3D transform');
+  }
+  for (i = 0; i < 16; i++) {
+    camera.viewMatrix[i] = view[i];
+  }
+  const f = 1 / Math.tan(camera.fov * Math.PI / 360), n = camera.near, r = camera.far;
+  const projection = [f / camera.aspect, 0, 0, 0, 0, f, 0, 0, 0, 0, r / (n - r), -1, 0, 0, r * n / (n - r), 0];
+  for (i = 0; i < 16; i++) {
+    camera.projectionMatrix[i] = projection[i];
+  }
+  const projectionView = new DOMMatrix(camera.projectionMatrix).multiply(new DOMMatrix(camera.viewMatrix)).toFloat64Array();
+  for (i = 0; i < 16; i++) {
+    camera.projectionViewMatrix[i] = projectionView[i];
+  }
+}

package/src/scene/updateWorldMatrix.js

@@ -0,0 +1,48 @@
+/** Compose parent*local matrices; a node.matrix overrides its position/rotation/scale. */
+
+export function updateWorldMatrix(node) {
+  const parent = node.parent;
+  const parentVersion = parent?._worldMatrixVersion || 0;
+  const matrixMode = Boolean(node.matrix);
+  let changed = node._worldParent !== parent || node._parentWorldVersion !== parentVersion ||
+    node._worldMatrixMode !== matrixMode;
+  let i, value, child;
+  if (node.matrix) {
+    const state = node._matrixState ||= new Float64Array(16);
+    for (i = 0; i < 16; i++) {
+      if (state[i] !== node.matrix[i]) changed = true;
+      state[i] = node.matrix[i];
+    }
+  } else {
+    const state = node._transformState ||= new Float64Array(9);
+    for (i = 0; i < 9; i++) {
+      value = i < 3 ? node.position[i] : i < 6 ? node.rotation[i - 3] : node.scale[i - 6];
+      if (state[i] !== value) changed = true;
+      state[i] = value;
+    }
+  }
+  if (!changed) {
+    for (child of node.children) updateWorldMatrix(child);
+    return;
+  }
+  let local;
+  if (node.matrix) local = node.matrix;
+  else {
+    const degrees = 180 / Math.PI;
+    const matrix = new DOMMatrix().translate(...node.position);
+    // Node rotations use YXZ, as did the previous renderer.
+    matrix.rotateAxisAngleSelf(0, 1, 0, node.rotation[1] * degrees);
+    matrix.rotateAxisAngleSelf(1, 0, 0, node.rotation[0] * degrees);
+    matrix.rotateAxisAngleSelf(0, 0, 1, node.rotation[2] * degrees);
+    local = matrix.scale(...node.scale).toFloat64Array();
+  }
+  const world = parent
+    ? new DOMMatrix(parent.worldMatrix).multiply(new DOMMatrix(local)).toFloat64Array()
+    : local;
+  for (i = 0; i < 16; i++) node.worldMatrix[i] = world[i];
+  node._worldParent = parent;
+  node._parentWorldVersion = parentVersion;
+  node._worldMatrixMode = matrixMode;
+  node._worldMatrixVersion = (node._worldMatrixVersion || 0) + 1;
+  for (child of node.children) updateWorldMatrix(child);
+}