@luma.gl/webgl 9.0.0-alpha.27 → 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,
@@ -1970,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],
@@ -3703,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);
@@ -5828,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;
@@ -5841,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);
@@ -5851,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;
@@ -5872,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;
@@ -5893,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) {
@@ -5918,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) {
@@ -5946,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
@@ -7367,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);
@@ -7664,9 +7671,6 @@ void main(void) {}`;
     const bufferProps = {
       ...props
     };
-    if (bufferProps.offset) {
-      bufferProps.byteOffset = bufferProps.offset;
-    }
     return bufferProps;
   }
   var BufferWithAccessor = class extends WEBGLBuffer {
@@ -7709,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);
       }
@@ -7769,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;
@@ -7852,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;
     }
@@ -7911,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);
@@ -7926,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;
@@ -7947,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, {
@@ -7967,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
@@ -8315,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 ||
@@ -8333,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,
@@ -8350,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,
@@ -8368,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 = [];
@@ -8731,14 +8777,14 @@ ${formattedLog}`)();
     // Set (bind) an elements buffer, for indexed rendering.
     // Must be a Buffer bound to GL.ELEMENT_ARRAY_BUFFER. Constants not supported
     setElementBuffer(elementBuffer = null, opts = {}) {
-      assert2(!elementBuffer || elementBuffer.target === GL.ELEMENT_ARRAY_BUFFER, ERR_ELEMENTS);
+      assert2(!elementBuffer || elementBuffer.glTarget === GL.ELEMENT_ARRAY_BUFFER, ERR_ELEMENTS);
       this.bind(() => {
         this.gl.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, elementBuffer ? elementBuffer.handle : null);
       });
     }
     /** Set a location in vertex attributes array to a buffer, enables the location, sets divisor */
     setBuffer(location, buffer, accessor) {
-      if (buffer.target === GL.ELEMENT_ARRAY_BUFFER) {
+      if (buffer.glTarget === GL.ELEMENT_ARRAY_BUFFER) {
         this.setElementBuffer(buffer, accessor);
         return;
       }
@@ -8871,11 +8917,23 @@ ${formattedLog}`)();
   // 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;
@@ -8900,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() {
@@ -8912,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) {
@@ -8959,6 +9020,7 @@ ${formattedLog}`)();
         }
         this.vertexArrayObject.setConstant(attribute.location, value);
       }
+      Object.assign(this.constantAttributes, attributes);
     }
     /** 
      * Bindings include: textures, samplers and uniform buffers
@@ -9014,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;
@@ -9028,6 +9090,7 @@ ${formattedLog}`)();
         }
         this._applyBindings();
         this._applyUniforms();
+        this._applyConstantAttributes();
         const webglRenderPass = renderPass;
         withDeviceParameters(this.device, this.props.parameters, () => {
           withGLParameters(this.device, webglRenderPass.glParameters, () => {
@@ -9161,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) {
@@ -9499,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")();
@@ -9920,7 +10001,7 @@ ${formattedLog}`)();
       });
     }
     target.bind({
-      target: GL.PIXEL_PACK_BUFFER
+      glTarget: GL.PIXEL_PACK_BUFFER
     });
     withParameters(gl2, {
       framebuffer
@@ -9928,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();