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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luma.gl/webgl",
-  "version": "9.0.0-alpha.26",
+  "version": "9.0.0-alpha.27",
   "description": "WebGL2 adapter for the luma.gl API",
   "type": "module",
   "license": "MIT",
@@ -44,12 +44,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0",
-    "@luma.gl/api": "9.0.0-alpha.26",
-    "@luma.gl/constants": "9.0.0-alpha.26",
+    "@luma.gl/api": "9.0.0-alpha.27",
+    "@luma.gl/constants": "9.0.0-alpha.27",
     "@probe.gl/env": "^4.0.2"
   },
   "devDependencies": {
-    "@luma.gl/test-utils": "9.0.0-alpha.26"
+    "@luma.gl/test-utils": "9.0.0-alpha.27"
   },
-  "gitHead": "e255f78c1c0a4555808c6e9282bcecb6accd147b"
+  "gitHead": "4052244031cb80c27fa0e3fd4c3d5514daa08b78"
 }

package/src/adapter/objects/webgl-vertex-array-object.ts

@@ -1,18 +1,23 @@
-import {assert, ResourceProps} from '@luma.gl/api';
+import type {Device, Buffer, ResourceProps, TypedArray, NumericArray} from '@luma.gl/api';
+import {Resource, assert, getScratchArray, fillArray} from '@luma.gl/api';
 import {GL} from '@luma.gl/constants';
 import {getBrowser} from '@probe.gl/env';
 
 import {WebGLDevice} from '../webgl-device';
 import {WebGLResource} from './webgl-resource';
-
 import {WEBGLBuffer} from '../resources/webgl-buffer';
 
+import {BufferWithAccessor} from '../../classic/buffer-with-accessor';
+
 const ERR_ELEMENTS = 'elements must be GL.ELEMENT_ARRAY_BUFFER';
 
 /**
  * VertexArrayObject properties
+ * @param constantAttributeZero Attribute 0 can not be disable on most desktop OpenGL based browsers
+ * and on iOS Safari browser.
  */
 export type VertexArrayObjectProps = ResourceProps & {
+  constantAttributeZero?: boolean;
 };
 
 /** VertexArrayObject wrapper */
@@ -21,11 +26,26 @@ export class WEBGLVertexArrayObject extends WebGLResource<VertexArrayObjectProps
     return 'BaseVertexArrayObject';
   }
 
