leaflet-city-mapper 0.0.3 → 0.0.5

package/src/scene/onAdd3DLayer.js

@@ -1,35 +1,45 @@
-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 { containerByLayer } from '../weakmaps/containerByLayer.js';
+import { geojsonByLayer } from '../weakmaps/geojsonByLayer.js';
+import { locationByLayer } from '../weakmaps/locationByLayer.js';
+import { modelUrlByLayer } from '../weakmaps/modelUrlByLayer.js';
+import { pointerEventsByLayer } from '../weakmaps/pointerEventsByLayer.js';
+import { rootByLayer } from '../weakmaps/rootByLayer.js';
+import { tooltipByLayer } from '../weakmaps/tooltipByLayer.js';
+import { urlByLayer } from '../weakmaps/urlByLayer.js';
+
+import { L } from '../globals/L.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) {
+export function onAdd3DLayer(layer, map) {
+  if (!locationByLayer.get(layer)) {
     const center = map.getCenter();
-    backend.location = new L.LatLng(center.lat, center.lng);
+    locationByLayer.set(layer, /* alloc */ 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';
+  if (urlByLayer.get(layer) || geojsonByLayer.get(layer) || layer.options.tooltip || modelUrlByLayer.get(layer)) {
+    containerByLayer.set(layer, map.getContainer());
+    if (!pointerEventsByLayer.get(layer)) {
+      pointerEventsByLayer.set(layer, /* alloc */ {
+        mousemove: pointerMove,
+        click: pointerClick,
+        mouseleave: pointerLeave,
+      });
+    }
+    if (layer.options.tooltip) {
+      tooltipByLayer.set(layer, L.DomUtil.create('div', 'leaflet-3d-tooltip', containerByLayer.get(layer)));
+      tooltipByLayer.get(layer).hidden = true;
+      tooltipByLayer.get(layer).setAttribute('role', 'tooltip');
+      tooltipByLayer.get(layer).setAttribute('aria-live', 'polite');
+      tooltipByLayer.get(layer).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);
+    L.DomEvent.on(containerByLayer.get(layer), pointerEventsByLayer.get(layer), layer);
   }
-  if (backend.root) {
-    attachLayer(backend, map);
+  if (rootByLayer.get(layer)) {
+    attachLayer(layer, map);
   }
 }

package/src/scene/onMapChange.js

@@ -1,16 +1,19 @@
-import { update } from './update.js';
+import { queuedByLayer } from '../weakmaps/queuedByLayer.js';
+
+import { pendingMapChanges } from '../globals/pendingMapChanges.js';
+
+
+import { update } from './scheduleSceneUpdate.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);
+  if (queuedByLayer.get(layer)) return;
+  queuedByLayer.set(layer, true);
+  pendingMapChanges.push(layer);
   queueMicrotask(renderPendingMapChange);
 }

package/src/scene/onRemove3DLayer.js

@@ -1,69 +1,81 @@
-import { cityMapper } from '../constants/cityMapper.js';
-import * as destroyTexture from '../rendering/destroyTexture.js';
-import * as endZoom from './endZoom.js';
+import { addedByLayer } from '../weakmaps/addedByLayer.js';
+import { areasByLayer } from '../weakmaps/areasByLayer.js';
+import { cameraByLayer } from '../weakmaps/cameraByLayer.js';
+import { containerByLayer } from '../weakmaps/containerByLayer.js';
+import { geojsonByLayer } from '../weakmaps/geojsonByLayer.js';
+import { layersByLayer } from '../weakmaps/layersByLayer.js';
+import { pointerEventsByLayer } from '../weakmaps/pointerEventsByLayer.js';
+import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
+import { rootByLayer } from '../weakmaps/rootByLayer.js';
+import { sceneByLayer } from '../weakmaps/sceneByLayer.js';
+import { sceneFields } from '../weakmaps/sceneFields.js';
+import { sharedByLayer } from '../weakmaps/sharedByLayer.js';
+import { tooltipByLayer } from '../weakmaps/tooltipByLayer.js';
+import { urlByLayer } from '../weakmaps/urlByLayer.js';
+
+import { L } from '../globals/L.js';
+import { sceneTransferFields } from '../globals/sceneTransferFields.js';
+import { renderers } from '../weakmaps/renderers.js';
+
+
+
+import * as endZoom from '../animations/endZoom.js';
 import * as onMapChange from './onMapChange.js';
 import * as onPointerLeave from '../picking/onPointerLeave.js';
-import * as onZoomAnim from './onZoomAnim.js';
+import * as onZoomAnim from '../animations/onZoomAnim.js';
 import { releaseArea } from '../sources/releaseArea.js';
-import { updateStatus } from '../sources/updateStatus.js';
+import { updateStatus } from '../sources/updateSourceStatus.js';
 import { setParent } from './setParent.js';
-import * as startZoom from './startZoom.js';
+import * as startZoom from '../animations/startZoom.js';
 import { cancelUpdate } from './cancelUpdate.js';
-import { update } from './update.js';
-import { releaseRenderer } from './releaseRenderer.js';
+import { update } from './scheduleSceneUpdate.js';
+import { releaseSharedScene } from './releaseSharedScene.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;
+export function onRemove3DLayer(layer, map) {
+  addedByLayer.set(layer, Promise.withResolvers());
+  if (containerByLayer.get(layer)) {
+    onPointerLeave.onPointerLeave(layer);
+    L.DomEvent.off(containerByLayer.get(layer), pointerEventsByLayer.get(layer), layer);
+    containerByLayer.set(layer, 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;
+  let area, key, sceneLayer, field;
+  for (area of areasByLayer.get(layer).values()) releaseArea(layer, area);
+  areasByLayer.get(layer).clear();
+  tooltipByLayer.get(layer)?.remove();
+  tooltipByLayer.set(layer, null);
+  if (urlByLayer.get(layer) || geojsonByLayer.get(layer)) updateStatus(layer, false);
+  const shared = sharedByLayer.get(layer);
   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) {
+  setParent(rootByLayer.get(layer), null);
+  layersByLayer.get(shared).delete(layer);
+  if (shared === layer) {
+    map.off('move zoom rotate pitch resize viewreset layeradd layerremove', onMapChange.onMapChange, layer);
+    map.off('zoomstart', startZoom.startZoom, layer);
+    map.off('zoomanim', onZoomAnim.onZoomAnim, layer);
+    map.off('zoomend', endZoom.endZoom, layer);
+    cancelUpdate(layer);
+    if (layersByLayer.get(layer).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];
+      const next = layersByLayer.get(layer).values().next().value;
+      for (key of sceneTransferFields) {
+        field = sceneFields[key];
+        field.set(next, field.get(layer));
+        field.delete(layer);
       }
-      for (layer of next._layers) layer._shared = next;
-      cityMapper.renderers.set(map, next);
+      for (sceneLayer of layersByLayer.get(next)) sharedByLayer.set(sceneLayer, next);
+      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];
+      releaseSharedScene(layer, map);
     }
   } else update(shared);
-  backend._shared = backend.renderer = backend.scene = backend.camera = null;
+  sharedByLayer.set(layer, null);
+  rendererByLayer.set(layer, null);
+  sceneByLayer.set(layer, null);
+  cameraByLayer.set(layer, null);
 }

package/src/scene/ready3D.js

@@ -1,25 +1,44 @@
-import { emptyNode } from './emptyNode.js';
+import { addedByLayer } from '../weakmaps/addedByLayer.js';
+import { geojsonByLayer } from '../weakmaps/geojsonByLayer.js';
+import { groupByLayer } from '../weakmaps/groupByLayer.js';
+import { headerByLayer } from '../weakmaps/headerByLayer.js';
+import { modelUrlByLayer } from '../weakmaps/modelUrlByLayer.js';
+import { raycasterByLayer } from '../weakmaps/raycasterByLayer.js';
+import { rootByLayer } from '../weakmaps/rootByLayer.js';
+import { sharedByLayer } from '../weakmaps/sharedByLayer.js';
+import { urlByLayer } from '../weakmaps/urlByLayer.js';
+
+
+
+import { emptyNode } from './createSceneNode.js';
 import { getHeader } from '../archives/getHeader.js';
-import { attach } from './attach.js';
+import { attach } from './attachSharedScene.js';
 import { loadModel } from '../models/loadModel.js';
-import { update } from './update.js';
+import { update } from './scheduleSceneUpdate.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 });
-  }
+export async function ready3D(layer) {
+  try {
+    rootByLayer.set(layer, emptyNode());
+    raycasterByLayer.set(layer, /* alloc */ {
+      origin: /* alloc */ [0, 0, 0],
+      direction: /* alloc */ [0, 0, 0],
+      inverse: /* alloc */ new DOMMatrix(),
+      meshes: /* alloc */ [],
+    });
+    if (urlByLayer.get(layer) || geojsonByLayer.get(layer)) {
+      groupByLayer.set(layer, rootByLayer.get(layer));
+      if (urlByLayer.get(layer)) headerByLayer.set(layer, await getHeader(layer));
+    }
+    if (layer._map) {
+      await attach(layer, layer._map);
+      addedByLayer.get(layer).resolve();
+    }
+    if (modelUrlByLayer.get(layer)) await loadModel(layer);
+    if (sharedByLayer.get(layer)) update(layer);
+    layer.fire('ready');
+    return layer;
+  } catch (error) {
+    layer.fire('error', /* alloc */ { error });
+    throw error;
+  }
 }

package/src/scene/releaseSharedScene.js

@@ -0,0 +1,31 @@
+import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
+import { roofRasterByLayer } from '../weakmaps/roofRasterByLayer.js';
+import { sceneFields } from '../weakmaps/sceneFields.js';
+import { zoomTransitionsByLayer } from '../weakmaps/zoomTransitionsByLayer.js';
+import { zoomViewByLayer } from '../weakmaps/zoomViewByLayer.js';
+import { cameraViewByMap } from '../weakmaps/cameraViewByMap.js';
+
+
+import { renderers } from '../weakmaps/renderers.js';
+import { sceneCleanupFields } from '../globals/sceneCleanupFields.js';
+import { destroyTexture } from '../textures/destroyTexture.js';
+import { releaseRenderer } from '../gpu/releaseRenderer.js';
+
+export function releaseSharedScene(layer, map) {
+  if (roofRasterByLayer.get(layer)) destroyTexture(layer, roofRasterByLayer.get(layer).texture.texture);
+  roofRasterByLayer.set(layer, null);
+  if (zoomTransitionsByLayer.get(layer)) {
+    let animation;
+    for (animation of zoomTransitionsByLayer.get(layer).keys()) animation.play();
+  }
+  zoomTransitionsByLayer.set(layer, null);
+  zoomViewByLayer.set(layer, null);
+  cameraViewByMap.delete(map);
+  map.getContainer().classList.remove('leaflet-camera-zoom');
+  const renderer = rendererByLayer.get(layer);
+  renderer.canvas.remove();
+  releaseRenderer(renderer, layer);
+  renderers.delete(map);
+  let key;
+  for (key of sceneCleanupFields) sceneFields[key].delete(layer);
+}

package/src/scene/removeLayerEvents.js

@@ -0,0 +1,12 @@
+import { eventMapByLayer } from '../weakmaps/eventMapByLayer.js';
+import { eventsByLayer } from '../weakmaps/eventsByLayer.js';
+
+
+
+
+export function removeLayerEvents() {
+
+  eventMapByLayer.get(this).off(eventsByLayer.get(this), this);
+  eventMapByLayer.set(this, null);
+  eventsByLayer.set(this, null);
+}

package/src/scene/removeSceneLayer.js

@@ -0,0 +1,16 @@
+import { kindByLayer } from '../weakmaps/kindByLayer.js';
+
+
+import { onRemove3DLayer } from './onRemove3DLayer.js';
+import { onPMTileRemove } from '../raster/onPMTileRemove.js';
+import { onTerrainRemove } from '../terrain/onTerrainRemove.js';
+import { removeTimeLayer } from '../sunlight/removeTimeLayer.js';
+
+export function removeSceneLayer(layer, map) {
+  switch (kindByLayer.get(layer)) {
+    case '3d': return onRemove3DLayer(layer, map);
+    case 'raster': return onPMTileRemove(layer, map);
+    case 'terrain': return onTerrainRemove(layer, map);
+    case 'time': return removeTimeLayer.call(layer, map);
+  }
+}

package/src/scene/renderPendingMapChange.js

@@ -1,11 +1,18 @@
-import { onMapChangeState } from '../constants/onMapChangeState.js';
-import { update } from './update.js';
+import { queuedByLayer } from '../weakmaps/queuedByLayer.js';
+import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
+import { sharedByLayer } from '../weakmaps/sharedByLayer.js';
+
+import { pendingMapChanges } from '../globals/pendingMapChanges.js';
+
+
+
+import { update } from './scheduleSceneUpdate.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;
+  const layer = pendingMapChanges.shift();
+  queuedByLayer.set(layer, false);
+  if (sharedByLayer.get(layer) !== layer || !rendererByLayer.get(layer)) return;
   if (layer._map._animatingZoom) update(layer);
   else render(layer);
 }

