@luma.gl/engine 9.3.0-alpha.9 → 9.3.1

package/dist/index.cjs

@@ -501,13 +501,13 @@ var _AnimationLoop = class {
     if (!this.device || !canvasContext) {
       throw new Error("loop");
     }
-    const canvas2 = canvasContext == null ? void 0 : canvasContext.canvas;
+    const canvas = canvasContext == null ? void 0 : 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,
@@ -711,6 +711,7 @@ function makeAnimationLoop(AnimationLoopTemplateCtor, props) {
         renderLoop = new AnimationLoopTemplateCtor(animationProps);
         return await (renderLoop == null ? void 0 : renderLoop.onInitialize(animationProps));
       } catch (error) {
+        console.error(error);
         setError(animationProps.animationLoop.device, error);
         return null;
       }
@@ -728,9 +729,9 @@ function setError(device, error) {
   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 == null ? void 0 : errorDiv.remove();
     errorDiv = document.createElement("h1");
@@ -741,7 +742,7 @@ function setError(device, error) {
     errorDiv.style.left = "10px";
     errorDiv.style.color = "black";
     errorDiv.style.backgroundColor = "red";
-    (_a = canvas2.parentElement) == null ? void 0 : _a.appendChild(errorDiv);
+    (_a = canvas.parentElement) == null ? void 0 : _a.appendChild(errorDiv);
   }
 }
 function clearError(device) {
@@ -849,6 +850,9 @@ function getAttributeBuffersFromGeometry(device, geometry) {
       case "TEXCOORD_0":
         name = "texCoords";
         break;
+      case "TEXCOORD_1":
+        name = "texCoords1";
+        break;
       case "COLOR_0":
         name = "colors";
         break;
@@ -894,40 +898,92 @@ function getDebugTableForShaderLayout(layout, name) {
 }
 
 // dist/debug/debug-framebuffer.js
-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 == null ? void 0 : 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 == null ? void 0 : 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(36010);
+  const previousDrawFramebuffer = gl.getParameter(36006);
+  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(36008, framebuffer.handle);
+      gl.bindFramebuffer(36009, null);
+      gl.blitFramebuffer(0, 0, framebuffer.width, framebuffer.height, targetX0, targetY0, targetX1, targetY1, 16384, 9728);
+      topPx += previewHeight + DEFAULT_MARGIN_PX;
+    }
+  } finally {
+    gl.bindFramebuffer(36008, previousReadFramebuffer);
+    gl.bindFramebuffer(36009, 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 scale = Math.min(maxWidth / framebuffer.width, maxHeight / framebuffer.height);
+  const previewWidth = Math.max(Math.floor(framebuffer.width * scale), 1);
+  const previewHeight = Math.max(Math.floor(framebuffer.height * scale), 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;
 }
 
 // dist/utils/deep-equal.js
@@ -1129,12 +1185,11 @@ var ShaderInputs = class {
     this.moduleUniforms = {};
     this.moduleBindings = {};
     for (const [name, module2] of Object.entries(modules)) {
-      if (!module2) {
-        continue;
-      }
-      this._addModule(module2);
-      if (module2.name && name !== module2.name && !this.options.disableWarnings) {
-        import_core5.log.warn(`Module name: ${name} vs ${module2.name}`)();
+      if (module2) {
+        this._addModule(module2);
+        if (module2.name && name !== module2.name && !this.options.disableWarnings) {
+          import_core5.log.warn(`Module name: ${name} vs ${module2.name}`)();
+        }
       }
     }
   }
@@ -1154,14 +1209,14 @@ var ShaderInputs = class {
         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 = ((_a = module2.getUniforms) == null ? void 0 : _a.call(module2, moduleProps, oldUniforms)) || moduleProps;
+        const { uniforms, bindings } = splitUniformsAndBindings(uniformsAndBindings, module2.uniformTypes);
+        this.moduleUniforms[moduleName] = mergeModuleUniforms(oldUniforms, uniforms, module2.uniformTypes);
+        this.moduleBindings[moduleName] = { ...oldBindings, ...bindings };
       }
-      const oldUniforms = this.moduleUniforms[moduleName];
-      const oldBindings = this.moduleBindings[moduleName];
-      const uniformsAndBindings = ((_a = module2.getUniforms) == null ? void 0 : _a.call(module2, moduleProps, oldUniforms)) || moduleProps;
-      const { uniforms, bindings } = splitUniformsAndBindings(uniformsAndBindings, module2.uniformTypes);
-      this.moduleUniforms[moduleName] = mergeModuleUniforms(oldUniforms, uniforms, module2.uniformTypes);
-      this.moduleBindings[moduleName] = { ...oldBindings, ...bindings };
     }
   }
   /**
@@ -1207,10 +1262,9 @@ var ShaderInputs = class {
 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;
 }
@@ -1226,10 +1280,9 @@ function mergeModuleUniformValue(currentValue, nextValue, uniformType) {
     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;
   }
@@ -1240,10 +1293,9 @@ function mergeModuleUniformValue(currentValue, nextValue, uniformType) {
   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;
 }
@@ -1480,7 +1532,10 @@ var _DynamicTexture = class {
     return "DynamicTexture";
   }
   toString() {
-    return `DynamicTexture:"${this.id}":${this.texture.width}x${this.texture.height}px:(${this.isReady ? "ready" : "loading..."})`;
+    var _a, _b;
+    const width = ((_a = this._texture) == null ? void 0 : _a.width) ?? this.props.width ?? "?";
+    const height = ((_b = this._texture) == null ? void 0 : _b.height) ?? this.props.height ?? "?";
+    return `DynamicTexture:"${this.id}":${width}x${height}px:(${this.isReady ? "ready" : "loading..."})`;
   }
   constructor(device, props) {
     this.device = device;
@@ -1913,6 +1968,7 @@ async function awaitAllPromises(x) {
 // dist/model/model.js
 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;
@@ -2123,35 +2179,42 @@ var _Model = class {
       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();
@@ -2160,6 +2223,8 @@ var _Model = class {
     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";
     }
@@ -2247,10 +2312,10 @@ var _Model = class {
   setShaderInputs(shaderInputs) {
     var _a;
     this.shaderInputs = shaderInputs;
-    this._uniformStore = new import_core8.UniformStore(this.shaderInputs.modules);
+    this._uniformStore = new import_core8.UniformStore(this.device, this.shaderInputs.modules);
     for (const [moduleName, module2] of Object.entries(this.shaderInputs.modules)) {
       if (shaderModuleHasUniforms(module2) && !((_a = this.material) == null ? void 0 : _a.ownsModule(moduleName))) {
-        const uniformBuffer = this._uniformStore.getManagedUniformBuffer(this.device, moduleName);
+        const uniformBuffer = this._uniformStore.getManagedUniformBuffer(moduleName);
         this.bindings[`${moduleName}Uniforms`] = uniformBuffer;
       }
     }
@@ -2516,9 +2581,10 @@ var _Model = class {
       return;
     }
     const framebuffer = renderPass.props.framebuffer;
-    if (framebuffer) {
-      debugFramebuffer(framebuffer, { id: framebuffer.id, minimap: true });
-    }
+    debugFramebuffer(renderPass, framebuffer, {
+      id: (framebuffer == null ? void 0 : framebuffer.id) || `${this.id}-framebuffer`,
+      minimap: true
+    });
   }
   _getAttributeDebugTable() {
     const table = {};
@@ -2699,10 +2765,10 @@ var Material = class {
       module2
     ]));
     this.shaderInputs = props.shaderInputs || new ShaderInputs(moduleMap);
-    this._uniformStore = new import_core9.UniformStore(this.shaderInputs.modules);
+    this._uniformStore = new import_core9.UniformStore(this.device, this.shaderInputs.modules);
     for (const [moduleName, module2] of Object.entries(this.shaderInputs.modules)) {
       if (this.ownsModule(moduleName) && shaderModuleHasUniforms(module2)) {
-        const uniformBuffer = this._uniformStore.getManagedUniformBuffer(this.device, moduleName);
+        const uniformBuffer = this._uniformStore.getManagedUniformBuffer(moduleName);
         this.bindings[`${moduleName}Uniforms`] = uniformBuffer;
       }
     }
@@ -3177,12 +3243,12 @@ var backgroundModule = {
 };
 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;
@@ -3204,7 +3270,7 @@ precision highp float;
 
 uniform sampler2D backgroundTexture;
 
-uniform backgroundUniforms {
+layout(std140) uniform backgroundUniforms {
   vec2 scale;
 } background;
 
@@ -3664,7 +3730,7 @@ function getLightMarkerShaders(anchorMode) {
   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>,
@@ -3714,7 +3780,7 @@ in vec3 instanceDirection;
 in vec3 instanceScale;
 in vec4 instanceColor;
 
-uniform lightMarkerUniforms {
+layout(std140) uniform lightMarkerUniforms {
   mat4 viewProjectionMatrix;
 } lightMarker;
 
@@ -4872,7 +4938,9 @@ function tesselateIcosaHedron(props) {
       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++) {
@@ -5237,8 +5305,8 @@ function getFragmentShaderForRenderPass(options) {
 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 {
@@ -5255,8 +5323,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 {
@@ -5570,10 +5638,10 @@ var _Computation = class {
   }
   setShaderInputs(shaderInputs) {
     this.shaderInputs = shaderInputs;
-    this._uniformStore = new import_core17.UniformStore(this.shaderInputs.modules);
+    this._uniformStore = new import_core17.UniformStore(this.device, this.shaderInputs.modules);
     for (const [moduleName, module2] of Object.entries(this.shaderInputs.modules)) {
       if (shaderModuleHasUniforms(module2)) {
-        const uniformBuffer = this._uniformStore.getManagedUniformBuffer(this.device, moduleName);
+        const uniformBuffer = this._uniformStore.getManagedUniformBuffer(moduleName);
         this.bindings[`${moduleName}Uniforms`] = uniformBuffer;
       }
     }
@@ -5704,7 +5772,7 @@ var GLSL_UNIFORMS = (
   `precision highp float;
 precision highp int;
 
-uniform pickingUniforms {
+layout(std140) uniform pickingUniforms {
   int isActive;
   int indexMode;
   int batchIndex;