@luma.gl/webgl 9.0.0-alpha.26 → 9.0.0-alpha.29

package/dist/dist.dev.js

@@ -55,11 +55,11 @@ var __exports__ = (() => {
     convertGLToTextureFormat: () => convertGLToTextureFormat,
     copyToTexture: () => copyToTexture,
     getParameters: () => getParameters,
-    getProgramBindings: () => getProgramBindings,
     getShaderLayout: () => getShaderLayout,
     getWebGL2Context: () => getWebGL2Context,
     isWebGL: () => isWebGL,
     isWebGL2: () => isWebGL2,
+    mergeShaderLayout: () => mergeShaderLayout,
     polyfillContext: () => polyfillContext,
     popContextState: () => popContextState,
     pushContextState: () => pushContextState,
@@ -1851,6 +1851,7 @@ var __exports__ = (() => {
   };
   /** Set attributes (stored on pipeline and set before each call) */
   /** Set attributes (stored on pipeline and set before each call) */
+  /** Set constant attributes (WebGL only) */
   /** Set bindings (stored on pipeline and set before each call) */
   /** Uniforms (only supported on WebGL devices. Reset before each call to enable pipeline sharing) */
   /** Draw call */
@@ -1969,8 +1970,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],
@@ -2256,6 +2257,43 @@ var __exports__ = (() => {
     });
   }
 
+  // ../api/src/lib/utils/array-utils-flat.ts
+  var arrayBuffer;
+  function getScratchArrayBuffer(byteLength) {
+    if (!arrayBuffer || arrayBuffer.byteLength < byteLength) {
+      arrayBuffer = new ArrayBuffer(byteLength);
+    }
+    return arrayBuffer;
+  }
+  function getScratchArray(Type, length) {
+    const scratchArrayBuffer = getScratchArrayBuffer(Type.BYTES_PER_ELEMENT * length);
+    return new Type(scratchArrayBuffer, 0, length);
+  }
+  function fillArray(options) {
+    const {
+      target,
+      source,
+      start = 0,
+      count = 1
+    } = options;
+    const length = source.length;
+    const total = count * length;
+    let copied = 0;
+    for (let i = start; copied < length; copied++) {
+      target[i++] = source[copied];
+    }
+    while (copied < total) {
+      if (copied < total - copied) {
+        target.copyWithin(start + copied, start, start + copied);
+        copied *= 2;
+      } else {
+        target.copyWithin(start + copied, start, start + total - copied);
+        copied = total;
+      }
+    }
+    return options.target;
+  }
+
   // src/context/polyfill/polyfill-vertex-array-object.ts
   var glErrorShadow = {};
   function error(msg) {
@@ -3665,8 +3703,8 @@ var __exports__ = (() => {
       [GL.PIXEL_PACK_BUFFER_BINDING]: GL.PIXEL_PACK_BUFFER,
       [GL.PIXEL_UNPACK_BUFFER_BINDING]: GL.PIXEL_UNPACK_BUFFER
     };
-    const target = bindingMap[key];
-    gl2.bindBuffer(target, value);
+    const glTarget = bindingMap[key];
+    gl2.bindBuffer(glTarget, value);
   };
   function isArray(array) {
     return Array.isArray(array) || ArrayBuffer.isView(array) && !(array instanceof DataView);
@@ -5790,8 +5828,14 @@ void main(void) {}`;
   // 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;
@@ -5803,8 +5847,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);
@@ -5813,14 +5858,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;
@@ -5834,10 +5879,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;
@@ -5855,15 +5900,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) {
@@ -5880,10 +5925,10 @@ void main(void) {}`;
       this.debugData = null;
     }
     _getWriteTarget() {
-      return this.target;
+      return this.glTarget;
     }
     _getReadTarget() {
-      return this.target;
+      return this.glTarget;
     }
   };
   function getWebGLTarget(usage) {
@@ -5908,7 +5953,7 @@ void main(void) {}`;
     if (usage & Buffer2.UNIFORM) {
       return GL.DYNAMIC_DRAW;
     }
-    return GL.DYNAMIC_DRAW;
+    return GL.STATIC_DRAW;
   }
 
   // src/adapter/resources/webgl-sampler.ts
@@ -7329,7 +7374,7 @@ void main(void) {}`;
     return gl2.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);
@@ -7626,9 +7671,6 @@ void main(void) {}`;
     const bufferProps = {
       ...props
     };
-    if (bufferProps.offset) {
-      bufferProps.byteOffset = bufferProps.offset;
-    }
     return bufferProps;
   }
   var BufferWithAccessor = class extends WEBGLBuffer {
@@ -7671,11 +7713,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);
       }
@@ -7731,15 +7773,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;
@@ -7814,35 +7856,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;
     }
@@ -7873,7 +7915,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);
@@ -7888,18 +7930,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;
@@ -7909,7 +7950,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, {
@@ -7929,9 +7970,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
@@ -8277,12 +8318,12 @@ ${formattedLog}`)();
 
   // src/adapter/helpers/get-shader-layout.ts
   function getShaderLayout(gl2, program) {
-    const programBindings = getProgramBindings(gl2, program);
     const shaderLayout = {
       attributes: [],
       bindings: []
     };
-    for (const attribute of programBindings.attributes) {
+    const attributes = readAttributeBindings(gl2, program);
+    for (const attribute of attributes) {
       const size = Math.min(attribute.accessor.size, 4);
       const format = (
         // attribute.accessor.format ||
@@ -8295,7 +8336,8 @@ ${formattedLog}`)();
         stepMode: attribute.accessor.divisor === 1 ? "instance" : "vertex"
       });
     }
-    for (const uniformBlock of programBindings.uniformBlocks) {
+    const uniformBlocks = readUniformBlocks(gl2, program);
+    for (const uniformBlock of uniformBlocks) {
       const uniforms2 = uniformBlock.uniforms.map((uniform) => ({
         name: uniform.name,
         format: uniform.format,
@@ -8312,8 +8354,9 @@ ${formattedLog}`)();
         uniforms: uniforms2
       });
     }
