@luma.gl/engine 9.3.0-alpha.2 → 9.3.0-alpha.6

package/dist/index.cjs

@@ -246,15 +246,25 @@ var import_core = require("@luma.gl/core");
 
 // dist/animation-loop/request-animation-frame.js
 function requestAnimationFramePolyfill(callback) {
-  return typeof window !== "undefined" && window.requestAnimationFrame ? window.requestAnimationFrame(callback) : setTimeout(callback, 1e3 / 60);
+  const browserRequestAnimationFrame = typeof window !== "undefined" ? window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame : null;
+  if (browserRequestAnimationFrame) {
+    return browserRequestAnimationFrame.call(window, callback);
+  }
+  return setTimeout(() => callback(typeof performance !== "undefined" ? performance.now() : Date.now()), 1e3 / 60);
 }
 function cancelAnimationFramePolyfill(timerId) {
-  return typeof window !== "undefined" && window.cancelAnimationFrame ? window.cancelAnimationFrame(timerId) : clearTimeout(timerId);
+  const browserCancelAnimationFrame = typeof window !== "undefined" ? window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame : null;
+  if (browserCancelAnimationFrame) {
+    browserCancelAnimationFrame.call(window, timerId);
+    return;
+  }
+  clearTimeout(timerId);
 }
 
 // dist/animation-loop/animation-loop.js
 var import_stats = require("@probe.gl/stats");
 var statIdCounter = 0;
