leaflet-city-mapper 0.0.3 → 0.0.5

package/src/globals/shadowLow.js

@@ -0,0 +1 @@
+export const shadowLow = [0, 0, 0];

package/src/globals/shadowMeshLayout.js

@@ -0,0 +1,10 @@
+export const shadowMeshLayout = {
+  entries: [{
+    binding: 0,
+    visibility: null,
+    buffer: {
+      type: 'uniform',
+      hasDynamicOffset: true
+    }
+  }]
+};

package/src/globals/shadowOffsets.js

@@ -0,0 +1 @@
+export const shadowOffsets = [null];

package/src/globals/shadowPass.js

@@ -0,0 +1,9 @@
+export const shadowPass = {
+  colorAttachments: [],
+  depthStencilAttachment: {
+    view: null,
+    depthClearValue: 1,
+    depthLoadOp: 'clear',
+    depthStoreOp: 'store'
+  }
+};

package/src/globals/shadowPipeline.js

@@ -0,0 +1,24 @@
+export const shadowPipeline = {
+  layout: null,
+  vertex: {
+    module: null,
+    entryPoint: 'main',
+    buffers: null
+  },
+  fragment: {
+    module: null,
+    entryPoint: 'fragmentMain',
+    targets: []
+  },
+  primitive: {
+    topology: 'triangle-list',
+    cullMode: 'none'
+  },
+  depthStencil: {
+    format: 'depth32float',
+    depthWriteEnabled: true,
+    depthCompare: 'less',
+    depthBias: 2,
+    depthBiasSlopeScale: 2
+  }
+};

package/src/globals/shadowPipelineLayout.js

@@ -0,0 +1,3 @@
+export const shadowPipelineLayout = {
+  bindGroupLayouts: [null, null]
+};

package/src/globals/shadowShader.js

@@ -0,0 +1,3 @@
+export const shadowShader = {
+  code: null
+};

package/src/globals/shadowTexture.js

@@ -0,0 +1,5 @@
+export const shadowTexture = {
+  size: [null, null],
+  format: 'depth32float',
+  usage: null
+};

package/src/globals/shadowValues.js

@@ -0,0 +1 @@
+export const shadowValues = new Float32Array(20);

package/src/globals/sinObliquity.js

@@ -0,0 +1,3 @@
+import { radians } from './radians.js';
+
+export const sinObliquity = Math.sin(23.4397 * radians);

package/src/globals/sizes.js

@@ -0,0 +1,6 @@
+export const sizes = {
+  SCALAR: 1,
+  VEC2: 2,
+  VEC3: 3,
+  VEC4: 4
+};

package/src/globals/sunBindGroup.js

@@ -0,0 +1,20 @@
+export const sunBindGroup = {
+  layout: null,
+  entries: [{
+    binding: 0,
+    resource: {
+      buffer: null
+    }
+  }, {
+    binding: 1,
+    resource: null
+  }, {
+    binding: 2,
+    resource: null
+  }, {
+    binding: 3,
+    resource: {
+      buffer: null
+    }
+  }]
+};

package/src/globals/tau.js

@@ -0,0 +1 @@
+export const tau = 2 * Math.PI;

package/src/globals/terrainLayoutEntry.js

@@ -0,0 +1,8 @@
+export const terrainLayoutEntry = {
+  binding: 2,
+  visibility: null,
+  texture: {
+    sampleType: 'unfilterable-float',
+    viewDimension: '2d'
+  }
+};

package/src/globals/textureLayoutEntries.js

@@ -0,0 +1,41 @@
+export const textureLayoutEntries = [{
+    binding: null,
+    visibility: null,
+    texture: {
+      sampleType: 'float',
+      viewDimension: '2d'
+    }
+  },
+  {
+    binding: null,
+    visibility: null,
+    texture: {
+      sampleType: 'float',
+      viewDimension: '2d'
+    }
+  },
+  {
+    binding: null,
+    visibility: null,
+    texture: {
+      sampleType: 'float',
+      viewDimension: '2d'
+    }
+  },
+  {
+    binding: null,
+    visibility: null,
+    texture: {
+      sampleType: 'float',
+      viewDimension: '2d'
+    }
+  },
+  {
+    binding: null,
+    visibility: null,
+    texture: {
+      sampleType: 'float',
+      viewDimension: '2d'
+    }
+  },
+];