+    const uniforms = readUniformBindings(gl2, program);
     let textureUnit = 0;
-    for (const uniform of programBindings.uniforms) {
+    for (const uniform of uniforms) {
       if (isSamplerUniform(uniform.type)) {
         const {
           viewDimension,
@@ -8330,24 +8373,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(gl2, program);
+    if (varyings?.length) {
+      shaderLayout.varyings = varyings;
     }
     return shaderLayout;
   }
-  function getProgramBindings(gl2, program) {
-    const config = {
-      attributes: readAttributeBindings(gl2, program),
-      uniforms: readUniformBindings(gl2, program),
-      uniformBlocks: readUniformBlocks(gl2, program),
-      varyings: readVaryings(gl2, program)
+  function mergeShaderLayout(baseLayout, overrideLayout) {
+    const mergedLayout = {
+      ...baseLayout,
+      attributes: baseLayout.attributes.map((attribute) => ({
+        ...attribute
+      }))
     };
-    Object.seal(config);
-    return config;
+    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(gl2, program) {
     const attributes = [];
@@ -8646,8 +8730,25 @@ ${formattedLog}`)();
     get [Symbol.toStringTag]() {
       return "BaseVertexArrayObject";
     }
+    /** Buffer constant */
+    buffer = null;
+    bufferValue = null;
+    static isConstantAttributeZeroSupported(device) {
+      return device.info.type === "webgl2" || getBrowser() === "Chrome";
+    }
+    // Create a VertexArray
     constructor(device, props) {
-      super(device, props, {});
+      super(device, props, {
+        ...Resource.defaultProps,
+        constantAttributeZero: false
+      });
+      Object.seal(this);
+    }
+    destroy() {
+      super.destroy();
+      if (this.buffer) {
+        this.buffer?.destroy();
+      }
     }
     _createHandle() {
       return this.gl2.createVertexArray();
@@ -8659,19 +8760,33 @@ ${formattedLog}`)();
     _bindHandle(handle) {
       this.gl2.bindVertexArray(handle);
     }
+    /**
+     * Enabling an attribute location makes it reference the currently bound buffer
+     *  Disabling an attribute location makes it reference the global constant value
+     * TODO - handle single values for size 1 attributes?
+     * TODO - convert classic arrays based on known type?
+     */
+    enable(location, enable2 = true) {
+      const canDisableAttributeZero = this.device.isWebGL2 || getBrowser() === "Chrome";
+      const canDisableAttribute = canDisableAttributeZero || location !== 0;
+      if (enable2 || canDisableAttribute) {
+        location = Number(location);
+        this.bind(() => enable2 ? this.gl.enableVertexAttribArray(location) : this.gl.disableVertexAttribArray(location));
+      }
+    }
     // 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);
       });
-      return this;
     }
     /** Set a location in vertex attributes array to a buffer, enables the location, sets divisor */
     setBuffer(location, buffer, accessor) {
-      if (buffer.target === GL.ELEMENT_ARRAY_BUFFER) {
-        return this.setElementBuffer(buffer, accessor);
+      if (buffer.glTarget === GL.ELEMENT_ARRAY_BUFFER) {
+        this.setElementBuffer(buffer, accessor);
+        return;
       }
       const {
         size,
@@ -8698,33 +8813,127 @@ ${formattedLog}`)();
         gl2.enableVertexAttribArray(location);
         gl22.vertexAttribDivisor(location, divisor || 0);
       });
-      return this;
     }
     /**
-     * Enabling an attribute location makes it reference the currently bound buffer
-     *  Disabling an attribute location makes it reference the global constant value
-     * TODO - handle single values for size 1 attributes?
-     * TODO - convert classic arrays based on known type?
+     * Set an attribute to a constant value
+     * @param device
+     * @param location
+     * @param array
+     * 
+     * @note Constants are stored globally on the WebGL context, not the VAO
+     * so they need to be updated before every render
+     * @todo - use known type (in configuration or passed in) to allow non-typed arrays?
+     * @todo - remember/cache values to avoid setting them unnecessarily?
      */
-    enable(location, enable2 = true) {
-      const canDisableAttributeZero = this.device.isWebGL2 || getBrowser() === "Chrome";
-      const canDisableAttribute = canDisableAttributeZero || location !== 0;
-      if (enable2 || canDisableAttribute) {
-        location = Number(location);
-        this.bind(() => enable2 ? this.gl.enableVertexAttribArray(location) : this.gl.disableVertexAttribArray(location));
+    setConstant(location, array) {
+      switch (array.constructor) {
+        case Float32Array:
+          setConstantFloatArray(this.device, location, array);
+          break;
+        case Int32Array:
+          setConstantIntArray(this.device, location, array);
+          break;
+        case Uint32Array:
+          setConstantUintArray(this.device, location, array);
+          break;
+        default:
+          assert2(false);
       }
-      return this;
+    }
+    /**
+     * Provide a means to create a buffer that is equivalent to a constant.
+     * NOTE: Desktop OpenGL cannot disable attribute 0.
+     * https://stackoverflow.com/questions/20305231/webgl-warning-attribute-0-is-disabled-
+     * this-has-significant-performance-penalty
+     */
+    getConstantBuffer(elementCount, value) {
+      const constantValue = normalizeConstantArrayValue(value);
+      const byteLength = constantValue.byteLength * elementCount;
+      const length = constantValue.length * elementCount;
+      let updateNeeded = !this.buffer;
+      this.buffer = this.buffer || this.device.createBuffer({
+        byteLength
+      });
+      updateNeeded = updateNeeded || this.buffer.reallocate(byteLength);
+      updateNeeded = updateNeeded || !compareConstantArrayValues(constantValue, this.bufferValue);
+      if (updateNeeded) {
+        const typedArray = getScratchArray(value.constructor, length);
+        fillArray({
+          target: typedArray,
+          source: constantValue,
+          start: 0,
+          count: length
+        });
+        this.buffer.subData(typedArray);
+        this.bufferValue = value;
+      }
+      return this.buffer;
     }
   };
+  function setConstantFloatArray(device, location, array) {
+    switch (array.length) {
+      case 1:
+        device.gl.vertexAttrib1fv(location, array);
+        break;
+      case 2:
+        device.gl.vertexAttrib2fv(location, array);
+        break;
+      case 3:
+        device.gl.vertexAttrib3fv(location, array);
+        break;
+      case 4:
+        device.gl.vertexAttrib4fv(location, array);
+        break;
+      default:
+        assert2(false);
+    }
+  }
+  function setConstantIntArray(device, location, array) {
+    device.assertWebGL2();
+    device.gl2?.vertexAttribI4iv(location, array);
+  }
+  function setConstantUintArray(device, location, array) {
+    device.assertWebGL2();
+    device.gl2?.vertexAttribI4uiv(location, array);
+  }
+  function normalizeConstantArrayValue(arrayValue) {
+    if (Array.isArray(arrayValue)) {
+      return new Float32Array(arrayValue);
+    }
+    return arrayValue;
+  }
+  function compareConstantArrayValues(v1, v2) {
+    if (!v1 || !v2 || v1.length !== v2.length || v1.constructor !== v2.constructor) {
+      return false;
+    }
+    for (let i = 0; i < v1.length; ++i) {
+      if (v1[i] !== v2[i]) {
+        return false;
+      }
+    }
+    return true;
+  }
 
   // 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;
@@ -8749,7 +8958,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() {
@@ -8761,7 +8973,7 @@ ${formattedLog}`)();
     setIndexBuffer(indexBuffer) {
       const webglBuffer = cast(indexBuffer);
       this.vertexArrayObject.setElementBuffer(webglBuffer);
-      this._indexBuffer = indexBuffer;
+      this._indexBuffer = webglBuffer;
     }
     /** @todo needed for portable model */
     setAttributes(attributes) {
@@ -8793,7 +9005,27 @@ ${formattedLog}`)();
         });
       }
     }
-    /** @todo needed for portable model */
+    /**
+     * 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.
+     * @param attributes 
+     */
+    setConstantAttributes(attributes) {
+      for (const [name, value] of Object.entries(attributes)) {
+        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);
+      }
+      Object.assign(this.constantAttributes, attributes);
+    }
+    /** 
+     * Bindings include: textures, samplers and uniform buffers
+     * @todo needed for portable model 
+     */
     setBindings(bindings) {
       for (const [name, value] of Object.entries(bindings)) {
         const binding = this.layout.bindings.find((binding2) => binding2.name === name);
@@ -8844,7 +9076,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;
@@ -8858,6 +9090,7 @@ ${formattedLog}`)();
         }
         this._applyBindings();
         this._applyUniforms();
+        this._applyConstantAttributes();
         const webglRenderPass = renderPass;
         withDeviceParameters(this.device, this.props.parameters, () => {
           withGLParameters(this.device, webglRenderPass.glParameters, () => {
@@ -8991,6 +9224,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) {
@@ -9329,10 +9577,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")();
@@ -9750,7 +10001,7 @@ ${formattedLog}`)();
       });
     }
     target.bind({
-      target: GL.PIXEL_PACK_BUFFER
+      glTarget: GL.PIXEL_PACK_BUFFER
     });
     withParameters(gl2, {
       framebuffer
@@ -9758,7 +10009,7 @@ ${formattedLog}`)();
       gl2.readPixels(sourceX, sourceY, sourceWidth, sourceHeight, sourceFormat, sourceType, targetByteOffset);
     });
     target.unbind({
-      target: GL.PIXEL_PACK_BUFFER
+      glTarget: GL.PIXEL_PACK_BUFFER
     });
     if (deleteFramebuffer) {
       framebuffer.destroy();