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

package/dist/dist.dev.js

@@ -2028,6 +2028,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 */
@@ -2146,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],
@@ -2433,6 +2434,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;
+  }
+
   // ../api/src/lib/request-animation-frame.ts
   function requestAnimationFrame(callback) {
     return typeof window !== "undefined" && window.requestAnimationFrame ? window.requestAnimationFrame(callback) : setTimeout(callback, 1e3 / 60);
@@ -5834,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");
       }
@@ -5851,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,
@@ -5872,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);
@@ -5885,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) {
@@ -5905,40 +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;
     }
-    setAttributes(attributes) {
-      if (attributes.indices) {
-        this.setIndexBuffer(attributes.indices);
-        attributes = {
-          ...attributes
-        };
-        delete attributes.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(attributes);
-      Object.assign(this.props.attributes, attributes);
-      return this;
+      this.pipeline.setAttributes(bufferAttributes);
+      Object.assign(this.bufferAttributes, bufferAttributes);
+    }
+    setConstantAttributes(constantAttributes) {
+      this.pipeline.setConstantAttributes(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);
@@ -7413,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);
@@ -9535,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;
@@ -9548,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);
@@ -9558,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;
@@ -9579,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;
@@ -9600,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) {
@@ -9625,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) {
@@ -9653,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
@@ -11074,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);
@@ -11371,9 +11421,6 @@ void main(void) {}`;
     const bufferProps = {
       ...props
     };
-    if (bufferProps.offset) {
-      bufferProps.byteOffset = bufferProps.offset;
-    }
     return bufferProps;
   }
   var BufferWithAccessor = class extends WEBGLBuffer {
@@ -11416,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);
       }
@@ -11476,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;
@@ -11559,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;
     }
@@ -11618,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);
@@ -11633,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;
@@ -11654,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, {
@@ -11674,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
@@ -12022,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 ||
@@ -12040,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,
@@ -12057,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,
@@ -12075,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 = [];
@@ -12391,8 +12480,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();
@@ -12404,19 +12510,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,
@@ -12443,33 +12563,127 @@ ${formattedLog}`)();
         gl.enableVertexAttribArray(location);
         gl2.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;
+  }
 
   // ../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;
@@ -12494,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() {
@@ -12506,7 +12723,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) {
@@ -12538,7 +12755,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);
@@ -12589,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;
@@ -12603,6 +12840,7 @@ ${formattedLog}`)();
         }
         this._applyBindings();
         this._applyUniforms();
+        this._applyConstantAttributes();
         const webglRenderPass = renderPass;
         withDeviceParameters(this.device, this.props.parameters, () => {
           withGLParameters(this.device, webglRenderPass.glParameters, () => {
@@ -12736,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) {
@@ -13074,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")();