@luma.gl/webgl 9.0.0-alpha.3 → 9.0.0-alpha.30

package/src/adapter/objects/constants-to-keys.ts

@@ -1,5 +1,5 @@
-import {assert} from '@luma.gl/api';
-import GL from '@luma.gl/constants';
+import {assert} from '@luma.gl/core';
+import {GL} from '@luma.gl/constants';
 
 // Resolve a WebGL enumeration name (returns itself if already a number)
 export function getKeyValue(gl: WebGLRenderingContext, name: string | GL): GL {
@@ -16,30 +16,8 @@ export function getKeyValue(gl: WebGLRenderingContext, name: string | GL): GL {
 
   // Look up string, after removing any 'GL.' or 'gl.' prefix
   name = name.replace(/^.*\./, '');
+  // @ts-ignore expect-error depends on settings
   const value = gl[name];
   assert(value !== undefined, `Accessing undefined constant GL.${name}`);
   return value;
 }
-
-export function getKey(gl: WebGLRenderingContext, value: any): string {
-  // @ts-expect-error 
-  gl = gl.gl || gl;
-  value = Number(value);
-  for (const key in gl) {
-    if (gl[key] === value) {
-      return `GL.${key}`;
-    }
-  }
-  return String(value);
-}
-
-export function getKeyType(gl: WebGLRenderingContext, value: any): string {
-  assert(value !== undefined, 'undefined key');
-  value = Number(value);
-  for (const key in gl) {
-    if (gl[key] === value) {
-      return `GL.${key}`;
-    }
-  }
-  return String(value);
-}

package/src/adapter/objects/webgl-renderbuffer.ts

@@ -1,29 +1,17 @@
-/* eslint-disable no-inline-comments */
-import {assert, ResourceProps} from '@luma.gl/api';
-import GL from '@luma.gl/constants';
-import WebGLDevice from '../webgl-device';
-import WebGLResource from './webgl-resource';
-import {
-  isRenderbufferFormatSupported, getRenderbufferFormatBytesPerPixel
-} from '../converters/renderbuffer-formats';
+import {assert, ResourceProps, TextureFormat} from '@luma.gl/core';
+import {GL} from '@luma.gl/constants';
+import {WebGLDevice} from '../webgl-device';
+import {WebGLResource} from './webgl-resource';
+import {isRenderbufferFormatSupported} from '../converters/texture-formats';
+import {convertTextureFormatToGL, getTextureFormatBytesPerPixel} from '../converters/texture-formats';
 
 export type RenderbufferProps = ResourceProps & {
-  format: number;
+  format: TextureFormat;
   width?: number;
   height?: number;
   samples?: number;
 };
 
-const DEFAULT_RENDERBUFFER_PROPS: Required<RenderbufferProps> = {
-  id: undefined,
-  handle: undefined,
-  userData: undefined,
-  format: 0,
-  width: 1, 
-  height: 1, 
-  samples: 0
-};
-
 /**
  * Renderbuffers are GPU objects that contain images.
  * In contrast to Textures they are optimized for use as render targets, with Framebuffers.
@@ -34,36 +22,54 @@ const DEFAULT_RENDERBUFFER_PROPS: Required<RenderbufferProps> = {
  * use Textures instead.
  * Renderbuffer objects also natively accommodate Multisampling (MSAA).
  */
-export default class WEBGLRenderbuffer extends WebGLResource<RenderbufferProps> {
-  get [Symbol.toStringTag](): string { return 'Renderbuffer'; }
+export class WEBGLRenderbuffer extends WebGLResource<RenderbufferProps> {
+  static override readonly defaultProps: Required<RenderbufferProps> = {
+    id: undefined,
+    handle: undefined,
+    userData: undefined,
+    format: undefined, // 'depth16unorm'
+    width: 1,
+    height: 1, 
+    samples: 0
+  };  
+
+  override get [Symbol.toStringTag](): string { return 'Renderbuffer'; }
 
   get width(): number { return this.props.width; }
   get height(): number { return this.props.height; }
-  get format(): number  { return this.props.format; }
+  get format(): TextureFormat { return this.props.format; }
   get samples(): number { return this.props.samples; }
+  get attachment() { return  }
+
+  /** WebGL format constant */
+  glFormat: GL;
 
-  static isSupported(gl: WebGLRenderingContext, options?: {format?: number}): boolean {
-    return !options.format || isRenderbufferFormatSupported(gl, options.format);
+  static isTextureFormatSupported(device: WebGLDevice, format: TextureFormat): boolean {
+    return isRenderbufferFormatSupported(device.gl, format);
   }
 
   constructor(device: WebGLDevice, props: RenderbufferProps) {
-    super(device, props, DEFAULT_RENDERBUFFER_PROPS);
+    // TODO - remove temporary sanity check
+    if (typeof props.format === 'number') {
+      throw new Error('Renderbuffer');
+    }
+    super(device, props, WEBGLRenderbuffer.defaultProps);
+    this.glFormat = convertTextureFormatToGL(this.props.format, device.isWebGL2);
     this._initialize(this.props);
   }
 
-  resize(size: {width: number, height: number}): this {
+  resize(size: {width: number, height: number}): void {
     // Don't resize if width/height haven't changed
     if (size.width !== this.width || size.height !== this.height) {
       Object.assign(this.props, {...size, format: this.format, samples: this.samples});
       this._initialize(this.props);
     }
-    return this;
   }
 
   // PRIVATE METHODS
 
   /** Creates and initializes a renderbuffer object's data store */
-  protected _initialize(props: Required<RenderbufferProps>) {
+  protected _initialize(props: Required<RenderbufferProps>): void {
     const {format, width, height, samples} = props;
     assert(format, 'Needs format');
 
@@ -72,33 +78,30 @@ export default class WEBGLRenderbuffer extends WebGLResource<RenderbufferProps>
     this.gl.bindRenderbuffer(GL.RENDERBUFFER, this.handle);
 
     if (samples !== 0 && this.device.isWebGL2) {
-      // @ts-expect-error
-      this.gl.renderbufferStorageMultisample(GL.RENDERBUFFER, samples, format, width, height);
+      this.gl2.renderbufferStorageMultisample(GL.RENDERBUFFER, samples, this.glFormat, width, height);
     } else {
-      this.gl.renderbufferStorage(GL.RENDERBUFFER, format, width, height);
+      this.gl.renderbufferStorage(GL.RENDERBUFFER, this.glFormat, width, height);
     }
 
     this.gl.bindRenderbuffer(GL.RENDERBUFFER, null);
 
     this.trackAllocatedMemory(
-      width * height * (samples || 1) * getRenderbufferFormatBytesPerPixel(format)
+      width * height * (samples || 1) * getTextureFormatBytesPerPixel(this.glFormat, this.device.isWebGL2)
     );
-
-    return this;
   }
 
   // RESOURCE IMPLEMENTATION
 
-  _createHandle() {
+  override _createHandle() {
     return this.gl.createRenderbuffer();
   }
 
-  _deleteHandle(): void {
+  override _deleteHandle(): void {
     this.gl.deleteRenderbuffer(this.handle);
     this.trackDeallocatedMemory();
   }
 
-  _bindHandle(handle: WEBGLRenderbuffer): void {
+  override _bindHandle(handle: WEBGLRenderbuffer): void {
     this.gl.bindRenderbuffer(GL.RENDERBUFFER, handle);
   }
 }

package/src/adapter/objects/webgl-resource.ts

@@ -1,21 +1,19 @@
 // luma.gl, MIT license
-import {Resource, assert, uid, stubRemovedMethods} from '@luma.gl/api';
-import type {Device, ResourceProps} from '@luma.gl/api';
-import GL from '@luma.gl/constants';
+import {Resource, assert, uid, stubRemovedMethods} from '@luma.gl/core';
+import type {Device, ResourceProps} from '@luma.gl/core';
+import {GL} from '@luma.gl/constants';
 import {isWebGL2, assertWebGLContext} from '../../context/context/webgl-checks';
-import WebGLDevice from '../webgl-device';
+import {WebGLDevice} from '../webgl-device';
 
 // Requires full GL enum to be bundled... Make these bindings dependent on dynamic import (debug)?
-import {getKey, getKeyValue} from './constants-to-keys';
+import {getKeyValue} from './constants-to-keys';
 
 const ERR_RESOURCE_METHOD_UNDEFINED = 'Resource subclass must define virtual methods';
 
 /**
  * Base class for WebGL object wrappers
  */
- export default abstract class WebGLResource<Props> extends Resource<Props> {
-  id: string;
-  userData: any;
+export abstract class WebGLResource<Props extends ResourceProps> extends Resource<Props> {
   readonly device: WebGLDevice;
   readonly gl: WebGLRenderingContext;
   readonly gl2: WebGL2RenderingContext;
@@ -34,12 +32,10 @@ const ERR_RESOURCE_METHOD_UNDEFINED = 'Resource subclass must define virtual met
     assertWebGLContext(gl);
 
     // extends 
-    // @ts-expect-error
-    const {id, userData = {}} = props || {};
+    const {id} = props || {};
     this.gl = gl;
     this.gl2 = gl as WebGL2RenderingContext;
     this.id = id || uid(this.constructor.name);
-    this.userData = userData;
 
     // Set the handle
     // If handle was provided, use it, otherwise create a new handle
@@ -48,7 +44,6 @@ const ERR_RESOURCE_METHOD_UNDEFINED = 'Resource subclass must define virtual met
     // this.glCount = glGetContextLossCount(this.gl);
 
     // Default VertexArray needs to be created with null handle, so compare against undefined
-    // @ts-expect-error
     this._handle = props?.handle;
     if (this._handle === undefined) {
       this._handle = this._createHandle();
@@ -57,7 +52,7 @@ const ERR_RESOURCE_METHOD_UNDEFINED = 'Resource subclass must define virtual met
     this.byteLength = 0;
   }
 
-  toString(): string {
+  override toString(): string {
     return `${this.constructor.name}(${this.id})`;
   }
 
@@ -74,11 +69,7 @@ const ERR_RESOURCE_METHOD_UNDEFINED = 'Resource subclass must define virtual met
     return this._handle;
   }
 
-  destroy(): void {
-    this.delete();
-  }
-
-  delete({deleteChildren = false} = {}) {
+  override delete({deleteChildren = false} = {}) {
     // Delete this object, and get refs to any children
     // @ts-expect-error
     const children = this._handle && this._deleteHandle(this._handle);
@@ -91,7 +82,7 @@ const ERR_RESOURCE_METHOD_UNDEFINED = 'Resource subclass must define virtual met
     // @ts-expect-error
     if (children && deleteChildren) {
       // @ts-expect-error
-      children.filter(Boolean).forEach((child) => child.delete());
+      children.filter(Boolean).forEach((child) => child.destroy());
     }
 
     return this;
@@ -130,7 +121,7 @@ const ERR_RESOURCE_METHOD_UNDEFINED = 'Resource subclass must define virtual met
    * @param name
    * @return param
    */
-  getParameter(pname: number, props = {}): any {
+  getParameter(pname: number, props: any = {}): any {
     pname = getKeyValue(this.gl, pname);
     assert(pname);
 
@@ -163,7 +154,7 @@ const ERR_RESOURCE_METHOD_UNDEFINED = 'Resource subclass must define virtual met
   // Many resources support a getParameter call -
   // getParameters will get all parameters - slow but useful for debugging
   // eslint-disable-next-line complexity
-  getParameters(options: {parameters?, keys?} = {}) {
+  getParameters(options: {parameters?: any, keys?: any} = {}) {
     const {parameters, keys} = options;
 
     // Get parameter definitions for this Resource
@@ -188,10 +179,10 @@ const ERR_RESOURCE_METHOD_UNDEFINED = 'Resource subclass must define virtual met
         (!('extension' in parameter) || this.gl.getExtension(parameter.extension));
 
       if (parameterAvailable) {
-        const key = keys ? getKey(this.gl, pname) : pname;
+        const key = keys ? this.device.getGLKey(pname) : pname;
         values[key] = this.getParameter(pname, options);
         if (keys && parameter.type === 'GLenum') {
-          values[key] = getKey(this.gl, values[key]);
+          values[key] = this.device.getGLKey(values[key]);
         }
       }
     }

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

@@ -1,64 +1,103 @@
-import {assert, ResourceProps} from '@luma.gl/api';
-import GL from '@luma.gl/constants';
+import type {Device, Buffer, ResourceProps, TypedArray, NumericArray} from '@luma.gl/core';
+import {Resource, assert, getScratchArray, fillArray} from '@luma.gl/core';
+import {GL} from '@luma.gl/constants';
 import {getBrowser} from '@probe.gl/env';
 
-import WebGLDevice from '../webgl-device';
-import WebGLResource from './webgl-resource';
+import {WebGLDevice} from '../webgl-device';
+import {WebGLResource} from './webgl-resource';
+import {WEBGLBuffer} from '../resources/webgl-buffer';
 
-import Buffer 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 */
-export default class WEBGLVertexArrayObject extends WebGLResource<VertexArrayObjectProps> {
-  get [Symbol.toStringTag](): string {
+export class WEBGLVertexArrayObject extends WebGLResource<VertexArrayObjectProps> {
+  override get [Symbol.toStringTag](): string {
     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';
   }
 
-  _createHandle() {
+  // 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();
   }
 
-  _deleteHandle(): void {
+  override _deleteHandle(): void {
     this.gl2.deleteVertexArray(this.handle);
     // @ts-expect-error
     return [this.elements];
     // return [this.elements, ...this.buffers];
   }
 
-  _bindHandle(handle: WEBGLVertexArrayObject): void {
+  override _bindHandle(handle: WEBGLVertexArrayObject): void {
     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: Buffer = null, opts = {}) {
-    assert(!elementBuffer || elementBuffer.target === GL.ELEMENT_ARRAY_BUFFER, ERR_ELEMENTS);
+  setElementBuffer(elementBuffer: WEBGLBuffer | null = null, opts = {}) {
+    assert(!elementBuffer || elementBuffer.glTarget === GL.ELEMENT_ARRAY_BUFFER, ERR_ELEMENTS);
 
     // The GL.ELEMENT_ARRAY_BUFFER_BINDING is stored on the VertexArrayObject...
     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: Buffer, 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);
+    if (buffer.glTarget === GL.ELEMENT_ARRAY_BUFFER) {
+      this.setElementBuffer(buffer, accessor);
+      return;
     }
 
     const {size, type, stride, offset, normalized, integer, divisor} = accessor;
@@ -83,29 +122,154 @@ export default class WEBGLVertexArrayObject extends WebGLResource<VertexArrayObj
 
       // 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;
 }