package/src/scene/renderPendingUpdates.js

@@ -1,16 +1,23 @@
-import { pendingUpdates } from '../constants/pendingUpdates.js';
+import { frameByLayer } from '../weakmaps/frameByLayer.js';
+import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
+import { sharedByLayer } from '../weakmaps/sharedByLayer.js';
+
+import { pendingUpdates } from '../globals/pendingUpdates.js';
+
+
+
 import { render } from '../rendering/render.js';
 
 export function renderPendingUpdates() {
-  const updates = [...pendingUpdates];
+  const updates = /* alloc */ [...pendingUpdates];
   pendingUpdates.clear();
   let failure;
-  let backend;
-  for (backend of updates) {
-    backend._frame = null;
-    if (backend._shared !== backend || !backend.renderer) continue;
+  let layer;
+  for (layer of updates) {
+    frameByLayer.set(layer, null);
+    if (sharedByLayer.get(layer) !== layer || !rendererByLayer.get(layer)) continue;
     try {
-      render(backend);
+      render(layer);
     } catch (error) {
       failure ||= error;
     }

package/src/scene/reportLayerError.js

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

package/src/scene/resolveNextInitialization.js

@@ -1,12 +1,13 @@
-import { indexState } from '../constants/indexState.js';
+import { pendingInitializations } from '../globals/pendingInitializations.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;
+  const task = pendingInitializations.shift();
+  task.initialize = initializerFor(task.type);
+  if (!task.initialize) {
+    task.error = /* alloc */ new Error(`Unknown layer type: ${task.type}`);
   }
   return task;
 }

package/src/scene/restoreObject.js

@@ -1,71 +1,37 @@
-import { createProgram } from '../rendering/createProgram.js';
+import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
+import { sharedByLayer } from '../weakmaps/sharedByLayer.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) {
+
+
+import { createProgram } from '../materials/createProgram.js';
+import { restoreGeometry } from '../geometry/restoreGeometry.js';
+import { restoreMaterialTextures } from '../textures/restoreMaterialTextures.js';
+
+export function restoreObject(object, layer) {
+  const shared = sharedByLayer.get(layer);
+  let texture;
+  if (object.geometry && object.geometry.device !== rendererByLayer.get(shared).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();
+    const device = rendererByLayer.get(shared).device;
+    restoreGeometry(geometry, device);
     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,
-      };
-    }
+    if (object.boundTextures) object.boundTextures.length = 0;
+    else object.boundTextures = /* alloc */ [];
+    restoreMaterialTextures(material, device);
     object.program.pipelineCache.clear();
-    object.program = createProgram(backend, material);
+    object.program = createProgram(layer, 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],
+  if (object.texture && object.texture.device !== rendererByLayer.get(shared).device) {
+    texture = object.texture;
+    texture.device = rendererByLayer.get(shared).device;
+    texture.texture = rendererByLayer.get(shared).device.createTexture(/* alloc */ {
+        size: /* alloc */ [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,
-    };
+      });
+    texture.sampler = rendererByLayer.get(shared).device.createSampler(texture.samplerOptions);
+    texture.uploaded = null;
   }
 }

package/src/scene/scheduleSceneUpdate.js

@@ -0,0 +1,25 @@
+import { frameByLayer } from '../weakmaps/frameByLayer.js';
+import { sharedByLayer } from '../weakmaps/sharedByLayer.js';
+
+import { pendingUpdates } from '../globals/pendingUpdates.js';
+
+
+import { render } from "../rendering/render.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(layer) {
+  const shared = sharedByLayer.get(layer);
+  if (!shared) return layer;
+  if (shared !== layer) {
+    update(shared);
+    return layer;
+  }
+  if (frameByLayer.get(layer) != null) return layer;
+  const first = pendingUpdates.values().next().value;
+  pendingUpdates.add(layer);
+  frameByLayer.set(layer, first ? frameByLayer.get(first) : requestAnimationFrame(renderPendingUpdates));
+  return layer;
+}

