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

package/dist/index.cjs

@@ -80,11 +80,11 @@ __export(src_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,
@@ -133,8 +133,8 @@ function createHeadlessContext(options) {
 }
 
 // src/adapter/webgl-device.ts
-var import_api26 = require("@luma.gl/api");
-var import_env2 = require("@probe.gl/env");
+var import_api27 = require("@luma.gl/api");
+var import_env3 = require("@probe.gl/env");
 
 // src/context/polyfill/polyfill-context.ts
 var import_api3 = require("@luma.gl/api");
@@ -880,8 +880,8 @@ var bindBuffer = (gl2, value, key) => {
     [import_constants3.GL.PIXEL_PACK_BUFFER_BINDING]: import_constants3.GL.PIXEL_PACK_BUFFER,
     [import_constants3.GL.PIXEL_UNPACK_BUFFER_BINDING]: import_constants3.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);
@@ -1358,7 +1358,7 @@ var GLState = class {
   constructor(gl2, {
     copyState = false,
     // Copy cache from params (slow) or initialize from WebGL defaults (fast)
-    log: log9 = () => {
+    log: log10 = () => {
     }
     // Logging function, called when gl parameter change calls are actually issued
   } = {}) {
@@ -1367,7 +1367,7 @@ var GLState = class {
     this.enable = true;
     this.gl = gl2;
     this.cache = copyState ? getParameters(gl2) : Object.assign({}, GL_PARAMETER_DEFAULTS);
-    this.log = log9;
+    this.log = log10;
     this._updateCache = this._updateCache.bind(this);
     Object.seal(this);
   }
@@ -2521,9 +2521,11 @@ var import_api7 = require("@luma.gl/api");
 var import_constants9 = require("@luma.gl/constants");
 var DEBUG_DATA_LENGTH = 10;
 var WEBGLBuffer = class extends import_api7.Buffer {
-  // accessor: {};
   constructor(device, props = {}) {
     super(device, props);
+    /** Index type is needed when issuing draw calls, so we pre-compute it */
+    this.glIndexType = import_constants9.GL.UNSIGNED_SHORT;
+    /** A partial CPU-side copy of the data in this buffer, for debugging purposes */
     this.debugData = null;
     this.device = device;
     this.gl = this.device.gl;
@@ -2531,8 +2533,9 @@ var WEBGLBuffer = class extends import_api7.Buffer {
     const handle = typeof props === "object" ? props.handle : void 0;
     this.handle = handle || this.gl.createBuffer();
     device.setSpectorMetadata(this.handle, __spreadProps(__spreadValues({}, 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" ? import_constants9.GL.UNSIGNED_INT : import_constants9.GL.UNSIGNED_SHORT;
     this.debugData = null;
     if (props.data) {
       this._initWithData(props.data, props.byteOffset, props.byteLength);
@@ -2541,14 +2544,14 @@ var WEBGLBuffer = class extends import_api7.Buffer {
     }
   }
   // 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) {
     (0, import_api7.assert)(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;
@@ -2562,10 +2565,10 @@ var WEBGLBuffer = class extends import_api7.Buffer {
     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;
@@ -2583,15 +2586,15 @@ var WEBGLBuffer = class extends import_api7.Buffer {
   write(data, byteOffset = 0) {
     const srcOffset = 0;
     const byteLength = void 0;
-    const target = this.device.isWebGL2 ? import_constants9.GL.COPY_WRITE_BUFFER : this.target;
-    this.gl.bindBuffer(target, this.handle);
+    const glTarget = this.device.isWebGL2 ? import_constants9.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 */
   readAsync(byteOffset = 0, byteLength) {
@@ -2610,10 +2613,10 @@ var WEBGLBuffer = class extends import_api7.Buffer {
     this.debugData = null;
   }
   _getWriteTarget() {
-    return this.target;
+    return this.glTarget;
   }
   _getReadTarget() {
-    return this.target;
+    return this.glTarget;
   }
 };
 function getWebGLTarget(usage) {
@@ -2638,7 +2641,7 @@ function getWebGLUsage(usage) {
   if (usage & import_api7.Buffer.UNIFORM) {
     return import_constants9.GL.DYNAMIC_DRAW;
   }
-  return import_constants9.GL.DYNAMIC_DRAW;
+  return import_constants9.GL.STATIC_DRAW;
 }
 
 // src/adapter/resources/webgl-sampler.ts
@@ -3973,6 +3976,7 @@ function initializeSpectorJS(props) {
 // src/context/debug/webgl-developer-tools.ts
 var import_api17 = require("@luma.gl/api");
 var import_constants14 = require("@luma.gl/constants");
+var import_env = require("@probe.gl/env");
 var WEBGL_DEBUG_CDN_URL = "https://unpkg.com/webgl-debug@2.0.1/index.js";
 function getContextData2(gl2) {
   gl2.luma = gl2.luma || {};
@@ -3980,7 +3984,7 @@ function getContextData2(gl2) {
 }
 function loadWebGLDeveloperTools() {
   return __async(this, null, function* () {
-    if (!globalThis.WebGLDebugUtils) {
+    if ((0, import_env.isBrowser)() && !globalThis.WebGLDebugUtils) {
       globalThis.global = globalThis.global || globalThis;
       globalThis.global.module = {};
       yield (0, import_api17.loadScript)(WEBGL_DEBUG_CDN_URL);
@@ -4280,9 +4284,6 @@ function getWEBGLBufferProps(props) {
   }
   props = (0, import_api19.checkProps)("Buffer", props, PROP_CHECKS_INITIALIZE);
   const bufferProps = __spreadValues({}, props);
-  if (bufferProps.offset) {
-    bufferProps.byteOffset = bufferProps.offset;
-  }
   return bufferProps;
 }
 var BufferWithAccessor = class extends WEBGLBuffer {
@@ -4319,11 +4320,11 @@ var BufferWithAccessor = class extends WEBGLBuffer {
       props = { byteLength: props };
     }
     props = (0, import_api19.checkProps)("Buffer", props, PROP_CHECKS_INITIALIZE);
-    this.webglUsage = props.webglUsage || import_constants17.GL.STATIC_DRAW;
+    this.glUsage = props.glUsage || import_constants17.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);
     }
@@ -4373,15 +4374,15 @@ var BufferWithAccessor = class extends WEBGLBuffer {
     const { data, offset = 0, srcOffset = 0 } = options;
     const byteLength = options.byteLength || options.length;
     (0, import_api19.assert)(data);
-    const target = this.gl.webgl2 ? import_constants17.GL.COPY_WRITE_BUFFER : this.target;
-    this.gl.bindBuffer(target, this.handle);
+    const glTarget = this.gl.webgl2 ? import_constants17.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;
@@ -4445,33 +4446,33 @@ var BufferWithAccessor = class extends WEBGLBuffer {
   bind(options) {
     var _a, _b;
     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 === import_constants17.GL.UNIFORM_BUFFER || target === import_constants17.GL.TRANSFORM_FEEDBACK_BUFFER) {
+    if (glTarget === import_constants17.GL.UNIFORM_BUFFER || glTarget === import_constants17.GL.TRANSFORM_FEEDBACK_BUFFER) {
       if (size !== void 0) {
-        (_a = this.gl2) == null ? void 0 : _a.bindBufferRange(target, index, this.handle, offset, size);
+        (_a = this.gl2) == null ? void 0 : _a.bindBufferRange(glTarget, index, this.handle, offset, size);
       } else {
         (0, import_api19.assert)(offset === 0);
-        (_b = this.gl2) == null ? void 0 : _b.bindBufferBase(target, index, this.handle);
+        (_b = this.gl2) == null ? void 0 : _b.bindBufferBase(glTarget, index, this.handle);
       }
     } else {
-      this.gl.bindBuffer(target, this.handle);
+      this.gl.bindBuffer(glTarget, this.handle);
     }
     return this;
   }
   unbind(options) {
     var _a;
-    const { target = this.target, index = this.accessor && this.accessor.index } = options || {};
-    const isIndexedBuffer = target === import_constants17.GL.UNIFORM_BUFFER || target === import_constants17.GL.TRANSFORM_FEEDBACK_BUFFER;
+    const { glTarget = this.glTarget, index = this.accessor && this.accessor.index } = options || {};
+    const isIndexedBuffer = glTarget === import_constants17.GL.UNIFORM_BUFFER || glTarget === import_constants17.GL.TRANSFORM_FEEDBACK_BUFFER;
     if (isIndexedBuffer) {
-      (_a = this.gl2) == null ? void 0 : _a.bindBufferBase(target, index, null);
+      (_a = this.gl2) == null ? void 0 : _a.bindBufferBase(glTarget, index, null);
     } else {
-      this.gl.bindBuffer(target, null);
+      this.gl.bindBuffer(glTarget, null);
     }
     return this;
   }
@@ -4494,7 +4495,7 @@ var BufferWithAccessor = class extends WEBGLBuffer {
     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);
@@ -4507,18 +4508,17 @@ var BufferWithAccessor = class extends WEBGLBuffer {
     return this;
   }
   // Allocate a GPU buffer of specified size.
-  _setByteLength(byteLength, webglUsage = this.webglUsage) {
+  _setByteLength(byteLength) {
     (0, import_api19.assert)(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;
@@ -4528,7 +4528,7 @@ var BufferWithAccessor = class extends WEBGLBuffer {
   // 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 ? import_constants17.GL.COPY_WRITE_BUFFER : this.target;
+    return this.gl.webgl2 ? import_constants17.GL.COPY_WRITE_BUFFER : this.glTarget;
   }
   _getAvailableElementCount(srcByteOffset) {
     const ArrayType = getTypedArrayFromGLType(this.accessor.type || import_constants17.GL.FLOAT, { clamped: false });
@@ -4544,9 +4544,9 @@ var BufferWithAccessor = class extends WEBGLBuffer {
   }
   // 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
@@ -4643,8 +4643,8 @@ var WEBGLShader = class extends import_api20.Shader {
   }
   compilationInfo() {
     return __async(this, null, function* () {
-      const log9 = this.device.gl.getShaderInfoLog(this.handle);
-      return log9 ? parseShaderCompilerLog(log9) : [];
+      const log10 = this.device.gl.getShaderInfoLog(this.handle);
+      return log10 ? parseShaderCompilerLog(log10) : [];
     });
   }
   // PRIVATE METHODS
@@ -4794,10 +4794,11 @@ var WEBGLRenderPass = class extends import_api21.RenderPass {
 };
 
 // src/adapter/resources/webgl-render-pipeline.ts
-var import_api23 = require("@luma.gl/api");
+var import_api24 = require("@luma.gl/api");
 var import_constants25 = require("@luma.gl/constants");
 
 // src/adapter/helpers/get-shader-layout.ts
+var import_api22 = require("@luma.gl/api");
 var import_constants22 = require("@luma.gl/constants");
 
 // src/adapter/helpers/uniforms.ts
@@ -4907,13 +4908,12 @@ function getDataFormat(type) {
 
 // src/adapter/helpers/get-shader-layout.ts
 function getShaderLayout(gl2, program) {
-  var _a, _b;
-  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 ||
@@ -4926,7 +4926,8 @@ function getShaderLayout(gl2, program) {
       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,
@@ -4943,8 +4944,9 @@ function getShaderLayout(gl2, program) {
       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, sampleType } = getSamplerInfo(uniform.type);
       shaderLayout.bindings.push({
@@ -4958,24 +4960,59 @@ function getShaderLayout(gl2, program) {
       textureUnit += 1;
     }
   }
-  const uniforms = ((_a = programBindings.uniforms) == null ? void 0 : _a.filter((uniform) => uniform.location !== null)) || [];
   if (uniforms.length) {
     shaderLayout.uniforms = uniforms;
   }
-  if ((_b = programBindings.varyings) == null ? void 0 : _b.length) {
-    shaderLayout.varyings = programBindings.varyings;
+  const varyings = readVaryings(gl2, program);
+  if (varyings == null ? void 0 : 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)
-  };
-  Object.seal(config);
-  return config;
+function mergeShaderLayout(baseLayout, overrideLayout) {
+  const mergedLayout = __spreadProps(__spreadValues({}, baseLayout), {
+    attributes: baseLayout.attributes.map((attribute) => __spreadValues({}, attribute))
+  });
+  for (const attribute of (overrideLayout == null ? void 0 : overrideLayout.attributes) || []) {
+    const baseAttribute = mergedLayout.attributes.find((attr) => attr.name === attribute.name);
+    if (!baseAttribute) {
+      import_api22.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 = __spreadProps(__spreadValues({}, baseLayout), {
+    attributes: baseLayout.attributes.map((attribute) => __spreadValues({}, 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) {
+    import_api22.log.warn(`shader layout attribute "${name}" not present in shader`);
+  }
+  return attribute || null;
 }
 function readAttributeBindings(gl2, program) {
   const attributes = [];
@@ -5231,14 +5268,14 @@ function setUniform(gl2, location, type, value) {
 }
 
 // src/adapter/objects/webgl-vertex-array-object.ts
-var import_api22 = require("@luma.gl/api");
+var import_api23 = require("@luma.gl/api");
 var import_constants24 = require("@luma.gl/constants");
-var import_env = require("@probe.gl/env");
+var import_env2 = require("@probe.gl/env");
 var ERR_ELEMENTS = "elements must be GL.ELEMENT_ARRAY_BUFFER";
 var WEBGLVertexArrayObject = class extends WebGLResource {
   // Create a VertexArray
   constructor(device, props) {
-    super(device, props, __spreadProps(__spreadValues({}, import_api22.Resource.defaultProps), { constantAttributeZero: false }));
+    super(device, props, __spreadProps(__spreadValues({}, import_api23.Resource.defaultProps), { constantAttributeZero: false }));
     /** Buffer constant */
     this.buffer = null;
     this.bufferValue = null;
@@ -5248,7 +5285,7 @@ var WEBGLVertexArrayObject = class extends WebGLResource {
     return "BaseVertexArrayObject";
   }
   static isConstantAttributeZeroSupported(device) {
-    return device.info.type === "webgl2" || (0, import_env.getBrowser)() === "Chrome";
+    return device.info.type === "webgl2" || (0, import_env2.getBrowser)() === "Chrome";
   }
   destroy() {
     var _a;
@@ -5274,7 +5311,7 @@ var WEBGLVertexArrayObject = class extends WebGLResource {
    * TODO - convert classic arrays based on known type?
    */
   enable(location, enable2 = true) {
-    const canDisableAttributeZero = this.device.isWebGL2 || (0, import_env.getBrowser)() === "Chrome";
+    const canDisableAttributeZero = this.device.isWebGL2 || (0, import_env2.getBrowser)() === "Chrome";
     const canDisableAttribute = canDisableAttributeZero || location !== 0;
     if (enable2 || canDisableAttribute) {
       location = Number(location);
@@ -5286,14 +5323,14 @@ var WEBGLVertexArrayObject = class extends WebGLResource {
   // 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 = {}) {
-    (0, import_api22.assert)(!elementBuffer || elementBuffer.target === import_constants24.GL.ELEMENT_ARRAY_BUFFER, ERR_ELEMENTS);
+    (0, import_api23.assert)(!elementBuffer || elementBuffer.glTarget === import_constants24.GL.ELEMENT_ARRAY_BUFFER, ERR_ELEMENTS);
     this.bind(() => {
       this.gl.bindBuffer(import_constants24.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, buffer, accessor) {
-    if (buffer.target === import_constants24.GL.ELEMENT_ARRAY_BUFFER) {
+    if (buffer.glTarget === import_constants24.GL.ELEMENT_ARRAY_BUFFER) {
       this.setElementBuffer(buffer, accessor);
       return;
     }
@@ -5335,7 +5372,7 @@ var WEBGLVertexArrayObject = class extends WebGLResource {
         setConstantUintArray(this.device, location, array);
         break;
       default:
-        (0, import_api22.assert)(false);
+        (0, import_api23.assert)(false);
     }
   }
   /**
@@ -5353,8 +5390,8 @@ var WEBGLVertexArrayObject = class extends WebGLResource {
     updateNeeded = updateNeeded || this.buffer.reallocate(byteLength);
     updateNeeded = updateNeeded || !compareConstantArrayValues(constantValue, this.bufferValue);
     if (updateNeeded) {
-      const typedArray = (0, import_api22.getScratchArray)(value.constructor, length);
-      (0, import_api22.fillArray)({ target: typedArray, source: constantValue, start: 0, count: length });
+      const typedArray = (0, import_api23.getScratchArray)(value.constructor, length);
+      (0, import_api23.fillArray)({ target: typedArray, source: constantValue, start: 0, count: length });
       this.buffer.subData(typedArray);
       this.bufferValue = value;
     }
@@ -5376,7 +5413,7 @@ function setConstantFloatArray(device, location, array) {
       device.gl.vertexAttrib4fv(location, array);
       break;
     default:
-      (0, import_api22.assert)(false);
+      (0, import_api23.assert)(false);
   }
 }
 function setConstantIntArray(device, location, array) {
@@ -5409,16 +5446,19 @@ function compareConstantArrayValues(v1, v2) {
 
 // src/adapter/resources/webgl-render-pipeline.ts
 var LOG_PROGRAM_PERF_PRIORITY = 4;
-var WEBGLRenderPipeline = class extends import_api23.RenderPipeline {
+var WEBGLRenderPipeline = class extends import_api24.RenderPipeline {
   // TODO are these used?
   constructor(device, props) {
     var _a;
     super(device, props);
-    // configuration: ProgramConfiguration;
-    // Experimental flag to avoid deleting Program object while it is cached
-    this.varyings = null;
+    /** Uniforms set on this model */
     this.uniforms = {};
+    /** Bindings set on this model */
     this.bindings = {};
+    /** Any constant attributes */
+    this.constantAttributes = {};
+    /** WebGL varyings */
+    this.varyings = null;
     this._textureUniforms = {};
     this._textureIndexCounter = 0;
     this._uniformCount = 0;
@@ -5426,8 +5466,8 @@ var WEBGLRenderPipeline = class extends import_api23.RenderPipeline {
     this.device = device;
     this.handle = this.props.handle || this.device.gl.createProgram();
     this.device.setSpectorMetadata(this.handle, { id: this.props.id });
-    this.vs = (0, import_api23.cast)(props.vs);
-    this.fs = (0, import_api23.cast)(props.fs);
+    this.vs = (0, import_api24.cast)(props.vs);
+    this.fs = (0, import_api24.cast)(props.fs);
     const { varyings, bufferMode = import_constants25.GL.SEPARATE_ATTRIBS } = props;
     if (varyings && varyings.length > 0) {
       this.device.assertWebGL2();
@@ -5435,7 +5475,10 @@ var WEBGLRenderPipeline = class extends import_api23.RenderPipeline {
       (_a = this.device.gl2) == null ? void 0 : _a.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() {
@@ -5445,20 +5488,20 @@ var WEBGLRenderPipeline = class extends import_api23.RenderPipeline {
     }
   }
   setIndexBuffer(indexBuffer) {
-    const webglBuffer = (0, import_api23.cast)(indexBuffer);
+    const webglBuffer = (0, import_api24.cast)(indexBuffer);
     this.vertexArrayObject.setElementBuffer(webglBuffer);
-    this._indexBuffer = indexBuffer;
+    this._indexBuffer = webglBuffer;
   }
   /** @todo needed for portable model */
   setAttributes(attributes) {
     for (const [name, buffer] of Object.entries(attributes)) {
-      const webglBuffer = (0, import_api23.cast)(buffer);
+      const webglBuffer = (0, import_api24.cast)(buffer);
       const attribute = getAttributeLayout(this.layout, name);
       if (!attribute) {
-        import_api23.log.warn(`Ignoring buffer supplied for unknown attribute "${name}" in pipeline "${this.id}" (buffer "${buffer.id}")`)();
+        import_api24.log.warn(`Ignoring buffer supplied for unknown attribute "${name}" in pipeline "${this.id}" (buffer "${buffer.id}")`)();
         continue;
       }
-      const decoded = (0, import_api23.decodeVertexFormat)(attribute.format);
+      const decoded = (0, import_api24.decodeVertexFormat)(attribute.format);
       const { type: typeString, components: size, byteLength: stride, normalized, integer } = decoded;
       const divisor = attribute.stepMode === "instance" ? 1 : 0;
       const type = getWebGLDataType(typeString);
@@ -5483,11 +5526,12 @@ var WEBGLRenderPipeline = class extends import_api23.RenderPipeline {
     for (const [name, value] of Object.entries(attributes)) {
       const attribute = getAttributeLayout(this.layout, name);
       if (!attribute) {
-        import_api23.log.warn(`Ignoring constant value supplied for unknown attribute "${name}" in pipeline "${this.id}"`)();
+        import_api24.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
@@ -5497,11 +5541,11 @@ var WEBGLRenderPipeline = class extends import_api23.RenderPipeline {
     for (const [name, value] of Object.entries(bindings)) {
       const binding = this.layout.bindings.find((binding2) => binding2.name === name);
       if (!binding) {
-        import_api23.log.warn(`Unknown binding ${name} in render pipeline ${this.id}`)();
+        import_api24.log.warn(`Unknown binding ${name} in render pipeline ${this.id}`)();
         continue;
       }
       if (!value) {
-        import_api23.log.warn(`Unsetting binding ${name} in render pipeline ${this.id}`)();
+        import_api24.log.warn(`Unsetting binding ${name} in render pipeline ${this.id}`)();
       }
       switch (binding.type) {
         case "uniform":
@@ -5515,7 +5559,7 @@ var WEBGLRenderPipeline = class extends import_api23.RenderPipeline {
           }
           break;
         case "sampler":
-          import_api23.log.warn(`Ignoring sampler ${name}`)();
+          import_api24.log.warn(`Ignoring sampler ${name}`)();
           break;
         default:
           throw new Error(binding.type);
@@ -5544,7 +5588,7 @@ var WEBGLRenderPipeline = class extends import_api23.RenderPipeline {
     } = options;
     const drawMode = getDrawMode(this.props.topology);
     const isIndexed = Boolean(this._indexBuffer);
-    const indexType = ((_a = this._indexBuffer) == null ? void 0 : _a.props.indexType) === "uint16" ? import_constants25.GL.UNSIGNED_SHORT : import_constants25.GL.UNSIGNED_INT;
+    const indexType = (_a = this._indexBuffer) == null ? void 0 : _a.glIndexType;
     const isInstanced = Number(options.instanceCount) > 0;
     if (!this._areTexturesRenderable() || options.vertexCount === 0) {
       return false;
@@ -5558,6 +5602,7 @@ var WEBGLRenderPipeline = class extends import_api23.RenderPipeline {
       }
       this._applyBindings();
       this._applyUniforms();
+      this._applyConstantAttributes();
       const webglRenderPass = renderPass;
       withDeviceParameters(this.device, this.props.parameters, () => {
         withGLParameters(this.device, webglRenderPass.glParameters, () => {
@@ -5592,10 +5637,10 @@ var WEBGLRenderPipeline = class extends import_api23.RenderPipeline {
     const { gl: gl2 } = this.device;
     gl2.attachShader(this.handle, this.vs.handle);
     gl2.attachShader(this.handle, this.fs.handle);
-    import_api23.log.time(LOG_PROGRAM_PERF_PRIORITY, `linkProgram for ${this.id}`)();
+    import_api24.log.time(LOG_PROGRAM_PERF_PRIORITY, `linkProgram for ${this.id}`)();
     gl2.linkProgram(this.handle);
-    import_api23.log.timeEnd(LOG_PROGRAM_PERF_PRIORITY, `linkProgram for ${this.id}`)();
-    if (gl2.debug || import_api23.log.level > 0) {
+    import_api24.log.timeEnd(LOG_PROGRAM_PERF_PRIORITY, `linkProgram for ${this.id}`)();
+    if (gl2.debug || import_api24.log.level > 0) {
       const linked = gl2.getProgramParameter(this.handle, gl2.LINK_STATUS);
       if (!linked) {
         throw new Error(`Error linking: ${gl2.getProgramInfoLog(this.handle)}`);
@@ -5688,6 +5733,21 @@ var WEBGLRenderPipeline = class extends import_api23.RenderPipeline {
       }
     }
   }
+  /**
+   * 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) {
+        import_api24.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) {
@@ -5734,15 +5794,15 @@ function getAttributeLayout(layout, name) {
 }
 
 // src/adapter/resources/webgl-command-encoder.ts
-var import_api25 = require("@luma.gl/api");
+var import_api26 = require("@luma.gl/api");
 
 // src/adapter/resources/webgl-command-buffer.ts
-var import_api24 = require("@luma.gl/api");
+var import_api25 = require("@luma.gl/api");
 var import_constants26 = require("@luma.gl/constants");
 function cast3(value) {
   return value;
 }
-var WEBGLCommandBuffer = class extends import_api24.CommandBuffer {
+var WEBGLCommandBuffer = class extends import_api25.CommandBuffer {
   constructor(device) {
     super({});
     this.commands = [];
@@ -5920,7 +5980,7 @@ function _copyTextureToTexture(device, options) {
   return texture;
 }
 function getFramebuffer(source) {
-  if (source instanceof import_api24.Texture) {
+  if (source instanceof import_api25.Texture) {
     const { width, height, id } = source;
     const framebuffer = source.device.createFramebuffer({
       id: `framebuffer-for-${id}`,
@@ -5934,7 +5994,7 @@ function getFramebuffer(source) {
 }
 
 // src/adapter/resources/webgl-command-encoder.ts
-var WEBGLCommandEncoder = class extends import_api25.CommandEncoder {
+var WEBGLCommandEncoder = class extends import_api26.CommandEncoder {
   constructor(device, props) {
     super(props);
     this.device = device;
@@ -5978,13 +6038,13 @@ var WEBGLCommandEncoder = class extends import_api25.CommandEncoder {
 
 // src/adapter/webgl-device.ts
 var LOG_LEVEL2 = 1;
-var _WebGLDevice = class extends import_api26.Device {
+var _WebGLDevice = class extends import_api27.Device {
   //
   // Public API
   //
   constructor(props) {
     var _a;
-    super(__spreadProps(__spreadValues({}, props), { id: props.id || (0, import_api26.uid)("webgl-device") }));
+    super(__spreadProps(__spreadValues({}, props), { id: props.id || (0, import_api27.uid)("webgl-device") }));
     this.renderPass = null;
     /** WebGL2 typed context. Need to check isWebGL2 or isWebGL1 before using. */
     this.gl2 = null;
@@ -6010,8 +6070,8 @@ var _WebGLDevice = class extends import_api26.Device {
       });
     };
     let gl2 = props.gl || null;
-    gl2 = gl2 || ((0, import_env2.isBrowser)() ? createBrowserContext(this.canvasContext.canvas, __spreadProps(__spreadValues({}, props), { onContextLost })) : null);
-    gl2 = gl2 || (!(0, import_env2.isBrowser)() ? createHeadlessContext(__spreadProps(__spreadValues({}, props), { onContextLost })) : null);
+    gl2 = gl2 || ((0, import_env3.isBrowser)() ? createBrowserContext(this.canvasContext.canvas, __spreadProps(__spreadValues({}, props), { onContextLost })) : null);
+    gl2 = gl2 || (!(0, import_env3.isBrowser)() ? createHeadlessContext(__spreadProps(__spreadValues({}, props), { onContextLost })) : null);
     if (!gl2) {
       throw new Error("WebGL context creation failed");
     }
@@ -6028,22 +6088,22 @@ var _WebGLDevice = class extends import_api26.Device {
     trackContextState(this.gl, {
       enable: enable2,
       copyState,
-      log: (...args) => import_api26.log.log(1, ...args)()
+      log: (...args) => import_api27.log.log(1, ...args)()
     });
-    if ((0, import_env2.isBrowser)() && props.debug) {
+    if ((0, import_env3.isBrowser)() && props.debug) {
       this.gl = makeDebugContext(this.gl, __spreadProps(__spreadValues({}, props), { webgl2: this.isWebGL2, throwOnError: true }));
       this.gl2 = this.gl;
       this.debug = true;
-      import_api26.log.level = Math.max(import_api26.log.level, 1);
-      import_api26.log.warn("WebGL debug mode activated. Performance reduced.")();
+      import_api27.log.level = Math.max(import_api27.log.level, 1);
+      import_api27.log.warn("WebGL debug mode activated. Performance reduced.")();
     }
-    if ((0, import_env2.isBrowser)() && props.spector) {
+    if ((0, import_env3.isBrowser)() && props.spector) {
       const canvas = this.handle.canvas || props.canvas;
       this.spector = initializeSpectorJS(__spreadProps(__spreadValues({}, this.props), { canvas }));
     }
     const message2 = `Created ${this.info.type}${this.debug ? " debug" : ""} context: ${this.info.vendor}, ${this.info.renderer} for canvas: ${this.canvasContext.id}`;
-    import_api26.log.probe(LOG_LEVEL2, message2)();
-    import_api26.log.groupEnd(LOG_LEVEL2)();
+    import_api27.log.probe(LOG_LEVEL2, message2)();
+    import_api27.log.groupEnd(LOG_LEVEL2)();
   }
   static isSupported() {
     return typeof WebGLRenderingContext !== "undefined" || isHeadlessGLRegistered();
@@ -6069,7 +6129,7 @@ var _WebGLDevice = class extends import_api26.Device {
     if (gl2 instanceof _WebGLDevice) {
       return gl2;
     }
-    if ((gl2 == null ? void 0 : gl2.device) instanceof import_api26.Device) {
+    if ((gl2 == null ? void 0 : gl2.device) instanceof import_api27.Device) {
       return gl2.device;
     }
     if (!isWebGL3(gl2)) {
@@ -6079,17 +6139,18 @@ var _WebGLDevice = class extends import_api26.Device {
   }
   static create() {
     return __async(this, arguments, function* (props = {}) {
-      import_api26.log.groupCollapsed(LOG_LEVEL2, "WebGLDevice created");
+      import_api27.log.groupCollapsed(LOG_LEVEL2, "WebGLDevice created");
       if (typeof props.canvas === "string") {
-        yield import_api26.CanvasContext.pageLoaded;
+        yield import_api27.CanvasContext.pageLoaded;
       }
-      if (props.debug) {
+      if (import_api27.log.get("debug") || props.debug) {
         yield loadWebGLDeveloperTools();
       }
-      if (props.spector) {
+      const { spector: spector2 } = props;
+      if (import_api27.log.get("spector") || spector2) {
         yield loadSpectorJS();
       }
-      import_api26.log.probe(LOG_LEVEL2 + 1, "DOM is loaded")();
+      import_api27.log.probe(LOG_LEVEL2 + 1, "DOM is loaded")();
       if (props.gl && props.gl.device) {
         return _WebGLDevice.attach(props.gl);
       }
@@ -6259,7 +6320,7 @@ function isWebGL22(gl2) {
 }
 
 // src/classic/clear.ts
-var import_api27 = require("@luma.gl/api");
+var import_api28 = require("@luma.gl/api");
 var GL_DEPTH_BUFFER_BIT2 = 256;
 var GL_STENCIL_BUFFER_BIT2 = 1024;
 var GL_COLOR_BUFFER_BIT2 = 16384;
@@ -6290,18 +6351,18 @@ function clear(gl2, options) {
       parameters.clearStencil = depth;
     }
   }
-  (0, import_api27.assert)(clearFlags !== 0, ERR_ARGUMENTS);
+  (0, import_api28.assert)(clearFlags !== 0, ERR_ARGUMENTS);
   withParameters(device.gl, parameters, () => {
     device.gl.clear(clearFlags);
   });
 }
 
 // src/classic/copy-and-blit.ts
-var import_api29 = require("@luma.gl/api");
+var import_api30 = require("@luma.gl/api");
 var import_constants28 = require("@luma.gl/constants");
 
 // src/classic/format-utils.ts
-var import_api28 = require("@luma.gl/api");
+var import_api29 = require("@luma.gl/api");
 var import_constants27 = require("@luma.gl/constants");
 function glFormatToComponents(format) {
   switch (format) {
@@ -6319,7 +6380,7 @@ function glFormatToComponents(format) {
     case import_constants27.GL.RGBA32F:
       return 4;
     default:
-      (0, import_api28.assert)(false);
+      (0, import_api29.assert)(false);
       return 0;
   }
 }
@@ -6334,7 +6395,7 @@ function glTypeToBytes(type) {
     case import_constants27.GL.FLOAT:
       return 4;
     default:
-      (0, import_api28.assert)(false);
+      (0, import_api29.assert)(false);
       return 0;
   }
 }
@@ -6352,7 +6413,7 @@ function readPixelsToArray(source, options) {
     sourceType
   } = options || {};
   const { framebuffer, deleteFramebuffer } = getFramebuffer2(source);
-  (0, import_api29.assert)(framebuffer);
+  (0, import_api30.assert)(framebuffer);
   const { gl: gl2, handle } = framebuffer;
   sourceWidth = sourceWidth || framebuffer.width;
   sourceHeight = sourceHeight || framebuffer.height;
@@ -6375,7 +6436,7 @@ function readPixelsToBuffer(source, options) {
   const { sourceX = 0, sourceY = 0, sourceFormat = import_constants28.GL.RGBA, targetByteOffset = 0 } = options || {};
   let { target, sourceWidth, sourceHeight, sourceType } = options || {};
   const { framebuffer, deleteFramebuffer } = getFramebuffer2(source);
-  (0, import_api29.assert)(framebuffer);
+  (0, import_api30.assert)(framebuffer);
   sourceWidth = sourceWidth || framebuffer.width;
   sourceHeight = sourceHeight || framebuffer.height;
   const webglFramebuffer = framebuffer;
@@ -6387,7 +6448,7 @@ function readPixelsToBuffer(source, options) {
     const byteLength = targetByteOffset + sourceWidth * sourceHeight * components * byteCount;
     target = new BufferWithAccessor(gl2, { byteLength, accessor: { type: sourceType, size: components } });
   }
-  target.bind({ target: import_constants28.GL.PIXEL_PACK_BUFFER });
+  target.bind({ glTarget: import_constants28.GL.PIXEL_PACK_BUFFER });
   withParameters(gl2, { framebuffer }, () => {
     gl2.readPixels(
       sourceX,
@@ -6399,7 +6460,7 @@ function readPixelsToBuffer(source, options) {
       targetByteOffset
     );
   });
-  target.unbind({ target: import_constants28.GL.PIXEL_PACK_BUFFER });
+  target.unbind({ glTarget: import_constants28.GL.PIXEL_PACK_BUFFER });
   if (deleteFramebuffer) {
     framebuffer.destroy();
   }
@@ -6423,7 +6484,7 @@ function copyToTexture(source, target, options) {
     // defaults to target height
   } = options || {};
   const { framebuffer, deleteFramebuffer } = getFramebuffer2(source);
-  (0, import_api29.assert)(framebuffer);
+  (0, import_api30.assert)(framebuffer);
   const webglFramebuffer = framebuffer;
   const { device, handle } = webglFramebuffer;
   const isSubCopy = typeof targetX !== "undefined" || typeof targetY !== "undefined" || typeof targetZ !== "undefined";
@@ -6431,10 +6492,10 @@ function copyToTexture(source, target, options) {
   targetY = targetY || 0;
   targetZ = targetZ || 0;
   const prevHandle2 = device.gl.bindFramebuffer(import_constants28.GL.FRAMEBUFFER, handle);
-  (0, import_api29.assert)(target);
+  (0, import_api30.assert)(target);
   let texture = null;
   let textureTarget;
-  if (target instanceof import_api29.Texture) {
+  if (target instanceof import_api30.Texture) {
     texture = target;
     width = Number.isFinite(width) ? width : texture.width;
     height = Number.isFinite(height) ? height : texture.height;
@@ -6498,7 +6559,7 @@ function copyToTexture(source, target, options) {
   return texture;
 }
 function getFramebuffer2(source) {
-  if (!(source instanceof import_api29.Framebuffer)) {
+  if (!(source instanceof import_api30.Framebuffer)) {
     return { framebuffer: toFramebuffer(source), deleteFramebuffer: true };
   }
   return { framebuffer: source, deleteFramebuffer: false };