@luma.gl/webgl 8.5.10 → 8.6.0-alpha.4

package/src/classes/{uniforms.js → uniforms.ts}

@@ -1,17 +1,56 @@
-/** @typedef {import('./uniforms')} types */
-
+import {log, assert} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
-import {log} from '@luma.gl/gltools';
+import {Matrix4} from '@math.gl/core';
 
 import Framebuffer from './framebuffer';
 import Renderbuffer from './renderbuffer';
 import Texture from './texture';
-import {assert} from '../utils/assert';
+
+type NumberUniformInfo = {
+  type: 'number'
+  value: number
+  min: number
+  max: number
+}
+
+type BooleanUniformInfo = {
+  type: 'boolean'
+  value: boolean
+}
+
+type ArrayUniformInfo = {
+  type: 'array'
+  value: Array<any>
+}
+
+type ObjectUniformInfo = {
+  type: 'object'
+  value: Object
+}
+
+type UniformInfo = NumberUniformInfo |
+  BooleanUniformInfo |
+  ArrayUniformInfo |
+  ObjectUniformInfo
+
+// https://luma.gl/docs/developer-guide/shader-modules#getuniforms
+type UniformsOptions = {
+  [uniformName: string]: UniformInfo
+}
+
+type Uniform = UniformInfo |
+  Buffer | (() => Buffer) | Framebuffer |
+  Texture |
+  Matrix4 | // TODO: which other math.gl classes?
+  number | [number, number] | [number, number, number] | [number, number, number, number]
+
+type Uniforms = {
+  [uniformName: string]: Uniform
+}
 
 const UNIFORM_SETTERS = {
   // WEBGL1
 
-  /* eslint-disable max-len */
   [GL.FLOAT]: getArraySetter.bind(null, 'uniform1fv', toFloatArray, 1, setVectorUniform),
   [GL.FLOAT_VEC2]: getArraySetter.bind(null, 'uniform2fv', toFloatArray, 2, setVectorUniform),
   [GL.FLOAT_VEC3]: getArraySetter.bind(null, 'uniform3fv', toFloatArray, 3, setVectorUniform),
@@ -126,7 +165,6 @@ const UNIFORM_SETTERS = {
   [GL.UNSIGNED_INT_SAMPLER_3D]: getSamplerSetter,
   [GL.UNSIGNED_INT_SAMPLER_CUBE]: getSamplerSetter,
   [GL.UNSIGNED_INT_SAMPLER_2D_ARRAY]: getSamplerSetter
-  /* eslint-enable max-len */
 };
 
 // Pre-allocated typed arrays for temporary conversion
@@ -136,52 +174,10 @@ const UINT_ARRAY = {};
 
 const array1 = [0];
 
-// Functions to ensure the type of uniform values
-// This is done because uniform*v functions
-// are extremely slow when consuming JS arrays directly.
-function toTypedArray(value, uniformLength, Type, cache) {
-  // convert boolean uniforms to Number
-  if (uniformLength === 1 && typeof value === 'boolean') {
-    value = value ? 1 : 0;
-  }
-  if (Number.isFinite(value)) {
-    array1[0] = value;
-    value = array1;
-  }
-  const length = value.length;
-  if (length % uniformLength) {
-    log.warn(`Uniform size should be multiples of ${uniformLength}`, value)();
-  }
-
-  if (value instanceof Type) {
-    return value;
-  }
-  let result = cache[length];
-  if (!result) {
-    result = new Type(length);
-    cache[length] = result;
-  }
-  for (let i = 0; i < length; i++) {
-    result[i] = value[i];
-  }
-  return result;
-}
-
-function toFloatArray(value, uniformLength) {
-  return toTypedArray(value, uniformLength, Float32Array, FLOAT_ARRAY);
-}
-
-function toIntArray(value, uniformLength) {
-  return toTypedArray(value, uniformLength, Int32Array, INT_ARRAY);
-}
-
-function toUIntArray(value, uniformLength) {
-  return toTypedArray(value, uniformLength, Uint32Array, UINT_ARRAY);
-} // Returns a Magic Uniform Setter
-
 // PUBLIC API
 
-/** @type {types['getUniformSetter']} */ export function getUniformSetter(gl, location, info) {
+/** Returns a Magic Uniform Setter */
+export function getUniformSetter(gl: WebGLRenderingContext, location: number, info: UniformInfo): any {
   const setter = UNIFORM_SETTERS[info.type];
   if (!setter) {
     throw new Error(`Unknown GLSL uniform type ${info.type}`);
@@ -192,8 +188,7 @@ function toUIntArray(value, uniformLength) {
   return setter().bind(null, gl, location);
 }
 
-/** @type {types['parseUniformName']} */
-export function parseUniformName(name) {
+export function parseUniformName(name: string): {name: string; isArray: boolean, length: number} {
   // Shortcut to avoid redundant or bad matches
   if (name[name.length - 1] !== ']') {
     return {
@@ -212,15 +207,20 @@ export function parseUniformName(name) {
 
   return {
     name: matches[1],
-    length: matches[2] || 1,
+    length: Number(matches[2]) || 1,
     isArray: Boolean(matches[2])
   };
-} // To facilitate early detection of e.g. undefined values in JavaScript
+}
+
+// To facilitate early detection of e.g. undefined values in JavaScript
 
 // Basic checks of uniform values (with or without knowledge of program)
 
-/** @type {types['checkUniformValues']} */
-export function checkUniformValues(uniforms, source, uniformMap) {
+/**
+ * Basic checks of uniform values (with or without knowledge of program)
+ * To facilitate early detection of e.g. undefined values in JavaScript
+ */
+ export function checkUniformValues(uniforms: object, source?: string, uniformMap?: object): boolean {
   for (const uniformName in uniforms) {
     const value = uniforms[uniformName];
     const shouldCheck = !uniformMap || Boolean(uniformMap[uniformName]);
@@ -228,14 +228,35 @@ export function checkUniformValues(uniforms, source, uniformMap) {
       // Add space to source
       source = source ? `${source} ` : '';
       // Value could be unprintable so write the object on console
-      console.error(`${source} Bad uniform ${uniformName}`, value); // eslint-disable-line
-      /* eslint-enable no-console */
+      console.error(`${source} Bad uniform ${uniformName}`, value); // eslint-disable-line no-console
       throw new Error(`${source} Bad uniform ${uniformName}`);
     }
   }
   return true;
 }
 
+ /**
+  * Creates a copy of the uniform
+  */
+export function copyUniform(uniforms: object, key: string, value: any): void {
+  if (Array.isArray(value) || ArrayBuffer.isView(value)) {
+    if (uniforms[key]) {
+      const dest = uniforms[key];
+      // @ts-expect-error
+      for (let i = 0, len = value.length; i < len; ++i) {
+        dest[i] = value[i];
+      }
+    } else {
+      // @ts-expect-error
+      uniforms[key] = value.slice();
+    }
+  } else {
+    uniforms[key] = value;
+  }
+}
+
+// HELPERS
+
 // TODO use type information during validation
 function checkUniformValue(value) {
   if (Array.isArray(value) || ArrayBuffer.isView(value)) {
@@ -257,25 +278,6 @@ function checkUniformValue(value) {
   return false;
 }
 
-/** @type {types['copyUniform']} */
-export function copyUniform(uniforms, key, value) {
-  if (Array.isArray(value) || ArrayBuffer.isView(value)) {
-    if (uniforms[key]) {
-      const dest = uniforms[key];
-      // @ts-ignore
-      for (let i = 0, len = value.length; i < len; ++i) {
-        dest[i] = value[i];
-      }
-    } else {
-      // @ts-ignore
-      uniforms[key] = value.slice();
-    }
-  } else {
-    uniforms[key] = value;
-  }
-}
-
-// HELPERS
 
 function checkUniformArray(value) {
   // Check that every element in array is a number, and at least 1 element
@@ -346,3 +348,47 @@ function setVectorUniform(gl, functionName, location, value) {
 function setMatrixUniform(gl, functionName, location, value) {
   gl[functionName](location, false, value);
 }
+
+// Functions to ensure the type of uniform values
+// This is done because uniform*v functions
+// are extremely slow when consuming JS arrays directly.
+
+function toTypedArray(value, uniformLength, Type, cache) {
+  // convert boolean uniforms to Number
+  if (uniformLength === 1 && typeof value === 'boolean') {
+    value = value ? 1 : 0;
+  }
+  if (Number.isFinite(value)) {
+    array1[0] = value;
+    value = array1;
+  }
+  const length = value.length;
+  if (length % uniformLength) {
+    log.warn(`Uniform size should be multiples of ${uniformLength}`, value)();
+  }
+
+  if (value instanceof Type) {
+    return value;
+  }
+  let result = cache[length];
+  if (!result) {
+    result = new Type(length);
+    cache[length] = result;
+  }
+  for (let i = 0; i < length; i++) {
+    result[i] = value[i];
+  }
+  return result;
+}
+
+function toFloatArray(value, uniformLength) {
+  return toTypedArray(value, uniformLength, Float32Array, FLOAT_ARRAY);
+}
+
+function toIntArray(value, uniformLength) {
+  return toTypedArray(value, uniformLength, Int32Array, INT_ARRAY);
+}
+
+function toUIntArray(value, uniformLength) {
+  return toTypedArray(value, uniformLength, Uint32Array, UINT_ARRAY);
+}

package/src/classes/{vertex-array-object.js → vertex-array-object.ts}

@@ -1,18 +1,31 @@
+import type {NumberArray} from '@luma.gl/api';
+import {assert, getScratchArray, fillArray} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
-import Resource from './resource';
-import Buffer from './buffer';
-import {isWebGL2} from '@luma.gl/gltools';
-import {getScratchArray, fillArray} from '../utils/array-utils-flat';
-import {assert} from '../utils/assert';
-import {getBrowser} from 'probe.gl';
+import {getBrowser} from '@probe.gl/env';
+import WebGLDevice from '../adapter/webgl-device';
+import {assertWebGL2Context, isWebGL2} from '../context/context/webgl-checks';
+import Program from './program';
+import WebGLResource, {ResourceProps} from './webgl-resource';
+import Buffer from './webgl-buffer';
 
 const ERR_ELEMENTS = 'elements must be GL.ELEMENT_ARRAY_BUFFER';
 
-export default class VertexArrayObject extends Resource {
-  static isSupported(gl, options = {}) {
-    // Attribute 0 can not be disable on most desktop OpenGL based browsers
-    // and on iOS Safari browser.
-    if (options.constantAttributeZero) {
+/**
+ * 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;
+  program?: Program;
+  isDefaultArray?: boolean;
+};
+
+export default class VertexArrayObject extends WebGLResource<VertexArrayObjectProps> {
+  private static MAX_ATTRIBUTES: number;
+
+  static isSupported(gl: WebGLRenderingContext | WebGL2RenderingContext, options?: VertexArrayObjectProps): boolean {
+    if (options?.constantAttributeZero) {
       return isWebGL2(gl) || getBrowser() === 'Chrome';
     }
 
@@ -20,65 +33,69 @@ export default class VertexArrayObject extends Resource {
     return true;
   }
 
-  // Returns the global (null) vertex array object. Exists even when no extension available
-  // TODO(Tarek): VAOs are now polyfilled. Deprecate this in 9.0
-  static getDefaultArray(gl) {
-    gl.luma = gl.luma || {};
-    if (!gl.luma.defaultVertexArray) {
-      gl.luma.defaultVertexArray = new VertexArrayObject(gl, {handle: null, isDefaultArray: true});
-    }
-    return gl.luma.defaultVertexArray;
+  /**
+   * Returns the global (null) vertex array object. Exists even when no extension available.
+   * @todo (Tarek): VAOs are now polyfilled. Deprecate this in 9.0
+   */
+  static getDefaultArray(gl: WebGLRenderingContext): VertexArrayObject {
+    const webglDevice = WebGLDevice.fromContext(gl);
+    webglDevice.defaultVertexArray = webglDevice.defaultVertexArray || 
+      new VertexArrayObject(gl, {handle: null, isDefaultArray: true});
+    return webglDevice.defaultVertexArray;
   }
 
-  static getMaxAttributes(gl) {
+  /** Get maximum number of attributes in a vertex array */
+  static getMaxAttributes(gl: WebGLRenderingContext): number {
     // TODO - should be cached per context
-    // @ts-ignore
     VertexArrayObject.MAX_ATTRIBUTES =
-      // @ts-ignore
       VertexArrayObject.MAX_ATTRIBUTES || gl.getParameter(gl.MAX_VERTEX_ATTRIBS);
-    // @ts-ignore
     return VertexArrayObject.MAX_ATTRIBUTES;
   }
 
-  // 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?
-  static setConstant(gl, location, array) {
+  /**
+   * Set an attribute to a constant value
+   * @param gl 
+   * @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?
+   */
+  static setConstant(gl: WebGLRenderingContext, location: any, array: any): void {
     switch (array.constructor) {
       case Float32Array:
         VertexArrayObject._setConstantFloatArray(gl, location, array);
         break;
       case Int32Array:
-        VertexArrayObject._setConstantIntArray(gl, location, array);
+        VertexArrayObject._setConstantIntArray(assertWebGL2Context(gl), location, array);
         break;
       case Uint32Array:
-        VertexArrayObject._setConstantUintArray(gl, location, array);
+        VertexArrayObject._setConstantUintArray(assertWebGL2Context(gl), location, array);
         break;
       default:
         assert(false);
     }
   }
 
+  private buffer: Buffer | null = null;
+  private bufferValue = null;
+  private isDefaultArray: boolean = false;
+
   // Create a VertexArray
-  constructor(gl, opts = {}) {
+  constructor(gl: WebGLRenderingContext, props?: VertexArrayObjectProps) {
     // Use program's id if program but no id is supplied
-    const id = opts.id || (opts.program && opts.program.id);
-    super(gl, Object.assign({}, opts, {id}));
+    super(WebGLDevice.attach(gl), {...props, id: props?.id || (props?.program && props?.program.id)}, {} as any);
 
     this.buffer = null;
     this.bufferValue = null;
-    this.isDefaultArray = opts.isDefaultArray || false;
-
-    /** @type {WebGL2RenderingContext} */
-    this.gl2 = gl;
-
-    this.initialize(opts);
+    this.isDefaultArray = props?.isDefaultArray || false;
 
     Object.seal(this);
   }
 
-  delete() {
+  delete(): this {
     super.delete();
     if (this.buffer) {
       this.buffer.delete();
@@ -86,22 +103,13 @@ export default class VertexArrayObject extends Resource {
     return this;
   }
 
-  get MAX_ATTRIBUTES() {
+  get MAX_ATTRIBUTES(): number {
     return VertexArrayObject.getMaxAttributes(this.gl);
   }
 
-  initialize(props = {}) {
-    return this.setProps(props);
-  }
-
-  setProps(props) {
-    // TODO: decide which props should be supported
-    return this;
-  }
-
   // 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 = {}) {
+  setElementBuffer(elementBuffer: Buffer = null, opts = {}) {
     assert(!elementBuffer || elementBuffer.target === GL.ELEMENT_ARRAY_BUFFER, ERR_ELEMENTS);
 
     // The GL.ELEMENT_ARRAY_BUFFER_BINDING is stored on the VertexArrayObject...
@@ -112,8 +120,8 @@ export default class VertexArrayObject extends Resource {
     return this;
   }
 
-  // Set a location in vertex attributes array to a bufferk, enables the location, sets divisor
-  setBuffer(location, buffer, accessor) {
+  /** Set a location in vertex attributes array to a buffer, enables the location, sets divisor */
+  setBuffer(location: number, buffer: Buffer, accessor: any): this {
     // Check target
     if (buffer.target === GL.ELEMENT_ARRAY_BUFFER) {
       return this.setElementBuffer(buffer, accessor);
@@ -145,11 +153,13 @@ export default class VertexArrayObject extends Resource {
     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?
-  enable(location, enable = true) {
+  /**
+   * 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): this {
     // Attribute 0 cannot be disabled in most desktop OpenGL based browsers
     const disablingAttributeZero =
       !enable &&
@@ -158,21 +168,22 @@ export default class VertexArrayObject extends Resource {
 
     if (!disablingAttributeZero) {
       location = Number(location);
-      this.bind(
-        () =>
-          enable
-            ? this.gl.enableVertexAttribArray(location)
-            : this.gl.disableVertexAttribArray(location)
+      this.bind(() =>
+        enable
+          ? this.gl.enableVertexAttribArray(location)
+          : this.gl.disableVertexAttribArray(location)
       );
     }
     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-penalt
-  getConstantBuffer(elementCount, value) {
+  /**
+   * 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: number, value): Buffer {
     // Create buffer only when needed, and reuse it (avoids inflating buffer creation statistics)
 
     const constantValue = this._normalizeConstantArrayValue(value);
@@ -200,18 +211,31 @@ export default class VertexArrayObject extends Resource {
     return this.buffer;
   }
 
+  // DEPRECATED
+
+  /** @deprecated this function has no effect */
+  initialize(props?: VertexArrayObjectProps): this {
+    return this.setProps(props);
+  }
+
+  /** @deprecated this function is not implemented */
+  setProps(props: VertexArrayObjectProps): this {
+    // TODO: decide which props should be supported
+    return this;
+  }  
+
   // PRIVATE
 
   // TODO - convert Arrays based on known type? (read type from accessor, don't assume Float32Array)
   // TODO - handle single values for size 1 attributes?
-  _normalizeConstantArrayValue(arrayValue) {
+  _normalizeConstantArrayValue(arrayValue: NumberArray) {
     if (Array.isArray(arrayValue)) {
       return new Float32Array(arrayValue);
     }
     return arrayValue;
   }
 
-  _compareConstantArrayValues(v1, v2) {
+  _compareConstantArrayValues(v1, v2): boolean {
     if (!v1 || !v2 || v1.length !== v2.length || v1.constructor !== v2.constructor) {
       return false;
     }
@@ -223,7 +247,7 @@ export default class VertexArrayObject extends Resource {
     return true;
   }
 
-  static _setConstantFloatArray(gl, location, array) {
+  static _setConstantFloatArray(gl: WebGLRenderingContext, location, array): void {
     switch (array.length) {
       case 1:
         gl.vertexAttrib1fv(location, array);
@@ -242,68 +266,66 @@ export default class VertexArrayObject extends Resource {
     }
   }
 
-  static _setConstantIntArray(gl, location, array) {
+  static _setConstantIntArray(gl: WebGL2RenderingContext, location, array) {
     assert(isWebGL2(gl));
-    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:
-        gl.vertexAttribI4iv(location, array);
-        break;
-      default:
-        assert(false);
-    }
+    gl.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);
+    // }
   }
 
-  static _setConstantUintArray(gl, location, array) {
+  static _setConstantUintArray(gl: WebGL2RenderingContext, location, array) {
     assert(isWebGL2(gl));
-    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);
-    }
+    gl.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);
+    // }
   }
 
   // RESOURCE IMPLEMENTATION
 
   _createHandle() {
-    /** @type {WebGL2RenderingContext} */
-    // @ts-ignore
-    const gl2 = this.gl;
-    return gl2.createVertexArray();
+    return this.gl2.createVertexArray();
   }
 
-  _deleteHandle(handle) {
-    this.gl2.deleteVertexArray(handle);
-    // @ts-ignore
+  _deleteHandle(): void {
+    this.gl2.deleteVertexArray(this.handle);
+    // @ts-expect-error
     return [this.elements];
     // return [this.elements, ...this.buffers];
   }
 
-  _bindHandle(handle) {
+  _bindHandle(handle): void {
     this.gl2.bindVertexArray(handle);
   }
 
   // Generic getter for information about a vertex attribute at a given position
-  _getParameter(pname, {location}) {
+  _getParameter(pname: number, {location}) {
     assert(Number.isFinite(location));
     return this.bind(() => {
       switch (pname) {