package/src/globals/tiledBounds.js

@@ -0,0 +1 @@
+export const tiledBounds = { value: undefined };

package/src/globals/tooltipEvents.js

@@ -0,0 +1 @@
+export const tooltipEvents = { value: undefined };

package/src/globals/tooltipPosition.js

@@ -0,0 +1 @@
+export const tooltipPosition = { value: undefined };

package/src/globals/trafficClocks.js

@@ -0,0 +1 @@
+export const trafficClocks = new Map();

package/src/globals/trafficEmptyList.js

@@ -0,0 +1 @@
+export const trafficEmptyList = Object.freeze([]);

package/src/globals/trafficEmptyOptions.js

@@ -0,0 +1 @@
+export const trafficEmptyOptions = Object.freeze({});

package/src/globals/trafficRouteMaterial.js

@@ -0,0 +1 @@
+export const trafficRouteMaterial = Object.freeze({ unlit: true });

package/src/{constants → globals}/trafficShader.js

@@ -1,49 +1,49 @@
-// One workgroup per vehicle shares its lane lookup and pose across all model vertices.
-export const trafficShader = /* wgsl */ `
-  struct Params { seconds: f32, side: f32, vertices: u32, total: u32 }
-  struct Vehicle { start: u32, count: u32, base: f32, speed: f32 }
-  @group(0) @binding(0) var<uniform> params: Params;
-  @group(0) @binding(1) var<storage, read> model: array<f32>;
-  @group(0) @binding(2) var<storage, read> points: array<vec4f>;
-  @group(0) @binding(3) var<storage, read> vehicles: array<Vehicle>;
-  @group(0) @binding(4) var<storage, read_write> position: array<f32>;
-  @group(0) @binding(5) var<storage, read_write> normal: array<f32>;
-  var<workgroup> center: vec3f;
-  var<workgroup> heading: vec2f;
-  @compute @workgroup_size(64)
-  fn main(@builtin(workgroup_id) group: vec3u, @builtin(local_invocation_index) thread: u32) {
-    let vehicleIndex = group.x;
-    if (thread == 0u) {
-      let vehicle = vehicles[vehicleIndex];
-      let last = vehicle.start + vehicle.count - 1u;
-      let length = points[last].w;
-      var s = vehicle.base + params.seconds * vehicle.speed;
-      s -= length * floor(s / length);
-      var i = vehicle.start + 1u;
-      var end = last;
-      while (i < end) {
-        let middle = i + (end - i) / 2u;
-        if (points[middle].w < s) { i = middle + 1u; }
-        else { end = middle; }
-      }
-      let a = points[i - 1u];
-      let b = points[i];
-      let d = select(b.w - a.w, 1.0, b.w == a.w);
-      let t = (s - a.w) / d;
-      heading = (b.xy - a.xy) / d;
-      center = vec3f(a.x + (b.x - a.x) * t - heading.y * params.side,
-        a.z + (b.z - a.z) * t, a.y + (b.y - a.y) * t + heading.x * params.side);
-    }
-    workgroupBarrier();
-    for (var vertex = thread; vertex < params.vertices; vertex += 64u) {
-      let k = vertex * 3u;
-      let n = params.vertices * 3u + k;
-      let o = (vehicleIndex * params.vertices + vertex) * 3u;
-      position[o] = center.x - model[k] * heading.y - model[k + 2u] * heading.x;
-      position[o + 1u] = center.y + model[k + 1u];
-      position[o + 2u] = center.z + model[k] * heading.x - model[k + 2u] * heading.y;
-      normal[o] = -model[n] * heading.y - model[n + 2u] * heading.x;
-      normal[o + 1u] = model[n + 1u];
-      normal[o + 2u] = model[n] * heading.x - model[n + 2u] * heading.y;
-    }
-  }`;
+// One workgroup per vehicle shares its lane lookup and pose across all model vertices.
+export const trafficShader = /* wgsl */`
+  struct Params { seconds: f32, side: f32, vertices: u32, total: u32 }
+  struct Vehicle { start: u32, count: u32, base: f32, speed: f32 }
+  @group(0) @binding(0) var<uniform> params: Params;
+  @group(0) @binding(1) var<storage, read> model: array<f32>;
+  @group(0) @binding(2) var<storage, read> points: array<vec4f>;
+  @group(0) @binding(3) var<storage, read> vehicles: array<Vehicle>;
+  @group(0) @binding(4) var<storage, read_write> position: array<f32>;
+  @group(0) @binding(5) var<storage, read_write> normal: array<f32>;
+  var<workgroup> center: vec3f;
+  var<workgroup> heading: vec2f;
+  @compute @workgroup_size(64)
+  fn main(@builtin(workgroup_id) group: vec3u, @builtin(local_invocation_index) thread: u32) {
+    let vehicleIndex = group.x;
+    if (thread == 0u) {
+      let vehicle = vehicles[vehicleIndex];
+      let last = vehicle.start + vehicle.count - 1u;
+      let length = points[last].w;
+      var s = vehicle.base + params.seconds * vehicle.speed;
+      s -= length * floor(s / length);
+      var i = vehicle.start + 1u;
+      var end = last;
+      while (i < end) {
+        let middle = i + (end - i) / 2u;
+        if (points[middle].w < s) { i = middle + 1u; }
+        else { end = middle; }
+      }
+      let a = points[i - 1u];
+      let b = points[i];
+      let d = select(b.w - a.w, 1.0, b.w == a.w);
+      let t = (s - a.w) / d;
+      heading = (b.xy - a.xy) / d;
+      center = vec3f(a.x + (b.x - a.x) * t - heading.y * params.side,
+        a.z + (b.z - a.z) * t, a.y + (b.y - a.y) * t + heading.x * params.side);
+    }
+    workgroupBarrier();
+    for (var vertex = thread; vertex < params.vertices; vertex += 64u) {
+      let k = vertex * 3u;
+      let n = params.vertices * 3u + k;
+      let o = (vehicleIndex * params.vertices + vertex) * 3u;
+      position[o] = center.x - model[k] * heading.y - model[k + 2u] * heading.x;
+      position[o + 1u] = center.y + model[k + 1u];
+      position[o + 2u] = center.z + model[k] * heading.x - model[k + 2u] * heading.y;
+      normal[o] = -model[n] * heading.y - model[n + 2u] * heading.x;
+      normal[o + 1u] = model[n + 1u];
+      normal[o + 2u] = model[n] * heading.x - model[n + 2u] * heading.y;
+    }
+  }`;

