leaflet-city-mapper 0.0.3 → 0.0.5

package/src/index.js

@@ -1,16 +1,26 @@
+import { L } from './globals/L.js';
+import { layerProto } from './globals/layerProto.js';
+import { layerCallInitHooks as sharedLayerCallInitHooks } from './globals/layerCallInitHooks.js';
+import { removeLayer as sharedRemoveLayer } from './globals/removeLayer.js';
+
 import './camera/mapCamera.js';
 import { init3D } from './scene/init3D.js';
-import { initNativeGPU } from './core/initNativeGPU.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 { indexState } from './constants/indexState.js';
+
 import { initializeNativeLayer } from './core/initializeNativeLayer.js';
-import { layerLayerAdd } from './scene/layerLayerAdd.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 { setRotation } from './core/setRotation.js';
+import { layerCallInitHooks } from './core/layerCallInitHooks.js';
 
 /**
  * `new L.Layer({ source: { type, url, ...settings }, pane, attribution })`: layers with a `source`
@@ -19,54 +29,38 @@ import { layerInitialize } from './scene/layerInitialize.js';
 
 /**
  * Router for `new L.Layer({ source: { type, url, ...settings }, pane, attribution })`.
- * It initializes the existing instance from the bundled source modules;
- * types receive flat options (`{ ...source, pane, attribution }`), so `layer.options.url` etc.
+ * It initializes a native instance from the bundled source modules;
+ * types receive flat options (`{ ...source, pane, attribution }`); plugin state remains external.
  *
- * Folder layout:
- * - scene/: source routing, lifecycle and graph; initializers live in their domain folders.
- * - core/: Leaflet layer integration; camera/ and controls/: camera and interaction.
- * - sources/ and picking/: source geometry and feature interaction.
- * - rendering/, shaders/, shadows/ and lighting/: WebGPU drawing and illumination.
- * - geometry/, triangulation/ and collision/: mesh operations and spatial queries.
- * - models/, archives/ and raster/: glTF loading, archive access and raster tiles.
- * - constants/ and state/: exported module-level const and let bindings.
- * - terrain/, sunlight/, traffic/ and walk/: feature-specific operations.
- *   Operations receive the layer explicitly, without subclasses or prototype replacement.
+ * Source folders are flat and grouped by responsibility; see README's source layout.
+ * Initializers and orchestration stay in their domain folders; shared geometry,
+ * projections, transforms, textures and animations have dedicated folders.
+ * Shared values live in globals/, private WeakMaps in weakmaps/.
+ * 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'; otherwise *.pmtiles URLs use
- * 'pmtiles' and other sources use '3d'.
+ * When `type` is omitted, inline FeatureCollections use 'geojson'; *.pmtiles URLs use
+ * 'pmtiles', *.tif/*.tiff URLs use 'cog', and other sources use '3d'.
  */
 
-indexState.layerProto = Object.defineProperties({}, Object.getOwnPropertyDescriptors(L.Layer.prototype));
-
-// One chain for every pending layer: they become real layers in creation order.
-indexState.loading = Promise.resolve();
-
-indexState.pendingInitializations = [];
-
-indexState.closestMethods = new WeakMap();
-indexState.boundsMethods = new WeakMap();
-indexState.gridInitializers = new WeakMap();
-
-indexState.pendingGridFades = new Map();
-indexState.gridFadeFrame = null;
-
-indexState.pendingRasterLoads = [];
+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.
  * 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', 'terrain' or 'traffic'.
+ * @property {string} [type] '3d', 'geojson', 'pmtiles', 'cog', 'terrain' or 'traffic'.
  * @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.
  * @property {'OPAQUE'|'MASK'|'BLEND'} [alphaMode] Override every glTF material's alpha mode.
  * @property {number[]} [rotation] Model Euler rotation [x,y,z] in radians, YXZ order.
  * @property {number[]} [scale] Model scale [x,y,z].
