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

package/dist/dist.dev.js

@@ -281,10 +281,22 @@ var __exports__ = (() => {
 
   // src/animation-loop/request-animation-frame.ts
   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);
   }
 
   // ../../node_modules/@probe.gl/stats/dist/utils/hi-res-timestamp.js
@@ -482,6 +494,7 @@ var __exports__ = (() => {
 
   // src/animation-loop/animation-loop.ts
   var statIdCounter = 0;
+  var ANIMATION_LOOP_STATS = "Animation Loop";
   var _AnimationLoop = class {
     device = null;
     canvas = null;
@@ -489,6 +502,7 @@ var __exports__ = (() => {
     animationProps = null;
     timeline = null;
     stats;
+    sharedStats;
     cpuTime;
     gpuTime;
     frameRate;
@@ -501,7 +515,7 @@ var __exports__ = (() => {
     _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
      */
@@ -511,10 +525,12 @@ var __exports__ = (() => {
       if (!props.device) {
         throw new Error("No device provided");
       }
-      this.stats = props.stats || new Stats({ id: "animation-loop-stats" });
+      this.stats = props.stats || new 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);
@@ -524,6 +540,7 @@ var __exports__ = (() => {
     destroy() {
       this.stop();
       this._setDisplay(null);
+      this.device?._disableDebugGPUTime();
     }
     /** @deprecated Use .destroy() */
     delete() {
@@ -588,15 +605,16 @@ var __exports__ = (() => {
         this._nextFramePromise = null;
         this._resolveNextFrame = null;
         this._running = false;
+        this._lastFrameTime = 0;
       }
       return this;
     }
     /** Explicitly draw a frame */
-    redraw() {
+    redraw(time) {
       if (this.device?.isLost || this._error) {
         return this;
       }
-      this._beginFrameTimers();
+      this._beginFrameTimers(time);
       this._setupFrame();
       this._updateAnimationProps();
       this._renderFrame(this._getAnimationProps());
@@ -643,6 +661,7 @@ var __exports__ = (() => {
       this._initializeAnimationProps();
       this._updateAnimationProps();
       this._resizeViewport();
+      this.device?._enableDebugGPUTime();
     }
     _setDisplay(display) {
       if (this.display) {
@@ -667,11 +686,11 @@ var __exports__ = (() => {
       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
@@ -785,14 +804,8 @@ var __exports__ = (() => {
       if (!this.device) {
         return { width: 1, height: 1, aspect: 1 };
       }
-      const [width, height] = this.device?.getDefaultCanvasContext().getDevicePixelSize() || [1, 1];
-      let aspect = 1;
-      const canvas2 = this.device?.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 */
@@ -808,13 +821,61 @@ var __exports__ = (() => {
         );
       }
     }
-    _beginFrameTimers() {
-      this.frameRate.timeEnd();
-      this.frameRate.timeStart();
+    _beginFrameTimers(time) {
+      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 (this.device?._isDebugGPUTimeEnabled()) {
+        this._consumeEncodedGpuTime();
+      }
       this.cpuTime.timeStart();
     }
     _endFrameTimers() {
+      if (this.device?._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() {
@@ -843,7 +904,7 @@ var __exports__ = (() => {
     },
     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
   });
@@ -875,7 +936,10 @@ var __exports__ = (() => {
     return animationLoop;
   }
   function setError(device, error) {
-    const canvas2 = 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");
@@ -892,6 +956,9 @@ var __exports__ = (() => {
     }
   }
   function clearError(device) {
+    if (!device) {
+      return;
+    }
     const errorDiv = document.getElementById("animation-loop-error");
     if (errorDiv) {
       errorDiv.remove();
@@ -1019,13 +1086,11 @@ var __exports__ = (() => {
       return moduleData.defaultPipelineFactory;
     }
     device;
-    cachingEnabled;
-    destroyPolicy;
-    debug;
     _hashCounter = 0;
     _hashes = {};
     _renderPipelineCache = {};
     _computePipelineCache = {};
+    _sharedRenderPipelineCache = {};
     get [Symbol.toStringTag]() {
       return "PipelineFactory";
     }
@@ -1034,35 +1099,34 @@ var __exports__ = (() => {
     }
     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) {
-      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 = cache[hash]?.pipeline;
+      let pipeline = cache[hash]?.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) {
+        if (this.device.props.debugFactories) {
           import_core4.log.log(
             3,
-            `${this}: ${cache[hash].pipeline} reused, count=${cache[hash].useCount}, (id=${props.id})`
+            `${this}: ${cache[hash].resource} reused, count=${cache[hash].useCount}, (id=${props.id})`
           )();
         }
       }
@@ -1070,36 +1134,36 @@ var __exports__ = (() => {
     }
     /** Return a ComputePipeline matching supplied props. Reuses an equivalent pipeline if already created. */
     createComputePipeline(props) {
-      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 = cache[hash]?.pipeline;
+      let pipeline = cache[hash]?.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) {
+        if (this.device.props.debugFactories) {
           import_core4.log.log(
             3,
-            `${this}: ${cache[hash].pipeline} reused, count=${cache[hash].useCount}, (id=${props.id})`
+            `${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;
       }
@@ -1108,28 +1172,55 @@ var __exports__ = (() => {
       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) {
@@ -1158,24 +1249,35 @@ var __exports__ = (() => {
     _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 });
@@ -1190,9 +1292,6 @@ var __exports__ = (() => {
       return moduleData.defaultShaderFactory;
     }
     device;
-    cachingEnabled;
-    destroyPolicy;
-    debug;
     _cache = {};
     get [Symbol.toStringTag]() {
       return "ShaderFactory";
@@ -1203,40 +1302,37 @@ var __exports__ = (() => {
     /** @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) {
+        if (this.device.props.debugFactories) {
           import_core5.log.log(
             3,
-            `${this}: Reusing shader ${cacheEntry.shader.id} count=${cacheEntry.useCount}`
+            `${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;
       }
@@ -1245,16 +1341,16 @@ var __exports__ = (() => {
       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}`)();
         }
       }
@@ -1408,6 +1504,16 @@ var __exports__ = (() => {
   };
 
   // src/utils/buffer-layout-order.ts
+  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])
@@ -1416,8 +1522,8 @@ var __exports__ = (() => {
     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;
@@ -1632,6 +1738,15 @@ var __exports__ = (() => {
   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)
@@ -1664,6 +1779,7 @@ var __exports__ = (() => {
         subresources.push({
           type: "texture-data",
           data: imageData,
+          textureFormat: resolveTextureImageFormat(imageData),
           z,
           mipLevel
         });
@@ -1700,7 +1816,7 @@ var __exports__ = (() => {
     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;
@@ -1762,6 +1878,9 @@ var __exports__ = (() => {
       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 };
@@ -1776,45 +1895,39 @@ var __exports__ = (() => {
         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;
@@ -1838,10 +1951,10 @@ var __exports__ = (() => {
     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 */
@@ -1939,8 +2052,21 @@ var __exports__ = (() => {
             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");
@@ -1972,6 +2098,140 @@ var __exports__ = (() => {
     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)) {
@@ -2147,7 +2407,7 @@ var __exports__ = (() => {
       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();
@@ -2197,9 +2457,6 @@ var __exports__ = (() => {
         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({
@@ -2210,6 +2467,11 @@ var __exports__ = (() => {
           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)
@@ -2526,8 +2788,9 @@ var __exports__ = (() => {
         );
         if (prevShaderVs)
           this.shaderFactory.release(prevShaderVs);
-        if (prevShaderFs)
+        if (prevShaderFs && prevShaderFs !== prevShaderVs) {
           this.shaderFactory.release(prevShaderFs);
+        }
       }
       return this.pipeline;
     }
@@ -2611,6 +2874,8 @@ var __exports__ = (() => {
     indexBuffer: null,
     attributes: {},
     constantAttributes: {},
+    bindings: {},
+    uniforms: {},
     varyings: [],
     isInstanced: void 0,
     instanceCount: 0,
@@ -2915,9 +3180,9 @@ var __exports__ = (() => {
   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 {
@@ -2930,10 +3195,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;
 }
 `
@@ -2999,15 +3264,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);
 }
 `
@@ -3041,20 +3306,22 @@ void main(void) {
     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"
           } : {}
         }
       });
@@ -5140,6 +5407,11 @@ void main(void) {
   }
 
   // src/scenegraph/scenegraph-node.ts
+  function assert2(condition, message) {
+    if (!condition) {
+      throw new Error(message);
+    }
+  }
   var ScenegraphNode = class {
     id;
     matrix = new Matrix4();
@@ -5171,14 +5443,17 @@ void main(void) {
       return `{type: ScenegraphNode, id: ${this.id})}`;
     }
     setPosition(position) {
+      assert2(position.length === 3, "setPosition requires vector argument");
       this.position = position;
       return this;
     }
     setRotation(rotation) {
+      assert2(rotation.length === 3 || rotation.length === 4, "setRotation requires vector argument");
       this.rotation = rotation;
       return this;
     }
     setScale(scale2) {
+      assert2(scale2.length === 3, "setScale requires vector argument");
       this.scale = scale2;
       return this;
     }
@@ -5206,17 +5481,18 @@ void main(void) {
       return this;
     }
     updateMatrix() {
-      const pos = this.position;
-      const rot = this.rotation;
-      const scale2 = this.scale;
       this.matrix.identity();
-      this.matrix.translate(pos);
-      this.matrix.rotateXYZ(rot);
-      this.matrix.scale(scale2);
+      this.matrix.translate(this.position);
+      if (this.rotation.length === 4) {
+        const rotationMatrix = new 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: scale2 } = options;
+    update({ position, rotation, scale: scale2 } = {}) {
       if (position) {
         this.setPosition(position);
       }
@@ -5266,16 +5542,17 @@ void main(void) {
       }
       */
     _setScenegraphNodeProps(props) {
-      if ("position" in props) {
+      if (props?.position) {
         this.setPosition(props.position);
       }
-      if ("rotation" in props) {
+      if (props?.rotation) {
         this.setRotation(props.rotation);
       }
-      if ("scale" in props) {
+      if (props?.scale) {
         this.setScale(props.scale);
       }
-      if ("matrix" in props) {
+      this.updateMatrix();
+      if (props?.matrix) {
         this.setMatrix(props.matrix);
       }
       Object.assign(this.props, props);
@@ -5362,6 +5639,17 @@ void main(void) {
         }
       }
     }
+    preorderTraversal(visitor, { worldMatrix = new Matrix4() } = {}) {
+      const modelMatrix = new 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 });
+        }
+      }
+    }
   };
 
   // src/scenegraph/model-node.ts
@@ -6639,26 +6927,16 @@ void main(void) {
   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;
 }
 `
@@ -6667,23 +6945,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);
 }
 `
     );
@@ -6742,8 +7011,6 @@ void main() {
     shaderInputs;
     passRenderers;
     swapFramebuffers;
-    /** For rendering to the screen */
-    clipSpace;
     textureModel;
     constructor(device, props) {
       this.device = device;
@@ -6762,33 +7029,6 @@ void main() {
       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 */
@@ -6797,7 +7037,6 @@ void main() {
         subPassRenderer.destroy();
       }
       this.swapFramebuffers.destroy();
-      this.clipSpace.destroy();
       this.textureModel.destroy();
     }
     resize(size) {
@@ -6809,15 +7048,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;
     }
@@ -7329,12 +7568,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.