+var ANIMATION_LOOP_STATS = "Animation Loop";
 var _AnimationLoop = class {
   device = null;
   canvas = null;
@@ -262,6 +272,7 @@ var _AnimationLoop = class {
   animationProps = null;
   timeline = null;
   stats;
+  sharedStats;
   cpuTime;
   gpuTime;
   frameRate;
@@ -274,7 +285,7 @@ var _AnimationLoop = class {
   _resolveNextFrame = null;
   _cpuStartTime = 0;
   _error = null;
-  // _gpuTimeQuery: Query | null = null;
+  _lastFrameTime = 0;
   /*
    * @param {HTMLCanvasElement} canvas - if provided, width and height will be passed to context
    */
@@ -284,10 +295,12 @@ var _AnimationLoop = class {
     if (!props.device) {
       throw new Error("No device provided");
     }
-    this.stats = props.stats || new import_stats.Stats({ id: "animation-loop-stats" });
+    this.stats = props.stats || new import_stats.Stats({ id: `animation-loop-${statIdCounter++}` });
+    this.sharedStats = import_core.luma.stats.get(ANIMATION_LOOP_STATS);
+    this.frameRate = this.stats.get("Frame Rate");
+    this.frameRate.setSampleSize(1);
     this.cpuTime = this.stats.get("CPU Time");
     this.gpuTime = this.stats.get("GPU Time");
-    this.frameRate = this.stats.get("Frame Rate");
     this.setProps({ autoResizeViewport: props.autoResizeViewport });
     this.start = this.start.bind(this);
     this.stop = this.stop.bind(this);
@@ -295,8 +308,10 @@ var _AnimationLoop = class {
     this._onMouseleave = this._onMouseleave.bind(this);
   }
   destroy() {
+    var _a;
     this.stop();
     this._setDisplay(null);
+    (_a = this.device) == null ? void 0 : _a._disableDebugGPUTime();
   }
   /** @deprecated Use .destroy() */
   delete() {
@@ -361,16 +376,17 @@ var _AnimationLoop = class {
       this._nextFramePromise = null;
       this._resolveNextFrame = null;
       this._running = false;
+      this._lastFrameTime = 0;
     }
     return this;
   }
   /** Explicitly draw a frame */
-  redraw() {
+  redraw(time) {
     var _a;
     if (((_a = this.device) == null ? void 0 : _a.isLost) || this._error) {
       return this;
     }
-    this._beginFrameTimers();
+    this._beginFrameTimers(time);
     this._setupFrame();
     this._updateAnimationProps();
     this._renderFrame(this._getAnimationProps());
@@ -413,10 +429,12 @@ var _AnimationLoop = class {
   }
   // PRIVATE METHODS
   _initialize() {
+    var _a;
     this._startEventHandling();
     this._initializeAnimationProps();
     this._updateAnimationProps();
     this._resizeViewport();
+    (_a = this.device) == null ? void 0 : _a._enableDebugGPUTime();
   }
   _setDisplay(display) {
     if (this.display) {
@@ -441,11 +459,11 @@ var _AnimationLoop = class {
     cancelAnimationFramePolyfill(this._animationFrameId);
     this._animationFrameId = null;
   }
-  _animationFrame() {
+  _animationFrame(time) {
     if (!this._running) {
       return;
     }
-    this.redraw();
+    this.redraw(time);
     this._requestAnimationFrame();
   }
   // Called on each frame, can be overridden to call onRender multiple times
@@ -558,18 +576,11 @@ var _AnimationLoop = class {
     }
   }
   _getSizeAndAspect() {
-    var _a, _b;
     if (!this.device) {
       return { width: 1, height: 1, aspect: 1 };
     }
-    const [width, height] = ((_a = this.device) == null ? void 0 : _a.getDefaultCanvasContext().getDevicePixelSize()) || [1, 1];
-    let aspect = 1;
-    const canvas2 = (_b = this.device) == null ? void 0 : _b.getDefaultCanvasContext().canvas;
-    if (canvas2 && canvas2.clientHeight) {
-      aspect = canvas2.clientWidth / canvas2.clientHeight;
-    } else if (width > 0 && height > 0) {
-      aspect = width / height;
-    }
+    const [width, height] = this.device.getDefaultCanvasContext().getDrawingBufferSize();
+    const aspect = width > 0 && height > 0 ? width / height : 1;
     return { width, height, aspect };
   }
   /** @deprecated Default viewport setup */
@@ -585,13 +596,63 @@ var _AnimationLoop = class {
       );
     }
   }
-  _beginFrameTimers() {
-    this.frameRate.timeEnd();
-    this.frameRate.timeStart();
+  _beginFrameTimers(time) {
+    var _a;
+    const now = time ?? (typeof performance !== "undefined" ? performance.now() : Date.now());
+    if (this._lastFrameTime) {
+      const frameTime = now - this._lastFrameTime;
+      if (frameTime > 0) {
+        this.frameRate.addTime(frameTime);
+      }
+    }
+    this._lastFrameTime = now;
+    if ((_a = this.device) == null ? void 0 : _a._isDebugGPUTimeEnabled()) {
+      this._consumeEncodedGpuTime();
+    }
     this.cpuTime.timeStart();
   }
   _endFrameTimers() {
+    var _a;
+    if ((_a = this.device) == null ? void 0 : _a._isDebugGPUTimeEnabled()) {
+      this._consumeEncodedGpuTime();
+    }
     this.cpuTime.timeEnd();
+    this._updateSharedStats();
+  }
+  _consumeEncodedGpuTime() {
+    if (!this.device) {
+      return;
+    }
+    const gpuTimeMs = this.device.commandEncoder._gpuTimeMs;
+    if (gpuTimeMs !== void 0) {
+      this.gpuTime.addTime(gpuTimeMs);
+      this.device.commandEncoder._gpuTimeMs = void 0;
+    }
+  }
+  _updateSharedStats() {
+    if (this.stats === this.sharedStats) {
+      return;
+    }
+    for (const name of Object.keys(this.sharedStats.stats)) {
+      if (!this.stats.stats[name]) {
+        delete this.sharedStats.stats[name];
+      }
+    }
+    this.stats.forEach((sourceStat) => {
+      const targetStat = this.sharedStats.get(sourceStat.name, sourceStat.type);
+      targetStat.sampleSize = sourceStat.sampleSize;
+      targetStat.time = sourceStat.time;
+      targetStat.count = sourceStat.count;
+      targetStat.samples = sourceStat.samples;
+      targetStat.lastTiming = sourceStat.lastTiming;
+      targetStat.lastSampleTime = sourceStat.lastSampleTime;
+      targetStat.lastSampleCount = sourceStat.lastSampleCount;
+      targetStat._count = sourceStat._count;
+      targetStat._time = sourceStat._time;
+      targetStat._samples = sourceStat._samples;
+      targetStat._startTime = sourceStat._startTime;
+      targetStat._timerPending = sourceStat._timerPending;
+    });
   }
   // Event handling
   _startEventHandling() {
@@ -620,7 +681,7 @@ __publicField(AnimationLoop, "defaultAnimationLoopProps", {
   },
   onError: (error) => console.error(error),
   // eslint-disable-line no-console
-  stats: import_core.luma.stats.get(`animation-loop-${statIdCounter++}`),
+  stats: void 0,
   // view parameters
   autoResizeViewport: false
 });
@@ -653,7 +714,10 @@ function makeAnimationLoop(AnimationLoopTemplateCtor, props) {
 }
 function setError(device, error) {
   var _a;
-  const canvas2 = device == null ? void 0 : device.getDefaultCanvasContext().canvas;
+  if (!device) {
+    return;
+  }
+  const canvas2 = device.getDefaultCanvasContext().canvas;
   if (canvas2 instanceof HTMLCanvasElement) {
     canvas2.style.overflow = "visible";
     let errorDiv = document.getElementById("animation-loop-error");
@@ -670,6 +734,9 @@ function setError(device, error) {
   }
 }
 function clearError(device) {
+  if (!device) {
+    return;
+  }
   const errorDiv = document.getElementById("animation-loop-error");
   if (errorDiv) {
     errorDiv.remove();
@@ -798,13 +865,11 @@ var _PipelineFactory = class {
     return moduleData.defaultPipelineFactory;
   }
   device;
-  cachingEnabled;
-  destroyPolicy;
-  debug;
   _hashCounter = 0;
   _hashes = {};
   _renderPipelineCache = {};
   _computePipelineCache = {};
+  _sharedRenderPipelineCache = {};
   get [Symbol.toStringTag]() {
     return "PipelineFactory";
   }
@@ -813,34 +878,33 @@ var _PipelineFactory = class {
   }
   constructor(device) {
     this.device = device;
-    this.cachingEnabled = device.props._cachePipelines;
-    this.destroyPolicy = device.props._cacheDestroyPolicy;
-    this.debug = device.props.debugFactories;
   }
   /** Return a RenderPipeline matching supplied props. Reuses an equivalent pipeline if already created. */
   createRenderPipeline(props) {
     var _a;
-    if (!this.cachingEnabled) {
+    if (!this.device.props._cachePipelines) {
       return this.device.createRenderPipeline(props);
     }
     const allProps = { ...import_core4.RenderPipeline.defaultProps, ...props };
     const cache = this._renderPipelineCache;
     const hash = this._hashRenderPipeline(allProps);
-    let pipeline = (_a = cache[hash]) == null ? void 0 : _a.pipeline;
+    let pipeline = (_a = cache[hash]) == null ? void 0 : _a.resource;
     if (!pipeline) {
+      const sharedRenderPipeline = this.device.type === "webgl" && this.device.props._sharePipelines ? this.createSharedRenderPipeline(allProps) : void 0;
       pipeline = this.device.createRenderPipeline({
         ...allProps,
-        id: allProps.id ? `${allProps.id}-cached` : uid("unnamed-cached")
+        id: allProps.id ? `${allProps.id}-cached` : uid("unnamed-cached"),
+        _sharedRenderPipeline: sharedRenderPipeline
       });
       pipeline.hash = hash;
-      cache[hash] = { pipeline, useCount: 1 };
-      if (this.debug) {
+      cache[hash] = { resource: pipeline, useCount: 1 };
+      if (this.device.props.debugFactories) {
         import_core4.log.log(3, `${this}: ${pipeline} created, count=${cache[hash].useCount}`)();
       }
     } else {
       cache[hash].useCount++;
-      if (this.debug) {
-        import_core4.log.log(3, `${this}: ${cache[hash].pipeline} reused, count=${cache[hash].useCount}, (id=${props.id})`)();
+      if (this.device.props.debugFactories) {
+        import_core4.log.log(3, `${this}: ${cache[hash].resource} reused, count=${cache[hash].useCount}, (id=${props.id})`)();
       }
     }
     return pipeline;
@@ -848,33 +912,33 @@ var _PipelineFactory = class {
   /** Return a ComputePipeline matching supplied props. Reuses an equivalent pipeline if already created. */
   createComputePipeline(props) {
     var _a;
-    if (!this.cachingEnabled) {
+    if (!this.device.props._cachePipelines) {
       return this.device.createComputePipeline(props);
     }
     const allProps = { ...import_core4.ComputePipeline.defaultProps, ...props };
     const cache = this._computePipelineCache;
     const hash = this._hashComputePipeline(allProps);
-    let pipeline = (_a = cache[hash]) == null ? void 0 : _a.pipeline;
+    let pipeline = (_a = cache[hash]) == null ? void 0 : _a.resource;
     if (!pipeline) {
       pipeline = this.device.createComputePipeline({
         ...allProps,
         id: allProps.id ? `${allProps.id}-cached` : void 0
       });
       pipeline.hash = hash;
-      cache[hash] = { pipeline, useCount: 1 };
-      if (this.debug) {
+      cache[hash] = { resource: pipeline, useCount: 1 };
+      if (this.device.props.debugFactories) {
         import_core4.log.log(3, `${this}: ${pipeline} created, count=${cache[hash].useCount}`)();
       }
     } else {
       cache[hash].useCount++;
-      if (this.debug) {
-        import_core4.log.log(3, `${this}: ${cache[hash].pipeline} reused, count=${cache[hash].useCount}, (id=${props.id})`)();
+      if (this.device.props.debugFactories) {
+        import_core4.log.log(3, `${this}: ${cache[hash].resource} reused, count=${cache[hash].useCount}, (id=${props.id})`)();
       }
     }
     return pipeline;
   }
   release(pipeline) {
-    if (!this.cachingEnabled) {
+    if (!this.device.props._cachePipelines) {
       pipeline.destroy();
       return;
     }
@@ -883,28 +947,55 @@ var _PipelineFactory = class {
     cache[hash].useCount--;
     if (cache[hash].useCount === 0) {
       this._destroyPipeline(pipeline);
-      if (this.debug) {
+      if (this.device.props.debugFactories) {
         import_core4.log.log(3, `${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) {
+    } else if (this.device.props.debugFactories) {
       import_core4.log.log(3, `${this}: ${pipeline} released, count=${cache[hash].useCount}`)();
     }
   }
+  createSharedRenderPipeline(props) {
+    const sharedPipelineHash = this._hashSharedRenderPipeline(props);
+    let sharedCacheItem = this._sharedRenderPipelineCache[sharedPipelineHash];
+    if (!sharedCacheItem) {
+      const sharedRenderPipeline = this.device._createSharedRenderPipelineWebGL(props);
+      sharedCacheItem = { resource: sharedRenderPipeline, useCount: 0 };
+      this._sharedRenderPipelineCache[sharedPipelineHash] = sharedCacheItem;
+    }
+    sharedCacheItem.useCount++;
+    return sharedCacheItem.resource;
+  }
+  releaseSharedRenderPipeline(pipeline) {
+    if (!pipeline.sharedRenderPipeline) {
+      return;
+    }
+    const sharedPipelineHash = this._hashSharedRenderPipeline(pipeline.sharedRenderPipeline.props);
+    const sharedCacheItem = this._sharedRenderPipelineCache[sharedPipelineHash];
+    if (!sharedCacheItem) {
+      return;
+    }
+    sharedCacheItem.useCount--;
+    if (sharedCacheItem.useCount === 0) {
+      sharedCacheItem.resource.destroy();
+      delete this._sharedRenderPipelineCache[sharedPipelineHash];
+    }
+  }
   // PRIVATE
-  /** Destroy a cached pipeline, removing it from the cache (depending on destroy policy) */
+  /** Destroy a cached pipeline, removing it from the cache if configured to do so. */
   _destroyPipeline(pipeline) {
     const cache = this._getCache(pipeline);
-    switch (this.destroyPolicy) {
-      case "never":
-        return false;
-      case "unused":
-        delete cache[pipeline.hash];
-        pipeline.destroy();
-        return true;
+    if (!this.device.props._destroyPipelines) {
+      return false;
     }
+    delete cache[pipeline.hash];
+    pipeline.destroy();
+    if (pipeline instanceof import_core4.RenderPipeline) {
+      this.releaseSharedRenderPipeline(pipeline);
+    }
+    return true;
   }
   /** Get the appropriate cache for the type of pipeline */
   _getCache(pipeline) {
@@ -933,24 +1024,35 @@ var _PipelineFactory = class {
   _hashRenderPipeline(props) {
     const vsHash = props.vs ? this._getHash(props.vs.source) : 0;
     const fsHash = props.fs ? this._getHash(props.fs.source) : 0;
-    const varyingHash = "-";
+    const varyingHash = this._getWebGLVaryingHash(props);
     const bufferLayoutHash = this._getHash(JSON.stringify(props.bufferLayout));
     const { type } = this.device;
     switch (type) {
       case "webgl":
-        return `${type}/R/${vsHash}/${fsHash}V${varyingHash}BL${bufferLayoutHash}`;
+        const webglParameterHash = this._getHash(JSON.stringify(props.parameters));
+        return `${type}/R/${vsHash}/${fsHash}V${varyingHash}T${props.topology}P${webglParameterHash}BL${bufferLayoutHash}`;
       case "webgpu":
       default:
         const parameterHash = this._getHash(JSON.stringify(props.parameters));
         return `${type}/R/${vsHash}/${fsHash}V${varyingHash}T${props.topology}P${parameterHash}BL${bufferLayoutHash}`;
     }
   }
+  _hashSharedRenderPipeline(props) {
+    const vsHash = props.vs ? this._getHash(props.vs.source) : 0;
+    const fsHash = props.fs ? this._getHash(props.fs.source) : 0;
+    const varyingHash = this._getWebGLVaryingHash(props);
+    return `webgl/S/${vsHash}/${fsHash}V${varyingHash}`;
+  }
   _getHash(key) {
     if (this._hashes[key] === void 0) {
       this._hashes[key] = this._hashCounter++;
     }
     return this._hashes[key];
   }
+  _getWebGLVaryingHash(props) {
+    const { varyings = [], bufferMode = null } = props;
+    return this._getHash(JSON.stringify({ varyings, bufferMode }));
+  }
 };
 var PipelineFactory = _PipelineFactory;
 __publicField(PipelineFactory, "defaultProps", { ...import_core4.RenderPipeline.defaultProps });
@@ -965,9 +1067,6 @@ var _ShaderFactory = class {
     return moduleData.defaultShaderFactory;
   }
   device;
-  cachingEnabled;
-  destroyPolicy;
-  debug;
   _cache = {};
   get [Symbol.toStringTag]() {
     return "ShaderFactory";
@@ -978,37 +1077,34 @@ var _ShaderFactory = class {
   /** @internal */
   constructor(device) {
     this.device = device;
-    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) {
+    if (!this.device.props._cacheShaders) {
       return this.device.createShader(props);
     }
     const key = this._hashShader(props);
     let cacheEntry = this._cache[key];
     if (!cacheEntry) {
-      const shader = this.device.createShader({
+      const resource = this.device.createShader({
         ...props,
         id: props.id ? `${props.id}-cached` : void 0
       });
-      this._cache[key] = cacheEntry = { shader, useCount: 1 };
-      if (this.debug) {
-        import_core5.log.log(3, `${this}: Created new shader ${shader.id}`)();
+      this._cache[key] = cacheEntry = { resource, useCount: 1 };
+      if (this.device.props.debugFactories) {
+        import_core5.log.log(3, `${this}: Created new shader ${resource.id}`)();
       }
     } else {
       cacheEntry.useCount++;
-      if (this.debug) {
-        import_core5.log.log(3, `${this}: Reusing shader ${cacheEntry.shader.id} count=${cacheEntry.useCount}`)();
+      if (this.device.props.debugFactories) {
+        import_core5.log.log(3, `${this}: Reusing shader ${cacheEntry.resource.id} count=${cacheEntry.useCount}`)();
       }
     }
-    return cacheEntry.shader;
+    return cacheEntry.resource;
   }
   /** Releases a previously-requested {@link Shader}, destroying it if no users remain. */
   release(shader) {
-    if (!this.cachingEnabled) {
+    if (!this.device.props._cacheShaders) {
       shader.destroy();
       return;
     }
@@ -1017,16 +1113,16 @@ var _ShaderFactory = class {
     if (cacheEntry) {
       cacheEntry.useCount--;
       if (cacheEntry.useCount === 0) {
-        if (this.destroyPolicy === "unused") {
+        if (this.device.props._destroyShaders) {
           delete this._cache[key];
-          cacheEntry.shader.destroy();
-          if (this.debug) {
+          cacheEntry.resource.destroy();
+          if (this.device.props.debugFactories) {
             import_core5.log.log(3, `${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) {
+      } else if (this.device.props.debugFactories) {
         import_core5.log.log(3, `${this}: Releasing shader ${shader.id} count=${cacheEntry.useCount}`)();
       }
     }
@@ -1175,14 +1271,24 @@ var BufferLayoutHelper = class {
 };
 
 // dist/utils/buffer-layout-order.js
+function getMinLocation(attributeNames, shaderLayoutMap) {
+  let minLocation = Infinity;
+  for (const name of attributeNames) {
+    const location = shaderLayoutMap[name];
+    if (location !== void 0) {
+      minLocation = Math.min(minLocation, location);
+    }
+  }
+  return minLocation;
+}
 function sortedBufferLayoutByShaderSourceLocations(shaderLayout, bufferLayout) {
   const shaderLayoutMap = Object.fromEntries(shaderLayout.attributes.map((attr) => [attr.name, attr.location]));
   const sortedLayout = bufferLayout.slice();
   sortedLayout.sort((a, b) => {
     const attributeNamesA = a.attributes ? a.attributes.map((attr) => attr.attribute) : [a.name];
     const attributeNamesB = b.attributes ? b.attributes.map((attr) => attr.attribute) : [b.name];
-    const minLocationA = Math.min(...attributeNamesA.map((name) => shaderLayoutMap[name]));
-    const minLocationB = Math.min(...attributeNamesB.map((name) => shaderLayoutMap[name]));
+    const minLocationA = getMinLocation(attributeNamesA, shaderLayoutMap);
+    const minLocationB = getMinLocation(attributeNamesB, shaderLayoutMap);
     return minLocationA - minLocationB;
   });
   return sortedLayout;
@@ -1384,6 +1490,13 @@ function getTextureMipLevelSize(data) {
 function isTextureImageData(data) {
   return typeof data === "object" && data !== null && "data" in data && "width" in data && "height" in data;
 }
+function resolveTextureImageFormat(data) {
+  const { textureFormat, format } = data;
+  if (textureFormat && format && textureFormat !== format) {
+    throw new Error(`Conflicting texture formats "${textureFormat}" and "${format}" provided for the same mip level`);
+  }
+  return textureFormat ?? format;
+}
 function getCubeFaceIndex(face) {
   const idx = TEXTURE_CUBE_FACE_MAP[face];
   if (idx === void 0)
@@ -1416,6 +1529,7 @@ function getTexture2DSubresources(slice, lodData) {
       subresources.push({
         type: "texture-data",
         data: imageData,
+        textureFormat: resolveTextureImageFormat(imageData),
         z,
         mipLevel
       });
@@ -1452,7 +1566,7 @@ function getTextureCubeArraySubresources(data) {
   data.forEach((cubeData, cubeIndex) => {
     for (const [face, faceData] of Object.entries(cubeData)) {
       const faceDepth = getCubeArrayFaceIndex(cubeIndex, face);
-      getTexture2DSubresources(faceDepth, faceData);
+      subresources.push(...getTexture2DSubresources(faceDepth, faceData));
     }
   });
   return subresources;
@@ -1514,6 +1628,9 @@ var _DynamicTexture = class {
     try {
       const propsWithSyncData = await this._loadAllData(originalPropsWithAsyncData);
       this._checkNotDestroyed();
+      const subresources = propsWithSyncData.data ? getTextureSubresources(propsWithSyncData) : [];
+      const userProvidedFormat = "format" in originalPropsWithAsyncData && originalPropsWithAsyncData.format !== void 0;
+      const userProvidedUsage = "usage" in originalPropsWithAsyncData && originalPropsWithAsyncData.usage !== void 0;
       const deduceSize = () => {
         if (this.props.width && this.props.height) {
           return { width: this.props.width, height: this.props.height };
@@ -1528,45 +1645,39 @@ var _DynamicTexture = class {
       if (!size || size.width <= 0 || size.height <= 0) {
         throw new Error(`${this} size could not be determined or was zero`);
       }
+      const textureData = analyzeTextureSubresources(this.device, subresources, size, {
+        format: userProvidedFormat ? originalPropsWithAsyncData.format : void 0
+      });
+      const resolvedFormat = textureData.format ?? this.props.format;
       const baseTextureProps = {
         ...this.props,
         ...size,
+        format: resolvedFormat,
         mipLevels: 1,
         // temporary; updated below
         data: void 0
       };
+      if (this.device.isTextureFormatCompressed(resolvedFormat) && !userProvidedUsage) {
+        baseTextureProps.usage = import_core9.Texture.SAMPLE | import_core9.Texture.COPY_DST;
+      }
+      const shouldGenerateMipmaps = this.props.mipmaps && !textureData.hasExplicitMipChain && !this.device.isTextureFormatCompressed(resolvedFormat);
+      if (this.device.type === "webgpu" && shouldGenerateMipmaps) {
+        const requiredUsage = this.props.dimension === "3d" ? import_core9.Texture.SAMPLE | import_core9.Texture.STORAGE | import_core9.Texture.COPY_DST | import_core9.Texture.COPY_SRC : import_core9.Texture.SAMPLE | import_core9.Texture.RENDER | import_core9.Texture.COPY_DST | import_core9.Texture.COPY_SRC;
+        baseTextureProps.usage |= requiredUsage;
+      }
       const maxMips = this.device.getMipLevelCount(baseTextureProps.width, baseTextureProps.height);
-      const desired = this.props.mipLevels === "auto" ? maxMips : Math.max(1, Math.min(maxMips, this.props.mipLevels ?? 1));
+      const desired = textureData.hasExplicitMipChain ? textureData.mipLevels : this.props.mipLevels === "auto" ? maxMips : Math.max(1, Math.min(maxMips, this.props.mipLevels ?? 1));
       const finalTextureProps = { ...baseTextureProps, mipLevels: desired };
       this._texture = this.device.createTexture(finalTextureProps);
       this._sampler = this.texture.sampler;
       this._view = this.texture.view;
-      if (propsWithSyncData.data) {
-        switch (propsWithSyncData.dimension) {
-          case "1d":
-            this.setTexture1DData(propsWithSyncData.data);
-            break;
-          case "2d":
-            this.setTexture2DData(propsWithSyncData.data);
-            break;
-          case "3d":
-            this.setTexture3DData(propsWithSyncData.data);
-            break;
-          case "2d-array":
-            this.setTextureArrayData(propsWithSyncData.data);
-            break;
-          case "cube":
-            this.setTextureCubeData(propsWithSyncData.data);
-            break;
-          case "cube-array":
-            this.setTextureCubeArrayData(propsWithSyncData.data);
-            break;
-          default: {
-            throw new Error(`Unhandled dimension ${propsWithSyncData.dimension}`);
-          }
-        }
+      if (textureData.subresources.length) {
+        this._setTextureSubresources(textureData.subresources);
+      }
+      if (this.props.mipmaps && !textureData.hasExplicitMipChain && !shouldGenerateMipmaps) {
+        import_core9.log.warn(`${this} skipping auto-generated mipmaps for compressed texture format`)();
       }
-      if (this.props.mipmaps) {
+      if (shouldGenerateMipmaps) {
         this.generateMipmaps();
       }
       this.isReady = true;
@@ -1590,8 +1701,10 @@ var _DynamicTexture = class {
   generateMipmaps() {
     if (this.device.type === "webgl") {
       this.texture.generateMipmapsWebGL();
+    } else if (this.device.type === "webgpu") {
+      this.device.generateMipmapsWebGPU(this.texture);
     } else {
-      import_core9.log.warn("Mipmap generation not yet implemented on WebGPU: your texture data will not be correctly initialized");
+      import_core9.log.warn(`${this} mipmaps not supported on ${this.device.type}`);
     }
   }
   /** Set sampler or create one from props */
@@ -1689,8 +1802,19 @@ var _DynamicTexture = class {
           this.texture.copyExternalImage({ image, z, mipLevel, flipY });
           break;
         case "texture-data":
-          const { data } = subresource;
-          this.texture.copyImageData({ data: data.data, z, mipLevel });
+          const { data, textureFormat } = subresource;
+          if (textureFormat && textureFormat !== this.texture.format) {
+            throw new Error(`${this} mip level ${mipLevel} uses format "${textureFormat}" but texture format is "${this.texture.format}"`);
+          }
+          this.texture.writeData(data.data, {
+            x: 0,
+            y: 0,
+            z,
+            width: data.width,
+            height: data.height,
+            depthOrArrayLayers: 1,
+            mipLevel
+          });
           break;
         default:
           throw new Error("Unsupported 2D mip-level payload");
@@ -1722,6 +1846,134 @@ __publicField(DynamicTexture, "defaultProps", {
   data: null,
   mipmaps: false
 });
+function getTextureSubresources(props) {
+  if (!props.data) {
+    return [];
+  }
+  switch (props.dimension) {
+    case "1d":
+      return getTexture1DSubresources(props.data);
+    case "2d":
+      return getTexture2DSubresources(0, props.data);
+    case "3d":
+      return getTexture3DSubresources(props.data);
+    case "2d-array":
+      return getTextureArraySubresources(props.data);
+    case "cube":
+      return getTextureCubeSubresources(props.data);
+    case "cube-array":
+      return getTextureCubeArraySubresources(props.data);
+    default:
+      throw new Error(`Unhandled dimension ${props.dimension}`);
+  }
+}
+function analyzeTextureSubresources(device, subresources, size, options) {
+  if (subresources.length === 0) {
+    return {
+      subresources,
+      mipLevels: 1,
+      format: options.format,
+      hasExplicitMipChain: false
+    };
+  }
+  const groupedSubresources = /* @__PURE__ */ new Map();
+  for (const subresource of subresources) {
+    const group = groupedSubresources.get(subresource.z) ?? [];
+    group.push(subresource);
+    groupedSubresources.set(subresource.z, group);
+  }
+  const hasExplicitMipChain = subresources.some((subresource) => subresource.mipLevel > 0);
+  let resolvedFormat = options.format;
+  let resolvedMipLevels = Number.POSITIVE_INFINITY;
+  const validSubresources = [];
+  for (const [z, sliceSubresources] of groupedSubresources) {
+    const sortedSubresources = [...sliceSubresources].sort((left, right) => left.mipLevel - right.mipLevel);
+    const baseLevel = sortedSubresources[0];
+    if (!baseLevel || baseLevel.mipLevel !== 0) {
+      throw new Error(`DynamicTexture: slice ${z} is missing mip level 0`);
+    }
+    const baseSize = getTextureSubresourceSize(device, baseLevel);
+    if (baseSize.width !== size.width || baseSize.height !== size.height) {
+      throw new Error(`DynamicTexture: slice ${z} base level dimensions ${baseSize.width}x${baseSize.height} do not match expected ${size.width}x${size.height}`);
+    }
+    const baseFormat = getTextureSubresourceFormat(baseLevel);
+    if (baseFormat) {
+      if (resolvedFormat && resolvedFormat !== baseFormat) {
+        throw new Error(`DynamicTexture: slice ${z} base level format "${baseFormat}" does not match texture format "${resolvedFormat}"`);
+      }
+      resolvedFormat = baseFormat;
+    }
+    const mipLevelLimit = resolvedFormat && device.isTextureFormatCompressed(resolvedFormat) ? (
+      // Block-compressed formats cannot have mips smaller than a single compression block.
+      getMaxCompressedMipLevels(device, baseSize.width, baseSize.height, resolvedFormat)
+    ) : device.getMipLevelCount(baseSize.width, baseSize.height);
+    let validMipLevelsForSlice = 0;
+    for (let expectedMipLevel = 0; expectedMipLevel < sortedSubresources.length; expectedMipLevel++) {
+      const subresource = sortedSubresources[expectedMipLevel];
+      if (!subresource || subresource.mipLevel !== expectedMipLevel) {
+        break;
+      }
+      if (expectedMipLevel >= mipLevelLimit) {
+        break;
+      }
+      const subresourceSize = getTextureSubresourceSize(device, subresource);
+      const expectedWidth = Math.max(1, baseSize.width >> expectedMipLevel);
+      const expectedHeight = Math.max(1, baseSize.height >> expectedMipLevel);
+      if (subresourceSize.width !== expectedWidth || subresourceSize.height !== expectedHeight) {
+        break;
+      }
+      const subresourceFormat = getTextureSubresourceFormat(subresource);
+      if (subresourceFormat) {
+        if (!resolvedFormat) {
+          resolvedFormat = subresourceFormat;
+        }
+        if (subresourceFormat !== resolvedFormat) {
+          break;
+        }
+      }
+      validMipLevelsForSlice++;
+      validSubresources.push(subresource);
+    }
+    resolvedMipLevels = Math.min(resolvedMipLevels, validMipLevelsForSlice);
+  }
+  const mipLevels = Number.isFinite(resolvedMipLevels) ? Math.max(1, resolvedMipLevels) : 1;
+  return {
+    // Keep every slice trimmed to the same mip count so the texture shape stays internally consistent.
+    subresources: validSubresources.filter((subresource) => subresource.mipLevel < mipLevels),
+    mipLevels,
+    format: resolvedFormat,
+    hasExplicitMipChain
+  };
+}
+function getTextureSubresourceFormat(subresource) {
+  if (subresource.type !== "texture-data") {
+    return void 0;
+  }
+  return subresource.textureFormat ?? resolveTextureImageFormat(subresource.data);
+}
+function getTextureSubresourceSize(device, subresource) {
+  switch (subresource.type) {
+    case "external-image":
+      return device.getExternalImageSize(subresource.image);
+    case "texture-data":
+      return { width: subresource.data.width, height: subresource.data.height };
+    default:
+      throw new Error("Unsupported texture subresource");
+  }
+}
+function getMaxCompressedMipLevels(device, baseWidth, baseHeight, format) {
+  const { blockWidth = 1, blockHeight = 1 } = device.getTextureFormatInfo(format);
+  let mipLevels = 1;
+  for (let mipLevel = 1; ; mipLevel++) {
+    const width = Math.max(1, baseWidth >> mipLevel);
+    const height = Math.max(1, baseHeight >> mipLevel);
+    if (width < blockWidth || height < blockHeight) {
+      break;
+    }
+    mipLevels++;
+  }
+  return mipLevels;
+}
 async function awaitAllPromises(x) {
   x = await x;
   if (Array.isArray(x)) {
@@ -1897,7 +2149,7 @@ var _Model = class {
     if (!this._destroyed) {
       this.pipelineFactory.release(this.pipeline);
       this.shaderFactory.release(this.pipeline.vs);
-      if (this.pipeline.fs) {
+      if (this.pipeline.fs && this.pipeline.fs !== this.pipeline.vs) {
         this.shaderFactory.release(this.pipeline.fs);
       }
       this._uniformStore.destroy();
@@ -1947,9 +2199,6 @@ var _Model = class {
       this._logDrawCallStart();
       this.pipeline = this._updatePipeline();
       const syncBindings = this._getBindings();
-      this.pipeline.setBindings(syncBindings, {
-        disableWarnings: this.props.disableWarnings
-      });
       const { indexBuffer } = this.vertexArray;
       const indexCount = indexBuffer ? indexBuffer.byteLength / (indexBuffer.indexType === "uint32" ? 4 : 2) : void 0;
       drawSuccess = this.pipeline.draw({
@@ -1960,6 +2209,11 @@ var _Model = class {
         instanceCount: this.instanceCount,
         indexCount,
         transformFeedback: this.transformFeedback || void 0,
+        // Pipelines may be shared across models when caching is enabled, so bindings
+        // and WebGL uniforms must be supplied on every draw instead of being stored
+        // on the pipeline instance.
+        bindings: syncBindings,
+        uniforms: this.props.uniforms,
         // WebGL shares underlying cached pipelines even for models that have different parameters and topology,
         // so we must provide our unique parameters to each draw
         // (In WebGPU most parameters are encoded in the pipeline and cannot be changed per draw call)
@@ -2259,8 +2513,9 @@ var _Model = class {
       this._attributeInfos = (0, import_core10.getAttributeInfosFromLayouts)(this.pipeline.shaderLayout, this.bufferLayout);
       if (prevShaderVs)
         this.shaderFactory.release(prevShaderVs);
-      if (prevShaderFs)
+      if (prevShaderFs && prevShaderFs !== prevShaderVs) {
         this.shaderFactory.release(prevShaderFs);
+      }
     }
     return this.pipeline;
   }
@@ -2344,6 +2599,8 @@ __publicField(Model, "defaultProps", {
   indexBuffer: null,
   attributes: {},
   constantAttributes: {},
+  bindings: {},
+  uniforms: {},
   varyings: [],
   isInstanced: void 0,
   instanceCount: 0,
@@ -2648,9 +2905,9 @@ var Geometry = class {
 var CLIPSPACE_VERTEX_SHADER_WGSL = (
   /* wgsl */
   `struct VertexInputs {
-  @location(0) clipSpacePosition: vec2<f32>,
-  @location(1) texCoord: vec2<f32>,
-  @location(2) coordinate: vec2<f32>  
+  @location(0) clipSpacePositions: vec2<f32>,
+  @location(1) texCoords: vec2<f32>,
+  @location(2) coordinates: vec2<f32>
 }
 
 struct FragmentInputs {
@@ -2663,10 +2920,10 @@ struct FragmentInputs {
 @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;
+  outputs.Position = vec4(inputs.clipSpacePositions, 0., 1.);
+  outputs.position = inputs.clipSpacePositions;
+  outputs.coordinate = inputs.coordinates;
+  outputs.uv = inputs.texCoords;
   return outputs;
 }
 `
@@ -2732,15 +2989,15 @@ struct backgroundUniforms {
 };
 @group(0) @binding(2) var<uniform> background: backgroundUniforms;
 
-fn billboardTexture_getTextureUV(coordinates: vec2<f32>) -> vec2<f32> {
+fn billboardTexture_getTextureUV(uv: vec2<f32>) -> vec2<f32> {
         let scale: vec2<f32> = background.scale;
-        var position: vec2<f32> = (coordinates - vec2<f32>(0.5, 0.5)) / scale + vec2<f32>(0.5, 0.5);
+        var position: vec2<f32> = (uv - vec2<f32>(0.5, 0.5)) / scale + vec2<f32>(0.5, 0.5);
         return position;
 }
 
 @fragment
 fn fragmentMain(inputs: FragmentInputs) -> @location(0) vec4<f32> {
-        let position: vec2<f32> = billboardTexture_getTextureUV(inputs.coordinate);
+        let position: vec2<f32> = billboardTexture_getTextureUV(inputs.uv);
         return textureSample(backgroundTexture, backgroundTextureSampler, position);
 }
 `
@@ -2774,20 +3031,22 @@ var BackgroundTextureModel = class extends ClipSpace {
   backgroundTexture = null;
   constructor(device, props) {
     super(device, {
+      ...props,
       id: props.id || "background-texture-model",
       source: BACKGROUND_FS_WGSL,
       fs: BACKGROUND_FS,
-      modules: [backgroundModule],
+      modules: [...props.modules || [], backgroundModule],
       parameters: {
         depthWriteEnabled: false,
+        ...props.parameters || {},
         ...props.blend ? {
           blend: true,
           blendColorOperation: "add",
           blendAlphaOperation: "add",
-          blendColorSrcFactor: "one",
-          blendColorDstFactor: "one-minus-src",
-          blendAlphaSrcFactor: "one",
-          blendAlphaDstFactor: "one-minus-src-alpha"
+          blendColorSrcFactor: "one-minus-dst-alpha",
+          blendColorDstFactor: "one",
+          blendAlphaSrcFactor: "one-minus-dst-alpha",
+          blendAlphaDstFactor: "one"
         } : {}
       }
     });
@@ -2839,6 +3098,11 @@ var BackgroundTextureModel = class extends ClipSpace {
 
 // dist/scenegraph/scenegraph-node.js
 var import_core12 = require("@math.gl/core");
+function assert(condition, message) {
+  if (!condition) {
+    throw new Error(message);
+  }
+}
 var ScenegraphNode = class {
   id;
   matrix = new import_core12.Matrix4();
@@ -2870,14 +3134,17 @@ var ScenegraphNode = class {
     return `{type: ScenegraphNode, id: ${this.id})}`;
   }
   setPosition(position) {
+    assert(position.length === 3, "setPosition requires vector argument");
     this.position = position;
     return this;
   }
   setRotation(rotation) {
+    assert(rotation.length === 3 || rotation.length === 4, "setRotation requires vector argument");
     this.rotation = rotation;
     return this;
   }
   setScale(scale) {
+    assert(scale.length === 3, "setScale requires vector argument");
     this.scale = scale;
     return this;
   }
@@ -2905,17 +3172,18 @@ var ScenegraphNode = class {
     return this;
   }
   updateMatrix() {
-    const pos = this.position;
-    const rot = this.rotation;
-    const scale = this.scale;
     this.matrix.identity();
-    this.matrix.translate(pos);
-    this.matrix.rotateXYZ(rot);
-    this.matrix.scale(scale);
+    this.matrix.translate(this.position);
+    if (this.rotation.length === 4) {
+      const rotationMatrix = new import_core12.Matrix4().fromQuaternion(this.rotation);
+      this.matrix.multiplyRight(rotationMatrix);
+    } else {
+      this.matrix.rotateXYZ(this.rotation);
+    }
+    this.matrix.scale(this.scale);
     return this;
   }
-  update(options = {}) {
-    const { position, rotation, scale } = options;
+  update({ position, rotation, scale } = {}) {
     if (position) {
       this.setPosition(position);
     }
@@ -2965,16 +3233,17 @@ var ScenegraphNode = class {
     }
     */
   _setScenegraphNodeProps(props) {
-    if ("position" in props) {
+    if (props == null ? void 0 : props.position) {
       this.setPosition(props.position);
     }
-    if ("rotation" in props) {
+    if (props == null ? void 0 : props.rotation) {
       this.setRotation(props.rotation);
     }
-    if ("scale" in props) {
+    if (props == null ? void 0 : props.scale) {
       this.setScale(props.scale);
     }
-    if ("matrix" in props) {
+    this.updateMatrix();
+    if (props == null ? void 0 : props.matrix) {
       this.setMatrix(props.matrix);
     }
     Object.assign(this.props, props);
@@ -3059,6 +3328,17 @@ var GroupNode = class extends ScenegraphNode {
       }
     }
   }
+  preorderTraversal(visitor, { worldMatrix = new import_core13.Matrix4() } = {}) {
+    const modelMatrix = new import_core13.Matrix4(worldMatrix).multiplyRight(this.matrix);
+    visitor(this, { worldMatrix: modelMatrix });
+    for (const child of this.children) {
+      if (child instanceof GroupNode) {
+        child.preorderTraversal(visitor, { worldMatrix: modelMatrix });
+      } else {
+        visitor(child, { worldMatrix: modelMatrix });
+      }
+    }
+  }
 };
 
 // dist/scenegraph/model-node.js
@@ -4324,26 +4604,16 @@ function getFragmentShaderForRenderPass(options) {
 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 textureSampler: sampler;
-
-// This needs to be aligned with
-// struct FragmentInputs {
-//   @location(0) fragUV: vec2f,
-//   @location(1) fragPosition: vec4f,
-//   @location(2) fragCoordinate: vec4f
-// };
+    `@group(0) @binding(0) var sourceTexture: texture_2d<f32>;
+@group(0) @binding(2) var sourceTextureSampler: sampler;
 
 @fragment
 fn fragmentMain(inputs: FragmentInputs) -> @location(0) vec4f {
-  let fragUV = inputs.uv;
-  let fragCoordinate = inputs.coordinate;
-  let texSize = vec2f(textureDimensions(texture, 0));
+  let texCoord = inputs.coordinate;
+  let texSize = vec2f(textureDimensions(sourceTexture));
 
-  var fragColor = textureSample(texture, textureSampler, fragUV);
-  fragColor = ${func}(fragColor, texSize, fragCoordinate);
+  var fragColor = textureSample(sourceTexture, sourceTextureSampler, texCoord);
+  fragColor = ${func}(fragColor, texSize, texCoord);
   return fragColor;
 }
 `
@@ -4352,23 +4622,14 @@ fn fragmentMain(inputs: FragmentInputs) -> @location(0) vec4f {
 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
-};
+    `@group(0) @binding(0) var sourceTexture: texture_2d<f32>;
+@group(0) @binding(2) var sourceTextureSampler: sampler;
 
 @fragment
 fn fragmentMain(inputs: FragmentInputs) -> @location(0) vec4f {
-  let texSize = vec2f(textureDimensions(texture, 0));
-  var fragColor = textureSample(texture, sampler, fragUV);
-  fragColor = ${func}(fragColor, texSize, texCoord);
-  return fragColor;
+  let texCoord = inputs.coordinate;
+  let texSize = vec2f(textureDimensions(sourceTexture));
+  return ${func}(sourceTexture, sourceTextureSampler, texSize, texCoord);
 }
 `
   );
@@ -4427,8 +4688,6 @@ var ShaderPassRenderer = class {
   shaderInputs;
   passRenderers;
   swapFramebuffers;
-  /** For rendering to the screen */
-  clipSpace;
   textureModel;
   constructor(device, props) {
     this.device = device;
@@ -4444,33 +4703,6 @@ var ShaderPassRenderer = class {
     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;
-out vec4 fragColor;
-
-void main() {
-  fragColor = texture(sourceTexture, uv);
-}
-`
-      )
-    });
     this.passRenderers = props.shaderPasses.map((shaderPass) => new PassRenderer(device, shaderPass));
   }
   /** Destroys resources created by this ShaderPassRenderer */
@@ -4479,7 +4711,6 @@ void main() {
       subPassRenderer.destroy();
     }
     this.swapFramebuffers.destroy();
-    this.clipSpace.destroy();
     this.textureModel.destroy();
   }
   resize(size) {
@@ -4491,15 +4722,15 @@ void main() {
     if (!outputTexture) {
       return false;
     }
-    const framebuffer = this.device.getDefaultCanvasContext().getCurrentFramebuffer({ depthStencilAttachment: false });
+    const framebuffer = this.device.getDefaultCanvasContext().getCurrentFramebuffer({ depthStencilFormat: false });
     const renderPass = this.device.beginRenderPass({
       id: "shader-pass-renderer-to-screen",
       framebuffer,
       // clearColor: [1, 1, 0, 1],
-      clearDepth: 1
+      clearDepth: false
     });
-    this.clipSpace.setBindings({ sourceTexture: outputTexture });
-    this.clipSpace.draw(renderPass);
+    this.textureModel.setProps({ backgroundTexture: outputTexture });
+    this.textureModel.draw(renderPass);
     renderPass.end();
     return true;
   }
@@ -5011,12 +5242,6 @@ 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.