- * @property {string} [url] GLB/glTF model URL or PMTiles archive URL.
+ * @property {string} [url] GLB/glTF model URL, PMTiles archive URL or supported COG URL.
+ * @property {boolean} [doubleSided=false] Show raster/terrain surfaces from below.
+ * @property {{x:number,y:number,radius:number,outside?:boolean}} [cutout] Raster screen-space circle in CSS pixels; outside keeps only the circle.
  * @property {function(Object): (ExtrusionStyle|null)} [style] Source styling; null skips a feature.
  * @property {function(PickedFeature): (Node|string)} [tooltip] Tooltip content; strings are text.
  * @property {string} [ariaLabel='3D scene'] Shared canvas accessible name.
@@ -103,13 +97,16 @@ indexState.pendingRasterLoads = [];
  * @property {number} [skipped] Features skipped by style.
  * @property {string} [error] Failed load/build message.
  *
- * @param {L.Layer} backend
+ * @param {L.Layer} layer
  * @param {Layer3DOptions} [options] World origin comes from center or the first map centre.
  */
 
 L.Layer.include({
-  _layerAdd: layerLayerAdd,
   initialize: layerInitialize,
+  _layerAdd: layerLayerAdd,
+  callInitHooks: layerCallInitHooks,
 });
 
-L.Layer.addInitHook(initializeNativeLayer);
+sharedRemoveLayer.value = L.Map.prototype.removeLayer;
+L.Map.include({ removeLayer, getPitch, getBearing });
+L.Marker.include({ setRotation });

package/src/layer-controls/layerCountTitle.js

@@ -0,0 +1,6 @@
+import { modelUrlByLayer } from '../weakmaps/modelUrlByLayer.js';
+
+export function layerCountTitle(layer, formatted, pending, error) {
+  return error ? `Unable to load: ${typeof error === 'string' ? error : error.message}` :
+    `${formatted} loaded ${modelUrlByLayer.get(layer) ? 'models' : 'elements'} in the current area${pending ? `; ${pending} blocks loading` : ''}`;
+}

package/src/{scene → layer-controls}/placeEntry.js

@@ -1,9 +1,11 @@
+import { L } from '../globals/L.js';
+import { placeEntryElement } from './placeEntryElement.js';
 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);
+      placeEntryElement(input, layer, element);
       return true;
     }
   }

package/src/layer-controls/placeEntryElement.js

@@ -0,0 +1,22 @@
+import { L } from '../globals/L.js';
+
+export function placeEntryElement(input, layer, element) {
+  const label = input.closest('label');
+  if (element.classList.contains('layer-count')) {
+    if (!input.hasAttribute('aria-label')) input.setAttribute('aria-label', label.textContent.trim());
+    element.id = `leaflet-layer-count-${L.Util.stamp(layer)}`;
+    input.setAttribute('aria-describedby', element.id);
+    label.append(element);
+  }
+  else if (element.classList.contains('traffic-status')) {
+    let group = label.nextElementSibling;
+    if (!group?.classList.contains('traffic-status-group')) {
+      group = L.DomUtil.create('div', 'traffic-status-group');
+      group.style.cssText = 'display:flex;flex-wrap:wrap;gap:4px 8px;max-width:200px;margin:2px 0 6px 20px;';
+      group.setAttribute('role', 'group');
+      group.setAttribute('aria-label', 'Traffic counts');
+      label.after(group);
+    }
+    group.append(element);
+  } else label.after(element);
+}

package/src/{scene → layer-controls}/removeEntry.js

@@ -2,5 +2,7 @@ import { replaceEntry } from './replaceEntry.js';
 
 export function removeEntry() {
   this.map.off('layeradd layerremove', replaceEntry, this);
+  const group = this.element.parentElement;
   this.element.remove();
+  if (group?.classList.contains('traffic-status-group') && !group.childElementCount) group.remove();
 }

package/src/layer-controls/renderLayerCount.js

