@luma.gl/engine 9.0.0-alpha.27 → 9.0.0-alpha.29

package/dist/dist.dev.js

@@ -2147,8 +2147,8 @@ var __exports__ = (() => {
   function decodeVertexType(type) {
     const dataType = TYPE_MAP[type];
     const bytes = getDataTypeBytes(dataType);
-    const integer = !type.startsWith("float");
     const normalized = type.includes("norm");
+    const integer = !normalized && !type.startsWith("float");
     const signed = type.startsWith("s");
     return {
       dataType: TYPE_MAP[type],
@@ -5872,16 +5872,28 @@ void main() {
   };
   var Model = class {
     fs = null;
+    /** The underlying GPU "program". @note May be recreated if parameters change */
     userData = {};
+    // readonly props: Required<ModelProps>;
+    /** Vertex count */
+    /** instance count */
+    instanceCount = 0;
+    /** Buffer-valued attributes */
+    bufferAttributes = {};
+    /** Constant-valued attributes */
+    constantAttributes = {};
+    /** Bindings (textures, samplers, uniform buffers) */
+    bindings = {};
+    /** Uniforms */
+    uniforms = {};
     constructor(device, props) {
-      this.props = {
+      props = {
         ...DEFAULT_MODEL_PROPS,
         ...props
       };
-      props = this.props;
-      this.id = this.props.id;
+      this.id = props.id;
       this.device = device;
-      Object.assign(this.userData, this.props.userData);
+      Object.assign(this.userData, props.userData);
       if (!props.vs) {
         throw new Error("no vertex shader");
       }
@@ -5889,18 +5901,19 @@ void main() {
       if (props.fs) {
         this.fs = getShaderSource(this.device, props.fs);
       }
-      this.vertexCount = this.props.vertexCount;
-      this.topology = this.props.topology;
-      if (this.props.geometry) {
-        this.vertexCount = this.props.geometry.vertexCount;
-        this.topology = this.props.geometry.topology || "triangle-list";
+      this.vertexCount = props.vertexCount;
+      this.instanceCount = props.instanceCount;
+      this.topology = props.topology;
+      if (props.geometry) {
+        this.vertexCount = props.geometry.vertexCount;
+        this.topology = props.geometry.topology || "triangle-list";
       }
-      this.pipelineFactory = this.props.pipelineFactory || PipelineFactory.getDefaultPipelineFactory(this.device);
+      this.pipelineFactory = props.pipelineFactory || PipelineFactory.getDefaultPipelineFactory(this.device);
       const {
         pipeline,
         getUniforms
       } = this.pipelineFactory.createRenderPipeline({
-        ...this.props,
+        ...props,
         vs: this.vs,
         fs: this.fs,
         topology: this.topology,
@@ -5910,11 +5923,11 @@ void main() {
       });
       this.pipeline = pipeline;
       this._getModuleUniforms = getUniforms;
-      if (this.props.geometry) {
-        this._setGeometry(this.props.geometry);
+      if (props.geometry) {
+        this._setGeometry(props.geometry);
       }
       this.setUniforms(this._getModuleUniforms());
-      this.setProps(this.props);
+      this.setProps(props);
     }
     destroy() {
       this.pipelineFactory.release(this.pipeline);
@@ -5923,9 +5936,8 @@ void main() {
       this.pipeline.draw({
         renderPass,
         vertexCount: this.vertexCount,
-        instanceCount: this.props.instanceCount
+        instanceCount: this.instanceCount
       });
-      return this;
     }
     setProps(props) {
       if (props.indices) {
@@ -5943,71 +5955,33 @@ void main() {
       if (props.moduleSettings) {
         this.updateModuleSettings(props.moduleSettings);
       }
-      return this;
     }
     updateModuleSettings(props) {
       const uniforms = this._getModuleUniforms(props);
       this.setUniforms(uniforms);
-      return this;
     }
     setIndexBuffer(indices) {
       this.pipeline.setIndexBuffer(indices);
-      return this;
-    }
-    // Temporary hack to support deck.gl's dependency on luma.gl v8 Model attribute API.
-    _splitAttributes(attributes, filterBuffers) {
-      const bufferAttributes = {};
-      const constantAttributes = {};
-      const indices = attributes.indices;
-      delete attributes.indices;
-      for (const name in attributes) {
-        let attribute = attributes[name];
-        if (attribute instanceof Buffer2) {
-          bufferAttributes[name] = attribute;
-          continue;
-        }
-        if (attribute.getValue) {
-          attribute = attribute.getValue();
-          console.warn(`attribute ${name}: getValue() will be removed`);
-        }
-        if (ArrayBuffer.isView(attribute) && !attribute) {
-          constantAttributes[name] = attribute;
-          continue;
-        }
-        if (filterBuffers && attribute[name]._buffer) {
-          buffer[name] = attribute[name]._buffer;
-        }
-      }
-      return {
-        bufferAttributes,
-        constantAttributes,
-        indices
-      };
     }
-    setAttributes(attributes, filterBuffers) {
-      const {
-        bufferAttributes,
-        constantAttributes,
-        indices
-      } = this._splitAttributes(attributes, filterBuffers);
-      if (indices) {
-        this.setIndexBuffer(indices);
-        console.warn("luma.gl: indices should not be part of attributes");
+    setAttributes(bufferAttributes) {
+      if (bufferAttributes.indices) {
+        log.warn(`Model:${this.id} setAttributes() - indices should be set using setIndexBuffer()`);
       }
       this.pipeline.setAttributes(bufferAttributes);
+      Object.assign(this.bufferAttributes, bufferAttributes);
+    }
+    setConstantAttributes(constantAttributes) {
       this.pipeline.setConstantAttributes(constantAttributes);
-      Object.assign(this.props.attributes, bufferAttributes, constantAttributes);
+      Object.assign(this.constantAttributes, constantAttributes);
     }
     /** Set the bindings */
     setBindings(bindings) {
       this.pipeline.setBindings(bindings);
-      Object.assign(this.props.bindings, bindings);
-      return this;
+      Object.assign(this.bindings, bindings);
     }
     setUniforms(uniforms) {
       this.pipeline.setUniforms(uniforms);
-      Object.assign(this.props.uniforms, uniforms);
-      return this;
+      Object.assign(this.uniforms, uniforms);
     }
     _setGeometry(geometry) {
       const geometryBuffers = getAttributeBuffersFromGeometry(this.device, geometry);
@@ -6839,13 +6813,13 @@ void main() {
       attrib.enabled = false;
       return original.disableVertexAttribArray.apply(this, arguments);
     };
-    gl.bindBuffer = function bindBuffer2(target, buffer2) {
+    gl.bindBuffer = function bindBuffer2(target, buffer) {
       switch (target) {
         case gl.ARRAY_BUFFER:
-          self.currentArrayBuffer = buffer2;
+          self.currentArrayBuffer = buffer;
           break;
         case gl.ELEMENT_ARRAY_BUFFER:
-          self.currentVertexArrayObject.elementArrayBuffer = buffer2;
+          self.currentVertexArrayObject.elementArrayBuffer = buffer;
           break;
         default:
       }
@@ -7482,8 +7456,8 @@ void main() {
       [GL.PIXEL_PACK_BUFFER_BINDING]: GL.PIXEL_PACK_BUFFER,
       [GL.PIXEL_UNPACK_BUFFER_BINDING]: GL.PIXEL_UNPACK_BUFFER
     };
-    const target = bindingMap[key];
-    gl.bindBuffer(target, value);
+    const glTarget = bindingMap[key];
+    gl.bindBuffer(glTarget, value);
   };
   function isArray2(array) {
     return Array.isArray(array) || ArrayBuffer.isView(array) && !(array instanceof DataView);
@@ -7684,7 +7658,7 @@ void main() {
           return null;
       }
     },
-    bindBuffer: (update, target, buffer2) => {
+    bindBuffer: (update, target, buffer) => {
       const pname = {
         [GL.ARRAY_BUFFER]: [GL.ARRAY_BUFFER_BINDING],
         [GL.COPY_READ_BUFFER]: [GL.COPY_READ_BUFFER_BINDING],
@@ -7694,7 +7668,7 @@ void main() {
       }[target];
       if (pname) {
         return update({
-          [pname]: buffer2
+          [pname]: buffer
         });
       }
       return {
@@ -9604,8 +9578,14 @@ void main(void) {}`;
   // ../webgl/src/adapter/resources/webgl-buffer.ts
   var DEBUG_DATA_LENGTH = 10;
   var WEBGLBuffer = class extends Buffer2 {
+    /** Target in OpenGL defines the type of buffer */
+    /** Usage is a hint on how frequently the buffer will be updates */
+    /** Index type is needed when issuing draw calls, so we pre-compute it */
+    glIndexType = GL.UNSIGNED_SHORT;
+    /** Number of bytes allocated on the GPU for this buffer */
+    /** Number of bytes used */
+    /** A partial CPU-side copy of the data in this buffer, for debugging purposes */
     debugData = null;
-    // accessor: {};
     constructor(device, props = {}) {
       super(device, props);
       this.device = device;
@@ -9617,8 +9597,9 @@ void main(void) {}`;
         ...this.props,
         data: typeof this.props.data
       });
-      this.target = this.props.target || getWebGLTarget(this.props.usage);
-      this.webglUsage = this.props.webglUsage || getWebGLUsage(this.props.usage);
+      this.glTarget = getWebGLTarget(this.props.usage);
+      this.glUsage = getWebGLUsage(this.props.usage);
+      this.glIndexType = this.props.indexType === "uint32" ? GL.UNSIGNED_INT : GL.UNSIGNED_SHORT;
       this.debugData = null;
       if (props.data) {
         this._initWithData(props.data, props.byteOffset, props.byteLength);
@@ -9627,14 +9608,14 @@ void main(void) {}`;
       }
     }
     // PRIVATE METHODS
-    // Allocate a new buffer and initialize to contents of typed array
+    /** Allocate a new buffer and initialize to contents of typed array */
     _initWithData(data, byteOffset = 0, byteLength = data.byteLength + byteOffset) {
       assert2(ArrayBuffer.isView(data));
-      const target = this._getWriteTarget();
-      this.gl.bindBuffer(target, this.handle);
-      this.gl.bufferData(target, byteLength, this.webglUsage);
-      this.gl.bufferSubData(target, byteOffset, data);
-      this.gl.bindBuffer(target, null);
+      const glTarget = this._getWriteTarget();
+      this.gl.bindBuffer(glTarget, this.handle);
+      this.gl.bufferData(glTarget, byteLength, this.glUsage);
+      this.gl.bufferSubData(glTarget, byteOffset, data);
+      this.gl.bindBuffer(glTarget, null);
       this.debugData = data.slice(0, DEBUG_DATA_LENGTH);
       this.bytesUsed = byteLength;
       this.byteLength = byteLength;
@@ -9648,10 +9629,10 @@ void main(void) {}`;
       if (byteLength === 0) {
         data = new Float32Array(0);
       }
-      const target = this._getWriteTarget();
-      this.gl.bindBuffer(target, this.handle);
-      this.gl.bufferData(target, data, this.webglUsage);
-      this.gl.bindBuffer(target, null);
+      const glTarget = this._getWriteTarget();
+      this.gl.bindBuffer(glTarget, this.handle);
+      this.gl.bufferData(glTarget, data, this.glUsage);
+      this.gl.bindBuffer(glTarget, null);
       this.debugData = null;
       this.bytesUsed = byteLength;
       this.byteLength = byteLength;
@@ -9669,15 +9650,15 @@ void main(void) {}`;
     write(data, byteOffset = 0) {
       const srcOffset = 0;
       const byteLength = void 0;
-      const target = this.device.isWebGL2 ? GL.COPY_WRITE_BUFFER : this.target;
-      this.gl.bindBuffer(target, this.handle);
+      const glTarget = this.device.isWebGL2 ? GL.COPY_WRITE_BUFFER : this.glTarget;
+      this.gl.bindBuffer(glTarget, this.handle);
       if (srcOffset !== 0 || byteLength !== void 0) {
         this.device.assertWebGL2();
-        this.gl2.bufferSubData(target, byteOffset, data, srcOffset, byteLength);
+        this.gl2.bufferSubData(glTarget, byteOffset, data, srcOffset, byteLength);
       } else {
-        this.gl.bufferSubData(target, byteOffset, data);
+        this.gl.bufferSubData(glTarget, byteOffset, data);
       }
-      this.gl.bindBuffer(target, null);
+      this.gl.bindBuffer(glTarget, null);
     }
     /** Read data from the buffer */
     async readAsync(byteOffset = 0, byteLength) {
@@ -9694,10 +9675,10 @@ void main(void) {}`;
       this.debugData = null;
     }
     _getWriteTarget() {
-      return this.target;
+      return this.glTarget;
     }
     _getReadTarget() {
-      return this.target;
+      return this.glTarget;
     }
   };
   function getWebGLTarget(usage) {
@@ -9722,7 +9703,7 @@ void main(void) {}`;
     if (usage & Buffer2.UNIFORM) {
       return GL.DYNAMIC_DRAW;
     }
-    return GL.DYNAMIC_DRAW;
+    return GL.STATIC_DRAW;
   }
 
   // ../webgl/src/adapter/resources/webgl-sampler.ts
@@ -11143,7 +11124,7 @@ void main(void) {}`;
     return gl.luma;
   }
   async function loadWebGLDeveloperTools() {
-    if (!globalThis.WebGLDebugUtils) {
+    if (isBrowser() && !globalThis.WebGLDebugUtils) {
       globalThis.global = globalThis.global || globalThis;
       globalThis.global.module = {};
       await loadScript(WEBGL_DEBUG_CDN_URL);
@@ -11440,9 +11421,6 @@ void main(void) {}`;
     const bufferProps = {
       ...props
     };
-    if (bufferProps.offset) {
-      bufferProps.byteOffset = bufferProps.offset;
-    }
     return bufferProps;
   }
   var BufferWithAccessor = class extends WEBGLBuffer {
@@ -11485,11 +11463,11 @@ void main(void) {}`;
         };
       }
       props = checkProps("Buffer", props, PROP_CHECKS_INITIALIZE);
-      this.webglUsage = props.webglUsage || GL.STATIC_DRAW;
+      this.glUsage = props.glUsage || GL.STATIC_DRAW;
       this.debugData = null;
       this.setAccessor(Object.assign({}, props, props.accessor));
       if (props.data) {
-        this._setData(props.data, props.offset, props.byteLength);
+        this._setData(props.data, props.byteOffset, props.byteLength);
       } else {
         this._setByteLength(props.byteLength || 0);
       }
@@ -11545,15 +11523,15 @@ void main(void) {}`;
       } = options;
       const byteLength = options.byteLength || options.length;
       assert2(data);
-      const target = this.gl.webgl2 ? GL.COPY_WRITE_BUFFER : this.target;
-      this.gl.bindBuffer(target, this.handle);
+      const glTarget = this.gl.webgl2 ? GL.COPY_WRITE_BUFFER : this.glTarget;
+      this.gl.bindBuffer(glTarget, this.handle);
       if (srcOffset !== 0 || byteLength !== void 0) {
         assertWebGL2Context(this.gl);
-        this.gl.bufferSubData(this.target, offset, data, srcOffset, byteLength);
+        this.gl.bufferSubData(this.glTarget, offset, data, srcOffset, byteLength);
       } else {
-        this.gl.bufferSubData(target, offset, data);
+        this.gl.bufferSubData(glTarget, offset, data);
       }
-      this.gl.bindBuffer(target, null);
+      this.gl.bindBuffer(glTarget, null);
       this.debugData = null;
       this._inferType(data);
       return this;
@@ -11628,35 +11606,35 @@ void main(void) {}`;
      */
     bind(options) {
       const {
-        target = this.target,
+        glTarget = this.glTarget,
         // target for the bind operation
         index = this.accessor && this.accessor.index,
         // index = index of target (indexed bind point)
         offset = 0,
         size
       } = options || {};
-      if (target === GL.UNIFORM_BUFFER || target === GL.TRANSFORM_FEEDBACK_BUFFER) {
+      if (glTarget === GL.UNIFORM_BUFFER || glTarget === GL.TRANSFORM_FEEDBACK_BUFFER) {
         if (size !== void 0) {
-          this.gl2?.bindBufferRange(target, index, this.handle, offset, size);
+          this.gl2?.bindBufferRange(glTarget, index, this.handle, offset, size);
         } else {
           assert2(offset === 0);
-          this.gl2?.bindBufferBase(target, index, this.handle);
+          this.gl2?.bindBufferBase(glTarget, index, this.handle);
         }
       } else {
-        this.gl.bindBuffer(target, this.handle);
+        this.gl.bindBuffer(glTarget, this.handle);
       }
       return this;
     }
     unbind(options) {
       const {
-        target = this.target,
+        glTarget = this.glTarget,
         index = this.accessor && this.accessor.index
       } = options || {};
-      const isIndexedBuffer = target === GL.UNIFORM_BUFFER || target === GL.TRANSFORM_FEEDBACK_BUFFER;
+      const isIndexedBuffer = glTarget === GL.UNIFORM_BUFFER || glTarget === GL.TRANSFORM_FEEDBACK_BUFFER;
       if (isIndexedBuffer) {
-        this.gl2?.bindBufferBase(target, index, null);
+        this.gl2?.bindBufferBase(glTarget, index, null);
       } else {
-        this.gl.bindBuffer(target, null);
+        this.gl.bindBuffer(glTarget, null);
       }
       return this;
     }
@@ -11687,7 +11665,7 @@ void main(void) {}`;
       this.trackDeallocatedMemory();
       const target = this._getTarget();
       this.gl.bindBuffer(target, this.handle);
-      this.gl.bufferData(target, byteLength, this.webglUsage);
+      this.gl.bufferData(target, byteLength, this.glUsage);
       this.gl.bufferSubData(target, offset, data);
       this.gl.bindBuffer(target, null);
       this.debugData = data.slice(0, DEBUG_DATA_LENGTH2);
@@ -11702,18 +11680,17 @@ void main(void) {}`;
       return this;
     }
     // Allocate a GPU buffer of specified size.
-    _setByteLength(byteLength, webglUsage = this.webglUsage) {
+    _setByteLength(byteLength) {
       assert2(byteLength >= 0);
       this.trackDeallocatedMemory();
       let data = byteLength;
       if (byteLength === 0) {
         data = new Float32Array(0);
       }
-      const target = this._getTarget();
-      this.gl.bindBuffer(target, this.handle);
-      this.gl.bufferData(target, data, webglUsage);
-      this.gl.bindBuffer(target, null);
-      this.webglUsage = webglUsage;
+      const glTarget = this._getTarget();
+      this.gl.bindBuffer(glTarget, this.handle);
+      this.gl.bufferData(glTarget, data, this.glUsage);
+      this.gl.bindBuffer(glTarget, null);
       this.debugData = null;
       this.bytesUsed = byteLength;
       this.byteLength = byteLength;
@@ -11723,7 +11700,7 @@ void main(void) {}`;
     // Binding a buffer for the first time locks the type
     // In WebGL2, use GL.COPY_WRITE_BUFFER to avoid locking the type
     _getTarget() {
-      return this.gl.webgl2 ? GL.COPY_WRITE_BUFFER : this.target;
+      return this.gl.webgl2 ? GL.COPY_WRITE_BUFFER : this.glTarget;
     }
     _getAvailableElementCount(srcByteOffset) {
       const ArrayType = getTypedArrayFromGLType(this.accessor.type || GL.FLOAT, {
@@ -11743,9 +11720,9 @@ void main(void) {}`;
     }
     // RESOURCE METHODS
     getParameter(pname) {
-      this.gl.bindBuffer(this.target, this.handle);
-      const value = this.gl.getBufferParameter(this.target, pname);
-      this.gl.bindBuffer(this.target, null);
+      this.gl.bindBuffer(this.glTarget, this.handle);
+      const value = this.gl.getBufferParameter(this.glTarget, pname);
+      this.gl.bindBuffer(this.glTarget, null);
       return value;
     }
     // DEPRECATIONS - v7.0
@@ -12091,12 +12068,12 @@ ${formattedLog}`)();
 
   // ../webgl/src/adapter/helpers/get-shader-layout.ts
   function getShaderLayout(gl, program) {
-    const programBindings = getProgramBindings(gl, program);
     const shaderLayout = {
       attributes: [],
       bindings: []
     };
-    for (const attribute of programBindings.attributes) {
+    const attributes = readAttributeBindings(gl, program);
+    for (const attribute of attributes) {
       const size = Math.min(attribute.accessor.size, 4);
       const format = (
         // attribute.accessor.format ||
@@ -12109,7 +12086,8 @@ ${formattedLog}`)();
         stepMode: attribute.accessor.divisor === 1 ? "instance" : "vertex"
       });
     }
-    for (const uniformBlock of programBindings.uniformBlocks) {
+    const uniformBlocks = readUniformBlocks(gl, program);
+    for (const uniformBlock of uniformBlocks) {
       const uniforms2 = uniformBlock.uniforms.map((uniform) => ({
         name: uniform.name,
         format: uniform.format,
@@ -12126,8 +12104,9 @@ ${formattedLog}`)();
         uniforms: uniforms2
       });
     }
+    const uniforms = readUniformBindings(gl, program);
     let textureUnit = 0;
-    for (const uniform of programBindings.uniforms) {
+    for (const uniform of uniforms) {
       if (isSamplerUniform(uniform.type)) {
         const {
           viewDimension,
@@ -12144,24 +12123,65 @@ ${formattedLog}`)();
         textureUnit += 1;
       }
     }
-    const uniforms = programBindings.uniforms?.filter((uniform) => uniform.location !== null) || [];
     if (uniforms.length) {
       shaderLayout.uniforms = uniforms;
     }
-    if (programBindings.varyings?.length) {
-      shaderLayout.varyings = programBindings.varyings;
+    const varyings = readVaryings(gl, program);
+    if (varyings?.length) {
+      shaderLayout.varyings = varyings;
     }
     return shaderLayout;
   }
-  function getProgramBindings(gl, program) {
-    const config2 = {
-      attributes: readAttributeBindings(gl, program),
-      uniforms: readUniformBindings(gl, program),
-      uniformBlocks: readUniformBlocks(gl, program),
-      varyings: readVaryings(gl, program)
+  function mergeShaderLayout(baseLayout, overrideLayout) {
+    const mergedLayout = {
+      ...baseLayout,
+      attributes: baseLayout.attributes.map((attribute) => ({
+        ...attribute
+      }))
     };
-    Object.seal(config2);
-    return config2;
+    for (const attribute of overrideLayout?.attributes || []) {
+      const baseAttribute = mergedLayout.attributes.find((attr) => attr.name === attribute.name);
+      if (!baseAttribute) {
+        log.warn(`shader layout attribute ${attribute.name} not present in shader`);
+      } else {
+        baseAttribute.format = attribute.format || baseAttribute.format;
+        baseAttribute.stepMode = attribute.stepMode || baseAttribute.stepMode;
+      }
+    }
+    return mergedLayout;
+  }
+  function mergeBufferMap(baseLayout, bufferMap) {
+    const mergedLayout = {
+      ...baseLayout,
+      attributes: baseLayout.attributes.map((attribute) => ({
+        ...attribute
+      }))
+    };
+    for (const bufferMapping of bufferMap) {
+      switch (bufferMapping.type) {
+        case "interleave":
+          for (const attributeOverride of bufferMapping.attributes) {
+            overrideShaderLayoutAttribute(mergedLayout, attributeOverride);
+          }
+          break;
+        default:
+          overrideShaderLayoutAttribute(mergedLayout, bufferMapping);
+      }
+    }
+    return mergedLayout;
+  }
+  function overrideShaderLayoutAttribute(layout, attributeOverride) {
+    const attribute = getAttributeFromLayout(layout, attributeOverride.name);
+    if (attribute && attributeOverride.format) {
+      attribute.format = attributeOverride.format;
+    }
+  }
+  function getAttributeFromLayout(shaderLayout, name) {
+    const attribute = shaderLayout.attributes.find((attr) => attr.name === name);
+    if (!attribute) {
+      log.warn(`shader layout attribute "${name}" not present in shader`);
+    }
+    return attribute || null;
   }
   function readAttributeBindings(gl, program) {
     const attributes = [];
@@ -12507,15 +12527,15 @@ ${formattedLog}`)();
     // Set (bind) an elements buffer, for indexed rendering.
     // Must be a Buffer bound to GL.ELEMENT_ARRAY_BUFFER. Constants not supported
     setElementBuffer(elementBuffer = null, opts = {}) {
-      assert2(!elementBuffer || elementBuffer.target === GL.ELEMENT_ARRAY_BUFFER, ERR_ELEMENTS);
+      assert2(!elementBuffer || elementBuffer.glTarget === GL.ELEMENT_ARRAY_BUFFER, ERR_ELEMENTS);
       this.bind(() => {
         this.gl.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, elementBuffer ? elementBuffer.handle : null);
       });
     }
     /** Set a location in vertex attributes array to a buffer, enables the location, sets divisor */
-    setBuffer(location, buffer2, accessor) {
-      if (buffer2.target === GL.ELEMENT_ARRAY_BUFFER) {
-        this.setElementBuffer(buffer2, accessor);
+    setBuffer(location, buffer, accessor) {
+      if (buffer.glTarget === GL.ELEMENT_ARRAY_BUFFER) {
+        this.setElementBuffer(buffer, accessor);
         return;
       }
       const {
@@ -12533,7 +12553,7 @@ ${formattedLog}`)();
       } = this;
       location = Number(location);
       this.bind(() => {
-        gl.bindBuffer(gl.ARRAY_BUFFER, buffer2.handle);
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer.handle);
         if (integer) {
           this.device.assertWebGL2();
           gl2.vertexAttribIPointer(location, size, type, stride, offset);
@@ -12647,11 +12667,23 @@ ${formattedLog}`)();
   // ../webgl/src/adapter/resources/webgl-render-pipeline.ts
   var LOG_PROGRAM_PERF_PRIORITY = 4;
   var WEBGLRenderPipeline = class extends RenderPipeline {
-    // configuration: ProgramConfiguration;
-    // Experimental flag to avoid deleting Program object while it is cached
-    varyings = null;
+    /** The WebGL device that created this render pipeline */
+    /** Handle to underlying WebGL program */
+    /** vertex shader */
+    /** fragment shader */
+    /** The merged layout */
+    /** The layout extracted from shader by WebGL introspection APIs */
+    /** Buffer map describing buffer interleaving etc */
+    /** Uniforms set on this model */
     uniforms = {};
+    /** Bindings set on this model */
     bindings = {};
+    /** Any constant attributes */
+    constantAttributes = {};
+    /** Index buffer is stored separately */
+    /** WebGL varyings */
+    varyings = null;
+    /** Stores attribute bindings */
     _textureUniforms = {};
     _textureIndexCounter = 0;
     _uniformCount = 0;
@@ -12676,7 +12708,10 @@ ${formattedLog}`)();
         this.device.gl2?.transformFeedbackVaryings(this.handle, varyings, bufferMode);
       }
       this._compileAndLink();
-      this.layout = props.layout || getShaderLayout(this.device.gl, this.handle);
+      this.introspectedLayout = getShaderLayout(this.device.gl, this.handle);
+      this.layout = mergeShaderLayout(this.introspectedLayout, props.layout);
+      this.bufferMap = props.bufferMap || [];
+      this.layout = mergeBufferMap(this.layout, this.bufferMap);
       this.vertexArrayObject = new WEBGLVertexArrayObject(this.device);
     }
     destroy() {
@@ -12688,15 +12723,15 @@ ${formattedLog}`)();
     setIndexBuffer(indexBuffer) {
       const webglBuffer = cast(indexBuffer);
       this.vertexArrayObject.setElementBuffer(webglBuffer);
-      this._indexBuffer = indexBuffer;
+      this._indexBuffer = webglBuffer;
     }
     /** @todo needed for portable model */
     setAttributes(attributes) {
-      for (const [name, buffer2] of Object.entries(attributes)) {
-        const webglBuffer = cast(buffer2);
+      for (const [name, buffer] of Object.entries(attributes)) {
+        const webglBuffer = cast(buffer);
         const attribute = getAttributeLayout(this.layout, name);
         if (!attribute) {
-          log.warn(`Ignoring buffer supplied for unknown attribute "${name}" in pipeline "${this.id}" (buffer "${buffer2.id}")`)();
+          log.warn(`Ignoring buffer supplied for unknown attribute "${name}" in pipeline "${this.id}" (buffer "${buffer.id}")`)();
           continue;
         }
         const decoded = decodeVertexFormat(attribute.format);
@@ -12735,6 +12770,7 @@ ${formattedLog}`)();
         }
         this.vertexArrayObject.setConstant(attribute.location, value);
       }
+      Object.assign(this.constantAttributes, attributes);
     }
     /** 
      * Bindings include: textures, samplers and uniform buffers
@@ -12790,7 +12826,7 @@ ${formattedLog}`)();
       } = options;
       const drawMode = getDrawMode(this.props.topology);
       const isIndexed = Boolean(this._indexBuffer);
-      const indexType = this._indexBuffer?.props.indexType === "uint16" ? GL.UNSIGNED_SHORT : GL.UNSIGNED_INT;
+      const indexType = this._indexBuffer?.glIndexType;
       const isInstanced = Number(options.instanceCount) > 0;
       if (!this._areTexturesRenderable() || options.vertexCount === 0) {
         return false;
@@ -12804,6 +12840,7 @@ ${formattedLog}`)();
         }
         this._applyBindings();
         this._applyUniforms();
+        this._applyConstantAttributes();
         const webglRenderPass = renderPass;
         withDeviceParameters(this.device, this.props.parameters, () => {
           withGLParameters(this.device, webglRenderPass.glParameters, () => {
@@ -12937,6 +12974,21 @@ ${formattedLog}`)();
         }
       }
     }
+    /**
+     * Constant attributes are only supported in WebGL, not in WebGPU
+     * Any attribute that is disabled in the current vertex array object
+     * is read from the context's global constant value for that attribute location.
+     */
+    _applyConstantAttributes() {
+      for (const [name, value] of Object.entries(this.constantAttributes)) {
+        const attribute = getAttributeLayout(this.layout, name);
+        if (!attribute) {
+          log.warn(`Ignoring constant value supplied for unknown attribute "${name}" in pipeline "${this.id}"`)();
+          continue;
+        }
+        this.vertexArrayObject.setConstant(attribute.location, value);
+      }
+    }
   };
   function getDrawMode(topology) {
     switch (topology) {
@@ -13275,10 +13327,13 @@ ${formattedLog}`)();
       if (typeof props.canvas === "string") {
         await CanvasContext.pageLoaded;
       }
-      if (props.debug) {
+      if (log.get("debug") || props.debug) {
         await loadWebGLDeveloperTools();
       }
-      if (props.spector) {
+      const {
+        spector: spector2
+      } = props;
+      if (log.get("spector") || spector2) {
         await loadSpectorJS();
       }
       log.probe(LOG_LEVEL2 + 1, "DOM is loaded")();