package/src/shaders/materialBaseShader.js

@@ -0,0 +1,17 @@
+export function materialBaseShader(material, hasBase, hasRoof) {
+  return /* wgsl */ `
+      var normal = normalize(input.normal) * select(-1.0, 1.0, frontFacing);
+      let texel = ${hasBase ? 'textureSample(baseTexture, baseTextureSampler, input.uv)' : 'vec4<f32>(1.0)'};
+      let alpha = u.material.z * texel.a;
+      ${material.alphaMode === 'MASK' ? 'if (alpha < u.material.w) { discard; }' : ''}
+      ${material.alphaMode === 'BLEND' ? 'if (alpha < 0.01) { discard; }' : ''}
+      var base = ${material.vertexColors ? 'toLinear(min(input.color, vec3<f32>(1.0)))' : 'input.color'} *
+        ${material.baseTexture?.srgb ? 'texel.rgb' : 'toLinear(texel.rgb)'};
+      ${hasRoof ? /* wgsl */ `
+        if (input.roof > 0.0 && all(input.roofUv >= vec2<f32>(0.0)) &&
+          all(input.roofUv <= vec2<f32>(1.0))) {
+          let roof = textureSampleLevel(roofTexture, roofTextureSampler, input.roofUv, 0.0);
+          base = mix(base, toLinear(roof.rgb), roof.a * input.roof);
+        }
+      ` : ''}`;
+}