@@ -0,0 +1,20 @@
+import { countStatusByLayer } from '../weakmaps/countStatusByLayer.js';
+import { modelUrlByLayer } from '../weakmaps/modelUrlByLayer.js';
+import { modelByLayer } from '../weakmaps/modelByLayer.js';
+import { headerByLayer } from '../weakmaps/headerByLayer.js';
+import { geojsonByLayer } from '../weakmaps/geojsonByLayer.js';
+
+export function renderLayerCount(layer, count, pending, error) {
+  const status = countStatusByLayer.get(layer);
+  const modelUrl = modelUrlByLayer.get(layer), model = modelByLayer.get(layer);
+  if (modelUrl) count = model ? 1 : 0;
+  const loading = pending || (modelUrl ? !model : !headerByLayer.get(layer) && !geojsonByLayer.get(layer));
+  const formatted = count.toLocaleString('en-US');
+  const text = error ? 'Error' : `${formatted}${loading ? '…' : ''}`;
+  const title = layerCountTitle(layer, formatted, pending, error);
+  if (status.textContent !== text) status.textContent = text;
+  if (status.title !== title) status.title = title;
+  if (error && status.getAttribute('role') !== 'alert') status.setAttribute('role', 'alert');
+  else if (!error && status.hasAttribute('role')) status.removeAttribute('role');
+}
+import { layerCountTitle } from './layerCountTitle.js';

package/src/{scene → layer-controls}/replaceEntry.js

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

package/src/{scene → layer-controls}/runPlacements.js

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

package/src/{scene → layer-controls}/underEntry.js

@@ -1,4 +1,4 @@
-import { underEntryState } from '../constants/underEntryState.js';
+
 import { placeUnderEntry } from './placeUnderEntry.js';
 import { replaceEntry } from './replaceEntry.js';
 import { removeEntry } from './removeEntry.js';
@@ -7,10 +7,9 @@ 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 };
+  const state = /* alloc */ { map: layer._map, layer, element, onPlace };
   state.map.on('layeradd layerremove', replaceEntry, state);
   layer.once('remove', removeEntry, state);
   return placeUnderEntry(state);

package/src/layer-controls/updateLayerCount.js

@@ -0,0 +1,24 @@
+import { areasByLayer } from '../weakmaps/areasByLayer.js';
+import { countStatusByLayer } from '../weakmaps/countStatusByLayer.js';
+
+import { underEntry } from './underEntry.js';
+import { renderLayerCount } from './renderLayerCount.js';
+
+export function updateLayerCount(event) {
+  const layer = event.target, status = countStatusByLayer.get(layer)
+  if (!layer._map) return;
+  if (event.type === 'add') underEntry(layer, status);
+  let count = 0, pending = 0, error = event.error, area;
+  if (Number.isFinite(event.loaded)) {
+    count = event.loaded;
+    pending = event.pending ?? 0;
+    error ||= event.errors?.[0];
+  } else {
+    for (area of areasByLayer.get(layer).values()) {
+      count += area.buildings ?? 0;
+      if (!area.done && !area.error) pending++;
+      error ||= area.error;
+    }
+  }
+  renderLayerCount(layer, count, pending, error);
+}

package/src/lighting/cacheLightGrid.js

