@luma.gl/engine 9.1.0-alpha.9 → 9.1.0-beta.3

package/dist/index.cjs

@@ -28,6 +28,7 @@ __export(dist_exports, {
   AnimationLoop: () => AnimationLoop,
   AnimationLoopTemplate: () => AnimationLoopTemplate,
   AsyncTexture: () => AsyncTexture,
+  BackgroundTextureModel: () => BackgroundTextureModel,
   BufferTransform: () => BufferTransform,
   ClipSpace: () => ClipSpace,
   Computation: () => Computation,
@@ -39,23 +40,31 @@ __export(dist_exports, {
   GroupNode: () => GroupNode,
   IcoSphereGeometry: () => IcoSphereGeometry,
   KeyFrames: () => KeyFrames,
+  LegacyPickingManager: () => LegacyPickingManager,
   Model: () => Model,
   ModelNode: () => ModelNode,
+  PickingManager: () => PickingManager,
   PipelineFactory: () => PipelineFactory,
   PlaneGeometry: () => PlaneGeometry,
   ScenegraphNode: () => ScenegraphNode,
   ShaderFactory: () => ShaderFactory,
+  ShaderInputs: () => ShaderInputs,
+  ShaderPassRenderer: () => ShaderPassRenderer,
   SphereGeometry: () => SphereGeometry,
+  Swap: () => Swap,
+  SwapBuffers: () => SwapBuffers,
+  SwapFramebuffers: () => SwapFramebuffers,
   TextureTransform: () => TextureTransform,
   Timeline: () => Timeline,
   TruncatedConeGeometry: () => TruncatedConeGeometry,
-  _ShaderInputs: () => ShaderInputs,
-  cancelAnimationFrame: () => cancelAnimationFrame,
+  cancelAnimationFramePolyfill: () => cancelAnimationFramePolyfill,
+  colorPicking: () => picking2,
+  indexPicking: () => picking,
   loadImage: () => loadImage,
   loadImageBitmap: () => loadImageBitmap,
   makeAnimationLoop: () => makeAnimationLoop,
   makeRandomGenerator: () => makeRandomGenerator,
-  requestAnimationFrame: () => requestAnimationFrame,
+  requestAnimationFramePolyfill: () => requestAnimationFramePolyfill,
   setPathPrefix: () => setPathPrefix
 });
 module.exports = __toCommonJS(dist_exports);
@@ -235,10 +244,10 @@ var AnimationLoopTemplate = class {
 var import_core = require("@luma.gl/core");
 
 // dist/animation-loop/request-animation-frame.js
-function requestAnimationFrame(callback) {
+function requestAnimationFramePolyfill(callback) {
   return typeof window !== "undefined" && window.requestAnimationFrame ? window.requestAnimationFrame(callback) : setTimeout(callback, 1e3 / 60);
 }
-function cancelAnimationFrame(timerId) {
+function cancelAnimationFramePolyfill(timerId) {
   return typeof window !== "undefined" && window.cancelAnimationFrame ? window.cancelAnimationFrame(timerId) : clearTimeout(timerId);
 }
 
@@ -281,6 +290,7 @@ var AnimationLoop = class {
   _nextFramePromise = null;
   _resolveNextFrame = null;
   _cpuStartTime = 0;
+  _error = null;
   // _gpuTimeQuery: Query | null = null;
   /*
    * @param {HTMLCanvasElement} canvas - if provided, width and height will be passed to context
@@ -314,6 +324,22 @@ var AnimationLoop = class {
   delete() {
     this.destroy();
   }
+  setError(error) {
+    var _a, _b;
+    this.props.onError(error);
+    this._error = Error();
+    const canvas2 = (_b = (_a = this.device) == null ? void 0 : _a.canvasContext) == null ? void 0 : _b.canvas;
+    if (canvas2 instanceof HTMLCanvasElement) {
+      const errorDiv = document.createElement("h1");
+      errorDiv.innerHTML = error.message;
+      errorDiv.style.position = "absolute";
+      errorDiv.style.top = "20%";
+      errorDiv.style.left = "10px";
+      errorDiv.style.color = "black";
+      errorDiv.style.backgroundColor = "red";
+      document.body.appendChild(errorDiv);
+    }
+  }
   /** Flags this animation loop as needing redraw */
   setNeedsRedraw(reason) {
     this.needsRedraw = this.needsRedraw || reason;
@@ -363,7 +389,7 @@ var AnimationLoop = class {
   /** Stops a render loop if already running, finalizing */
   stop() {
     if (this._running) {
-      if (this.animationProps) {
+      if (this.animationProps && !this._error) {
         this.props.onFinalize(this.animationProps);
       }
       this._cancelAnimationFrame();
@@ -376,7 +402,7 @@ var AnimationLoop = class {
   /** Explicitly draw a frame */
   redraw() {
     var _a;
-    if ((_a = this.device) == null ? void 0 : _a.isLost) {
+    if (((_a = this.device) == null ? void 0 : _a.isLost) || this._error) {
       return this;
     }
     this._beginFrameTimers();
@@ -442,13 +468,13 @@ var AnimationLoop = class {
     if (!this._running) {
       return;
     }
-    this._animationFrameId = requestAnimationFrame(this._animationFrame.bind(this));
+    this._animationFrameId = requestAnimationFramePolyfill(this._animationFrame.bind(this));
   }
   _cancelAnimationFrame() {
     if (this._animationFrameId === null) {
       return;
     }
-    cancelAnimationFrame(this._animationFrameId);
+    cancelAnimationFramePolyfill(this._animationFrameId);
     this._animationFrameId = null;
   }
   _animationFrame() {
@@ -633,7 +659,7 @@ var AnimationLoop = class {
 var import_core2 = require("@luma.gl/core");
 function makeAnimationLoop(AnimationLoopTemplateCtor, props) {
   let renderLoop = null;
-  const device = (props == null ? void 0 : props.device) || import_core2.luma.createDevice({ id: "animation-loop" });
+  const device = (props == null ? void 0 : props.device) || import_core2.luma.createDevice({ id: "animation-loop", adapters: props == null ? void 0 : props.adapters, createCanvasContext: true });
   const animationLoop = new AnimationLoop({
     ...props,
     device,
@@ -652,9 +678,6 @@ function makeAnimationLoop(AnimationLoopTemplateCtor, props) {
 
 // dist/model/model.js
 var import_core7 = require("@luma.gl/core");
-var import_core8 = require("@luma.gl/core");
-var import_core9 = require("@luma.gl/core");
-var import_core10 = require("@luma.gl/core");
 var import_shadertools2 = require("@luma.gl/shadertools");
 
 // dist/geometry/gpu-geometry.js
@@ -765,7 +788,7 @@ function getAttributeBuffersFromGeometry(device, geometry) {
   return { attributes, bufferLayout, vertexCount };
 }
 
-// dist/lib/pipeline-factory.js
+// dist/factories/pipeline-factory.js
 var import_core4 = require("@luma.gl/core");
 var _PipelineFactory = class {
   /** Get the singleton default pipeline factory for the specified device */
@@ -774,59 +797,136 @@ var _PipelineFactory = class {
     return device._lumaData.defaultPipelineFactory;
   }
   device;
+  cachingEnabled;
   destroyPolicy;
+  debug;
   _hashCounter = 0;
   _hashes = {};
   _renderPipelineCache = {};
   _computePipelineCache = {};
+  get [Symbol.toStringTag]() {
+    return "PipelineFactory";
+  }
+  toString() {
+    return `PipelineFactory(${this.device.id})`;
+  }
   constructor(device) {
     this.device = device;
-    this.destroyPolicy = device.props._factoryDestroyPolicy;
+    this.cachingEnabled = device.props._cachePipelines;
+    this.destroyPolicy = device.props._cacheDestroyPolicy;
+    this.debug = device.props.debugFactories;
   }
-  /** Return a RenderPipeline matching props. Reuses a similar pipeline if already created. */
+  /** Return a RenderPipeline matching supplied props. Reuses an equivalent pipeline if already created. */
   createRenderPipeline(props) {
+    var _a;
+    if (!this.cachingEnabled) {
+      return this.device.createRenderPipeline(props);
+    }
     const allProps = { ...import_core4.RenderPipeline.defaultProps, ...props };
+    const cache = this._renderPipelineCache;
     const hash = this._hashRenderPipeline(allProps);
-    if (!this._renderPipelineCache[hash]) {
-      const pipeline = this.device.createRenderPipeline({
+    let pipeline = (_a = cache[hash]) == null ? void 0 : _a.pipeline;
+    if (!pipeline) {
+      pipeline = this.device.createRenderPipeline({
         ...allProps,
-        id: allProps.id ? `${allProps.id}-cached` : void 0
+        id: allProps.id ? `${allProps.id}-cached` : uid("unnamed-cached")
       });
       pipeline.hash = hash;
-      this._renderPipelineCache[hash] = { pipeline, useCount: 0 };
+      cache[hash] = { pipeline, useCount: 1 };
+      if (this.debug) {
+        import_core4.log.warn(`${this}: ${pipeline} created, count=${cache[hash].useCount}`)();
+      }
+    } else {
+      cache[hash].useCount++;
+      if (this.debug) {
+        import_core4.log.warn(`${this}: ${cache[hash].pipeline} reused, count=${cache[hash].useCount}, (id=${props.id})`)();
+      }
     }
-    this._renderPipelineCache[hash].useCount++;
-    return this._renderPipelineCache[hash].pipeline;
+    return pipeline;
   }
+  /** Return a ComputePipeline matching supplied props. Reuses an equivalent pipeline if already created. */
   createComputePipeline(props) {
+    var _a;
+    if (!this.cachingEnabled) {
+      return this.device.createComputePipeline(props);
+    }
     const allProps = { ...import_core4.ComputePipeline.defaultProps, ...props };
+    const cache = this._computePipelineCache;
     const hash = this._hashComputePipeline(allProps);
-    if (!this._computePipelineCache[hash]) {
-      const pipeline = this.device.createComputePipeline({
+    let pipeline = (_a = cache[hash]) == null ? void 0 : _a.pipeline;
+    if (!pipeline) {
+      pipeline = this.device.createComputePipeline({
         ...allProps,
         id: allProps.id ? `${allProps.id}-cached` : void 0
       });
       pipeline.hash = hash;
-      this._computePipelineCache[hash] = { pipeline, useCount: 0 };
+      cache[hash] = { pipeline, useCount: 1 };
+      if (this.debug) {
+        import_core4.log.warn(`${this}: ${pipeline} created, count=${cache[hash].useCount}`)();
+      }
+    } else {
+      cache[hash].useCount++;
+      if (this.debug) {
+        import_core4.log.warn(`${this}: ${cache[hash].pipeline} reused, count=${cache[hash].useCount}, (id=${props.id})`)();
+      }
     }
-    this._computePipelineCache[hash].useCount++;
-    return this._computePipelineCache[hash].pipeline;
+    return pipeline;
   }
   release(pipeline) {
+    if (!this.cachingEnabled) {
+      pipeline.destroy();
+      return;
+    }
+    const cache = this._getCache(pipeline);
     const hash = pipeline.hash;
-    const cache = pipeline instanceof import_core4.ComputePipeline ? this._computePipelineCache : this._renderPipelineCache;
     cache[hash].useCount--;
     if (cache[hash].useCount === 0) {
-      if (this.destroyPolicy === "unused") {
-        cache[hash].pipeline.destroy();
-        delete cache[hash];
+      this._destroyPipeline(pipeline);
+      if (this.debug) {
+        import_core4.log.warn(`${this}: ${pipeline} released and destroyed`)();
       }
+    } else if (cache[hash].useCount < 0) {
+      import_core4.log.error(`${this}: ${pipeline} released, useCount < 0, resetting`)();
+      cache[hash].useCount = 0;
+    } else if (this.debug) {
+      import_core4.log.warn(`${this}: ${pipeline} released, count=${cache[hash].useCount}`)();
     }
   }
   // PRIVATE
+  /** Destroy a cached pipeline, removing it from the cache (depending on destroy policy) */
+  _destroyPipeline(pipeline) {
+    const cache = this._getCache(pipeline);
+    switch (this.destroyPolicy) {
+      case "never":
+        return false;
+      case "unused":
+        delete cache[pipeline.hash];
+        pipeline.destroy();
+        return true;
+    }
+  }
+  /** Get the appropriate cache for the type of pipeline */
+  _getCache(pipeline) {
+    let cache;
+    if (pipeline instanceof import_core4.ComputePipeline) {
+      cache = this._computePipelineCache;
+    }
+    if (pipeline instanceof import_core4.RenderPipeline) {
+      cache = this._renderPipelineCache;
+    }
+    if (!cache) {
+      throw new Error(`${this}`);
+    }
+    if (!cache[pipeline.hash]) {
+      throw new Error(`${this}: ${pipeline} matched incorrect entry`);
+    }
+    return cache;
+  }
+  /** Calculate a hash based on all the inputs for a compute pipeline */
   _hashComputePipeline(props) {
+    const { type } = this.device;
     const shaderHash = this._getHash(props.shader.source);
-    return `${shaderHash}`;
+    return `${type}/C/${shaderHash}`;
   }
   /** Calculate a hash based on all the inputs for a render pipeline */
   _hashRenderPipeline(props) {
@@ -834,12 +934,14 @@ var _PipelineFactory = class {
     const fsHash = props.fs ? this._getHash(props.fs.source) : 0;
     const varyingHash = "-";
     const bufferLayoutHash = this._getHash(JSON.stringify(props.bufferLayout));
-    switch (this.device.type) {
+    const { type } = this.device;
+    switch (type) {
       case "webgl":
-        return `${vsHash}/${fsHash}V${varyingHash}BL${bufferLayoutHash}`;
+        return `${type}/R/${vsHash}/${fsHash}V${varyingHash}BL${bufferLayoutHash}`;
+      case "webgpu":
       default:
         const parameterHash = this._getHash(JSON.stringify(props.parameters));
-        return `${vsHash}/${fsHash}V${varyingHash}T${props.topology}P${parameterHash}BL${bufferLayoutHash}`;
+        return `${type}/R/${vsHash}/${fsHash}V${varyingHash}T${props.topology}P${parameterHash}BL${bufferLayoutHash}`;
     }
   }
   _getHash(key) {
@@ -852,7 +954,7 @@ var _PipelineFactory = class {
 var PipelineFactory = _PipelineFactory;
 __publicField(PipelineFactory, "defaultProps", { ...import_core4.RenderPipeline.defaultProps });
 
-// dist/lib/shader-factory.js
+// dist/factories/shader-factory.js
 var import_core5 = require("@luma.gl/core");
 var _ShaderFactory = class {
   /** Returns the default ShaderFactory for the given {@link Device}, creating one if necessary. */
@@ -861,15 +963,28 @@ var _ShaderFactory = class {
     return device._lumaData.defaultShaderFactory;
   }
   device;
+  cachingEnabled;
   destroyPolicy;
+  debug;
   _cache = {};
+  get [Symbol.toStringTag]() {
+    return "ShaderFactory";
+  }
+  toString() {
+    return `${this[Symbol.toStringTag]}(${this.device.id})`;
+  }
   /** @internal */
   constructor(device) {
     this.device = device;
-    this.destroyPolicy = device.props._factoryDestroyPolicy;
+    this.cachingEnabled = device.props._cacheShaders;
+    this.destroyPolicy = device.props._cacheDestroyPolicy;
+    this.debug = true;
   }
   /** Requests a {@link Shader} from the cache, creating a new Shader only if necessary. */
   createShader(props) {
+    if (!this.cachingEnabled) {
+      return this.device.createShader(props);
+    }
     const key = this._hashShader(props);
     let cacheEntry = this._cache[key];
     if (!cacheEntry) {
@@ -877,13 +992,24 @@ var _ShaderFactory = class {
         ...props,
         id: props.id ? `${props.id}-cached` : void 0
       });
-      this._cache[key] = cacheEntry = { shader, useCount: 0 };
+      this._cache[key] = cacheEntry = { shader, useCount: 1 };
+      if (this.debug) {
+        import_core5.log.warn(`${this}: Created new shader ${shader.id}`)();
+      }
+    } else {
+      cacheEntry.useCount++;
+      if (this.debug) {
+        import_core5.log.warn(`${this}: Reusing shader ${cacheEntry.shader.id} count=${cacheEntry.useCount}`)();
+      }
     }
-    cacheEntry.useCount++;
     return cacheEntry.shader;
   }
   /** Releases a previously-requested {@link Shader}, destroying it if no users remain. */
   release(shader) {
+    if (!this.cachingEnabled) {
+      shader.destroy();
+      return;
+    }
     const key = this._hashShader(shader);
     const cacheEntry = this._cache[key];
     if (cacheEntry) {
@@ -892,7 +1018,14 @@ var _ShaderFactory = class {
         if (this.destroyPolicy === "unused") {
           delete this._cache[key];
           cacheEntry.shader.destroy();
+          if (this.debug) {
+            import_core5.log.warn(`${this}: Releasing shader ${shader.id}, destroyed`)();
+          }
         }
+      } else if (cacheEntry.useCount < 0) {
+        throw new Error(`ShaderFactory: Shader ${shader.id} released too many times`);
+      } else if (this.debug) {
+        import_core5.log.warn(`${this}: Releasing shader ${shader.id} count=${cacheEntry.useCount}`)();
       }
     }
   }
@@ -920,7 +1053,7 @@ function getDebugTableForShaderLayout(layout, name) {
   }
   for (const varyingDeclaration of layout.varyings || []) {
     const glslDeclaration = `${varyingDeclaration.location} ${varyingDeclaration.name}`;
-    table[`out ${glslDeclaration}`] = { [header]: JSON.stringify(varyingDeclaration.accessor) };
+    table[`out ${glslDeclaration}`] = { [header]: JSON.stringify(varyingDeclaration) };
   }
   return table;
 }
@@ -937,7 +1070,7 @@ function debugFramebuffer(fbo, { id, minimap, opaque, top = "0", left = "0", rgb
     canvas.style.position = "absolute";
     canvas.style.top = top;
     canvas.style.left = left;
-    canvas.style.border = "blue 1px solid";
+    canvas.style.border = "blue 5px solid";
     canvas.style.transform = "scaleY(-1)";
     document.body.appendChild(canvas);
     ctx = canvas.getContext("2d");
@@ -1003,10 +1136,14 @@ function deepEqual(a, b, depth) {
   return false;
 }
 
+// dist/shader-inputs.js
+var import_core6 = require("@luma.gl/core");
+var import_shadertools = require("@luma.gl/shadertools");
+
 // dist/model/split-uniforms-and-bindings.js
 var import_types = require("@math.gl/types");
 function isUniformValue(value) {
-  return (0, import_types.isNumericArray)(value) !== null || typeof value === "number" || typeof value === "boolean";
+  return (0, import_types.isNumericArray)(value) || typeof value === "number" || typeof value === "boolean";
 }
 function splitUniformsAndBindings(uniforms) {
   const result = { bindings: {}, uniforms: {} };
@@ -1022,8 +1159,6 @@ function splitUniformsAndBindings(uniforms) {
 }
 
 // dist/shader-inputs.js
-var import_core6 = require("@luma.gl/core");
-var import_shadertools = require("@luma.gl/shadertools");
 var ShaderInputs = class {
   /**
    * The map of modules
@@ -1052,9 +1187,10 @@ var ShaderInputs = class {
     this.moduleUniforms = {};
     this.moduleBindings = {};
     for (const [name, module2] of Object.entries(modules)) {
-      const moduleName = name;
-      this.moduleUniforms[moduleName] = module2.defaultUniforms || {};
-      this.moduleBindings[moduleName] = {};
+      this._addModule(module2);
+      if (module2.name && name !== module2.name) {
+        import_core6.log.warn(`Module name: ${name} vs ${module2.name}`)();
+      }
     }
   }
   /** Destroy */
@@ -1075,17 +1211,12 @@ var ShaderInputs = class {
       }
       const oldUniforms = this.moduleUniforms[moduleName];
       const oldBindings = this.moduleBindings[moduleName];
-      let uniformsAndBindings = (_a = module2.getUniforms) == null ? void 0 : _a.call(module2, moduleProps, this.moduleUniforms[moduleName]);
-      uniformsAndBindings ||= { ...this.moduleUniforms[moduleName], ...moduleProps };
+      const uniformsAndBindings = ((_a = module2.getUniforms) == null ? void 0 : _a.call(module2, moduleProps, oldUniforms)) || moduleProps;
       const { uniforms, bindings } = splitUniformsAndBindings(uniformsAndBindings);
       this.moduleUniforms[moduleName] = { ...oldUniforms, ...uniforms };
       this.moduleBindings[moduleName] = { ...oldBindings, ...bindings };
     }
   }
-  /** Merges all bindings for the shader (from the various modules) */
-  // getUniformBlocks(): Record<string, Texture | Sampler> {
-  //   return this.moduleUniforms;
-  // }
   /**
    * Return the map of modules
    * @todo should should this include the resolved dependencies?
@@ -1098,13 +1229,15 @@ var ShaderInputs = class {
     return this.moduleUniforms;
   }
   /** Merges all bindings for the shader (from the various modules) */
-  getBindings() {
+  getBindingValues() {
     const bindings = {};
     for (const moduleBindings of Object.values(this.moduleBindings)) {
       Object.assign(bindings, moduleBindings);
     }
     return bindings;
   }
+  // INTERNAL
+  /** Return a debug table that can be used for console.table() or log.table() */
   getDebugTable() {
     var _a;
     const table = {};
@@ -1118,6 +1251,11 @@ var ShaderInputs = class {
     }
     return table;
   }
+  _addModule(module2) {
+    const moduleName = module2.name;
+    this.moduleUniforms[moduleName] = module2.defaultUniforms || {};
+    this.moduleBindings[moduleName] = {};
+  }
 };
 
 // dist/application-utils/load-file.js
@@ -1130,7 +1268,7 @@ async function loadImageBitmap(url, opts) {
   image.crossOrigin = (opts == null ? void 0 : opts.crossOrigin) || "anonymous";
   image.src = url.startsWith("http") ? url : pathPrefix + url;
   await image.decode();
-  return await createImageBitmap(image);
+  return opts ? await createImageBitmap(image, opts) : await createImageBitmap(image);
 }
 async function loadImage(url, opts) {
   return await new Promise((resolve, reject) => {
@@ -1149,6 +1287,7 @@ async function loadImage(url, opts) {
 // dist/async-texture/async-texture.js
 var AsyncTexture = class {
   device;
+  id;
   // TODO - should we type these as possibly `null`? It will make usage harder?
   // @ts-expect-error
   texture;
@@ -1163,8 +1302,15 @@ var AsyncTexture = class {
   };
   rejectReady = () => {
   };
+  get [Symbol.toStringTag]() {
+    return "AsyncTexture";
+  }
+  toString() {
+    return `AsyncTexture:"${this.id}"(${this.isReady ? "ready" : "loading"})`;
+  }
   constructor(device, props) {
     this.device = device;
+    this.id = props.id || uid("async-texture");
     if (typeof (props == null ? void 0 : props.data) === "string" && props.dimension === "2d") {
       props = { ...props, data: loadImageBitmap(props.data) };
     }
@@ -1198,6 +1344,26 @@ var AsyncTexture = class {
     }
     this.destroyed = true;
   }
+  /**
+   * Textures are immutable and cannot be resized after creation,
+   * but we can create a similar texture with the same parameters but a new size.
+   * @note Does not copy contents of the texture
+   * @todo Abort pending promise and create a texture with the new size?
+   */
+  resize(size) {
+    if (!this.isReady) {
+      throw new Error("Cannot resize texture before it is ready");
+    }
+    if (size.width === this.texture.width && size.height === this.texture.height) {
+      return false;
+    }
+    if (this.texture) {
+      const texture = this.texture;
+      this.texture = texture.clone(size);
+      texture.destroy();
+    }
+    return true;
+  }
 };
 async function awaitAllPromises(x) {
   x = await x;
@@ -1280,6 +1446,12 @@ var _Model = class {
   _destroyed = false;
   /** "Time" of last draw. Monotonically increasing timestamp */
   _lastDrawTimestamp = -1;
+  get [Symbol.toStringTag]() {
+    return "Model";
+  }
+  toString() {
+    return `Model(${this.id})`;
+  }
   constructor(device, props) {
     var _a, _b, _c;
     this.props = { ..._Model.defaultProps, ...props };
@@ -1297,22 +1469,22 @@ var _Model = class {
     const isWebGPU = this.device.type === "webgpu";
     if (isWebGPU && this.props.source) {
       this.props.shaderLayout ||= (0, import_shadertools2.getShaderLayoutFromWGSL)(this.props.source);
-      const { source, getUniforms } = this.props.shaderAssembler.assembleWGSLShader({
+      const { source: source3, getUniforms: getUniforms2 } = this.props.shaderAssembler.assembleWGSLShader({
         platformInfo,
         ...this.props,
         modules
       });
-      this.source = source;
-      this._getModuleUniforms = getUniforms;
+      this.source = source3;
+      this._getModuleUniforms = getUniforms2;
     } else {
-      const { vs, fs, getUniforms } = this.props.shaderAssembler.assembleGLSLShaderPair({
+      const { vs: vs3, fs: fs3, getUniforms: getUniforms2 } = this.props.shaderAssembler.assembleGLSLShaderPair({
         platformInfo,
         ...this.props,
         modules
       });
-      this.vs = vs;
-      this.fs = fs;
-      this._getModuleUniforms = getUniforms;
+      this.vs = vs3;
+      this.fs = fs3;
+      this._getModuleUniforms = getUniforms2;
     }
     this.vertexCount = this.props.vertexCount;
     this.instanceCount = this.props.instanceCount;
@@ -1326,7 +1498,8 @@ var _Model = class {
     this.shaderFactory = props.shaderFactory || ShaderFactory.getDefaultShaderFactory(this.device);
     this.pipeline = this._updatePipeline();
     this.vertexArray = device.createVertexArray({
-      renderPipeline: this.pipeline
+      shaderLayout: this.pipeline.shaderLayout,
+      bufferLayout: this.pipeline.bufferLayout
     });
     if (this._gpuGeometry) {
       this._setGeometryAttributes(this._gpuGeometry);
@@ -1353,10 +1526,10 @@ var _Model = class {
       this.setBindings(props.bindings);
     }
     if (props.uniforms) {
-      this.setUniforms(props.uniforms);
+      this.setUniformsWebGL(props.uniforms);
     }
     if (props.moduleSettings) {
-      this.updateModuleSettings(props.moduleSettings);
+      this.updateModuleSettingsWebGL(props.moduleSettings);
     }
     if (props.transformFeedback) {
       this.transformFeedback = props.transformFeedback;
@@ -1365,16 +1538,16 @@ var _Model = class {
   }
   destroy() {
     var _a;
-    if (this._destroyed)
-      return;
-    this.pipelineFactory.release(this.pipeline);
-    this.shaderFactory.release(this.pipeline.vs);
-    if (this.pipeline.fs) {
-      this.shaderFactory.release(this.pipeline.fs);
+    if (!this._destroyed) {
+      this.pipelineFactory.release(this.pipeline);
+      this.shaderFactory.release(this.pipeline.vs);
+      if (this.pipeline.fs) {
+        this.shaderFactory.release(this.pipeline.fs);
+      }
+      this._uniformStore.destroy();
+      (_a = this._gpuGeometry) == null ? void 0 : _a.destroy();
+      this._destroyed = true;
     }
-    this._uniformStore.destroy();
-    (_a = this._gpuGeometry) == null ? void 0 : _a.destroy();
-    this._destroyed = true;
   }
   // Draw call
   /** Query redraw status. Clears the status. */
@@ -1395,9 +1568,20 @@ var _Model = class {
     this.pipeline = this._updatePipeline();
   }
   draw(renderPass) {
-    this.predraw();
+    const loadingBinding = this._areBindingsLoading();
+    if (loadingBinding) {
+      import_core7.log.info(LOG_DRAW_PRIORITY, `>>> DRAWING ABORTED ${this.id}: ${loadingBinding} not loaded`)();
+      return false;
+    }
+    try {
+      renderPass.pushDebugGroup(`${this}.predraw(${renderPass})`);
+      this.predraw();
+    } finally {
+      renderPass.popDebugGroup();
+    }
     let drawSuccess;
     try {
+      renderPass.pushDebugGroup(`${this}.draw(${renderPass})`);
       this._logDrawCallStart();
       this.pipeline = this._updatePipeline();
       const syncBindings = this._getBindings();
@@ -1424,6 +1608,7 @@ var _Model = class {
         topology: this.topology
       });
     } finally {
+      renderPass.popDebugGroup();
       this._logDrawCallEnd();
     }
     this._logFramebuffer(renderPass);
@@ -1447,7 +1632,8 @@ var _Model = class {
     const gpuGeometry = geometry && makeGPUGeometry(this.device, geometry);
     if (gpuGeometry) {
       this.setTopology(gpuGeometry.topology || "triangle-list");
-      this.bufferLayout = mergeBufferLayouts(gpuGeometry.bufferLayout, this.bufferLayout);
+      const bufferLayoutHelper = new import_core7._BufferLayoutHelper(this.bufferLayout);
+      this.bufferLayout = bufferLayoutHelper.mergeBufferLayouts(gpuGeometry.bufferLayout, this.bufferLayout);
       if (this.vertexArray) {
         this._setGeometryAttributes(gpuGeometry);
       }
@@ -1469,11 +1655,13 @@ var _Model = class {
    * @note Triggers a pipeline rebuild / pipeline cache fetch
    */
   setBufferLayout(bufferLayout) {
-    this.bufferLayout = this._gpuGeometry ? mergeBufferLayouts(bufferLayout, this._gpuGeometry.bufferLayout) : bufferLayout;
+    const bufferLayoutHelper = new import_core7._BufferLayoutHelper(this.bufferLayout);
+    this.bufferLayout = this._gpuGeometry ? bufferLayoutHelper.mergeBufferLayouts(bufferLayout, this._gpuGeometry.bufferLayout) : bufferLayout;
     this._setPipelineNeedsUpdate("bufferLayout");
     this.pipeline = this._updatePipeline();
     this.vertexArray = this.device.createVertexArray({
-      renderPipeline: this.pipeline
+      shaderLayout: this.pipeline.shaderLayout,
+      bufferLayout: this.pipeline.bufferLayout
     });
     if (this._gpuGeometry) {
       this._setGeometryAttributes(this._gpuGeometry);
@@ -1513,17 +1701,19 @@ var _Model = class {
   /** Set the shader inputs */
   setShaderInputs(shaderInputs) {
     this.shaderInputs = shaderInputs;
-    this._uniformStore = new import_core8.UniformStore(this.shaderInputs.modules);
-    for (const moduleName of Object.keys(this.shaderInputs.modules)) {
-      const uniformBuffer = this._uniformStore.getManagedUniformBuffer(this.device, moduleName);
-      this.bindings[`${moduleName}Uniforms`] = uniformBuffer;
+    this._uniformStore = new import_core7.UniformStore(this.shaderInputs.modules);
+    for (const [moduleName, module2] of Object.entries(this.shaderInputs.modules)) {
+      if (shaderModuleHasUniforms(module2)) {
+        const uniformBuffer = this._uniformStore.getManagedUniformBuffer(this.device, moduleName);
+        this.bindings[`${moduleName}Uniforms`] = uniformBuffer;
+      }
     }
     this.setNeedsRedraw("shaderInputs");
   }
   /** Update uniform buffers from the model's shader inputs */
   updateShaderInputs() {
     this._uniformStore.setUniforms(this.shaderInputs.getUniformValues());
-    this.setBindings(this.shaderInputs.getBindings());
+    this.setBindings(this.shaderInputs.getBindingValues());
     this.setNeedsRedraw("shaderInputs");
   }
   /**
@@ -1553,16 +1743,20 @@ var _Model = class {
    * @note Overrides any attributes previously set with the same name
    */
   setAttributes(buffers, options) {
+    const disableWarnings = (options == null ? void 0 : options.disableWarnings) ?? this.props.disableWarnings;
     if (buffers.indices) {
-      import_core9.log.warn(`Model:${this.id} setAttributes() - indexBuffer should be set using setIndexBuffer()`)();
+      import_core7.log.warn(`Model:${this.id} setAttributes() - indexBuffer should be set using setIndexBuffer()`)();
     }
+    const bufferLayoutHelper = new import_core7._BufferLayoutHelper(this.bufferLayout);
     for (const [bufferName, buffer] of Object.entries(buffers)) {
-      const bufferLayout = this.bufferLayout.find((layout) => getAttributeNames(layout).includes(bufferName));
+      const bufferLayout = bufferLayoutHelper.getBufferLayout(bufferName);
       if (!bufferLayout) {
-        import_core9.log.warn(`Model(${this.id}): Missing layout for buffer "${bufferName}".`)();
+        if (!disableWarnings) {
+          import_core7.log.warn(`Model(${this.id}): Missing layout for buffer "${bufferName}".`)();
+        }
         continue;
       }
-      const attributeNames = getAttributeNames(bufferLayout);
+      const attributeNames = bufferLayoutHelper.getAttributeNamesForBuffer(bufferLayout);
       let set = false;
       for (const attributeName of attributeNames) {
         const attributeInfo = this._attributeInfos[attributeName];
@@ -1571,8 +1765,8 @@ var _Model = class {
           set = true;
         }
       }
-      if (!set && !((options == null ? void 0 : options.disableWarnings) ?? this.props.disableWarnings)) {
-        import_core9.log.warn(`Model(${this.id}): Ignoring buffer "${buffer.id}" for unknown attribute "${bufferName}"`)();
+      if (!set && !disableWarnings) {
+        import_core7.log.warn(`Model(${this.id}): Ignoring buffer "${buffer.id}" for unknown attribute "${bufferName}"`)();
       }
     }
     this.setNeedsRedraw("attributes");
@@ -1591,7 +1785,7 @@ var _Model = class {
       if (attributeInfo) {
         this.vertexArray.setConstantWebGL(attributeInfo.location, value);
       } else if (!((options == null ? void 0 : options.disableWarnings) ?? this.props.disableWarnings)) {
-        import_core9.log.warn(`Model "${this.id}: Ignoring constant supplied for unknown attribute "${attributeName}"`)();
+        import_core7.log.warn(`Model "${this.id}: Ignoring constant supplied for unknown attribute "${attributeName}"`)();
       }
     }
     this.setNeedsRedraw("constants");
@@ -1602,7 +1796,7 @@ var _Model = class {
    * @deprecated WebGL only, use uniform buffers for portability
    * @param uniforms
    */
-  setUniforms(uniforms) {
+  setUniformsWebGL(uniforms) {
     if (!isObjectEmpty(uniforms)) {
       this.pipeline.setUniformsWebGL(uniforms);
       Object.assign(this.uniforms, uniforms);
@@ -1612,25 +1806,35 @@ var _Model = class {
   /**
    * @deprecated Updates shader module settings (which results in uniforms being set)
    */
-  updateModuleSettings(props) {
+  updateModuleSettingsWebGL(props) {
     const { bindings, uniforms } = splitUniformsAndBindings(this._getModuleUniforms(props));
     Object.assign(this.bindings, bindings);
     Object.assign(this.uniforms, uniforms);
     this.setNeedsRedraw("moduleSettings");
   }
   // Internal methods
-  /** Get texture / texture view from any async textures */
+  /** Check that bindings are loaded. Returns id of first binding that is still loading. */
+  _areBindingsLoading() {
+    for (const binding of Object.values(this.bindings)) {
+      if (binding instanceof AsyncTexture && !binding.isReady) {
+        return binding.id;
+      }
+    }
+    return false;
+  }
+  /** Extracts texture view from loaded async textures. Returns null if any textures have not yet been loaded. */
   _getBindings() {
-    return Object.entries(this.bindings).reduce((acc, [name, binding]) => {
+    const validBindings = {};
+    for (const [name, binding] of Object.entries(this.bindings)) {
       if (binding instanceof AsyncTexture) {
         if (binding.isReady) {
-          acc[name] = binding.texture;
+          validBindings[name] = binding.texture;
         }
       } else {
-        acc[name] = binding;
+        validBindings[name] = binding;
       }
-      return acc;
-    }, {});
+    }
+    return validBindings;
   }
   /** Get the timestamp of the latest updated bound GPU memory resource (buffer/texture). */
   _getBindingsUpdateTimestamp() {
@@ -1680,26 +1884,26 @@ var _Model = class {
       let prevShaderVs = null;
       let prevShaderFs = null;
       if (this.pipeline) {
-        import_core9.log.log(1, `Model ${this.id}: Recreating pipeline because "${this._pipelineNeedsUpdate}".`)();
+        import_core7.log.log(1, `Model ${this.id}: Recreating pipeline because "${this._pipelineNeedsUpdate}".`)();
         prevShaderVs = this.pipeline.vs;
         prevShaderFs = this.pipeline.fs;
       }
       this._pipelineNeedsUpdate = false;
-      const vs = this.shaderFactory.createShader({
+      const vs3 = this.shaderFactory.createShader({
         id: `${this.id}-vertex`,
         stage: "vertex",
         source: this.source || this.vs,
-        debug: this.props.debugShaders
+        debugShaders: this.props.debugShaders
       });
-      let fs = null;
+      let fs3 = null;
       if (this.source) {
-        fs = vs;
+        fs3 = vs3;
       } else if (this.fs) {
-        fs = this.shaderFactory.createShader({
+        fs3 = this.shaderFactory.createShader({
           id: `${this.id}-fragment`,
           stage: "fragment",
           source: this.source || this.fs,
-          debug: this.props.debugShaders
+          debugShaders: this.props.debugShaders
         });
       }
       this.pipeline = this.pipelineFactory.createRenderPipeline({
@@ -1710,10 +1914,10 @@ var _Model = class {
         // TODO - why set bindings here when we reset them every frame?
         // Should we expose a BindGroup abstraction?
         bindings: this._getBindings(),
-        vs,
-        fs
+        vs: vs3,
+        fs: fs3
       });
-      this._attributeInfos = (0, import_core10.getAttributeInfosFromLayouts)(this.pipeline.shaderLayout, this.bufferLayout);
+      this._attributeInfos = (0, import_core7.getAttributeInfosFromLayouts)(this.pipeline.shaderLayout, this.bufferLayout);
       if (prevShaderVs)
         this.shaderFactory.release(prevShaderVs);
       if (prevShaderFs)
@@ -1725,35 +1929,35 @@ var _Model = class {
   _lastLogTime = 0;
   _logOpen = false;
   _logDrawCallStart() {
-    const logDrawTimeout = import_core9.log.level > 3 ? 0 : LOG_DRAW_TIMEOUT;
-    if (import_core9.log.level < 2 || Date.now() - this._lastLogTime < logDrawTimeout) {
+    const logDrawTimeout = import_core7.log.level > 3 ? 0 : LOG_DRAW_TIMEOUT;
+    if (import_core7.log.level < 2 || Date.now() - this._lastLogTime < logDrawTimeout) {
       return;
     }
     this._lastLogTime = Date.now();
     this._logOpen = true;
-    import_core9.log.group(LOG_DRAW_PRIORITY, `>>> DRAWING MODEL ${this.id}`, { collapsed: import_core9.log.level <= 2 })();
+    import_core7.log.group(LOG_DRAW_PRIORITY, `>>> DRAWING MODEL ${this.id}`, { collapsed: import_core7.log.level <= 2 })();
   }
   _logDrawCallEnd() {
     if (this._logOpen) {
       const shaderLayoutTable = getDebugTableForShaderLayout(this.pipeline.shaderLayout, this.id);
-      import_core9.log.table(LOG_DRAW_PRIORITY, shaderLayoutTable)();
+      import_core7.log.table(LOG_DRAW_PRIORITY, shaderLayoutTable)();
       const uniformTable = this.shaderInputs.getDebugTable();
       for (const [name, value] of Object.entries(this.uniforms)) {
         uniformTable[name] = { value };
       }
-      import_core9.log.table(LOG_DRAW_PRIORITY, uniformTable)();
+      import_core7.log.table(LOG_DRAW_PRIORITY, uniformTable)();
       const attributeTable = this._getAttributeDebugTable();
-      import_core9.log.table(LOG_DRAW_PRIORITY, this._attributeInfos)();
-      import_core9.log.table(LOG_DRAW_PRIORITY, attributeTable)();
-      import_core9.log.groupEnd(LOG_DRAW_PRIORITY)();
+      import_core7.log.table(LOG_DRAW_PRIORITY, this._attributeInfos)();
+      import_core7.log.table(LOG_DRAW_PRIORITY, attributeTable)();
+      import_core7.log.groupEnd(LOG_DRAW_PRIORITY)();
       this._logOpen = false;
     }
   }
   _drawCount = 0;
   _logFramebuffer(renderPass) {
-    const debugFramebuffers = import_core9.log.get("framebuffer");
+    const debugFramebuffers = this.device.props.debugFramebuffers;
     this._drawCount++;
-    if (!debugFramebuffers || this._drawCount++ > 3 && this._drawCount % 60) {
+    if (!debugFramebuffers) {
       return;
     }
     const framebuffer = renderPass.props.framebuffer;
@@ -1784,14 +1988,14 @@ var _Model = class {
   }
   // TODO - fix typing of luma data types
   _getBufferOrConstantValues(attribute, dataType) {
-    const TypedArrayConstructor = (0, import_core10.getTypedArrayFromDataType)(dataType);
+    const TypedArrayConstructor = (0, import_core7.getTypedArrayFromDataType)(dataType);
     const typedArray = attribute instanceof import_core7.Buffer ? new TypedArrayConstructor(attribute.debugData) : attribute;
     return typedArray.toString();
   }
 };
 var Model = _Model;
 __publicField(Model, "defaultProps", {
-  ...import_core8.RenderPipeline.defaultProps,
+  ...import_core7.RenderPipeline.defaultProps,
   source: void 0,
   vs: null,
   fs: null,
@@ -1817,17 +2021,8 @@ __publicField(Model, "defaultProps", {
   debugShaders: void 0,
   disableWarnings: void 0
 });
-function mergeBufferLayouts(layouts1, layouts2) {
-  const layouts = [...layouts1];
-  for (const attribute of layouts2) {
-    const index = layouts.findIndex((attribute2) => attribute2.name === attribute.name);
-    if (index < 0) {
-      layouts.push(attribute);
-    } else {
-      layouts[index] = attribute;
-    }
-  }
-  return layouts;
+function shaderModuleHasUniforms(module2) {
+  return Boolean(module2.uniformTypes && !isObjectEmpty(module2.uniformTypes));
 }
 function getPlatformInfo(device) {
   return {
@@ -1839,33 +2034,26 @@ function getPlatformInfo(device) {
     features: device.features
   };
 }
-function getAttributeNames(bufferLayout) {
-  var _a;
-  return bufferLayout.attributes ? (_a = bufferLayout.attributes) == null ? void 0 : _a.map((layout) => layout.attribute) : [bufferLayout.name];
-}
 function isObjectEmpty(obj) {
-  let isEmpty = true;
   for (const key in obj) {
-    isEmpty = false;
-    break;
+    return false;
   }
-  return isEmpty;
+  return true;
 }
 
-// dist/transform/buffer-transform.js
-var import_core11 = require("@luma.gl/core");
+// dist/compute/buffer-transform.js
+var import_core8 = require("@luma.gl/core");
 var import_shadertools3 = require("@luma.gl/shadertools");
-var BufferTransform = class {
+var _BufferTransform = class {
   device;
   model;
   transformFeedback;
-  /** @deprecated Use device feature test. */
   static isSupported(device) {
     var _a;
     return ((_a = device == null ? void 0 : device.info) == null ? void 0 : _a.type) === "webgl";
   }
-  constructor(device, props = Model.defaultProps) {
-    if (!BufferTransform.isSupported(device)) {
+  constructor(device, props = _BufferTransform.defaultProps) {
+    if (!_BufferTransform.isSupported(device)) {
       throw new Error("BufferTransform not yet implemented on WebGPU");
     }
     this.device = device;
@@ -1873,6 +2061,7 @@ var BufferTransform = class {
       id: props.id || "buffer-transform-model",
       fs: props.fs || (0, import_shadertools3.getPassthroughFS)(),
       topology: props.topology || "point-list",
+      varyings: props.outputs || props.varyings,
       ...props
     });
     this.transformFeedback = this.device.createTransformFeedback({
@@ -1895,32 +2084,42 @@ var BufferTransform = class {
   }
   /** Run one transform loop. */
   run(options) {
+    if (options == null ? void 0 : options.inputBuffers) {
+      this.model.setAttributes(options.inputBuffers);
+    }
+    if (options == null ? void 0 : options.outputBuffers) {
+      this.transformFeedback.setBuffers(options.outputBuffers);
+    }
     const renderPass = this.device.beginRenderPass(options);
     this.model.draw(renderPass);
     renderPass.end();
   }
-  /** @deprecated */
-  update(...args) {
-    console.warn("TextureTransform#update() not implemented");
-  }
-  /** Returns the {@link Buffer} or {@link BufferRange} for given varying name. */
+  // DEPRECATED METHODS
+  /** @deprecated App knows what buffers it is passing in - Returns the {@link Buffer} or {@link BufferRange} for given varying name. */
   getBuffer(varyingName) {
     return this.transformFeedback.getBuffer(varyingName);
   }
+  /** @deprecated App knows what buffers it is passing in - Reads the {@link Buffer} or {@link BufferRange} for given varying name. */
   readAsync(varyingName) {
     const result = this.getBuffer(varyingName);
     if (!result) {
       throw new Error("BufferTransform#getBuffer");
     }
-    if (result instanceof import_core11.Buffer) {
+    if (result instanceof import_core8.Buffer) {
       return result.readAsync();
     }
     const { buffer, byteOffset = 0, byteLength = buffer.byteLength } = result;
     return buffer.readAsync(byteOffset, byteLength);
   }
 };
+var BufferTransform = _BufferTransform;
+__publicField(BufferTransform, "defaultProps", {
+  ...Model.defaultProps,
+  outputs: void 0,
+  feedbackBuffers: void 0
+});
 
-// dist/transform/texture-transform.js
+// dist/compute/texture-transform.js
 var import_shadertools4 = require("@luma.gl/shadertools");
 var FS_OUTPUT_VARIABLE = "transform_output";
 var TextureTransform = class {
@@ -1943,7 +2142,7 @@ var TextureTransform = class {
       mipmapFilter: "nearest"
     });
     this.model = new Model(this.device, {
-      id: props.id || "texture-transform-model",
+      id: props.id || uid("texture-transform-model"),
       fs: props.fs || (0, import_shadertools4.getPassthroughFS)({
         input: props.targetTextureVarying,
         inputChannels: props.targetTextureChannels,
@@ -1958,6 +2157,11 @@ var TextureTransform = class {
   }
   // Delete owned resources.
   destroy() {
+    var _a;
+    this.model.destroy();
+    for (const binding of this.bindings) {
+      (_a = binding.framebuffer) == null ? void 0 : _a.destroy();
+    }
   }
   /** @deprecated Use {@link destroy}. */
   delete() {
@@ -1969,13 +2173,6 @@ var TextureTransform = class {
     this.model.draw(renderPass);
     renderPass.end();
   }
-  /** @deprecated */
-  update(...args) {
-    console.warn("TextureTransform#update() not implemented");
-  }
-  getData({ packed = false } = {}) {
-    throw new Error("getData() not implemented");
-  }
   getTargetTexture() {
     const { targetTexture } = this.bindings[this.currentIndex];
     return targetTexture;
@@ -2111,56 +2308,161 @@ var Geometry = class {
   }
 };
 
-// dist/lib/clip-space.js
+// dist/models/clip-space.js
+var CLIPSPACE_VERTEX_SHADER_WGSL = (
+  /* wgsl */
+  `struct VertexInputs {
+  @location(0) clipSpacePosition: vec2<f32>,
+  @location(1) texCoord: vec2<f32>,
+  @location(2) coordinate: vec2<f32>  
+}
+
+struct FragmentInputs {
+  @builtin(position) Position : vec4<f32>,
+  @location(0) position : vec2<f32>,
+  @location(1) coordinate : vec2<f32>,
+  @location(2) uv : vec2<f32>
+};
+
+@vertex
+fn vertexMain(inputs: VertexInputs) -> FragmentInputs {
+  var outputs: FragmentInputs;
+  outputs.Position = vec4(inputs.clipSpacePosition, 0., 1.);
+  outputs.position = inputs.clipSpacePosition;
+  outputs.coordinate = inputs.coordinate;
+  outputs.uv = inputs.texCoord;
+  return outputs;
+}
+`
+);
 var CLIPSPACE_VERTEX_SHADER = (
   /* glsl */
   `#version 300 es
-in vec2 aClipSpacePosition;
-in vec2 aTexCoord;
-in vec2 aCoordinate;
+in vec2 clipSpacePosition;
+in vec2 texCoord;
+in vec2 coordinate;
 
 out vec2 position;
 out vec2 coordinate;
 out vec2 uv;
 
 void main(void) {
-  gl_Position = vec4(aClipSpacePosition, 0., 1.);
-  position = aClipSpacePosition;
-  coordinate = aCoordinate;
-  uv = aTexCoord;
+  gl_Position = vec4(clipSpacePosition, 0., 1.);
+  position = clipSpacePosition;
+  coordinate = coordinate;
+  uv = texCoord;
 }
 `
 );
 var POSITIONS = [-1, -1, 1, -1, -1, 1, 1, 1];
 var ClipSpace = class extends Model {
-  constructor(device, opts) {
+  constructor(device, props) {
     const TEX_COORDS = POSITIONS.map((coord) => coord === -1 ? 0 : coord);
+    if (props.source) {
+      props = { ...props, source: `${CLIPSPACE_VERTEX_SHADER_WGSL}
+${props.source}` };
+    }
     super(device, {
-      ...opts,
+      id: props.id || uid("clip-space"),
+      ...props,
       vs: CLIPSPACE_VERTEX_SHADER,
       vertexCount: 4,
       geometry: new Geometry({
         topology: "triangle-strip",
         vertexCount: 4,
         attributes: {
-          aClipSpacePosition: { size: 2, value: new Float32Array(POSITIONS) },
-          aTexCoord: { size: 2, value: new Float32Array(TEX_COORDS) },
-          aCoordinate: { size: 2, value: new Float32Array(TEX_COORDS) }
+          clipSpacePosition: { size: 2, value: new Float32Array(POSITIONS) },
+          texCoord: { size: 2, value: new Float32Array(TEX_COORDS) },
+          coordinate: { size: 2, value: new Float32Array(TEX_COORDS) }
         }
       })
     });
   }
 };
 
+// dist/models/billboard-texture-model.js
+var BACKGROUND_FS_WGSL = (
+  /* wgsl */
+  `@group(0) @binding(0) var backgroundTexture: texture_2d<f32>;
+@group(0) @binding(1) var backgroundTextureSampler: sampler;
+
+fn billboardTexture_getTextureUV(coordinates: vec2<f32>) -> vec2<f32> {
+	let iTexSize: vec2<u32> = textureDimensions(backgroundTexture, 0) * 2;
+	let texSize: vec2<f32> = vec2<f32>(f32(iTexSize.x), f32(iTexSize.y));
+	var position: vec2<f32> = coordinates.xy / texSize;
+	return position;
+} 
+
+@fragment
+fn fragmentMain(inputs: FragmentInputs) -> @location(0) vec4<f32> {
+	let position: vec2<f32> = billboardTexture_getTextureUV(inputs.coordinate);
+	return textureSample(backgroundTexture, backgroundTextureSampler, position);
+}
+`
+);
+var BACKGROUND_FS = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+
+uniform sampler2D backgroundTexture;
+out vec4 fragColor;
+
+vec2 billboardTexture_getTextureUV() {
+  ivec2 iTexSize = textureDimensions(backgroundTexture, 0) * 2;
+  vec2 texSize = vec2(float(iTexSize.x), float(iTexSize.y));
+  vec2 position = gl_FragCoord.xy / texSize;
+  return position;
+}
+
+void main(void) {
+  vec2 position = billboardTexture_getTextureUV();
+  fragColor = texture(backgroundTexture, position);
+}
+`
+);
+var BackgroundTextureModel = class extends ClipSpace {
+  constructor(device, props) {
+    super(device, {
+      id: props.id || "background-texture-model",
+      source: BACKGROUND_FS_WGSL,
+      fs: BACKGROUND_FS,
+      parameters: {
+        depthWriteEnabled: false,
+        depthCompare: "always",
+        ...props.blend ? {
+          blend: true,
+          blendColorOperation: "add",
+          blendAlphaOperation: "add",
+          blendColorSrcFactor: "one",
+          blendColorDstFactor: "one-minus-src-color",
+          blendAlphaSrcFactor: "one",
+          blendAlphaDstFactor: "one-minus-src-alpha"
+        } : {}
+      }
+    });
+    this.setTexture(props.backgroundTexture);
+  }
+  setTexture(backgroundTexture) {
+    this.setBindings({
+      backgroundTexture
+    });
+  }
+  predraw() {
+    this.shaderInputs.setProps({});
+    super.predraw();
+  }
+};
+
 // dist/scenegraph/scenegraph-node.js
-var import_core12 = require("@math.gl/core");
+var import_core9 = require("@math.gl/core");
 var ScenegraphNode = class {
   id;
-  matrix = new import_core12.Matrix4();
+  matrix = new import_core9.Matrix4();
   display = true;
-  position = new import_core12.Vector3();
-  rotation = new import_core12.Vector3();
-  scale = new import_core12.Vector3(1, 1, 1);
+  position = new import_core9.Vector3();
+  rotation = new import_core9.Vector3();
+  scale = new import_core9.Vector3(1, 1, 1);
   userData = {};
   props = {};
   constructor(props = {}) {
@@ -2245,7 +2547,7 @@ var ScenegraphNode = class {
   }
   getCoordinateUniforms(viewMatrix, modelMatrix) {
     modelMatrix = modelMatrix || this.matrix;
-    const worldMatrix = new import_core12.Matrix4(viewMatrix).multiplyRight(modelMatrix);
+    const worldMatrix = new import_core9.Matrix4(viewMatrix).multiplyRight(modelMatrix);
     const worldInverse = worldMatrix.invert();
     const worldInverseTranspose = worldInverse.transpose();
     return {
@@ -2297,14 +2599,14 @@ var ScenegraphNode = class {
 };
 
 // dist/scenegraph/group-node.js
-var import_core13 = require("@math.gl/core");
-var import_core14 = require("@luma.gl/core");
+var import_core10 = require("@math.gl/core");
+var import_core11 = require("@luma.gl/core");
 var GroupNode = class extends ScenegraphNode {
   children;
   constructor(props = {}) {
     props = Array.isArray(props) ? { children: props } : props;
     const { children = [] } = props;
-    import_core14.log.assert(children.every((child) => child instanceof ScenegraphNode), "every child must an instance of ScenegraphNode");
+    import_core11.log.assert(children.every((child) => child instanceof ScenegraphNode), "every child must an instance of ScenegraphNode");
     super(props);
     this.children = children;
   }
@@ -2319,12 +2621,12 @@ var GroupNode = class extends ScenegraphNode {
         return;
       }
       const [min, max] = bounds;
-      const center = new import_core13.Vector3(min).add(max).divide([2, 2, 2]);
+      const center = new import_core10.Vector3(min).add(max).divide([2, 2, 2]);
       worldMatrix.transformAsPoint(center, center);
-      const halfSize = new import_core13.Vector3(max).subtract(min).divide([2, 2, 2]);
+      const halfSize = new import_core10.Vector3(max).subtract(min).divide([2, 2, 2]);
       worldMatrix.transformAsVector(halfSize, halfSize);
       for (let v = 0; v < 8; v++) {
-        const position = new import_core13.Vector3(v & 1 ? -1 : 1, v & 2 ? -1 : 1, v & 4 ? -1 : 1).multiply(halfSize).add(center);
+        const position = new import_core10.Vector3(v & 1 ? -1 : 1, v & 2 ? -1 : 1, v & 4 ? -1 : 1).multiply(halfSize).add(center);
         for (let i = 0; i < 3; i++) {
           result[0][i] = Math.min(result[0][i], position[i]);
           result[1][i] = Math.max(result[1][i], position[i]);
@@ -2364,8 +2666,8 @@ var GroupNode = class extends ScenegraphNode {
     this.children = [];
     return this;
   }
-  traverse(visitor, { worldMatrix = new import_core13.Matrix4() } = {}) {
-    const modelMatrix = new import_core13.Matrix4(worldMatrix).multiplyRight(this.matrix);
+  traverse(visitor, { worldMatrix = new import_core10.Matrix4() } = {}) {
+    const modelMatrix = new import_core10.Matrix4(worldMatrix).multiplyRight(this.matrix);
     for (const child of this.children) {
       if (child instanceof GroupNode) {
         child.traverse(visitor, { worldMatrix: modelMatrix });
@@ -3147,7 +3449,7 @@ var CylinderGeometry = class extends TruncatedConeGeometry {
 };
 
 // dist/geometries/ico-sphere-geometry.js
-var import_core15 = require("@math.gl/core");
+var import_core12 = require("@math.gl/core");
 var ICO_POSITIONS = [-1, 0, 0, 0, 1, 0, 0, 0, -1, 0, 0, 1, 0, -1, 0, 1, 0, 0];
 var ICO_INDICES = [3, 4, 5, 3, 5, 1, 3, 1, 0, 3, 0, 4, 4, 0, 2, 4, 2, 5, 2, 0, 1, 5, 2, 1];
 var IcoSphereGeometry = class extends Geometry {
@@ -3245,7 +3547,7 @@ function tesselateIcosaHedron(props) {
     const u3 = 1 - phi3 / PI2;
     const vec1 = [x3 - x2, y3 - y2, z3 - z2];
     const vec2 = [x1 - x2, y1 - y2, z1 - z2];
-    const normal = new import_core15.Vector3(vec1).cross(vec2).normalize();
+    const normal = new import_core12.Vector3(vec1).cross(vec2).normalize();
     let newIndex;
     if ((u1 === 0 || u2 === 0 || u3 === 0) && (u1 === 0 || u1 > 0.5) && (u2 === 0 || u2 > 0.5) && (u3 === 0 || u3 > 0.5)) {
       positions.push(positions[in1 + 0], positions[in1 + 1], positions[in1 + 2]);
@@ -3505,11 +3807,377 @@ function fract(n) {
   return n - Math.floor(n);
 }
 
-// dist/computation.js
-var import_core16 = require("@luma.gl/core");
-var import_core17 = require("@luma.gl/core");
-var import_core18 = require("@luma.gl/core");
+// dist/passes/shader-pass-renderer.js
 var import_shadertools5 = require("@luma.gl/shadertools");
+
+// dist/compute/swap.js
+var import_core13 = require("@luma.gl/core");
+var Swap = class {
+  /** The current resource - usually the source for renders or computations */
+  current;
+  /** The next resource - usually the target/destination for transforms / computations */
+  next;
+  constructor(props) {
+    this.current = props.current;
+    this.next = props.next;
+  }
+  /** Destroys the two managed resources */
+  destroy() {
+    var _a, _b;
+    (_a = this.current) == null ? void 0 : _a.destroy();
+    (_b = this.next) == null ? void 0 : _b.destroy();
+  }
+  /** Make the next resource into the current resource, and reuse the current resource as the next resource */
+  swap() {
+    const current = this.current;
+    this.current = this.next;
+    this.next = current;
+  }
+};
+var SwapFramebuffers = class extends Swap {
+  constructor(device, props) {
+    var _a, _b;
+    props = { ...props };
+    let colorAttachments = (_a = props.colorAttachments) == null ? void 0 : _a.map((colorAttachment) => typeof colorAttachment !== "string" ? colorAttachment : device.createTexture({
+      format: colorAttachment,
+      usage: import_core13.Texture.COPY_DST | import_core13.Texture.RENDER_ATTACHMENT
+    }));
+    const current = device.createFramebuffer({ ...props, colorAttachments });
+    colorAttachments = (_b = props.colorAttachments) == null ? void 0 : _b.map((colorAttachment) => typeof colorAttachment !== "string" ? colorAttachment : device.createTexture({
+      format: colorAttachment,
+      usage: import_core13.Texture.COPY_DST | import_core13.Texture.RENDER_ATTACHMENT
+    }));
+    const next = device.createFramebuffer({ ...props, colorAttachments });
+    super({ current, next });
+  }
+  /**
+   * Resizes the Framebuffers.
+   * @returns true if the size changed, otherwise exiting framebuffers were preserved
+   * @note any contents are not preserved!
+   */
+  resize(size) {
+    if (size.width === this.current.width && size.height === this.current.height) {
+      return false;
+    }
+    const { current, next } = this;
+    this.current = current.clone(size);
+    current.destroy();
+    this.next = next.clone(size);
+    next.destroy();
+    return true;
+  }
+};
+var SwapBuffers = class extends Swap {
+  constructor(device, props) {
+    super({ current: device.createBuffer(props), next: device.createBuffer(props) });
+  }
+  /**
+   * Resizes the Buffers.
+   * @returns true if the size changed, otherwise exiting buffers were preserved.
+   * @note any contents are not preserved!
+   */
+  resize(props) {
+    if (props.byteLength === this.current.byteLength) {
+      return false;
+    }
+    const { current, next } = this;
+    this.current = current.clone(props);
+    current.destroy();
+    this.next = next.clone(props);
+    next.destroy();
+    return true;
+  }
+};
+
+// dist/passes/get-fragment-shader.js
+function getFragmentShaderForRenderPass(options) {
+  const { shaderPass, action, shadingLanguage } = options;
+  switch (action) {
+    case "filter":
+      const filterFunc = `${shaderPass.name}_filterColor_ext`;
+      return shadingLanguage === "wgsl" ? getFilterShaderWGSL(filterFunc) : getFilterShaderGLSL(filterFunc);
+    case "sample":
+      const samplerFunc = `${shaderPass.name}_sampleColor`;
+      return shadingLanguage === "wgsl" ? getSamplerShaderWGSL(samplerFunc) : getSamplerShaderGLSL(samplerFunc);
+    default:
+      throw new Error(`${shaderPass.name} no fragment shader generated for shader pass`);
+  }
+}
+function getFilterShaderWGSL(func) {
+  return (
+    /* wgsl */
+    `// Binding 0:1 is reserved for shader passes
+@group(0) @binding(0) var<uniform> brightnessContrast : brightnessContrastUniforms;
+@group(0) @binding(1) var texture: texture_2d<f32>;
+@group(0) @binding(2) var sampler: sampler;
+
+struct FragmentInputs = {
+  @location(0) fragUV: vec2f,
+  @location(1) fragPosition: vec4f,
+  @location(2) fragCoordinate: vec4f
+};
+
+@fragment
+fn fragmentMain(inputs: FragmentInputs) -> @location(0) vec4f {
+  let texSize = textureDimensions(texture, 0);
+  var fragColor = textureSample(texture, sampler, fragUV);
+  fragColor = ${func}(gl_FragColor, texSize, texCoord);
+  return fragColor;
+}
+`
+  );
+}
+function getSamplerShaderWGSL(func) {
+  return (
+    /* wgsl */
+    `// Binding 0:1 is reserved for shader passes
+@group(0) @binding(0) var<uniform> brightnessContrast : brightnessContrastUniforms;
+@group(0) @binding(1) var texture: texture_2d<f32>;
+@group(0) @binding(2) var sampler: sampler;
+
+struct FragmentInputs = {
+  @location(0) fragUV: vec2f,
+  @location(1) fragPosition: vec4f,
+  @location(2) fragCoordinate: vec4f
+};
+
+@fragment
+fn fragmentMain(inputs: FragmentInputs) -> @location(0) vec4f {
+  let texSize = textureDimensions(texture, 0);
+  var fragColor = textureSample(texture, sampler, fragUV);
+  fragColor = ${func}(gl_FragColor, texSize, texCoord);
+  return fragColor;
+}
+`
+  );
+}
+function getFilterShaderGLSL(func) {
+  return (
+    /* glsl */
+    `#version 300 es
+
+uniform sampler2D sourceTexture;
+
+in vec2 position;
+in vec2 coordinate;
+in vec2 uv;
+
+out vec4 fragColor;
+
+void main() {
+  vec2 texCoord = coordinate;
+  ivec2 iTexSize = textureSize(sourceTexture, 0);
+  vec2 texSize = vec2(float(iTexSize.x), float(iTexSize.y));
+
+  fragColor = texture(sourceTexture, texCoord);
+  fragColor = ${func}(fragColor, texSize, texCoord);
+}
+`
+  );
+}
+function getSamplerShaderGLSL(func) {
+  return (
+    /* glsl */
+    `#version 300 es
+
+uniform sampler2D sourceTexture;
+
+in vec2 position;
+in vec2 coordinate;
+in vec2 uv;
+
+out vec4 fragColor;
+
+void main() {
+  vec2 texCoord = coordinate;
+  ivec2 iTexSize = textureSize(sourceTexture, 0);
+  vec2 texSize = vec2(float(iTexSize.x), float(iTexSize.y));
+
+  fragColor = ${func}(sourceTexture, texSize, texCoord);
+}
+`
+  );
+}
+
+// dist/passes/shader-pass-renderer.js
+var ShaderPassRenderer = class {
+  device;
+  shaderInputs;
+  passRenderers;
+  swapFramebuffers;
+  /** For rendering to the screen */
+  clipSpace;
+  textureModel;
+  constructor(device, props) {
+    this.device = device;
+    props.shaderPasses.map((shaderPass) => (0, import_shadertools5.initializeShaderModule)(shaderPass));
+    const modules = props.shaderPasses.reduce((object, shaderPass) => ({ ...object, [shaderPass.name]: shaderPass }), {});
+    this.shaderInputs = props.shaderInputs || new ShaderInputs(modules);
+    const size = device.getCanvasContext().getPixelSize();
+    this.swapFramebuffers = new SwapFramebuffers(device, {
+      colorAttachments: ["rgba8unorm"],
+      width: size[0],
+      height: size[1]
+    });
+    this.textureModel = new BackgroundTextureModel(device, {
+      backgroundTexture: this.swapFramebuffers.current.colorAttachments[0].texture
+    });
+    this.clipSpace = new ClipSpace(device, {
+      source: (
+        /* wgsl */
+        `  @group(0) @binding(0) var sourceTexture: texture_2d<f32>;
+  @group(0) @binding(1) var sourceTextureSampler: sampler;
+
+@fragment
+fn fragmentMain(inputs: FragmentInputs) -> @location(0) vec4<f32> {
+	let texCoord: vec2<f32> = inputs.coordinate;
+	return textureSample(sourceTexture, sourceTextureSampler, texCoord);
+}
+`
+      ),
+      fs: (
+        /* glsl */
+        `#version 300 es
+
+uniform sampler2D sourceTexture;
+in vec2 uv;
+in vec2 coordinate;
+out vec4 fragColor;
+
+void main() {
+  vec2 texCoord = coordinate;
+  fragColor = texture(sourceTexture, coordinate);
+}
+`
+      )
+    });
+    this.passRenderers = props.shaderPasses.map((shaderPass) => new PassRenderer(device, shaderPass));
+  }
+  /** Destroys resources created by this ShaderPassRenderer */
+  destroy() {
+    for (const subPassRenderer of this.passRenderers) {
+      subPassRenderer.destroy();
+    }
+    this.swapFramebuffers.destroy();
+    this.clipSpace.destroy();
+  }
+  resize(width, height) {
+    this.swapFramebuffers.resize({ width, height });
+  }
+  renderToScreen(options) {
+    const outputTexture = this.renderToTexture(options);
+    if (!outputTexture) {
+      return false;
+    }
+    const renderPass = this.device.beginRenderPass({ clearColor: [0, 0, 0, 1], clearDepth: 1 });
+    this.clipSpace.setBindings({ sourceTexture: outputTexture });
+    this.clipSpace.draw(renderPass);
+    renderPass.end();
+    return true;
+  }
+  /** Runs the shaderPasses in sequence on the sourceTexture and returns a texture with the results.
+   * @returns null if the the sourceTexture has not yet been loaded
+   */
+  renderToTexture(options) {
+    const { sourceTexture } = options;
+    if (!sourceTexture.isReady) {
+      return null;
+    }
+    this.textureModel.destroy();
+    this.textureModel = new BackgroundTextureModel(this.device, {
+      backgroundTexture: sourceTexture
+    });
+    const clearTexturePass = this.device.beginRenderPass({
+      framebuffer: this.swapFramebuffers.current,
+      clearColor: [0, 0, 0, 1]
+    });
+    this.textureModel.draw(clearTexturePass);
+    clearTexturePass.end();
+    let first = true;
+    for (const passRenderer of this.passRenderers) {
+      for (const subPassRenderer of passRenderer.subPassRenderers) {
+        if (!first) {
+          this.swapFramebuffers.swap();
+        }
+        first = false;
+        const swapBufferTexture = this.swapFramebuffers.current.colorAttachments[0].texture;
+        const bindings = {
+          sourceTexture: swapBufferTexture
+          // texSize: [sourceTextures.width, sourceTextures.height]
+        };
+        const renderPass = this.device.beginRenderPass({
+          framebuffer: this.swapFramebuffers.next,
+          clearColor: [0, 0, 0, 1],
+          clearDepth: 1
+        });
+        subPassRenderer.render({ renderPass, bindings });
+        renderPass.end();
+      }
+    }
+    this.swapFramebuffers.swap();
+    const outputTexture = this.swapFramebuffers.current.colorAttachments[0].texture;
+    return outputTexture;
+  }
+};
+var PassRenderer = class {
+  shaderPass;
+  subPassRenderers;
+  constructor(device, shaderPass, props = {}) {
+    this.shaderPass = shaderPass;
+    const subPasses = shaderPass.passes || [];
+    this.subPassRenderers = subPasses.map((subPass) => {
+      return new SubPassRenderer(device, shaderPass, subPass);
+    });
+  }
+  destroy() {
+    for (const subPassRenderer of this.subPassRenderers) {
+      subPassRenderer.destroy();
+    }
+  }
+};
+var SubPassRenderer = class {
+  model;
+  shaderPass;
+  subPass;
+  constructor(device, shaderPass, subPass) {
+    this.shaderPass = shaderPass;
+    this.subPass = subPass;
+    const action = subPass.action || subPass.filter && "filter" || subPass.sampler && "sample" || "filter";
+    const fs3 = getFragmentShaderForRenderPass({
+      shaderPass,
+      action,
+      shadingLanguage: device.info.shadingLanguage
+    });
+    this.model = new ClipSpace(device, {
+      id: `${shaderPass.name}-subpass`,
+      source: fs3,
+      fs: fs3,
+      modules: [shaderPass],
+      parameters: {
+        depthWriteEnabled: false,
+        depthCompare: "always"
+      }
+    });
+  }
+  destroy() {
+    this.model.destroy();
+  }
+  render(options) {
+    const { renderPass, bindings } = options;
+    this.model.shaderInputs.setProps({
+      [this.shaderPass.name]: this.shaderPass.uniforms || {}
+    });
+    this.model.shaderInputs.setProps({
+      [this.shaderPass.name]: this.subPass.uniforms || {}
+    });
+    this.model.setBindings(bindings || {});
+    this.model.draw(renderPass);
+  }
+};
+
+// dist/compute/computation.js
+var import_core14 = require("@luma.gl/core");
+var import_shadertools6 = require("@luma.gl/shadertools");
 var import_types2 = require("@math.gl/types");
 var LOG_DRAW_PRIORITY2 = 2;
 var LOG_DRAW_TIMEOUT2 = 1e4;
@@ -3549,18 +4217,18 @@ var _Computation = class {
     const moduleMap = Object.fromEntries(((_a = this.props.modules) == null ? void 0 : _a.map((module2) => [module2.name, module2])) || []);
     this.shaderInputs = props.shaderInputs || new ShaderInputs(moduleMap);
     this.setShaderInputs(this.shaderInputs);
-    this.props.shaderLayout ||= (0, import_shadertools5.getShaderLayoutFromWGSL)(this.props.source);
+    this.props.shaderLayout ||= (0, import_shadertools6.getShaderLayoutFromWGSL)(this.props.source);
     const platformInfo = getPlatformInfo2(device);
     const modules = (((_b = this.props.modules) == null ? void 0 : _b.length) > 0 ? this.props.modules : (_c = this.shaderInputs) == null ? void 0 : _c.getModules()) || [];
     this.pipelineFactory = props.pipelineFactory || PipelineFactory.getDefaultPipelineFactory(this.device);
     this.shaderFactory = props.shaderFactory || ShaderFactory.getDefaultShaderFactory(this.device);
-    const { source, getUniforms } = this.props.shaderAssembler.assembleWGSLShader({
+    const { source: source3, getUniforms: getUniforms2 } = this.props.shaderAssembler.assembleWGSLShader({
       platformInfo,
       ...this.props,
       modules
     });
-    this.source = source;
-    this._getModuleUniforms = getUniforms;
+    this.source = source3;
+    this._getModuleUniforms = getUniforms2;
     this.pipeline = this._updatePipeline();
     if (props.bindings) {
       this.setBindings(props.bindings);
@@ -3607,7 +4275,7 @@ var _Computation = class {
   }
   setShaderInputs(shaderInputs) {
     this.shaderInputs = shaderInputs;
-    this._uniformStore = new import_core16.UniformStore(this.shaderInputs.modules);
+    this._uniformStore = new import_core14.UniformStore(this.shaderInputs.modules);
     for (const moduleName of Object.keys(this.shaderInputs.modules)) {
       const uniformBuffer = this._uniformStore.getManagedUniformBuffer(this.device, moduleName);
       this.bindings[`${moduleName}Uniforms`] = uniformBuffer;
@@ -3644,7 +4312,7 @@ var _Computation = class {
     if (this._pipelineNeedsUpdate) {
       let prevShader = null;
       if (this.pipeline) {
-        import_core17.log.log(1, `Model ${this.id}: Recreating pipeline because "${this._pipelineNeedsUpdate}".`)();
+        import_core14.log.log(1, `Model ${this.id}: Recreating pipeline because "${this._pipelineNeedsUpdate}".`)();
         prevShader = this.shader;
       }
       this._pipelineNeedsUpdate = false;
@@ -3652,7 +4320,7 @@ var _Computation = class {
         id: `${this.id}-fragment`,
         stage: "compute",
         source: this.source,
-        debug: this.props.debugShaders
+        debugShaders: this.props.debugShaders
       });
       this.pipeline = this.pipelineFactory.createComputePipeline({
         ...this.props,
@@ -3668,33 +4336,33 @@ var _Computation = class {
   _lastLogTime = 0;
   _logOpen = false;
   _logDrawCallStart() {
-    const logDrawTimeout = import_core17.log.level > 3 ? 0 : LOG_DRAW_TIMEOUT2;
-    if (import_core17.log.level < 2 || Date.now() - this._lastLogTime < logDrawTimeout) {
+    const logDrawTimeout = import_core14.log.level > 3 ? 0 : LOG_DRAW_TIMEOUT2;
+    if (import_core14.log.level < 2 || Date.now() - this._lastLogTime < logDrawTimeout) {
       return;
     }
     this._lastLogTime = Date.now();
     this._logOpen = true;
-    import_core17.log.group(LOG_DRAW_PRIORITY2, `>>> DRAWING MODEL ${this.id}`, { collapsed: import_core17.log.level <= 2 })();
+    import_core14.log.group(LOG_DRAW_PRIORITY2, `>>> DRAWING MODEL ${this.id}`, { collapsed: import_core14.log.level <= 2 })();
   }
   _logDrawCallEnd() {
     if (this._logOpen) {
       const uniformTable = this.shaderInputs.getDebugTable();
-      import_core17.log.table(LOG_DRAW_PRIORITY2, uniformTable)();
-      import_core17.log.groupEnd(LOG_DRAW_PRIORITY2)();
+      import_core14.log.table(LOG_DRAW_PRIORITY2, uniformTable)();
+      import_core14.log.groupEnd(LOG_DRAW_PRIORITY2)();
       this._logOpen = false;
     }
   }
   _drawCount = 0;
   // TODO - fix typing of luma data types
   _getBufferOrConstantValues(attribute, dataType) {
-    const TypedArrayConstructor = (0, import_core18.getTypedArrayFromDataType)(dataType);
-    const typedArray = attribute instanceof import_core16.Buffer ? new TypedArrayConstructor(attribute.debugData) : attribute;
+    const TypedArrayConstructor = (0, import_core14.getTypedArrayFromDataType)(dataType);
+    const typedArray = attribute instanceof import_core14.Buffer ? new TypedArrayConstructor(attribute.debugData) : attribute;
     return typedArray.toString();
   }
 };
 var Computation = _Computation;
 __publicField(Computation, "defaultProps", {
-  ...import_core16.ComputePipeline.defaultProps,
+  ...import_core14.ComputePipeline.defaultProps,
   id: "unnamed",
   handle: void 0,
   userData: {},
@@ -3705,7 +4373,7 @@ __publicField(Computation, "defaultProps", {
   shaderInputs: void 0,
   pipelineFactory: void 0,
   shaderFactory: void 0,
-  shaderAssembler: import_shadertools5.ShaderAssembler.getDefaultShaderAssembler(),
+  shaderAssembler: import_shadertools6.ShaderAssembler.getDefaultShaderAssembler(),
   debugShaders: void 0
 });
 function getPlatformInfo2(device) {
@@ -3718,4 +4386,543 @@ function getPlatformInfo2(device) {
     features: device.features
   };
 }
+
+// dist/modules/picking/picking-uniforms.js
+var DEFAULT_HIGHLIGHT_COLOR = [0, 1, 1, 1];
+var INVALID_INDEX = -1;
+var uniformTypes = {
+  isActive: "i32",
+  indexMode: "i32",
+  batchIndex: "i32",
+  isHighlightActive: "i32",
+  highlightedBatchIndex: "i32",
+  highlightedObjectIndex: "i32",
+  highlightColor: "vec4<f32>"
+};
+var GLSL_UNIFORMS = (
+  /* glsl */
+  `precision highp float;
+precision highp int;
+
+uniform pickingUniforms {
+  int isActive;
+  int indexMode;
+  int batchIndex;
+
+  int isHighlightActive;
+  int highlightedBatchIndex;
+  int highlightedObjectIndex;
+  vec4 highlightColor;
+} picking;
+`
+);
+var WGSL_UNIFORMS = (
+  /* wgsl */
+  `struct pickingUniforms {
+  isActive: int32;
+  indexMode: int32;
+  batchIndex: int32;
+
+  isHighlightActive: int32;
+  highlightedBatchIndex: int32;
+  highlightedObjectIndex: int32;
+  highlightColor: vec4<f32>;
+} picking;
+`
+);
+function getUniforms(props = {}, prevUniforms) {
+  const uniforms = { ...prevUniforms };
+  if (props.isActive !== void 0) {
+    uniforms.isActive = Boolean(props.isActive);
+  }
+  switch (props.indexMode) {
+    case "instance":
+      uniforms.indexMode = 0;
+      break;
+    case "custom":
+      uniforms.indexMode = 1;
+      break;
+    case void 0:
+      break;
+  }
+  switch (props.highlightedObjectIndex) {
+    case void 0:
+      break;
+    case null:
+      uniforms.isHighlightActive = false;
+      uniforms.highlightedObjectIndex = INVALID_INDEX;
+      break;
+    default:
+      uniforms.isHighlightActive = true;
+      uniforms.highlightedObjectIndex = props.highlightedObjectIndex;
+  }
+  if (typeof props.highlightedBatchIndex === "number") {
+    uniforms.highlightedBatchIndex = props.highlightedBatchIndex;
+  }
+  if (props.highlightColor) {
+    uniforms.highlightColor = props.highlightColor;
+  }
+  return uniforms;
+}
+var pickingUniforms = {
+  props: {},
+  uniforms: {},
+  name: "picking",
+  uniformTypes,
+  defaultUniforms: {
+    isActive: false,
+    indexMode: 0,
+    batchIndex: 0,
+    isHighlightActive: true,
+    highlightedBatchIndex: INVALID_INDEX,
+    highlightedObjectIndex: INVALID_INDEX,
+    highlightColor: DEFAULT_HIGHLIGHT_COLOR
+  },
+  getUniforms
+};
+
+// dist/modules/picking/picking-manager.js
+var _PickingManager = class {
+  device;
+  props;
+  /** Info from latest pick operation */
+  pickInfo = { batchIndex: null, objectIndex: null };
+  /** Framebuffer used for picking */
+  framebuffer = null;
+  constructor(device, props) {
+    this.device = device;
+    this.props = { ..._PickingManager.defaultProps, ...props };
+  }
+  destroy() {
+    var _a;
+    (_a = this.framebuffer) == null ? void 0 : _a.destroy();
+  }
+  // TODO - Ask for a cached framebuffer? a Framebuffer factory?
+  getFramebuffer() {
+    if (!this.framebuffer) {
+      this.framebuffer = this.device.createFramebuffer({
+        colorAttachments: ["rgba8unorm", "rg32sint"],
+        depthStencilAttachment: "depth24plus"
+      });
+    }
+    return this.framebuffer;
+  }
+  /** Clear highlighted / picked object */
+  clearPickState() {
+    this.props.shaderInputs.setProps({ picking: { highlightedObjectIndex: null } });
+  }
+  /** Prepare for rendering picking colors */
+  beginRenderPass() {
+    var _a;
+    const framebuffer = this.getFramebuffer();
+    framebuffer.resize(this.device.getDefaultCanvasContext().getPixelSize());
+    (_a = this.props.shaderInputs) == null ? void 0 : _a.setProps({ picking: { isActive: true } });
+    const pickingPass = this.device.beginRenderPass({
+      framebuffer,
+      clearColors: [new Float32Array([0, 0, 0, 0]), new Int32Array([-1, -1, 0, 0])],
+      clearDepth: 1
+    });
+    return pickingPass;
+  }
+  getPickInfo(mousePosition) {
+    var _a;
+    const framebuffer = this.getFramebuffer();
+    const [pickX, pickY] = this.getPickPosition(mousePosition);
+    const pixelData = this.device.readPixelsToArrayWebGL(framebuffer, {
+      sourceX: pickX,
+      sourceY: pickY,
+      sourceWidth: 1,
+      sourceHeight: 1,
+      sourceAttachment: 1
+    });
+    if (!pixelData) {
+      return null;
+    }
+    const pickInfo = {
+      objectIndex: pixelData[0] === INVALID_INDEX ? null : pixelData[0],
+      batchIndex: pixelData[1] === INVALID_INDEX ? null : pixelData[1]
+    };
+    if (pickInfo.objectIndex !== this.pickInfo.objectIndex || pickInfo.batchIndex !== this.pickInfo.batchIndex) {
+      this.pickInfo = pickInfo;
+      this.props.onObjectPicked(pickInfo);
+    }
+    (_a = this.props.shaderInputs) == null ? void 0 : _a.setProps({
+      picking: {
+        isActive: false,
+        highlightedBatchIndex: pickInfo.batchIndex,
+        highlightedObjectIndex: pickInfo.objectIndex
+      }
+    });
+    return this.pickInfo;
+  }
+  /**
+   * Get pick position in device pixel range
+   * use the center pixel location in device pixel range
+   */
+  getPickPosition(mousePosition) {
+    const devicePixels = this.device.getDefaultCanvasContext().cssToDevicePixels(mousePosition);
+    const pickX = devicePixels.x + Math.floor(devicePixels.width / 2);
+    const pickY = devicePixels.y + Math.floor(devicePixels.height / 2);
+    return [pickX, pickY];
+  }
+};
+var PickingManager = _PickingManager;
+__publicField(PickingManager, "defaultProps", {
+  shaderInputs: void 0,
+  onObjectPicked: () => {
+  }
+});
+
+// dist/modules/picking/index-picking.js
+var source = (
+  /* wgsl */
+  `${WGSL_UNIFORMS}
+
+const INDEX_PICKING_MODE_INSTANCE = 0;
+const INDEX_PICKING_MODE_CUSTOM = 1;
+const INDEX_PICKING_INVALID_INDEX = ${INVALID_INDEX}; // 2^32 - 1
+
+struct indexPickingFragmentInputs = {
+  objectIndex: int32;
+};
+
+let indexPickingFragmentInputs: indexPickingFragmentInputs;
+
+/**
+ * Vertex shaders should call this function to set the object index.
+ * If using instance or vertex mode, argument will be ignored, 0 can be supplied.
+ */
+fn picking_setObjectIndex(objectIndex: int32) {
+  switch (picking.indexMode) {
+    case INDEX_PICKING_MODE_INSTANCE, default: {
+      picking_objectIndex = instance_index;
+    };
+    case INDEX_PICKING_MODE_CUSTOM: {
+      picking_objectIndex = objectIndex;
+    };
+  }
+}
+
+`
+);
+var vs = (
+  /* glsl */
+  `${GLSL_UNIFORMS}
+
+const int INDEX_PICKING_MODE_INSTANCE = 0;
+const int INDEX_PICKING_MODE_CUSTOM = 1;
+
+const int INDEX_PICKING_INVALID_INDEX = ${INVALID_INDEX}; // 2^32 - 1
+
+flat out int picking_objectIndex;
+
+/**
+ * Vertex shaders should call this function to set the object index.
+ * If using instance or vertex mode, argument will be ignored, 0 can be supplied.
+ */
+void picking_setObjectIndex(int objectIndex) {
+  switch (picking.indexMode) {
+    case INDEX_PICKING_MODE_INSTANCE:
+      picking_objectIndex = gl_InstanceID;
+      break;
+    case INDEX_PICKING_MODE_CUSTOM:
+      picking_objectIndex = objectIndex;
+      break;
+  }
+}
+`
+);
+var fs = (
+  /* glsl */
+  `${GLSL_UNIFORMS}
+
+const int INDEX_PICKING_INVALID_INDEX = ${INVALID_INDEX}; // 2^32 - 1
+
+flat in int picking_objectIndex;
+
+/**
+ * Check if this vertex is highlighted (part of the selected batch and object)
+ */ 
+bool picking_isFragmentHighlighted() {
+  return 
+    bool(picking.isHighlightActive) &&
+    picking.highlightedBatchIndex == picking.batchIndex &&
+    picking.highlightedObjectIndex == picking_objectIndex
+    ;
+}
+
+/**
+ * Returns highlight color if this item is selected.
+ */
+vec4 picking_filterHighlightColor(vec4 color) {
+  // If we are still picking, we don't highlight
+  if (bool(picking.isActive)) {
+    return color;
+  }
+
+  // If we are not highlighted, return color as is
+  if (!picking_isFragmentHighlighted()) {
+    return color;
+  }
+   
+  // Blend in highlight color based on its alpha value
+  float highLightAlpha = picking.highlightColor.a;
+  float blendedAlpha = highLightAlpha + color.a * (1.0 - highLightAlpha);
+  float highLightRatio = highLightAlpha / blendedAlpha;
+
+  vec3 blendedRGB = mix(color.rgb, picking.highlightColor.rgb, highLightRatio);
+  return vec4(blendedRGB, blendedAlpha);
+}
+
+/*
+ * Returns picking color if picking enabled else unmodified argument.
+ */
+ivec4 picking_getPickingColor() {
+  // Assumes that colorAttachment0 is rg32int
+  // TODO? - we could render indices into a second color attachment and not mess with fragColor
+  return ivec4(picking_objectIndex, picking.batchIndex, 0u, 0u);  
+}
+
+vec4 picking_filterPickingColor(vec4 color) {
+  if (bool(picking.isActive)) {
+    if (picking_objectIndex == INDEX_PICKING_INVALID_INDEX) {
+      discard;
+    }
+  }
+  return color;
+}
+
+/*
+ * Returns picking color if picking is enabled if not
+ * highlight color if this item is selected, otherwise unmodified argument.
+ */
+vec4 picking_filterColor(vec4 color) {
+  vec4 outColor = color;
+  outColor = picking_filterHighlightColor(outColor);
+  outColor = picking_filterPickingColor(outColor);
+  return outColor;
+}
+`
+);
+var picking = {
+  ...pickingUniforms,
+  name: "picking",
+  source,
+  vs,
+  fs
+};
+
+// dist/modules/picking/color-picking.js
+var source2 = (
+  /* wgsl */
+  `${WGSL_UNIFORMS}
+`
+);
+var vs2 = (
+  /* glsl */
+  `${GLSL_UNIFORMS}
+out vec4 picking_vRGBcolor_Avalid;
+
+// Normalize unsigned byte color to 0-1 range
+vec3 picking_normalizeColor(vec3 color) {
+  return picking.useFloatColors > 0.5 ? color : color / 255.0;
+}
+
+// Normalize unsigned byte color to 0-1 range
+vec4 picking_normalizeColor(vec4 color) {
+  return picking.useFloatColors > 0.5 ? color : color / 255.0;
+}
+
+bool picking_isColorZero(vec3 color) {
+  return dot(color, vec3(1.0)) < 0.00001;
+}
+
+bool picking_isColorValid(vec3 color) {
+  return dot(color, vec3(1.0)) > 0.00001;
+}
+
+// Check if this vertex is highlighted 
+bool isVertexHighlighted(vec3 vertexColor) {
+  vec3 highlightedObjectColor = picking_normalizeColor(picking.highlightedObjectColor);
+  return
+    bool(picking.isHighlightActive) && picking_isColorZero(abs(vertexColor - highlightedObjectColor));
+}
+
+// Set the current picking color
+void picking_setPickingColor(vec3 pickingColor) {
+  pickingColor = picking_normalizeColor(pickingColor);
+
+  if (bool(picking.isActive)) {
+    // Use alpha as the validity flag. If pickingColor is [0, 0, 0] fragment is non-pickable
+    picking_vRGBcolor_Avalid.a = float(picking_isColorValid(pickingColor));
+
+    if (!bool(picking.isAttribute)) {
+      // Stores the picking color so that the fragment shader can render it during picking
+      picking_vRGBcolor_Avalid.rgb = pickingColor;
+    }
+  } else {
+    // Do the comparison with selected item color in vertex shader as it should mean fewer compares
+    picking_vRGBcolor_Avalid.a = float(isVertexHighlighted(pickingColor));
+  }
+}
+
+void picking_setObjectIndex(uint objectIndex) {
+  if (bool(picking.isActive)) {
+    uint index = objectIndex;
+    if (picking.indexMode == PICKING_INDEX_MODE_INSTANCE) {
+      index = uint(gl_InstanceID);
+    }
+    picking_vRGBcolor_Avalid.r = float(index % 255) / 255.0;
+    picking_vRGBcolor_Avalid.g = float((index / 255) % 255) / 255.0;
+    picking_vRGBcolor_Avalid.b = float((index / 255 / 255) %255) / 255.0;
+  }
+}
+
+void picking_setPickingAttribute(float value) {
+  if (bool(picking.isAttribute)) {
+    picking_vRGBcolor_Avalid.r = value;
+  }
+}
+
+void picking_setPickingAttribute(vec2 value) {
+  if (bool(picking.isAttribute)) {
+    picking_vRGBcolor_Avalid.rg = value;
+  }
+}
+
+void picking_setPickingAttribute(vec3 value) {
+  if (bool(picking.isAttribute)) {
+    picking_vRGBcolor_Avalid.rgb = value;
+  }
+}
+`
+);
+var fs2 = (
+  /* glsl */
+  `${GLSL_UNIFORMS}
+
+in vec4 picking_vRGBcolor_Avalid;
+
+/*
+ * Returns highlight color if this item is selected.
+ */
+vec4 picking_filterHighlightColor(vec4 color) {
+  // If we are still picking, we don't highlight
+  if (picking.isActive > 0.5) {
+    return color;
+  }
+
+  bool selected = bool(picking_vRGBcolor_Avalid.a);
+
+  if (selected) {
+    // Blend in highlight color based on its alpha value
+    float highLightAlpha = picking.highlightColor.a;
+    float blendedAlpha = highLightAlpha + color.a * (1.0 - highLightAlpha);
+    float highLightRatio = highLightAlpha / blendedAlpha;
+
+    vec3 blendedRGB = mix(color.rgb, picking.highlightColor.rgb, highLightRatio);
+    return vec4(blendedRGB, blendedAlpha);
+  } else {
+    return color;
+  }
+}
+
+/*
+ * Returns picking color if picking enabled else unmodified argument.
+ */
+vec4 picking_filterPickingColor(vec4 color) {
+  if (bool(picking.isActive)) {
+    if (picking_vRGBcolor_Avalid.a == 0.0) {
+      discard;
+    }
+    return picking_vRGBcolor_Avalid;
+  }
+  return color;
+}
+
+/*
+ * Returns picking color if picking is enabled if not
+ * highlight color if this item is selected, otherwise unmodified argument.
+ */
+vec4 picking_filterColor(vec4 color) {
+  vec4 highlightColor = picking_filterHighlightColor(color);
+  return picking_filterPickingColor(highlightColor);
+}
+`
+);
+var picking2 = {
+  ...pickingUniforms,
+  name: "picking",
+  source: source2,
+  vs: vs2,
+  fs: fs2
+};
+
+// dist/modules/picking/legacy-picking-manager.js
+var LegacyPickingManager = class {
+  device;
+  framebuffer = null;
+  shaderInputs;
+  constructor(device, shaderInputs) {
+    this.device = device;
+    this.shaderInputs = shaderInputs;
+  }
+  destroy() {
+    var _a;
+    (_a = this.framebuffer) == null ? void 0 : _a.destroy();
+  }
+  getFramebuffer() {
+    if (!this.framebuffer) {
+      this.framebuffer = this.device.createFramebuffer({
+        colorAttachments: ["rgba8unorm"],
+        depthStencilAttachment: "depth24plus"
+      });
+    }
+    return this.framebuffer;
+  }
+  /** Clear highlighted / picked object */
+  clearPickState() {
+    this.shaderInputs.setProps({ picking: { highlightedObjectColor: null } });
+  }
+  /** Prepare for rendering picking colors */
+  beginRenderPass() {
+    const framebuffer = this.getFramebuffer();
+    framebuffer.resize(this.device.getCanvasContext().getPixelSize());
+    this.shaderInputs.setProps({ picking: { isActive: true } });
+    const pickingPass = this.device.beginRenderPass({
+      framebuffer,
+      clearColor: [0, 0, 0, 0],
+      clearDepth: 1
+    });
+    return pickingPass;
+  }
+  updatePickState(mousePosition) {
+    const framebuffer = this.getFramebuffer();
+    const [pickX, pickY] = this.getPickPosition(mousePosition);
+    const color255 = this.device.readPixelsToArrayWebGL(framebuffer, {
+      sourceX: pickX,
+      sourceY: pickY,
+      sourceWidth: 1,
+      sourceHeight: 1
+    });
+    let highlightedObjectColor = [...color255].map((x) => x / 255);
+    const isHighlightActive = highlightedObjectColor[0] + highlightedObjectColor[1] + highlightedObjectColor[2] > 0;
+    if (!isHighlightActive) {
+      highlightedObjectColor = null;
+    }
+    this.shaderInputs.setProps({
+      picking: { isActive: false, highlightedObjectColor }
+    });
+  }
+  /**
+   * Get pick position in device pixel range
+   * use the center pixel location in device pixel range
+   */
+  getPickPosition(mousePosition) {
+    const devicePixels = this.device.getCanvasContext().cssToDevicePixels(mousePosition);
+    const pickX = devicePixels.x + Math.floor(devicePixels.width / 2);
+    const pickY = devicePixels.y + Math.floor(devicePixels.height / 2);
+    return [pickX, pickY];
+  }
+};
 //# sourceMappingURL=index.cjs.map