package/src/globals/triangleContexts.js

@@ -0,0 +1 @@
+export const triangleContexts = [];

package/src/globals/uVLayout.js

@@ -0,0 +1,8 @@
+export const uVLayout = Object.freeze({
+  arrayStride: 8,
+  attributes: Object.freeze([Object.freeze({
+    shaderLocation: 3,
+    offset: 0,
+    format: 'float32x2'
+  })])
+});

package/src/{constants → globals}/vehicles.js

@@ -1,21 +1,36 @@
-import { carModel } from '../vehicles/carModel.js';
-import { boatModel } from '../vehicles/boatModel.js';
+import { bicycleModel } from '../vehicles/bicycleModel.js';
+import { pedestrianModel } from '../vehicles/pedestrianModel.js';
 import { busModel } from '../vehicles/busModel.js';
 import { tramModel } from '../vehicles/tramModel.js';
 import { metroModel } from '../vehicles/metroModel.js';
-import { bicycleModel } from '../vehicles/bicycleModel.js';
-import { pedestrianModel } from '../vehicles/pedestrianModel.js';
+import { carModel } from '../vehicles/carModel.js';
+import { boatModel } from '../vehicles/boatModel.js';
 
 /**
  * `side`: default offset (metres) to the right of the lane centreline. `model(i)` gives the prisms of the i-th vehicle.
  * `lights`: night point lights in model space (see the night lighting grid), e.g. the pool cast by the headlights.
  */
 export const vehicles = {
-  bicycle: { side: 0.4, model: bicycleModel },
-  pedestrian: { side: 0.3, model: pedestrianModel },
-  bus: { side: 1.5, model: busModel },
-  tram: { side: 0, model: tramModel },
-  metro: { side: 0, model: metroModel },
+  bicycle: {
+    side: 0.4,
+    model: bicycleModel
+  },
+  pedestrian: {
+    side: 0.3,
+    model: pedestrianModel
+  },
+  bus: {
+    side: 1.5,
+    model: busModel
+  },
+  tram: {
+    side: 0,
+    model: tramModel
+  },
+  metro: {
+    side: 0,
+    model: metroModel
+  },
   car: {
     side: 1.8,
     model: carModel,

package/src/globals/vertexShader.js

@@ -0,0 +1,3 @@
+export const vertexShader = {
+  code: null
+};

package/src/globals/wantedTiles.js

@@ -0,0 +1 @@
+export const wantedTiles = new Map();

package/src/gpu/initializeRendererResources.js

@@ -0,0 +1,36 @@
+import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
+
+import { sceneSunlightUniforms } from '../globals/sceneSunlightUniforms.js';
+import { resizeSunlight } from '../shadows/resizeSunlight.js';
+
+export function initializeRendererResources(layer, device) {
+  const layout = device.createBindGroupLayout(/* alloc */ {
+    entries: /* alloc */ [
+      /* alloc */ { binding: 0, visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: /* alloc */ { type: 'uniform' } },
+      /* alloc */ { binding: 1, visibility: GPUShaderStage.FRAGMENT, texture: /* alloc */ { sampleType: 'depth' } },
+      /* alloc */ { binding: 2, visibility: GPUShaderStage.FRAGMENT, sampler: /* alloc */ { type: 'comparison' } },
+      /* alloc */ { binding: 3, visibility: GPUShaderStage.FRAGMENT, buffer: /* alloc */ { type: 'read-only-storage' } },
+    ]
+  });
+  const buffer = rendererByLayer.get(layer).device.createBuffer(/* alloc */ { size: 80, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });
+  const sampler = rendererByLayer.get(layer).device.createSampler(/* alloc */ { compare: 'less-equal', minFilter: 'linear', magFilter: 'linear' });
+  const lights = rendererByLayer.get(layer).device.createBuffer(/* alloc */ { size: 32, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST });
+  rendererByLayer.get(layer).sunlight = /* alloc */ { layout, buffer, sampler, lights, size: 0 };
+  rendererByLayer.get(layer).device.queue.writeBuffer(buffer, 0, sceneSunlightUniforms);
+  resizeSunlight(layer, 1);
+  const emptyImage = document.createElement('canvas');
+  emptyImage.width = 1;
+  emptyImage.height = 1;
+  rendererByLayer.get(layer).roofFallbackTexture = /* alloc */ {
+    device,
+    texture: device.createTexture(/* alloc */ {
+      size: /* alloc */ [1, 1],
+      format: 'rgba8unorm',
+      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
+    }),
+    sampler: device.createSampler(/* alloc */ {
+      addressModeU: 'clamp-to-edge', addressModeV: 'clamp-to-edge',
+    }),
+    image: emptyImage, format: 'rgba8unorm', srgb: false, uploaded: null,
+  };
+}

package/src/gpu/initializeSharedRenderer.js

@@ -0,0 +1,52 @@
+import { cameraByLayer } from '../weakmaps/cameraByLayer.js';
+import { layersByLayer } from '../weakmaps/layersByLayer.js';
+import { locationByLayer } from '../weakmaps/locationByLayer.js';
+import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
+import { sceneByLayer } from '../weakmaps/sceneByLayer.js';
+import { sceneOriginByLayer } from '../weakmaps/sceneOriginByLayer.js';
+import { sharedByLayer } from '../weakmaps/sharedByLayer.js';
+
+import { rendererDevices } from '../weakmaps/rendererDevices.js';
+import { emptyNode } from '../scene/createSceneNode.js';
+import { failAttachment } from '../scene/failAttachment.js';
+import { requestAdapter } from './requestAdapter.js';
+import { requestDevice } from './requestDevice.js';
+import { rendererDeviceError } from './rendererDeviceError.js';
+import { rendererDeviceLost } from './rendererDeviceLost.js';
+import { createSceneCamera } from '../camera/createSceneCamera.js';
+import { initializeRendererResources } from './initializeRendererResources.js';
+import { mountRenderer } from './mountRenderer.js';
+
+export async function initializeSharedRenderer(layer, map) {
+  const canvas = document.createElement('canvas');
+  if (!navigator.gpu) {
+    failAttachment(/* alloc */ new Error('Layer3D requires WebGPU'), layer, map);
+  }
+  const adapter = await requestAdapter(layer, map);
+  const device = await requestDevice(adapter, layer, map);
+  rendererDevices.set(device, map);
+  device.addEventListener('uncapturederror', rendererDeviceError);
+  Promise.all(/* alloc */ [device.lost, Promise.resolve(device)]).then(rendererDeviceLost);
+  const context = canvas.getContext('webgpu');
+  if (!context) {
+    device.destroy();
+    failAttachment(/* alloc */ new Error('Unable to create a WebGPU canvas context'), layer, map);
+  }
+  const format = navigator.gpu.getPreferredCanvasFormat();
+  context.configure(/* alloc */ { device, format, alphaMode: 'premultiplied' });
+  map.getContainer().querySelector('.leaflet-webgpu-warning')?.remove();
+  sharedByLayer.set(layer, layer);
+  layersByLayer.set(layer, /* alloc */ new Set());
+  sceneOriginByLayer.set(layer, locationByLayer.get(layer));
+  sceneByLayer.set(layer, emptyNode());
+  cameraByLayer.set(layer, createSceneCamera());
+  rendererByLayer.set(layer, /* alloc */ {
+    device,
+    context,
+    format,
+    canvas,
+    dpr: Math.min(window.devicePixelRatio, 2)
+  });
+  initializeRendererResources(layer, device);
+  mountRenderer(layer, map, canvas);
+}

package/src/gpu/mountRenderer.js

@@ -0,0 +1,26 @@
+import { sizeByLayer } from '../weakmaps/sizeByLayer.js';
+
+import { onMapChange } from '../scene/onMapChange.js';
+import { startZoom } from '../animations/startZoom.js';
+import { onZoomAnim } from '../animations/onZoomAnim.js';
+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.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.on('move zoom rotate pitch resize viewreset layeradd layerremove', onMapChange, layer);
+  map.on('zoomstart', startZoom, layer);
+  map.on('zoomanim', onZoomAnim, layer);
+  map.on('zoomend', endZoom, layer);
+}

package/src/{scene → gpu}/releaseRenderer.js

@@ -1,4 +1,4 @@
-export async function releaseRenderer(renderer, backend) {
+export async function releaseRenderer(renderer, layer) {
   try {
     await renderer.device.queue.onSubmittedWorkDone();
     renderer.depthTexture?.destroy();
@@ -8,7 +8,7 @@ export async function releaseRenderer(renderer, backend) {
     renderer.sunlight?.buffer?.destroy();
     renderer.sunlight?.lights?.destroy();
   } catch (error) {
-    backend.fire('error', { error });
+    layer.fire('error', /* alloc */ { error });
   }
   renderer.device.destroy();
 }

package/src/gpu/rendererDeviceError.js

@@ -0,0 +1,16 @@
+import { layersByLayer } from '../weakmaps/layersByLayer.js';
+import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
+
+import { rendererDevices } from '../weakmaps/rendererDevices.js';
+import { renderers } from '../weakmaps/renderers.js';
+
+
+
+export function rendererDeviceError(event) {
+  const map = rendererDevices.get(event.currentTarget);
+  const owner = renderers.get(map);
+  if (rendererByLayer.get(owner)?.device !== event.currentTarget) return;
+  if (!layersByLayer.get(owner)) return;
+  let layer;
+  for (layer of layersByLayer.get(owner)) layer.fire('error', /* alloc */ { error: event.error });
+}

package/src/gpu/rendererDeviceLost.js

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

package/src/gpu/reportShaderCompilation.js

@@ -0,0 +1,17 @@
+export async function reportCompilation(layer, pending) {
+  let info, message;
+  try {
+    const infos = await Promise.all(pending);
+    let errors = '', errorCount = 0;
+    for (info of infos) {
+      for (message of info.messages) if (message.type === 'error') errors += `${errorCount++ ? '\n' : ''}${message.message}`;
+    }
+    if (errorCount) {
+      layer.fire('error', /* alloc */ {
+        error: /* alloc */ new Error(`Unable to compile Layer3D WGSL: ${errors}`),
+      });
+    }
+  } catch (error) {
+    layer.fire('error', /* alloc */ { error });
+  }
+}

package/src/gpu/requestAdapter.js

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

package/src/gpu/requestDevice.js

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