@luma.gl/webgl 9.0.0-alpha.9 → 9.0.0-beta.1

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

@@ -1,29 +1,20 @@
-/* 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';
+// luma.gl, MIT license
+// Copyright (c) vis.gl contributors
+
+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 +25,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  }
 
-  static isSupported(gl: WebGLRenderingContext, options?: {format?: number}): boolean {
-    return !options.format || isRenderbufferFormatSupported(gl, options.format);
+  /** WebGL format constant */
+  glFormat: GL;
+
+  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 +81,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,21 @@
 // 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';
+// Copyright (c) vis.gl contributors
+
+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 +34,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 +46,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 +54,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 +71,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 +84,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 +123,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 +156,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 +181,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/resources/webgl-buffer.ts

@@ -1,25 +1,29 @@
-import type {BufferProps} from '@luma.gl/api';
-import {Buffer, assert} from '@luma.gl/api';
-import GL from '@luma.gl/constants';
-import WebGLDevice from '../webgl-device';
+// luma.gl, MIT license
+// Copyright (c) vis.gl contributors
 
-const DEBUG_DATA_LENGTH = 10;
+import type {BufferProps} from '@luma.gl/core';
+import {Buffer, assert} from '@luma.gl/core';
+import {GL} from '@luma.gl/constants';
+import {WebGLDevice} from '../webgl-device';
 
 /** WebGL Buffer interface */