@@ -4,7 +4,6 @@ import { worldLights } from './worldLights.js';
 /** Keep fixed lamps cached when moving headlights change. */
 export function cacheLightGrid(meshes, previous, maxBytes) {
   let unchanged = previous?.meshes.length === meshes.length;
-  const packed = [], snapshots = [];
   let i, mesh, matrix, lights, cache, sameMatrix, j;
   for (i = 0; i < meshes.length; i++) {
     mesh = meshes[i], matrix = mesh.worldMatrix, lights = mesh.extras.lights;
@@ -12,12 +11,22 @@ export function cacheLightGrid(meshes, previous, maxBytes) {
     sameMatrix = Boolean(cache);
     for (j = 0; j < matrix.length && sameMatrix; j++) sameMatrix = matrix[j] === cache.matrix[j];
     if (!sameMatrix || cache.lights !== lights) {
-      cache = mesh._worldLights = { lights, matrix: [...matrix], data: worldLights(lights, matrix) };
+      cache = mesh._worldLights = /* alloc */ {
+        lights,
+        matrix: /* alloc */ [...matrix],
+        data: worldLights(lights, matrix),
+      };
     }
     unchanged &&= previous.meshes[i].mesh === mesh && previous.meshes[i].cache === cache;
-    packed.push(cache.data);
-    snapshots.push({ mesh, cache });
   }
   if (unchanged) return previous;
-  return { ...lightGrid(packed, maxBytes), meshes: snapshots };
+  const packed = /* alloc */ new Array(meshes.length);
+  const snapshots = /* alloc */ new Array(meshes.length);
+  for (i = 0; i < meshes.length; i++) {
+    mesh = meshes[i];
+    cache = mesh._worldLights;
+    packed[i] = cache.data;
+    snapshots[i] = /* alloc */ { mesh, cache };
+  }
+  return /* alloc */ { ...lightGrid(packed, maxBytes), meshes: snapshots };
 }

package/src/lighting/collectLightMeshes.js

@@ -1,6 +1,9 @@
+import { geometryEmpty } from '../globals/geometryEmpty.js';
+
+
 export function collectLightMeshes(node, fixed, moving) {
   if (!node.visible) return;
   if (node.extras?.lights) (node.extras.dynamicLights ? moving : fixed).push(node);
   let child;
-  for (child of node.children || []) collectLightMeshes(child, fixed, moving);
+  for (child of node.children || geometryEmpty) collectLightMeshes(child, fixed, moving);
 }

package/src/lighting/lightGrid.js

@@ -1,4 +1,4 @@
-import { visitCells } from './visitCells.js';
+import { visitCells } from './visitLightGridCells.js';
 
 /** Pack world-space point lights into the shader's spatial grid. */
 export function lightGrid(packed, maxBytes) {
@@ -6,7 +6,7 @@ export function lightGrid(packed, maxBytes) {
   let values, i, value, key;
   for (values of packed) count += values.length / 8;
   const cellSize = 32;
-  let data = new Float32Array(8);
+  let data;
   if (count) {
     let minX = Infinity, minZ = Infinity, maxX = -Infinity, maxZ = -Infinity;
     for (values of packed) for (i = 0; i < values.length; i += 8) {
@@ -18,17 +18,18 @@ export function lightGrid(packed, maxBytes) {
     const columns = Math.ceil((maxX - minX) / cellSize) + 1,
              rows = Math.ceil((maxZ - minZ) / cellSize) + 1;
     // Counting sort: count the lights of each cell, then fill each cell's slice.
-    const counts = new Uint32Array(columns * rows),
-            next = new Uint32Array(columns * rows);
+    const counts = /* alloc */ new Uint32Array(columns * rows),
+            next = /* alloc */ new Uint32Array(columns * rows);
     visitCells(packed, minX, minZ, cellSize, columns, counts);
     let entries = 0;
     for (value of counts) entries += value;
     const length = (2 + columns * rows + entries * 2) * 4;
     if (length * 4 > maxBytes) {
-      throw new Error('Streetlight grid exceeds GPU storage limit');
+      throw /* alloc */ new Error('Streetlight grid exceeds GPU storage limit');
     }
-    data = new Float32Array(length);
-    data.set([minX, minZ, cellSize, columns, rows, count, 0, 0]);
+    data = /* alloc */ new Float32Array(length);
+    data[0] = minX; data[1] = minZ; data[2] = cellSize;
+    data[3] = columns; data[4] = rows; data[5] = count;
     let offset = 2 + columns * rows;
     for (key = 0; key < counts.length; key++) if (counts[key]) {
       data[(2 + key) * 4] = next[key] = offset;
@@ -36,7 +37,7 @@ export function lightGrid(packed, maxBytes) {
       offset += counts[key] * 2;
     }
     visitCells(packed, minX, minZ, cellSize, columns, next, data);
-  }
+  } else data = /* alloc */ new Float32Array(8);
 
-  return { data, count };
+  return /* alloc */ { data, count };
 }

package/src/lighting/updatePointLights.js

@@ -1,27 +1,34 @@
-import { destroyTexture } from '../rendering/destroyTexture.js';
+import { layersByLayer } from '../weakmaps/layersByLayer.js';
+import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
+import { rootByLayer } from '../weakmaps/rootByLayer.js';
+
+
+
+import { destroyTexture } from '../textures/destroyTexture.js';
 import { bindSunlight } from '../shadows/bindSunlight.js';
 import { cacheLightGrid } from './cacheLightGrid.js';
 import { collectLightMeshes } from './collectLightMeshes.js';
 
-export function updatePointLights(backend) {
-  const { device, sunlight: sun } = backend.renderer;
-  const fixed = [], moving = [];
-  let layer;
-  for (layer of backend._layers) {
-    if (!layer.options.nightLight || !layer.root.visible) continue;
-    collectLightMeshes(layer.root, fixed, moving);
+export function updatePointLights(layer) {
+  const { device, sunlight: sun } = rendererByLayer.get(layer);
+  const fixed = /* alloc */ [];
+  const moving = /* alloc */ [];
+  let sceneLayer;
+  for (sceneLayer of layersByLayer.get(layer)) {
+    if (!sceneLayer.options.nightLight || !rootByLayer.get(sceneLayer).visible) continue;
+    collectLightMeshes(rootByLayer.get(sceneLayer), fixed, moving);
   }
   const maxBytes = device.limits.maxStorageBufferBindingSize;
   const staticGrid = cacheLightGrid(fixed, sun.staticLightGrid, maxBytes);
   const dynamicGrid = cacheLightGrid(moving, sun.dynamicLightGrid, maxBytes);
   if (staticGrid === sun.staticLightGrid && dynamicGrid === sun.dynamicLightGrid) return;
   const size = staticGrid.data.byteLength + dynamicGrid.data.byteLength;
-  if (size > maxBytes) throw new Error('Streetlight grid exceeds GPU storage limit');
+  if (size > maxBytes) throw /* alloc */ new Error('Streetlight grid exceeds GPU storage limit');
   let uploadStatic = staticGrid !== sun.staticLightGrid;
   if (sun.lights.size < size) {
-    destroyTexture(backend, sun.lights);
-    sun.lights = device.createBuffer({ size, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST });
-    bindSunlight(backend);
+    destroyTexture(layer, sun.lights);
+    sun.lights = device.createBuffer(/* alloc */ { size, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST });
+    bindSunlight(layer);
     uploadStatic = true;
   }
   // The spare header component points to a second grid in the same storage binding.

package/src/lighting/visitLightCells.js

@@ -0,0 +1,13 @@
+export function visitLightCells(values, i, minX, minZ, cellSize, columns, offsets, data) {
+  const radius = values[i + 3], x = values[i] - minX, z = values[i + 2] - minZ;
+  let y, c, key;
+  for (y = Math.floor((z - radius) / cellSize); y <= Math.floor((z + radius) / cellSize); y++) {
+    for (c = Math.floor((x - radius) / cellSize); c <= Math.floor((x + radius) / cellSize); c++) {
+      key = y * columns + c;
+      if (data) {
+        writeLightCell(values, i, key, offsets, data);
+      } else offsets[key]++;
+    }
+  }
+}
+import { writeLightCell } from './writeLightCell.js';

package/src/lighting/visitLightGridCells.js

@@ -0,0 +1,8 @@
+import { visitLightCells } from './visitLightCells.js';
+
+export function visitCells(packed, minX, minZ, cellSize, columns, offsets, data) {
+  let values, i;
+  for (values of packed) for (i = 0; i < values.length; i += 8) {
+    visitLightCells(values, i, minX, minZ, cellSize, columns, offsets, data);
+  }
+}

package/src/lighting/worldLights.js

@@ -1,7 +1,8 @@
+import { lightScale } from '../globals/lightScale.js';
 
 /** World-space [x, y, z, radius, r, g, b, intensity] for one mesh's point lights. */
 export function worldLights(lights, m) {
-  const values = new Float32Array(lights.length * 8);
+  const values = /* alloc */ new Float32Array(lights.length * 8);
   let i, x, y, z, radius, color, flux, w;
   for (i = 0; i < lights.length; i++) {
     ({
@@ -11,17 +12,14 @@ export function worldLights(lights, m) {
       flux
     } = lights[i]);
     w = m[3] * x + m[7] * y + m[11] * z + m[15];
-    values.set(
-      [
-        (m[0] * x + m[4] * y + m[8] * z + m[12]) / w,
-        (m[1] * x + m[5] * y + m[9] * z + m[13]) / w,
-       (m[2] * x + m[6] * y + m[10] * z + m[14]) / w,
-       radius,
-       ...color,
-       flux / (4 * Math.PI) * 0.03
-      ],
-       i * 8
-    );
+    values[i * 8] = (m[0] * x + m[4] * y + m[8] * z + m[12]) / w;
+    values[i * 8 + 1] = (m[1] * x + m[5] * y + m[9] * z + m[13]) / w;
+    values[i * 8 + 2] = (m[2] * x + m[6] * y + m[10] * z + m[14]) / w;
+    values[i * 8 + 3] = radius;
+    values[i * 8 + 4] = color[0];
+    values[i * 8 + 5] = color[1];
+    values[i * 8 + 6] = color[2];
+    values[i * 8 + 7] = flux * lightScale;
   }
   return values;
 }

package/src/lighting/writeLightCell.js

@@ -0,0 +1,5 @@
+export function writeLightCell(values, i, key, offsets, data) {
+  let j, o;
+  for (j = 0, o = offsets[key] * 4; j < 8; j++) data[o + j] = values[i + j];
+  offsets[key] += 2;
+}

package/src/materials/createProgram.js

@@ -0,0 +1,76 @@
+import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
+
+import { defaultMaterial } from '../globals/defaultMaterial.js';
+import { vertexShader } from '../globals/vertexShader.js';
+import { fragmentShader } from '../globals/fragmentShader.js';
+import { pipelineLayout as sharedPipelineLayout } from '../globals/pipelineLayout.js';
+import { elevationWGSL } from '../globals/elevationWGSL.js';
+import { positionLayout } from '../globals/positionLayout.js';
+import { normalLayout } from '../globals/normalLayout.js';
+import { colorLayout } from '../globals/colorLayout.js';
+import { uVLayout } from '../globals/uVLayout.js';
+import { instanceLayout } from '../globals/instanceLayout.js';
+import { createProgramLayout } from './createProgramLayout.js';
+import { createProgramUniforms } from './createProgramUniforms.js';
+
+
+import { materialShaders } from '../shaders/materialShaders.js';
+
+import { reportCompilation } from '../gpu/reportShaderCompilation.js';
+
+export function createProgram(layer, material = defaultMaterial) {
+  const shaders = materialShaders(
+    material,
+    !!layer.options.nightSparkle,
+    material.terrain ? elevationWGSL : ''
+  );
+  const vertex = rendererByLayer.get(layer).device.createShaderModule((
+    vertexShader.code = shaders.vertex,
+    vertexShader
+  ));
+  vertexShader.code = null;
+  const fragment = rendererByLayer.get(layer).device.createShaderModule((
+    fragmentShader.code = shaders.fragment,
+    fragmentShader
+  ));
+  fragmentShader.code = null;
+  reportCompilation(layer, /* alloc */ [
+    vertex.getCompilationInfo(),
+    fragment.getCompilationInfo()
+  ]);
+  const vertexBuffers = /* alloc */ [
+    positionLayout,
+    normalLayout,
+    material.vertexColors ? colorLayout : null,
+    shaders.textured ? uVLayout : null,
+  ];
+  if (material.instanced) vertexBuffers.push(instanceLayout);
+  const bindGroupLayout = createProgramLayout(rendererByLayer.get(layer).device, shaders);
+  const pipelineLayout = rendererByLayer.get(layer).device.createPipelineLayout((
+    sharedPipelineLayout.bindGroupLayouts[0] = bindGroupLayout,
+    sharedPipelineLayout.bindGroupLayouts[1] = rendererByLayer.get(layer).sunlight.layout,
+    sharedPipelineLayout
+  ));
+  sharedPipelineLayout.bindGroupLayouts[0] = null;
+  sharedPipelineLayout.bindGroupLayouts[1] = null;
+  const uniforms = createProgramUniforms(material);
+  return /* alloc */ {
+    device: rendererByLayer.get(layer).device,
+    vertex,
+    fragment,
+    bindings: shaders.bindings,
+    vertexBuffers,
+    bindGroupLayout,
+    pipelineLayout,
+    pipelineCache: /* alloc */ new Map(),
+    cullMode: material.doubleSided ? 'none' : 'back',
+    transparent: material.alphaMode === 'BLEND',
+    depthWrite: material.depthWrite ?? material.alphaMode !== 'BLEND',
+    depthTest: material.depthTest !== false,
+    terrain: material.terrain,
+    nightLight: Boolean(material.nightLight),
+    nightSparkle: !!layer.options.nightSparkle,
+    uniforms,
+    _layerMaterial: material,
+  };
+}

package/src/materials/createProgramLayout.js

@@ -0,0 +1,36 @@
+import { programLayout } from '../globals/programLayout.js';
+import { programEntries } from '../globals/programEntries.js';
+import { meshLayoutEntry } from '../globals/meshLayoutEntry.js';
+import { frameLayoutEntry } from '../globals/frameLayoutEntry.js';
+import { terrainLayoutEntry } from '../globals/terrainLayoutEntry.js';
+import { textureLayoutEntries } from '../globals/textureLayoutEntries.js';
+import { samplerLayoutEntries } from '../globals/samplerLayoutEntries.js';
+
+export function createProgramLayout(device, shaders) {
+  const bindGroupEntries = programEntries;
+  bindGroupEntries.length = 0;
+  meshLayoutEntry.visibility = GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT;
+  frameLayoutEntry.visibility = GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT;
+  bindGroupEntries.push(meshLayoutEntry, frameLayoutEntry);
+  if (shaders.hasTerrain) {
+    terrainLayoutEntry.visibility = GPUShaderStage.VERTEX;
+    bindGroupEntries.push(terrainLayoutEntry);
+  }
+  let texture, entry, index = 0;
+  for (texture of shaders.bindings) {
+    entry = textureLayoutEntries[index];
+    entry.binding = texture.texture;
+    entry.visibility = GPUShaderStage.FRAGMENT;
+    bindGroupEntries.push(entry);
+    entry = samplerLayoutEntries[index++];
+    entry.binding = texture.sampler;
+    entry.visibility = GPUShaderStage.FRAGMENT;
+    bindGroupEntries.push(entry);
+  }
+  const layout = device.createBindGroupLayout((
+    programLayout.entries = bindGroupEntries,
+    programLayout
+  ));
+  programLayout.entries = null;
+  return layout;
+}

package/src/materials/createProgramUniforms.js

@@ -0,0 +1,17 @@
+export function createProgramUniforms(material) {
+  const uniforms = /* alloc */ {
+    baseColor: /* alloc */ { value: material.color || /* alloc */ [1, 1, 1] },
+    metallic: /* alloc */ { value: material.metallic ?? 0 },
+    roughness: /* alloc */ { value: material.roughness ?? 0.85 },
+    opacity: /* alloc */ { value: material.opacity ?? 1 },
+    alphaCutoff: /* alloc */ { value: material.alphaCutoff ?? 0.5 },
+    occlusionStrength: /* alloc */ { value: material.occlusionStrength ?? 1 },
+    emissive: /* alloc */ { value: material.emissive || /* alloc */ [0, 0, 0] },
+  };
+  if (material.baseTexture) uniforms.baseTexture = /* alloc */ { value: material.baseTexture };
+  if (material.metalTexture) uniforms.metalTexture = /* alloc */ { value: material.metalTexture };
+  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 };
+  return uniforms;
+}

package/src/materials/modelMaterialFor.js

@@ -0,0 +1,21 @@
+import { textureFor } from '../textures/modelTextureFor.js';
+
+export function materialFor(context, material) {
+  const { backend: layer } = context;
+  const pbr = material.pbrMetallicRoughness;
+  return /* alloc */ {
+    color: pbr?.baseColorFactor ? pbr.baseColorFactor.slice(0, 3) : /* alloc */ [1, 1, 1],
+    opacity: pbr?.baseColorFactor?.[3] ?? 1,
+    metallic: pbr?.metallicFactor ?? 1,
+    roughness: pbr?.roughnessFactor ?? 1,
+    baseTexture: textureFor(context, pbr?.baseColorTexture, true),
+    metalTexture: textureFor(context, pbr?.metallicRoughnessTexture),
+    emissiveTexture: textureFor(context, material.emissiveTexture, true),
+    occlusionTexture: textureFor(context, material.occlusionTexture),
+    emissive: material.emissiveFactor || /* alloc */ [0, 0, 0],
+    occlusionStrength: material.occlusionTexture?.strength ?? 1,
+    alphaMode: layer.options.alphaMode || material.alphaMode || 'OPAQUE',
+    alphaCutoff: material.alphaCutoff ?? 0.5,
+    doubleSided: material.doubleSided,
+  };
+}