@luma.gl/engine 9.3.0-alpha.10 → 9.3.0-alpha.11

package/dist/dist.dev.js

@@ -726,13 +726,13 @@ var __exports__ = (() => {
       if (!this.device || !canvasContext) {
         throw new Error("loop");
       }
-      const canvas2 = canvasContext?.canvas;
+      const canvas = canvasContext?.canvas;
       const useDevicePixels = canvasContext.props.useDevicePixels;
       this.animationProps = {
         animationLoop: this,
         device: this.device,
         canvasContext,
-        canvas: canvas2,
+        canvas,
         // @ts-expect-error Deprecated
         useDevicePixels,
         timeline: this.timeline,
@@ -934,6 +934,7 @@ var __exports__ = (() => {
           renderLoop = new AnimationLoopTemplateCtor(animationProps);
           return await renderLoop?.onInitialize(animationProps);
         } catch (error) {
+          console.error(error);
           setError(animationProps.animationLoop.device, error);
           return null;
         }
@@ -950,9 +951,9 @@ var __exports__ = (() => {
     if (!device) {
       return;
     }
-    const canvas2 = device.getDefaultCanvasContext().canvas;
-    if (canvas2 instanceof HTMLCanvasElement) {
-      canvas2.style.overflow = "visible";
+    const canvas = device.getDefaultCanvasContext().canvas;
+    if (canvas instanceof HTMLCanvasElement) {
+      canvas.style.overflow = "visible";
       let errorDiv = document.getElementById("animation-loop-error");
       errorDiv?.remove();
       errorDiv = document.createElement("h1");
@@ -963,7 +964,7 @@ var __exports__ = (() => {
       errorDiv.style.left = "10px";
       errorDiv.style.color = "black";
       errorDiv.style.backgroundColor = "red";
-      canvas2.parentElement?.appendChild(errorDiv);
+      canvas.parentElement?.appendChild(errorDiv);
     }
   }
   function clearError(device) {
@@ -1070,6 +1071,9 @@ var __exports__ = (() => {
         case "TEXCOORD_0":
           name = "texCoords";
           break;
+        case "TEXCOORD_1":
+          name = "texCoords1";
+          break;
         case "COLOR_0":
           name = "colors";
           break;
@@ -1114,47 +1118,103 @@ var __exports__ = (() => {
   }
 
   // src/debug/debug-framebuffer.ts
-  var canvas = null;
-  var ctx = null;
-  function debugFramebuffer(fbo, {
-    id,
-    minimap,
-    opaque,
-    top = "0",
-    left = "0",
-    rgbaScale = 1
-  }) {
-    if (!canvas) {
-      canvas = document.createElement("canvas");
-      canvas.id = id;
-      canvas.title = id;
-      canvas.style.zIndex = "100";
-      canvas.style.position = "absolute";
-      canvas.style.top = top;
-      canvas.style.left = left;
-      canvas.style.border = "blue 5px solid";
-      canvas.style.transform = "scaleY(-1)";
-      document.body.appendChild(canvas);
-      ctx = canvas.getContext("2d");
-    }
-    if (canvas.width !== fbo.width || canvas.height !== fbo.height) {
-      canvas.width = fbo.width / 2;
-      canvas.height = fbo.height / 2;
-      canvas.style.width = "400px";
-      canvas.style.height = "400px";
-    }
-    const color = fbo.device.readPixelsToArrayWebGL(fbo);
-    const imageData = ctx?.createImageData(fbo.width, fbo.height);
-    if (imageData) {
-      const offset = 0;
-      for (let i = 0; i < color.length; i += 4) {
-        imageData.data[offset + i + 0] = color[i + 0] * rgbaScale;
-        imageData.data[offset + i + 1] = color[i + 1] * rgbaScale;
-        imageData.data[offset + i + 2] = color[i + 2] * rgbaScale;
-        imageData.data[offset + i + 3] = opaque ? 255 : color[i + 3] * rgbaScale;
-      }
-      ctx?.putImageData(imageData, 0, 0);
+  var DEBUG_FRAMEBUFFER_STATE_KEY = "__debugFramebufferState";
+  var DEFAULT_MARGIN_PX = 8;
+  function debugFramebuffer(renderPass, source3, options) {
+    if (renderPass.device.type !== "webgl") {
+      return;
+    }
+    const state = getDebugFramebufferState(renderPass.device);
+    if (state.flushing) {
+      return;
+    }
+    if (isDefaultRenderPass(renderPass)) {
+      flushDebugFramebuffers(renderPass, options, state);
+      return;
+    }
+    if (source3 && isFramebuffer(source3) && source3.handle !== null) {
+      if (!state.queuedFramebuffers.includes(source3)) {
+        state.queuedFramebuffers.push(source3);
+      }
+    }
+  }
+  function flushDebugFramebuffers(renderPass, options, state) {
+    if (state.queuedFramebuffers.length === 0) {
+      return;
+    }
+    const webglDevice = renderPass.device;
+    const { gl } = webglDevice;
+    const previousReadFramebuffer = gl.getParameter(gl.READ_FRAMEBUFFER_BINDING);
+    const previousDrawFramebuffer = gl.getParameter(gl.DRAW_FRAMEBUFFER_BINDING);
+    const [targetWidth, targetHeight] = renderPass.device.getDefaultCanvasContext().getDrawingBufferSize();
+    let topPx = parseCssPixel(options.top, DEFAULT_MARGIN_PX);
+    const leftPx = parseCssPixel(options.left, DEFAULT_MARGIN_PX);
+    state.flushing = true;
+    try {
+      for (const framebuffer of state.queuedFramebuffers) {
+        const [targetX0, targetY0, targetX1, targetY1, previewHeight] = getOverlayRect({
+          framebuffer,
+          targetWidth,
+          targetHeight,
+          topPx,
+          leftPx,
+          minimap: options.minimap
+        });
+        gl.bindFramebuffer(gl.READ_FRAMEBUFFER, framebuffer.handle);
+        gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, null);
+        gl.blitFramebuffer(
+          0,
+          0,
+          framebuffer.width,
+          framebuffer.height,
+          targetX0,
+          targetY0,
+          targetX1,
+          targetY1,
+          gl.COLOR_BUFFER_BIT,
+          gl.NEAREST
+        );
+        topPx += previewHeight + DEFAULT_MARGIN_PX;
+      }
+    } finally {
+      gl.bindFramebuffer(gl.READ_FRAMEBUFFER, previousReadFramebuffer);
+      gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, previousDrawFramebuffer);
+      state.flushing = false;
+    }
+  }
+  function getOverlayRect(options) {
+    const { framebuffer, targetWidth, targetHeight, topPx, leftPx, minimap } = options;
+    const maxWidth = minimap ? Math.max(Math.floor(targetWidth / 4), 1) : targetWidth;
+    const maxHeight = minimap ? Math.max(Math.floor(targetHeight / 4), 1) : targetHeight;
+    const scale2 = Math.min(maxWidth / framebuffer.width, maxHeight / framebuffer.height);
+    const previewWidth = Math.max(Math.floor(framebuffer.width * scale2), 1);
+    const previewHeight = Math.max(Math.floor(framebuffer.height * scale2), 1);
+    const targetX0 = leftPx;
+    const targetY0 = Math.max(targetHeight - topPx - previewHeight, 0);
+    const targetX1 = targetX0 + previewWidth;
+    const targetY1 = targetY0 + previewHeight;
+    return [targetX0, targetY0, targetX1, targetY1, previewHeight];
+  }
+  function getDebugFramebufferState(device) {
+    device.userData[DEBUG_FRAMEBUFFER_STATE_KEY] ||= {
+      flushing: false,
+      queuedFramebuffers: []
+    };
+    return device.userData[DEBUG_FRAMEBUFFER_STATE_KEY];
+  }
+  function isFramebuffer(value) {
+    return "colorAttachments" in value;
+  }
+  function isDefaultRenderPass(renderPass) {
+    const framebuffer = renderPass.props.framebuffer;
+    return !framebuffer || framebuffer.handle === null;
+  }
+  function parseCssPixel(value, defaultValue) {
+    if (!value) {
+      return defaultValue;
     }
+    const parsedValue = Number.parseInt(value, 10);
+    return Number.isFinite(parsedValue) ? parsedValue : defaultValue;
   }
 
   // src/utils/deep-equal.ts
@@ -1371,12 +1431,11 @@ var __exports__ = (() => {
       this.moduleUniforms = {};
       this.moduleBindings = {};
       for (const [name, module] of Object.entries(modules)) {
-        if (!module) {
-          continue;
-        }
-        this._addModule(module);
-        if (module.name && name !== module.name && !this.options.disableWarnings) {
-          import_core5.log.warn(`Module name: ${name} vs ${module.name}`)();
+        if (module) {
+          this._addModule(module);
+          if (module.name && name !== module.name && !this.options.disableWarnings) {
+            import_core5.log.warn(`Module name: ${name} vs ${module.name}`)();
+          }
         }
       }
     }
@@ -1395,21 +1454,21 @@ var __exports__ = (() => {
           if (!this.options.disableWarnings) {
             import_core5.log.warn(`Module ${name} not found`)();
           }
-          continue;
+        } else {
+          const oldUniforms = this.moduleUniforms[moduleName];
+          const oldBindings = this.moduleBindings[moduleName];
+          const uniformsAndBindings = module.getUniforms?.(moduleProps, oldUniforms) || moduleProps;
+          const { uniforms, bindings } = splitUniformsAndBindings(
+            uniformsAndBindings,
+            module.uniformTypes
+          );
+          this.moduleUniforms[moduleName] = mergeModuleUniforms(
+            oldUniforms,
+            uniforms,
+            module.uniformTypes
+          );
+          this.moduleBindings[moduleName] = { ...oldBindings, ...bindings };
         }
-        const oldUniforms = this.moduleUniforms[moduleName];
-        const oldBindings = this.moduleBindings[moduleName];
-        const uniformsAndBindings = module.getUniforms?.(moduleProps, oldUniforms) || moduleProps;
-        const { uniforms, bindings } = splitUniformsAndBindings(
-          uniformsAndBindings,
-          module.uniformTypes
-        );
-        this.moduleUniforms[moduleName] = mergeModuleUniforms(
-          oldUniforms,
-          uniforms,
-          module.uniformTypes
-        );
-        this.moduleBindings[moduleName] = { ...oldBindings, ...bindings };
       }
     }
     /**
@@ -1458,10 +1517,9 @@ var __exports__ = (() => {
   function mergeModuleUniforms(currentUniforms = {}, nextUniforms = {}, uniformTypes2 = {}) {
     const mergedUniforms = { ...currentUniforms };
     for (const [key, value] of Object.entries(nextUniforms)) {
-      if (value === void 0) {
-        continue;
+      if (value !== void 0) {
+        mergedUniforms[key] = mergeModuleUniformValue(currentUniforms[key], value, uniformTypes2[key]);
       }
-      mergedUniforms[key] = mergeModuleUniformValue(currentUniforms[key], value, uniformTypes2[key]);
     }
     return mergedUniforms;
   }
@@ -1477,14 +1535,13 @@ var __exports__ = (() => {
       const mergedArray = currentArray.slice();
       for (let index = 0; index < nextValue.length; index++) {
         const elementValue = nextValue[index];
-        if (elementValue === void 0) {
-          continue;
+        if (elementValue !== void 0) {
+          mergedArray[index] = mergeModuleUniformValue(
+            currentArray[index],
+            elementValue,
+            uniformType[0]
+          );
         }
-        mergedArray[index] = mergeModuleUniformValue(
-          currentArray[index],
-          elementValue,
-          uniformType[0]
-        );
       }
       return mergedArray;
     }
@@ -1495,10 +1552,9 @@ var __exports__ = (() => {
     const currentObject = isPlainUniformObject(currentValue) ? currentValue : {};
     const mergedObject = { ...currentObject };
     for (const [key, value] of Object.entries(nextValue)) {
-      if (value === void 0) {
-        continue;
+      if (value !== void 0) {
+        mergedObject[key] = mergeModuleUniformValue(currentObject[key], value, uniformStruct[key]);
       }
-      mergedObject[key] = mergeModuleUniformValue(currentObject[key], value, uniformStruct[key]);
     }
     return mergedObject;
   }
@@ -1741,7 +1797,9 @@ var __exports__ = (() => {
       return "DynamicTexture";
     }
     toString() {
-      return `DynamicTexture:"${this.id}":${this.texture.width}x${this.texture.height}px:(${this.isReady ? "ready" : "loading..."})`;
+      const width = this._texture?.width ?? this.props.width ?? "?";
+      const height = this._texture?.height ?? this.props.height ?? "?";
+      return `DynamicTexture:"${this.id}":${width}x${height}px:(${this.isReady ? "ready" : "loading..."})`;
     }
     constructor(device, props) {
       this.device = device;
@@ -2185,6 +2243,7 @@ var __exports__ = (() => {
   // src/model/model.ts
   var LOG_DRAW_PRIORITY = 2;
   var LOG_DRAW_TIMEOUT = 1e4;
+  var PIPELINE_INITIALIZATION_FAILED = "render pipeline initialization failed";
   var _Model = class {
     /** Device that created this model */
     device;
@@ -2398,35 +2457,45 @@ var __exports__ = (() => {
         renderPass.popDebugGroup();
       }
       let drawSuccess;
+      let pipelineErrored = this.pipeline.isErrored;
       try {
         renderPass.pushDebugGroup(`${this}.draw(${renderPass})`);
         this._logDrawCallStart();
         this.pipeline = this._updatePipeline();
-        const syncBindings = this._getBindings();
-        const syncBindGroups = this._getBindGroups();
-        const { indexBuffer } = this.vertexArray;
-        const indexCount = indexBuffer ? indexBuffer.byteLength / (indexBuffer.indexType === "uint32" ? 4 : 2) : void 0;
-        drawSuccess = this.pipeline.draw({
-          renderPass,
-          vertexArray: this.vertexArray,
-          isInstanced: this.isInstanced,
-          vertexCount: this.vertexCount,
-          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,
-          bindGroups: syncBindGroups,
-          _bindGroupCacheKeys: this._getBindGroupCacheKeys(),
-          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)
-          parameters: this.parameters,
-          topology: this.topology
-        });
+        pipelineErrored = this.pipeline.isErrored;
+        if (pipelineErrored) {
+          import_core8.log.info(
+            LOG_DRAW_PRIORITY,
+            `>>> DRAWING ABORTED ${this.id}: ${PIPELINE_INITIALIZATION_FAILED}`
+          )();
+          drawSuccess = false;
+        } else {
+          const syncBindings = this._getBindings();
+          const syncBindGroups = this._getBindGroups();
+          const { indexBuffer } = this.vertexArray;
+          const indexCount = indexBuffer ? indexBuffer.byteLength / (indexBuffer.indexType === "uint32" ? 4 : 2) : void 0;
+          drawSuccess = this.pipeline.draw({
+            renderPass,
+            vertexArray: this.vertexArray,
+            isInstanced: this.isInstanced,
+            vertexCount: this.vertexCount,
+            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,
+            bindGroups: syncBindGroups,
+            _bindGroupCacheKeys: this._getBindGroupCacheKeys(),
+            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)
+            parameters: this.parameters,
+            topology: this.topology
+          });
+        }
       } finally {
         renderPass.popDebugGroup();
         this._logDrawCallEnd();
@@ -2435,6 +2504,8 @@ var __exports__ = (() => {
       if (drawSuccess) {
         this._lastDrawTimestamp = this.device.timestamp;
         this._needsRedraw = false;
+      } else if (pipelineErrored) {
+        this._needsRedraw = PIPELINE_INITIALIZATION_FAILED;
       } else {
         this._needsRedraw = "waiting for resource initialization";
       }
@@ -2803,9 +2874,10 @@ var __exports__ = (() => {
         return;
       }
       const framebuffer = renderPass.props.framebuffer;
-      if (framebuffer) {
-        debugFramebuffer(framebuffer, { id: framebuffer.id, minimap: true });
-      }
+      debugFramebuffer(renderPass, framebuffer, {
+        id: framebuffer?.id || `${this.id}-framebuffer`,
+        minimap: true
+      });
     }
     _getAttributeDebugTable() {
       const table = {};
@@ -3468,12 +3540,12 @@ ${props.source}` };
   };
   var BACKGROUND_FS_WGSL = (
     /* wgsl */
-    `@group(0) @binding(0) var backgroundTexture: texture_2d<f32>;
-@group(0) @binding(1) var backgroundTextureSampler: sampler;
+    `@group(0) @binding(auto) var backgroundTexture: texture_2d<f32>;
+@group(0) @binding(auto) var backgroundTextureSampler: sampler;
 struct backgroundUniforms {
   scale: vec2<f32>,
 };
-@group(0) @binding(2) var<uniform> background: backgroundUniforms;
+@group(0) @binding(auto) var<uniform> background: backgroundUniforms;
 
 fn billboardTexture_getTextureUV(uv: vec2<f32>) -> vec2<f32> {
         let scale: vec2<f32> = background.scale;
@@ -6016,7 +6088,7 @@ void main(void) {
   viewProjectionMatrix: mat4x4<f32>,
 };
 
-@binding(0) @group(0) var<uniform> lightMarker : lightMarkerUniforms;
+@group(0) @binding(auto) var<uniform> lightMarker : lightMarkerUniforms;
 
 struct VertexInputs {
   @location(0) positions : vec3<f32>,
@@ -7235,7 +7307,9 @@ void main(void) {
         ym /= len;
         zm /= len;
         positions.push(xm, ym, zm);
-        return pointMemo[key] = positions.length / 3 - 1;
+        const pointIndex = positions.length / 3 - 1;
+        pointMemo[key] = pointIndex;
+        return pointIndex;
       };
     })();
     for (let i = 0; i < iterations; i++) {
@@ -7602,8 +7676,8 @@ void main(void) {
   function getFilterShaderWGSL(func) {
     return (
       /* wgsl */
-      `@group(0) @binding(0) var sourceTexture: texture_2d<f32>;
-@group(0) @binding(2) var sourceTextureSampler: sampler;
+      `@group(0) @binding(auto) var sourceTexture: texture_2d<f32>;
+@group(0) @binding(auto) var sourceTextureSampler: sampler;
 
 @fragment
 fn fragmentMain(inputs: FragmentInputs) -> @location(0) vec4f {
@@ -7620,8 +7694,8 @@ fn fragmentMain(inputs: FragmentInputs) -> @location(0) vec4f {
   function getSamplerShaderWGSL(func) {
     return (
       /* wgsl */
-      `@group(0) @binding(0) var sourceTexture: texture_2d<f32>;
-@group(0) @binding(2) var sourceTextureSampler: sampler;
+      `@group(0) @binding(auto) var sourceTexture: texture_2d<f32>;
+@group(0) @binding(auto) var sourceTextureSampler: sampler;
 
 @fragment
 fn fragmentMain(inputs: FragmentInputs) -> @location(0) vec4f {