-export default class WEBGLBuffer extends Buffer {
+export class WEBGLBuffer extends Buffer {
   readonly device: WebGLDevice;
   readonly gl: WebGLRenderingContext;
   readonly gl2: WebGL2RenderingContext | null;
   readonly handle: WebGLBuffer;
-  readonly target: number;
 
+  /** Target in OpenGL defines the type of buffer */
+  readonly glTarget: GL.ARRAY_BUFFER | GL.ELEMENT_ARRAY_BUFFER | GL.UNIFORM_BUFFER;
+  /** Usage is a hint on how frequently the buffer will be updates */
+  readonly glUsage: GL.STATIC_DRAW | GL.DYNAMIC_DRAW;
+  /** Index type is needed when issuing draw calls, so we pre-compute it */
+  readonly glIndexType: GL.UNSIGNED_SHORT | GL.UNSIGNED_INT = GL.UNSIGNED_SHORT;
+
+  /** Number of bytes allocated on the GPU for this buffer */
   byteLength: number;
+  /** Number of bytes used */
   bytesUsed: number;
-  debugData: ArrayBuffer | null = null;
-
-  webglUsage: number;
-
-  accessor: {};
 
   constructor(device: WebGLDevice, props: BufferProps = {}) {
     super(device, props);
@@ -28,19 +32,16 @@ export default class WEBGLBuffer extends Buffer {
     this.gl = this.device.gl;
     this.gl2 = this.device.gl2;
 
-    const handle = typeof props === 'object' ? (props as BufferProps).handle : undefined;
+    const handle = typeof props === 'object' ? props.handle : undefined;
     this.handle = handle || this.gl.createBuffer();
-    // @ts-expect-error Add metadata for spector
-    this.handle.__SPECTOR_Metadata = {...this.props, data: typeof this.props.data}; // {name: this.props.id};
-
-    // In WebGL1, need to make sure we use GL.ELEMENT_ARRAY_BUFFER when initializing element buffers
-    // otherwise buffer type will lock to generic (non-element) buffer
-    // In WebGL2, we can use GL.COPY_READ_BUFFER which avoids locking the type here
-    // @ts-expect-error Hack - Checking for subclass prop
-    this.target = this.props.target || getWebGLTarget(this.props.usage);
-    // @ts-expect-error Hack - Checking for subclass prop
-    this.webglUsage = this.props.webglUsage || getWebGLUsage(this.props.usage);
-    this.debugData = null;
+    device.setSpectorMetadata(this.handle, {...this.props, data: typeof this.props.data});
+
+    // - In WebGL1, need to make sure we use GL.ELEMENT_ARRAY_BUFFER when initializing element buffers
+    //   otherwise buffer type will lock to generic (non-element) buffer
+    // - In WebGL2, we can use GL.COPY_READ_BUFFER which avoids locking the type here
+    this.glTarget = getWebGLTarget(this.props.usage);
+    this.glUsage = getWebGLUsage(this.props.usage);
+    this.glIndexType = this.props.indexType === 'uint32' ? GL.UNSIGNED_INT : GL.UNSIGNED_SHORT;
 
     // Set data: (re)initializes the buffer
     if (props.data) {
@@ -48,32 +49,28 @@ export default class WEBGLBuffer extends Buffer {
     } else {
       this._initWithByteLength(props.byteLength || 0);
     }
-
-    // Deprecated: Merge main props and accessor
-    // this.accessor = {...props.accessor};
-
-    // Object.seal(this);
   }
 
-   // PRIVATE METHODS
-
-  // Allocate a new buffer and initialize to contents of typed array
-  _initWithData(data, byteOffset: number = 0, byteLength: number = data.byteLength + byteOffset): this {
-    assert(ArrayBuffer.isView(data));
+  // PRIVATE METHODS
 
-    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);
+  /** Allocate a new buffer and initialize to contents of typed array */
+  _initWithData(
+    data: ArrayBuffer | ArrayBufferView,
+    byteOffset: number = 0,
+    byteLength: number = data.byteLength + byteOffset
+  ): void {
+    // const glTarget = this.device.isWebGL2 ? GL.COPY_WRITE_BUFFER : this.glTarget;
+    const glTarget = this.glTarget;
+    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;
-    this.trackAllocatedMemory(byteLength);
 
-    return this;
+    this._setDebugData(data, byteOffset, byteLength);
+    this.trackAllocatedMemory(byteLength);
   }
 
   // Allocate a GPU buffer of specified size.
@@ -88,59 +85,63 @@ export default class WEBGLBuffer extends Buffer {
       data = new Float32Array(0);
     }
 
-    const target = this._getWriteTarget();
+    // const glTarget = this.device.isWebGL2 ? GL.COPY_WRITE_BUFFER : this.glTarget;
+    const glTarget = this.glTarget;
 
-    this.gl.bindBuffer(target, this.handle);
-    this.gl.bufferData(target, data, this.webglUsage);
-    this.gl.bindBuffer(target, null);
+    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;
 
+    this._setDebugData(null, 0, byteLength);
+    this.trackAllocatedMemory(byteLength);
+
     return this;
   }
 
-  destroy(): void {
-    if (this.handle) {
+  override destroy(): void {
+    if (!this.destroyed && this.handle) {
       this.removeStats();
       this.trackDeallocatedMemory();
       this.gl.deleteBuffer(this.handle);
-      // this.handle = null;
       this.destroyed = true;
+      // @ts-expect-error
+      this.handle = null;
     }
   }
 
-  write(data: ArrayBufferView, byteOffset: number = 0): void {
+  override write(data: ArrayBufferView, byteOffset: number = 0): void {
     const srcOffset = 0;
-    const byteLength = data.byteLength;
+    const byteLength = undefined; // data.byteLength;
 
     // Create the buffer - binding it here for the first time locks the type
     // In WebGL2, use GL.COPY_WRITE_BUFFER to avoid locking the type
-    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);
     // WebGL2: subData supports additional srcOffset and length parameters
     if (srcOffset !== 0 || byteLength !== undefined) {
       this.device.assertWebGL2();
-
-      // @ts-expect-error
-      this.gl.bufferSubData(this.target, offset, 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);
 
-    // TODO - update local `data` if offsets are right
-    // this.debugData = data.slice(byteOffset, 40);
+    this._setDebugData(data, byteOffset, data.byteLength);
   }
 
-  /** Read data from the buffer */
-  async readAsync(
-    byteOffset: number = 0,
-    byteLength?: number
-  ): Promise<ArrayBuffer> {
+  /** Asynchronously read data from the buffer */
+  override async readAsync(byteOffset = 0, byteLength?: number): Promise<Uint8Array> {
+    return this.readSyncWebGL2(byteOffset, byteLength);
+  }
+
+  /** Synchronously read data from the buffer. WebGL only. */
+  override readSyncWebGL2(byteOffset = 0, byteLength?: number): Uint8Array {
     this.device.assertWebGL2();
 
+    byteLength = byteLength ?? this.byteLength - byteOffset;
     const data = new Uint8Array(byteLength);
     const dstOffset = 0;
 
@@ -149,41 +150,40 @@ export default class WEBGLBuffer extends Buffer {
     this.gl2.getBufferSubData(GL.COPY_READ_BUFFER, byteOffset, data, dstOffset, byteLength);
     this.gl.bindBuffer(GL.COPY_READ_BUFFER, null);
 
-    // TODO - update local `data` if offsets are 0
-    // this.debugData = null;
+    // Update local `data` if offsets are 0
+    this._setDebugData(data, byteOffset, byteLength);
 
     return data;
   }
-
-  // PROTECTED METHODS (INTENDED FOR USE BY OTHER FRAMEWORK CODE ONLY)
-
-  _invalidateDebugData() {
-    this.debugData = null;
-  }
-
-  _getWriteTarget() {
-    return this.target;
-    // return this.device.isWebGL2 ? GL.COPY_WRITE_BUFFER : this.target;
-  }
-
-  _getReadTarget() {
-    return this.target;
-    return this.device.isWebGL2 ? GL.COPY_READ_BUFFER : this.target;
-  }
 }
 
-// static MAP_READ = 0x01;
-// static MAP_WRITE = 0x02;
-// static COPY_SRC = 0x0004;
-// static COPY_DST = 0x0008;
-// static INDEX = 0x0010;
-// static VERTEX = 0x0020;
-// static UNIFORM = 0x0040;
-// static STORAGE = 0x0080;
-// static INDIRECT = 0x0100;
-// static QUERY_RESOLVE = 0x0200;
-
-function getWebGLTarget(usage: number): GL {
+/**
+ * Returns a WebGL buffer target
+ *
+ * @param usage
+ * static MAP_READ = 0x01;
+ * static MAP_WRITE = 0x02;
+ * static COPY_SRC = 0x0004;
+ * static COPY_DST = 0x0008;
+ * static INDEX = 0x0010;
+ * static VERTEX = 0x0020;
+ * static UNIFORM = 0x0040;
+ * static STORAGE = 0x0080;
+ * static INDIRECT = 0x0100;
+ * static QUERY_RESOLVE = 0x0200;
+ * 
+ * @returns WebGL buffer targe
+ * 
+ * Buffer bind points in WebGL2
+ * gl.COPY_READ_BUFFER: Buffer for copying from one buffer object to another.
+ * gl.COPY_WRITE_BUFFER: Buffer for copying from one buffer object to another.
+ * gl.TRANSFORM_FEEDBACK_BUFFER: Buffer for transform feedback operations.
+ * gl.PIXEL_PACK_BUFFER: Buffer used for pixel transfer operations.
+ * gl.PIXEL_UNPACK_BUFFER: Buffer used for pixel transfer operations.
+ */
+function getWebGLTarget(
+  usage: number
+): GL.ARRAY_BUFFER | GL.ELEMENT_ARRAY_BUFFER | GL.UNIFORM_BUFFER {
   if (usage & Buffer.INDEX) {
     return GL.ELEMENT_ARRAY_BUFFER;
   }
@@ -194,18 +194,13 @@ function getWebGLTarget(usage: number): GL {
     return GL.UNIFORM_BUFFER;
   }
 
-  // gl.COPY_READ_BUFFER: Buffer for copying from one buffer object to another.
-  // gl.COPY_WRITE_BUFFER: Buffer for copying from one buffer object to another.
-  // gl.TRANSFORM_FEEDBACK_BUFFER: Buffer for transform feedback operations.
-  // gl.PIXEL_PACK_BUFFER: Buffer used for pixel transfer operations.
-  // gl.PIXEL_UNPACK_BUFFER: Buffer used for pixel transfer operations.
-
   // Binding a buffer for the first time locks the type
-  // In WebGL2, use GL.COPY_WRITE_BUFFER to avoid locking the type
+  // In WebGL2, we can use GL.COPY_WRITE_BUFFER to avoid locking the type
   return GL.ARRAY_BUFFER;
 }
 
-function getWebGLUsage(usage: number): GL {
+/** @todo usage is not passed correctly */
+function getWebGLUsage(usage: number): GL.STATIC_DRAW | GL.DYNAMIC_DRAW {
   if (usage & Buffer.INDEX) {
     return GL.STATIC_DRAW;
   }
@@ -215,5 +210,5 @@ function getWebGLUsage(usage: number): GL {
   if (usage & Buffer.UNIFORM) {
     return GL.DYNAMIC_DRAW;
   }
-  return GL.DYNAMIC_DRAW;
+  return GL.STATIC_DRAW;
 }