leaflet-city-mapper 0.0.0-stage → 0.0.2

package/src/utils/attach.js

@@ -0,0 +1,255 @@
+import { emptyNode } from './emptyNode.js';
+import { setParent } from './setParent.js';
+import { traverse } from './traverse.js';
+import { createProgram } from './createProgram.js';
+import { endZoom } from './endZoom.js';
+import { onMapChange } from './onMapChange.js';
+import { onZoomAnim } from './onZoomAnim.js';
+import { render } from './render.js';
+import { startZoom } from './startZoom.js';
+import { update } from './update.js';
+import { updateArea } from './updateArea.js';
+import { setTerrainHeight } from './setTerrainHeight.js';
+import { resizeSunlight } from './resizeSunlight.js';
+
+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);
+}
+
+/** WebGPU device attachment, materials/pipelines and draw calls. */
+/**
+ * Join/create this map's shared scene and rebuild GPU objects if its context changed.
+ * Buffer/program handles belong to one context; typed arrays and decoded images do not.
+ * @private
+ */
+
+export async function attach(backend, map) {
+  let shared = L.Layer._renderers.get(map);
+  if (shared?._rendererReady) {
+    await shared._rendererReady.promise;
+  }
+  if (!shared) {
+    shared = backend;
+    backend._rendererReady = Promise.withResolvers();
+    backend._rendererReady.promise.catch(() => { });
+    L.Layer._renderers.set(map, shared);
+    const fail = error => {
+      showWebGPUWarning(map);
+      backend._rendererReady.reject(error);
+      L.Layer._renderers.delete(map);
+      throw error;
+    };
+    const canvas = document.createElement('canvas');
+    if (!navigator.gpu) {
+      fail(new Error('Layer3D requires WebGPU'));
+    }
+    const adapter = await navigator.gpu.requestAdapter().catch(fail);
+    if (!adapter) {
+      fail(new Error('Unable to acquire a WebGPU adapter'));
+    }
+    const device = await adapter.requestDevice().catch(fail);
+    device.addEventListener('uncapturederror', event => {
+      const owner = L.Layer._renderers.get(map);
+      if (owner?.renderer?.device !== device) {
+        return;
+      }
+      for (const layer of owner?._layers || []) {
+        layer.fire('error', { error: event.error });
+      }
+    });
+    device.lost.then(info => {
+      const owner = L.Layer._renderers.get(map);
+      if (!owner || owner.renderer?.device !== device) {
+        return;
+      }
+      const error = new Error(`WebGPU device lost: ${info.message || info.reason}`);
+      for (const layer of owner._layers) {
+        layer.fire('error', { error });
+      }
+    });
+    const context = canvas.getContext('webgpu');
+    if (!context) {
+      device.destroy();
+      fail(new Error('Unable to create a WebGPU canvas context'));
+    }
+    const format = navigator.gpu.getPreferredCanvasFormat();
+    context.configure({ device, format, alphaMode: 'premultiplied' });
+    map.getContainer().querySelector('.leaflet-webgpu-warning')?.remove();
+    backend._shared = backend;
+    backend._layers = new Set();
+    backend._sceneOrigin = backend.location;
+    backend.scene = emptyNode();
+    // Perspective camera state: fov in degrees, near/far in scene metres.
+    backend.camera = {
+      position: [0, 0, 0],
+      up: [0, 1, 0],
+      target: [0, 0, 0],
+      viewMatrix: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
+      projectionMatrix: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
+      projectionViewMatrix: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
+      fov: 45,
+      aspect: 1,
+      near: 0.1,
+      far: 10000,
+    };
+    backend.renderer = {
+      device,
+      context,
+      format,
+      canvas,
+      dpr: Math.min(window.devicePixelRatio, 2)
+    };
+    const layout = device.createBindGroupLayout({
+      entries: [
+        { binding: 0, visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: { type: 'uniform' } },
+        { binding: 1, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: 'depth' } },
+        { binding: 2, visibility: GPUShaderStage.FRAGMENT, sampler: { type: 'comparison' } },
+        { binding: 3, visibility: GPUShaderStage.FRAGMENT, buffer: { type: 'read-only-storage' } },
+      ]
+    });
+    const buffer = backend.renderer.device.createBuffer({ size: 80, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });
+    const sampler = backend.renderer.device.createSampler({ compare: 'less-equal', minFilter: 'linear', magFilter: 'linear' });
+    const lights = backend.renderer.device.createBuffer({ size: 32, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST });
+    backend.renderer.sunlight = { layout, buffer, sampler, lights, size: 0 };
+    const values = new Float32Array(20);
+    values.set([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
+    backend.renderer.device.queue.writeBuffer(buffer, 0, values);
+    resizeSunlight(backend, 1);
+    const emptyImage = document.createElement('canvas');
+    emptyImage.width = 1;
+    emptyImage.height = 1;
+    backend.renderer.roofFallbackTexture = {
+      device,
+      texture: device.createTexture({
+        size: [1, 1],
+        format: 'rgba8unorm',
+        usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
+      }),
+      sampler: device.createSampler({
+        addressModeU: 'clamp-to-edge', addressModeV: 'clamp-to-edge',
+      }),
+      image: emptyImage, format: 'rgba8unorm', srgb: false, uploaded: null,
+    };
+    shared._size = null;
+    canvas.className = 'leaflet-3d';
+    canvas.style.cssText = 'position:absolute;top:0;left:0;pointer-events:none';
+    canvas.setAttribute('role', 'img');
+    canvas.setAttribute('aria-label', backend.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.on('move zoom rotate pitch resize viewreset layeradd layerremove', onMapChange, shared);
+    map.on('zoomstart', startZoom, shared);
+    map.on('zoomanim', onZoomAnim, shared);
+    map.on('zoomend', endZoom, shared);
+    backend._rendererReady.resolve();
+    delete shared._rendererReady;
+    render(shared);
+    L.Layer._renderers.set(map, shared);
+  }
+  const origin = map.options.crs.project(shared._sceneOrigin);
+  const point = map.options.crs.project(backend.location);
+  const metres = Math.cos(shared._sceneOrigin.lat * Math.PI / 180);
+  backend._terrainBaseY ??= backend.root.position[1];
+  backend.root.position[0] = (point.x - origin.x) * metres;
+  backend.root.position[1] = backend._terrainBaseY;
+  backend.root.position[2] = -(point.y - origin.y) * metres;
+  setTerrainHeight(backend);
+  // Each group's metres are measured at its own latitude, not the shared camera origin.
+  backend.root.scale.fill(metres / Math.cos(backend.location.lat * Math.PI / 180));
+  backend._shared = shared;
+  backend.renderer = shared.renderer;
+  backend.scene = shared.scene;
+  backend.camera = shared.camera;
+  shared._layers.add(backend);
+  setParent(backend.root, shared.scene);
+  traverse(backend.root, object => {
+    if (object.geometry && object.geometry.device !== shared.renderer.device) {
+      const geometry = object.geometry;
+      const material = object.program._layerMaterial;
+      // Retain packed CPU attributes, never old-context GPU buffer handles.
+      const attributes = {};
+      for (const name of ['position', 'normal', 'color', 'uv', 'index']) {
+        const attribute = geometry.attributes[name];
+        if (!attribute) continue;
+        const { 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 (const [name, attribute] of Object.entries(attributes)) {
+        attribute.size ||= 1;
+        attribute.count = attribute.data.length / attribute.size;
+        attribute.indexFormat = attribute.data instanceof Uint32Array ? 'uint32' : 'uint16';
+        attribute.buffer = device.createBuffer({
+          size: Math.max(4, attribute.data.byteLength),
+          usage: name === 'index'
+            ? GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST
+            : GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+        });
+        device.queue.writeBuffer(attribute.buffer, 0, attribute.data);
+      }
+      object.geometry = {
+        device,
+        attributes,
+        drawRange: { start: 0, count: attributes.index?.count || attributes.position.count },
+      };
+      for (const attribute of Object.values(geometry.attributes)) attribute.buffer.destroy();
+      object.bindGroup = null;
+      object.boundTextures = [];
+      for (const key of ['baseTexture', 'metalTexture', 'emissiveTexture', 'occlusionTexture']) {
+        const 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,
+      };
+    }
+  });
+  update(shared);
+  if ((backend.header && backend._type !== 'pmtiles') || backend._geojson) updateArea(backend);
+}

package/src/utils/bindSunlight.js

@@ -0,0 +1,12 @@
+
+export function bindSunlight(backend) {
+  const sun = backend.renderer.sunlight;
+  sun.bindGroup = backend.renderer.device.createBindGroup({
+    layout: sun.layout, entries: [
+      { binding: 0, resource: { buffer: sun.buffer } },
+      { binding: 1, resource: sun.texture.createView() },
+      { binding: 2, resource: sun.sampler },
+      { binding: 3, resource: { buffer: sun.lights } },
+    ]
+  });
+}

package/src/utils/box.js

@@ -0,0 +1 @@
+export const box = (x0, x1, z0, z1) => [[x0, z0], [x1, z0], [x1, z1], [x0, z1]];

package/src/utils/bridgeElevation.js

@@ -0,0 +1,18 @@
+/** Height inside a bridge deck, or null outside its triangles. */
+export function bridgeElevation(point, bridges) {
+  // Bridges bucketed by 64 DEM pixels.
+  for (const bridge of bridges?.get(`${Math.floor(point.x / 64)}/${Math.floor(point.y / 64)}`) || []) {
+    if (point.x < bridge.min[0] || point.x > bridge.max[0] || point.y < bridge.min[1] || point.y > bridge.max[1]) {
+      continue;
+    }
+    for (const [a, b, c] of bridge.triangles) {
+      const d = (b[1] - c[1]) * (a[0] - c[0]) + (c[0] - b[0]) * (a[1] - c[1]);
+      const u = ((b[1] - c[1]) * (point.x - c[0]) + (c[0] - b[0]) * (point.y - c[1])) / d;
+      const v = ((c[1] - a[1]) * (point.x - c[0]) + (a[0] - c[0]) * (point.y - c[1])) / d;
+      if (u >= 0 && v >= 0 && u + v <= 1) {
+        return u * a[2] + v * b[2] + (1 - u - v) * c[2];
+      }
+    }
+  }
+  return null;
+}

package/src/utils/build.js

@@ -0,0 +1,20 @@
+
+export const build = parts => {
+  const position = [], normal = [], color = [];
+  const triangle = (a, b, c, tint) => {
+    const u = b.map((v, i) => v - a[i]), v = c.map((w, i) => w - a[i]);
+    const n = [u[1] * v[2] - u[2] * v[1], u[2] * v[0] - u[0] * v[2], u[0] * v[1] - u[1] * v[0]], length = Math.hypot(...n);
+    for (const point of [a, b, c]) { position.push(...point); normal.push(...n.map(w => w / length)); color.push(...tint); }
+  };
+  for (const [ring, bottom, top, tint, topRing = ring] of parts) {
+    const low = ring.map(([x, z]) => [x, bottom, z]), high = topRing.map(([x, z]) => [x, top, z]);
+    for (let i = 0; i < ring.length; i++) {
+      const j = (i + 1) % ring.length;
+      triangle(low[i], low[j], high[j], tint); triangle(low[i], high[j], high[i], tint);
+    }
+    for (let i = 1; i < ring.length - 1; i++) {
+      triangle(high[0], high[i], high[i + 1], tint); triangle(low[0], low[i + 1], low[i], tint);
+    }
+  }
+  return { position, normal, color };
+};

package/src/utils/cameraControls.js

@@ -0,0 +1,287 @@
+function editable(target) {
+  return target.closest?.('input,textarea,select,[contenteditable="true"]');
+}
+
+function dragCamera(map, element, accept, sensitivity = [0.8, 0.5], orbit = false) {
+  let drag, moved = false;
+  const end = event => {
+    if (!drag) return;
+    if (event?.pointerId !== undefined && event.pointerId !== drag.id) return;
+    const finished = drag;
+    drag = null;
+    if (element.hasPointerCapture?.(finished.id)) element.releasePointerCapture(finished.id);
+    if (finished.dragging && map.getContainer()._leaflet_id) map.dragging.enable();
+    element.style.cursor = finished.cursor;
+  };
+  const down = event => {
+    if (drag || !accept(event) || editable(event.target)) return;
+    event.preventDefault();
+    event.stopPropagation();
+    moved = false;
+    const rect = map.getContainer().getBoundingClientRect();
+    drag = { id: event.pointerId, x: event.clientX, y: event.clientY, cursor: element.style.cursor,
+      cx: rect.left + rect.width / 2, cy: rect.top + rect.height / 2, dragging: map.dragging?.enabled() };
+    map.dragging?.disable();
+    element.focus?.({ preventScroll: true });
+    element.setPointerCapture(event.pointerId);
+    element.style.cursor = 'grabbing';
+  };
+  const move = event => {
+    if (!drag || drag.id !== event.pointerId) return;
+    const x = event.clientX - drag.x, y = event.clientY - drag.y;
+    if (Math.hypot(x, y) < 3 && !moved) return;
+    map._stopPitchBearingAnimation();
+    moved = true;
+    event.preventDefault();
+    let bearing = x * sensitivity[0];
+    if (orbit) {
+      if (Math.abs(drag.cy - drag.y) > 100) {
+        const angle = Math.atan2(event.clientY - drag.cy, event.clientX - drag.cx) -
+          Math.atan2(event.clientY - drag.cy, drag.x - drag.cx);
+        bearing = Math.atan2(Math.sin(angle), Math.cos(angle)) * 180 / Math.PI;
+      } else bearing *= event.clientY < drag.cy ? 1 : -1;
+    }
+    map._setPitchAndBearing(map.getPitch() - y * sensitivity[1], map.getBearing() + bearing);
+    drag.x = event.clientX; drag.y = event.clientY;
+  };
+  const click = event => { if (moved) { event.preventDefault(); event.stopPropagation(); moved = false; } };
+  const context = event => {
+    if (drag || moved) { event.preventDefault(); event.stopPropagation(); }
+  };
+  element.addEventListener('pointerdown', down, true);
+  element.addEventListener('pointermove', move);
+  element.addEventListener('pointerup', end);
+  element.addEventListener('pointercancel', end);
+  element.addEventListener('lostpointercapture', end);
+  element.addEventListener('click', click, true);
+  element.addEventListener('contextmenu', context);
+  window.addEventListener('blur', end);
+  return () => {
+    end();
+    element.removeEventListener('pointerdown', down, true);
+    element.removeEventListener('pointermove', move);
+    element.removeEventListener('pointerup', end);
+    element.removeEventListener('pointercancel', end);
+    element.removeEventListener('lostpointercapture', end);
+    element.removeEventListener('click', click, true);
+    element.removeEventListener('contextmenu', context);
+    window.removeEventListener('blur', end);
+  };
+}
+
+L.Control.Rotate = L.Control.extend({
+  options: { position: 'topleft', closeOnZeroBearing: true, visualizePitch: true },
+  onAdd(map) {
+    const container = L.DomUtil.create('div', 'leaflet-control-rotate leaflet-bar');
+    const button = L.DomUtil.create('a', 'leaflet-control-rotate-toggle', container);
+    button.href = '#';
+    button.setAttribute('role', 'button');
+    button.title = this.options.visualizePitch ? 'Reset bearing and pitch' : 'Reset bearing to north';
+    button.setAttribute('aria-label', button.title);
+    button.style.cssText = 'cursor:grab;touch-action:none';
+    const arrow = L.DomUtil.create('span', 'leaflet-control-rotate-arrow', button);
+    arrow.setAttribute('aria-hidden', 'true');
+    arrow.style.cssText = 'display:block;width:100%;height:100%;pointer-events:none;background: no-repeat center / 29px 29px';
+    arrow.style.backgroundImage = 'url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 29 29%27%3E%3Cpath fill=%27%23333%27 d=%27M10.5 14 14.5 6 18.5 14Z%27/%3E%3Cpath fill=%27%23ccc%27 d=%27M10.5 16 14.5 24 18.5 16Z%27/%3E%3C/svg%3E")';
+    button.onclick = event => {
+      event.preventDefault();
+      if (this.options.visualizePitch) map.resetNorthPitch();
+      else map.resetNorth();
+      if (event.detail) map.getContainer().focus({ preventScroll: true });
+    };
+    button.onkeydown = event => {
+      const step = event.shiftKey ? 15 : 5;
+      if (event.key === 'ArrowLeft') map.setBearing(map.getBearing() - step);
+      else if (event.key === 'ArrowRight') map.setBearing(map.getBearing() + step);
+      else if (event.key === 'ArrowUp' && this.options.visualizePitch) map.setPitch(map.getPitch() + step);
+      else if (event.key === 'ArrowDown' && this.options.visualizePitch) map.setPitch(map.getPitch() - step);
+      else if (event.key === 'Home' || event.key === ' ') button.click();
+      else return;
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    this._refresh = () => {
+      const pitch = this.options.visualizePitch ? map.getPitch() : 0;
+      arrow.style.transform = `scale(${1 / Math.sqrt(Math.cos(pitch * Math.PI / 180))}) rotateX(${pitch}deg) rotate(${map.getBearing()}deg)`;
+      button.setAttribute('aria-description', `Bearing ${Math.round(map.getBearing())} degrees, pitch ${Math.round(map.getPitch())} degrees. Arrow keys adjust the camera; Home resets it.`);
+      // Do not hide a focused control, even when the caller opts into auto-hiding.
+      container.style.display = this.options.closeOnZeroBearing && !map.getBearing() && !pitch &&
+        !container.contains(document.activeElement) ? 'none' : '';
+    };
+    map.on('rotate pitch', this._refresh);
+    this._refresh();
+    this._endDrag = dragCamera(map, button, event => event.button === 0,
+      [0.8, this.options.visualizePitch ? 0.5 : 0]);
+    button.addEventListener('focusout', this._refresh);
+    L.DomEvent.on(button, 'dblclick contextmenu', L.DomEvent.stop);
+    L.DomEvent.disableClickPropagation(container);
+    L.DomEvent.disableScrollPropagation(container);
+    return container;
+  },
+  onRemove(map) {
+    map.off('rotate pitch', this._refresh);
+    this._endDrag();
+  },
+});
+if (L.control) L.control.rotate = options => new L.Control.Rotate(options);
+
+const ShiftRotate = L.Handler.extend({
+  addHooks() {
+    this._wheel = event => {
+      if (!event.shiftKey || editable(event.target) || event.target.closest('.leaflet-control')) return;
+      event.preventDefault(); event.stopImmediatePropagation();
+      this._map.setBearing(this._map.getBearing() + Math.sign(event.deltaY) * 5);
+    };
+    this._map.getContainer().addEventListener('wheel', this._wheel, { passive: false, capture: true });
+  },
+  removeHooks() { this._map.getContainer().removeEventListener('wheel', this._wheel, true); },
+});
+const PitchDrag = L.Handler.extend({
+  addHooks() {
+    this._end = dragCamera(this._map, this._map.getContainer(), event =>
+      !event.target.closest('.leaflet-control,.leaflet-marker-icon,.leaflet-popup') &&
+      (event.button === 2 || event.button === 0 && event.ctrlKey), [0.8, 0.5], true);
+  },
+  removeHooks() {
+    this._end();
+  },
+});
+const Compass = L.Handler.extend({
+  addHooks() {
+    const generation = this._generation = (this._generation || 0) + 1;
+    this._orientation = event => {
+      const bearing = Number.isFinite(event.webkitCompassHeading) ? -event.webkitCompassHeading : event.alpha;
+      const orientation = event.absolute ? 0 : (screen.orientation?.angle ?? window.orientation ?? 0);
+      if (Number.isFinite(bearing)) this._map.setBearing(bearing - orientation);
+    };
+    const permission = window.DeviceOrientationEvent?.requestPermission;
+    new Promise(resolve => resolve(permission ? permission.call(window.DeviceOrientationEvent) : 'granted')).then(result => {
+      if (!this.enabled() || this._generation !== generation) return;
+      if (!window.DeviceOrientationEvent || result !== 'granted') throw new Error('Device compass permission unavailable or denied');
+      window.addEventListener('deviceorientation', this._orientation);
+      window.addEventListener('deviceorientationabsolute', this._orientation);
+    }).catch(error => {
+      this.disable();
+      this._map.fire('error', { error });
+    });
+  },
+  removeHooks() {
+    this._generation++;
+    window.removeEventListener('deviceorientation', this._orientation);
+    window.removeEventListener('deviceorientationabsolute', this._orientation);
+  },
+});
+
+const ContainerResize = L.Handler.extend({
+  addHooks() {
+    this._observer = new ResizeObserver(() => this._map.invalidateSize());
+    this._observer.observe(this._map.getContainer());
+  },
+  removeHooks() { this._observer.disconnect(); },
+});
+
+export function cameraControls(map) {
+  map.addHandler('trackContainerMutation', ContainerResize);
+  if (!map.options.rotate) return;
+  map.addHandler('shiftKeyRotate', ShiftRotate);
+  map.addHandler('pitchDrag', PitchDrag);
+  map.addHandler('compassBearing', Compass);
+  // Two optional touch modes share one pinch/pan recognizer with Leaflet's zoom setting.
+  const TouchMode = L.Handler.extend({
+    addHooks() { map.fire('cameratouchchange'); },
+    removeHooks() { map.fire('cameratouchchange'); },
+  });
+  map.addHandler('touchRotate', TouchMode);
+  map.addHandler('touchPitch', TouchMode);
+  const container = map.getContainer();
+  let touch, nativeZoom;
+  const start = event => {
+    if (event.touches.length !== 2 || event.target.closest('.leaflet-control')) return;
+    if (!map.touchRotate.enabled() && !map.touchPitch.enabled()) return;
+    const [a, b] = event.touches;
+    if (Math.hypot(b.clientX - a.clientX, b.clientY - a.clientY) < 1) return;
+    map._stopPitchBearingAnimation();
+    const middle = new L.Point((a.clientX + b.clientX) / 2, (a.clientY + b.clientY) / 2)
+      .subtract(new L.Point(container.getBoundingClientRect().left, container.getBoundingClientRect().top));
+    touch = { angle: Math.atan2(b.clientY - a.clientY, b.clientX - a.clientX),
+      distance: Math.hypot(b.clientX - a.clientX, b.clientY - a.clientY), middle,
+      anchor: map.containerPointToLatLng(middle), zoom: map.getZoom(),
+      bearing: map.getBearing(), pitch: map.getPitch(), zooming: map.touchZoom?.enabled(),
+      dragging: map.dragging?.enabled() };
+    map.dragging?.disable();
+    event.preventDefault(); event.stopImmediatePropagation();
+  };
+  const move = event => {
+    if (!touch || event.touches.length !== 2) return;
+    const [a, b] = event.touches;
+    const angle = Math.atan2(b.clientY - a.clientY, b.clientX - a.clientX);
+    const middle = new L.Point((a.clientX + b.clientX) / 2, (a.clientY + b.clientY) / 2)
+      .subtract(new L.Point(container.getBoundingClientRect().left, container.getBoundingClientRect().top));
+    const delta = Math.atan2(Math.sin(angle - touch.angle), Math.cos(angle - touch.angle)) * 180 / Math.PI;
+    map._setPitchAndBearing(map.touchPitch.enabled() ? touch.pitch - (middle.y - touch.middle.y) * 0.25 : touch.pitch,
+      map.touchRotate.enabled() ? touch.bearing + delta : touch.bearing);
+    const distance = Math.hypot(b.clientX - a.clientX, b.clientY - a.clientY);
+    if (distance < 1) return;
+    const zoom = touch.zooming ? Math.max(map.getMinZoom(), Math.min(map.getMaxZoom(),
+      touch.zoom + Math.log2(distance / touch.distance))) : touch.zoom;
+    map.setView(map.getCenter(), zoom, { animate: false });
+    if (map.options.touchZoom !== 'center') {
+      const projected = map.project(touch.anchor).subtract(map.project(map.containerPointToLatLng(middle)));
+      map.setView(map.unproject(map.project(map.getCenter()).add(projected)), map.getZoom(), { animate: false });
+    }
+    event.preventDefault(); event.stopImmediatePropagation();
+  };
+  const end = event => {
+    if (!touch) return;
+    if (event?.touches?.length >= 2) return;
+    if (touch.dragging && container._leaflet_id) map.dragging.enable();
+    const snap = touch.snap;
+    map.options.zoomSnap = snap;
+    if (touch.zooming && snap && container._leaflet_id) {
+      map.setZoom(Math.round(map.getZoom() / snap) * snap, { animate: false });
+    }
+    touch = null;
+  };
+  const change = () => {
+    const active = map.touchRotate.enabled() || map.touchPitch.enabled();
+    if (active && nativeZoom === undefined) {
+      nativeZoom = map.touchZoom?.enabled();
+      map.touchZoom?.disable();
+    } else if (!active && nativeZoom !== undefined) {
+      end();
+      if (nativeZoom && container._leaflet_id) map.touchZoom.enable();
+      nativeZoom = undefined;
+    }
+  };
+  // Preserve the zoom-enabled setting before handing pinch recognition over.
+  change();
+  const startTouch = event => {
+    if (touch) return;
+    start(event);
+    if (touch) {
+      if (nativeZoom !== undefined) touch.zooming = nativeZoom;
+      touch.snap = map.options.zoomSnap;
+      map.options.zoomSnap = 0;
+    }
+  };
+  container.addEventListener('touchstart', startTouch, { capture: true, passive: false });
+  container.addEventListener('touchmove', move, { capture: true, passive: false });
+  container.addEventListener('touchend', end, true);
+  container.addEventListener('touchcancel', end, true);
+  window.addEventListener('blur', end);
+  map.on('cameratouchchange', change);
+  if (map.options.rotateControl) {
+    map.rotateControl = new L.Control.Rotate(typeof map.options.rotateControl === 'object' ? map.options.rotateControl : {});
+    map.rotateControl.addTo(map);
+  }
+  map.once('unload', () => {
+    end();
+    container.removeEventListener('touchstart', startTouch, true);
+    container.removeEventListener('touchmove', move, true);
+    container.removeEventListener('touchend', end, true);
+    container.removeEventListener('touchcancel', end, true);
+    window.removeEventListener('blur', end);
+    map.off('cameratouchchange', change);
+    map.rotateControl?.remove();
+  });
+}

package/src/utils/channel.js

@@ -0,0 +1,4 @@
+export const channel = (n, h, l, a) => {
+  const k = (n + h * 12) % 12;
+  return l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
+};

package/src/utils/collider.js

@@ -0,0 +1,62 @@
+import { CELL } from './CELL.js';
+import { colliders } from './colliders.js';
+
+
+export function collider(mesh) {
+  let c = colliders.get(mesh.geometry);
+  if (c) return c;
+  const m = mesh.worldMatrix, { position: { data: p }, index, normal, uv } = mesh.geometry.attributes;
+
+  const count = index ? index.count : p.length / 3, tri = [], nrm = [], cells = new Map(), v = [];
+
+  for (let i = 0; i < count; i += 3) {
+    const first = index ? index.data[i] : i;
+    // Streetlight halos (uv.x <= 2, see scene/picking.js) are light, not matter.
+    if (mesh.program.nightLight && uv && uv.data[first * 2] <= 2) {
+      continue;
+    }
+    for (let k = 0; k < 3; k++) {
+      const j = (index ? index.data[i + k] : i + k) * 3, x = p[j], y = p[j + 1], z = p[j + 2];
+      v[k * 3] = m[0] * x + m[4] * y + m[8] * z + m[12];
+      v[k * 3 + 1] = m[1] * x + m[5] * y + m[9] * z + m[13];
+      v[k * 3 + 2] = m[2] * x + m[6] * y + m[10] * z + m[14];
+    }
+    const ex = v[3] - v[0], ey = v[4] - v[1], ez = v[5] - v[2], fx = v[6] - v[0], fy = v[7] - v[1], fz = v[8] - v[2];
+
+    let nx = ey * fz - ez * fy, nz = ex * fy - ey * fx;
+
+    const ny = ez * fx - ex * fz, length = Math.hypot(nx, ny, nz);
+
+    if (!length || Math.abs(ny) > 0.9 * length) {
+      continue;
+    }
+
+    if (normal) {
+      // The stored normal tells the outside, whatever the winding.
+      const j = first * 3, a = normal.data;
+      if ((m[0] * a[j] + m[4] * a[j + 1] + m[8] * a[j + 2]) * nx + (m[2] * a[j] + m[6] * a[j + 1] + m[10] * a[j + 2]) * nz < 0) { nx = -nx; nz = -nz; }
+    }
+
+    const h = Math.hypot(nx, nz), t = nrm.length / 2;
+
+    tri.push(...v);
+    nrm.push(nx / h, nz / h);
+
+    for (let ix = Math.floor(Math.min(v[0], v[3], v[6]) / CELL); ix <= Math.floor(Math.max(v[0], v[3], v[6]) / CELL); ix++)
+      for (let iz = Math.floor(Math.min(v[2], v[5], v[8]) / CELL); iz <= Math.floor(Math.max(v[2], v[5], v[8]) / CELL); iz++) {
+        const key = ix + ',' + iz;
+        if (!cells.has(key)) {
+          cells.set(key, []);
+        }
+        cells.get(key).push(t);
+      }
+  }
+  c = {
+    tri: Float32Array.from(tri),
+    nrm: Float32Array.from(nrm),
+    cells,
+    origin: [m[12], m[13], m[14]]
+  };
+  colliders.set(mesh.geometry, c);
+  return c;
+}

package/src/utils/colliders.js

@@ -0,0 +1,2 @@
+
+export const colliders = new WeakMap();