-  constructor(device: WebGLDevice, props?: VertexArrayObjectProps) {
-    // @ts-expect-error
-    super(device, props, {});
+  /** Buffer constant */
+  private buffer: BufferWithAccessor | null = null;
+  private bufferValue = null;
+
+  static isConstantAttributeZeroSupported(device: Device): boolean {
+    return device.info.type === 'webgl2' || getBrowser() === 'Chrome';
   }
 
+  // Create a VertexArray
+  constructor(device: Device, props?: VertexArrayObjectProps) {
+    super(device, props, {...Resource.defaultProps, constantAttributeZero: false});
+    Object.seal(this);
+  }
+
+  override destroy(): void {
+    super.destroy();
+    if (this.buffer) {
+      this.buffer?.destroy();
+    }  }
+
   override _createHandle() {
     return this.gl2.createVertexArray();
   }
@@ -41,6 +61,26 @@ export class WEBGLVertexArrayObject extends WebGLResource<VertexArrayObjectProps
     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: number, enable = true): void {
+    // Attribute 0 cannot be disabled in most desktop OpenGL based browsers...
+    const canDisableAttributeZero = this.device.isWebGL2 || getBrowser() === 'Chrome';
+    const canDisableAttribute = canDisableAttributeZero || location !== 0;
+
+    if (enable || canDisableAttribute) {
+      location = Number(location);
+      this.bind(() =>
+        enable
+          ? 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: WEBGLBuffer | null = null, opts = {}) {
@@ -50,15 +90,14 @@ export class WEBGLVertexArrayObject extends WebGLResource<VertexArrayObjectProps
     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: number, buffer: WEBGLBuffer, accessor: any): this {
+  setBuffer(location: number, buffer: WEBGLBuffer, accessor: any): void {
     // Check target
     if (buffer.target === GL.ELEMENT_ARRAY_BUFFER) {
-      return this.setElementBuffer(buffer, accessor);
+      this.setElementBuffer(buffer, accessor);
+      return;
     }
 
     const {size, type, stride, offset, normalized, integer, divisor} = accessor;
@@ -83,29 +122,154 @@ export class WEBGLVertexArrayObject extends WebGLResource<VertexArrayObjectProps
 
       // NOTE We don't unbind buffer here, typically another buffer will be bound just after
     });
+  }
 
-    return this;
+  /**
+   * 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?
+   */
+  setConstant(location: any, array: TypedArray): void {
+    switch (array.constructor) {
+      case Float32Array:
+        setConstantFloatArray(this.device, location, array as Float32Array);
+        break;
+      case Int32Array:
+        setConstantIntArray(this.device, location, array as Int32Array);
+        break;
+      case Uint32Array:
+        setConstantUintArray(this.device, location, array as Uint32Array);
+        break;
+      default:
+        assert(false);
+    }
   }
 
   /**
-   * 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?
+   * 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
    */
-  enable(location: number, enable = true): this {
-    // Attribute 0 cannot be disabled in most desktop OpenGL based browsers...
-    const canDisableAttributeZero = this.device.isWebGL2 || getBrowser() === 'Chrome';
-    const canDisableAttribute = canDisableAttributeZero || location !== 0;
+  getConstantBuffer(elementCount: number, value): Buffer {
+    // Create buffer only when needed, and reuse it (avoids inflating buffer creation statistics)
 
-    if (enable || canDisableAttribute) {
-      location = Number(location);
-      this.bind(() =>
-        enable
-          ? this.gl.enableVertexAttribArray(location)
-          : this.gl.disableVertexAttribArray(location)
-      );
+    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}) as BufferWithAccessor;
+    updateNeeded = updateNeeded || this.buffer.reallocate(byteLength);
+
+    // Reallocate and update contents if needed
+    updateNeeded =
+      updateNeeded || !compareConstantArrayValues(constantValue, this.bufferValue);
+
+    if (updateNeeded) {
+      // Create a typed array that is big enough, and fill it with the required data
+      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: WebGLDevice, location: number, array: Float32Array): void {
+  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:
+      assert(false);
+  }
+}
+
+function setConstantIntArray(device: WebGLDevice, location: number, array: Int32Array): void {
+  device.assertWebGL2();
+  device.gl2?.vertexAttribI4iv(location, array);
+  // switch (array.length) {
+  //   case 1:
+  //     gl.vertexAttribI1iv(location, array);
+  //     break;
+  //   case 2:
+  //     gl.vertexAttribI2iv(location, array);
+  //     break;
+  //   case 3:
+  //     gl.vertexAttribI3iv(location, array);
+  //     break;
+  //   case 4:
+  //     break;
+  //   default:
+  //     assert(false);
+  // }
+}
+
+function setConstantUintArray(device: WebGLDevice, location: number, array: Uint32Array) {
+  device.assertWebGL2();
+  device.gl2?.vertexAttribI4uiv(location, array);
+  // switch (array.length) {
+  //   case 1:
+  //     gl.vertexAttribI1uiv(location, array);
+  //     break;
+  //   case 2:
+  //     gl.vertexAttribI2uiv(location, array);
+  //     break;
+  //   case 3:
+  //     gl.vertexAttribI3uiv(location, array);
+  //     break;
+  //   case 4:
+  //     gl.vertexAttribI4uiv(location, array);
+  //     break;
+  //   default:
+  //     assert(false);
+  // }
+}
+
+// HELPERS
+
+/**
+ * TODO - convert Arrays based on known type? (read type from accessor, don't assume Float32Array)
+ * TODO - handle single values for size 1 attributes?
+ */
+function normalizeConstantArrayValue(arrayValue: NumericArray) {
+  if (Array.isArray(arrayValue)) {
+    return new Float32Array(arrayValue);
+  }
+  return arrayValue;
+}
+
+/**
+ * 
+ */
+function compareConstantArrayValues(v1: NumericArray, v2: NumericArray): boolean {
+  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 this;
   }
+  return true;
 }

package/src/adapter/resources/webgl-render-pipeline.ts

@@ -6,7 +6,8 @@ import type {
   ShaderLayout,
   PrimitiveTopology,
   // BindingLayout,
-  AttributeLayout
+  AttributeLayout,
+  TypedArray
 } from '@luma.gl/api';
 import {RenderPipeline, cast, log, decodeVertexFormat} from '@luma.gl/api';
 import {GL} from '@luma.gl/constants';
@@ -112,7 +113,27 @@ export class WEBGLRenderPipeline extends RenderPipeline {
     }
   }
 
-  /** @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: Record<string, TypedArray>): void {
+    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; // eslint-disable-line no-continue
+      }
+      this.vertexArrayObject.setConstant(attribute.location, value);
+    }
+  }
+
+  /** 
+   * Bindings include: textures, samplers and uniform buffers
+   * @todo needed for portable model 
+   */
   setBindings(bindings: Record<string, Binding>): void {
     // if (log.priority >= 2) {
     //   checkUniformValues(uniforms, this.id, this._uniformSetters);