@luma.gl/webgl 9.0.0-beta.5 → 9.0.0-beta.7

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

@@ -1,14 +1,12 @@
-// luma.gl, MIT license
+// luma.gl
+// SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {Resource, assert, uid, stubRemovedMethods} from '@luma.gl/core';
 import type {Device, ResourceProps} from '@luma.gl/core';
+import {Resource, uid, stubRemovedMethods} from '@luma.gl/core';
 import {GL} from '@luma.gl/constants';
 import {WebGLDevice} from '../webgl-device';
 
-// Requires full GL enum to be bundled... Make these bindings dependent on dynamic import (debug)?
-import {getKeyValue} from './constants-to-keys';
-
 const ERR_RESOURCE_METHOD_UNDEFINED = 'Resource subclass must define virtual methods';
 
 /**
@@ -27,13 +25,13 @@ export abstract class WebGLResource<Props extends ResourceProps> extends Resourc
   constructor(device: Device, props: Props, defaultProps: Required<Props>) {
     super(device, props, defaultProps);
 
-    this.device = WebGLDevice.attach(device);
+    this.device = device as WebGLDevice;
     const gl = this.device.gl;
 
-    // extends 
+    // extends
     const {id} = props || {};
     this.gl = gl;
-    this.gl2 = gl ;
+    this.gl2 = gl;
     this.id = id || uid(this.constructor.name);
 
     // Set the handle
@@ -81,7 +79,7 @@ export abstract class WebGLResource<Props extends ResourceProps> extends Resourc
     // @ts-expect-error
     if (children && deleteChildren) {
       // @ts-expect-error
-      children.filter(Boolean).forEach((child) => child.destroy());
+      children.filter(Boolean).forEach(child => child.destroy());
     }
 
     return this;
@@ -114,122 +112,6 @@ export abstract class WebGLResource<Props extends ResourceProps> extends Resourc
     this.bind(null);
   }
 
-  /**
-   * Query a Resource parameter
-   *
-   * @param name
-   * @return param
-   */
-  getParameter(pname: number, props: any = {}): any {
-    pname = getKeyValue(this.gl, pname);
-    assert(pname);
-
-    // @ts-expect-error
-    const parameters = this.constructor.PARAMETERS || {};
-
-    // Use parameter definitions to handle unsupported parameters
-    const parameter = parameters[pname];
-    if (parameter) {
-      // Check if we can query for this parameter
-      const parameterAvailable =
-        (!('extension' in parameter) || this.gl.getExtension(parameter.extension));
-
-      if (!parameterAvailable) {
-        return parameter.webgl2;
-      }
-    }
-
-    // If unknown parameter - Could be a valid parameter not covered by PARAMS
-    // Attempt to query for it and let WebGL report errors
-    return this._getParameter(pname, props);
-  }
-
-  // Many resources support a getParameter call -
-  // getParameters will get all parameters - slow but useful for debugging
-  // eslint-disable-next-line complexity
-  getParameters(options: {parameters?: any, keys?: any} = {}) {
-    const {parameters, keys} = options;
-
-    // Get parameter definitions for this Resource
-    // @ts-expect-error
-    const PARAMETERS = this.constructor.PARAMETERS || {};
-
-    const values: Record<string, any> = {};
-
-    // Query all parameters if no list provided
-    const parameterKeys = parameters || Object.keys(PARAMETERS);
-
-    // WEBGL limits
-    for (const pname of parameterKeys) {
-      const parameter = PARAMETERS[pname];
-
-      // Check if this parameter is available on this platform
-      const parameterAvailable =
-        parameter &&
-        (!('extension' in parameter) || this.gl.getExtension(parameter.extension));
-
-      if (parameterAvailable) {
-        const key = keys ? this.device.getGLKey(pname) : pname;
-        values[key] = this.getParameter(pname, options);
-        if (keys && parameter.type === 'GLenum') {
-          values[key] = this.device.getGLKey(values[key]);
-        }
-      }
-    }
-
-    return values;
-  }
-
-  /**
-   * Update a Resource setting
-   *
-   * @todo - cache parameter to avoid issuing WebGL calls?
-   *
-   * @param pname - parameter (GL constant, value or key)
-   * @param value {GLint|GLfloat|GLenum} 
-   * @return returns self to enable chaining
-   */
-  setParameter(pname: GL | string, value: any): this {
-    pname = getKeyValue(this.gl, pname);
-    assert(pname);
-
-    // @ts-expect-error
-    const parameters = this.constructor.PARAMETERS || {};
-
-    const parameter = parameters[pname];
-    if (parameter) {
-      // Check if this parameter is available on this platform
-      const parameterAvailable =
-        (!('extension' in parameter) || this.gl.getExtension(parameter.extension));
-
-      if (!parameterAvailable) {
-        throw new Error('Parameter not available on this platform');
-      }
-
-      // Handle string keys
-      if (parameter.type === 'GLenum') {
-        // @ts-expect-error
-        value = getKeyValue(value);
-      }
-    }
-
-    // If unknown parameter - Could be a valid parameter not covered by PARAMS
-    // attempt to set it and let WebGL report errors
-    this._setParameter(pname, value);
-    return this;
-  }
-
-  /*
-   * Batch update resource parameters
-   * Assumes the subclass supports a setParameter call
-   */
-  setParameters(parameters: Record<GL, any>) {
-    for (const pname in parameters) {
-      this.setParameter(pname, parameters[pname]);
-    }
-    return this;
-  }
-
   // Install stubs for removed methods
   stubRemovedMethods(className: string, version: string, methodNames: string[]) {
     return stubRemovedMethods(this, className, version, methodNames);

package/src/adapter/resources/webgl-buffer.ts

@@ -1,4 +1,5 @@
-// luma.gl, MIT license
+// luma.gl
+// SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
 import type {BufferProps} from '@luma.gl/core';
@@ -166,9 +167,9 @@ export class WEBGLBuffer extends Buffer {
  * 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.

package/src/adapter/resources/webgl-command-buffer.ts

@@ -1,4 +1,5 @@
-// luma.gl, MIT license
+// luma.gl
+// SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
 import type {
@@ -156,7 +157,7 @@ function _copyTextureToBuffer(device: WebGLDevice, options: CopyTextureToBufferO
     const webglBuffer = destination as WEBGLBuffer;
     const sourceWidth = width || framebuffer.width;
     const sourceHeight = height || framebuffer.height;
-    const sourceParams = getWebGLTextureParameters(framebuffer.texture.format);
+    const sourceParams = getWebGLTextureParameters(framebuffer.texture.props.format);
     const sourceFormat = sourceParams.dataFormat;
     const sourceType = sourceParams.type;
 
@@ -225,19 +226,18 @@ function _copyTextureToTexture(device: WebGLDevice, options: CopyTextureToTextur
     origin = [0, 0],
 
     /** Texture to copy to/from. */
-    destination,
+    destination
     /**  Mip-map level of the texture to copy to/from. (Default 0) */
     // destinationMipLevel = options.mipLevel,
     /** Defines the origin of the copy - the minimum corner of the texture sub-region to copy to/from. */
     // destinationOrigin = [0, 0],
     /** Defines which aspects of the texture to copy to/from. */
     // destinationAspect = options.aspect,
-
   } = options;
 
   let {
     width = options.destination.width,
-    height = options.destination.width,
+    height = options.destination.width
     // depthOrArrayLayers = 0
   } = options;
 

package/src/adapter/resources/webgl-command-encoder.ts

@@ -1,4 +1,5 @@
-// luma.gl, MIT license
+// luma.gl
+// SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
 import {CommandEncoder, CommandEncoderProps} from '@luma.gl/core';
@@ -6,7 +7,9 @@ import type {
   CopyBufferToBufferOptions,
   CopyBufferToTextureOptions,
   CopyTextureToBufferOptions,
-  CopyTextureToTextureOptions
+  CopyTextureToTextureOptions,
+  QuerySet,
+  Buffer
 } from '@luma.gl/core';
 
 import {WEBGLCommandBuffer} from './webgl-command-buffer';
@@ -54,13 +57,13 @@ export class WEBGLCommandEncoder extends CommandEncoder {
 
   override insertDebugMarker(markerLabel: string): void {}
 
-  // writeTimestamp(querySet: Query, queryIndex: number): void {}
-
-  // resolveQuerySet(options: {
-  //   querySet: GPUQuerySet,
-  //   firstQuery: number,
-  //   queryCount: number,
-  //   destination: Buffer,
-  //   destinationOffset?: number;
-  // }): void;
+  override resolveQuerySet(
+    querySet: QuerySet,
+    destination: Buffer,
+    options?: {
+      firstQuery?: number;
+      queryCount?: number;
+      destinationOffset?: number;
+    }
+  ): void {}
 }

package/src/adapter/resources/webgl-external-texture.ts

@@ -1,4 +1,5 @@
-// luma.gl, MIT license
+// luma.gl
+// SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
 /*
@@ -52,12 +53,12 @@ export class WEBGLExternalTexture extends WEBGLTexture {
   }
 
   // eslint-disable-next-line max-statements
-  constructor(device: Device | WebGL2RenderingContext, props: TextureProps) {
-    super(WebGLDevice.attach(device), {id: uid('texture'), ...props});
+  constructor(device: Device , props: TextureProps) {
+    super(device as WebGLDevice, {id: uid('texture'), ...props});
 
     this.glTarget = getWebGLTextureTarget(props);
 
-    this.device = WebGLDevice.attach(device);
+    this.device = device as WebGLDevice;
     this.gl = this.device.gl;
     this.gl2 = this.device.gl2;
     this.handle = this.props.handle || this.gl.createTexture();
@@ -91,4 +92,4 @@ export class WEBGLExternalTexture extends WEBGLTexture {
   }
 
 
-*/
+*/

package/src/adapter/resources/webgl-framebuffer.ts

@@ -1,4 +1,5 @@
-// luma.gl, MIT license
+// luma.gl
+// SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
 import type {FramebufferProps, TextureFormat} from '@luma.gl/core';
@@ -6,11 +7,13 @@ import {Framebuffer, Texture, assert} from '@luma.gl/core';
 import {GL} from '@luma.gl/constants';
 import {WebGLDevice} from '../webgl-device';
 import {WEBGLTexture} from './webgl-texture';
-import {WEBGLRenderbuffer} from '../objects/webgl-renderbuffer';
+import {WEBGLTextureView} from './webgl-texture-view';
 import {getDepthStencilAttachmentWebGL} from '../converters/texture-formats';
 
-export type TextureAttachment = [Texture, number?, number?];
-export type Attachment = WEBGLTexture | WEBGLRenderbuffer | TextureAttachment;
+// TODO - for now we don't see a usage for renderbuffers in WebGL 2.
+// import {WEBGLRenderbuffer} from '../objects/webgl-renderbuffer';
+
+export type Attachment = WEBGLTextureView | WEBGLTexture; // | WEBGLRenderbuffer;
 
 /** luma.gl Framebuffer, WebGL implementation  */
 export class WEBGLFramebuffer extends Framebuffer {
@@ -45,26 +48,30 @@ export class WEBGLFramebuffer extends Framebuffer {
 
       // Walk the attachments
       for (let i = 0; i < this.colorAttachments.length; ++i) {
-        const attachment = this.colorAttachments[i];
+        const attachment = this.colorAttachments[i] as WEBGLTextureView;
         const attachmentPoint = GL.COLOR_ATTACHMENT0 + i;
         if (attachment) {
-          this._attachOne(attachmentPoint, attachment as WEBGLTexture);
+          this._attachOne(attachmentPoint, attachment);
         }
       }
 
       if (this.depthStencilAttachment) {
         this._attachOne(
-          getDepthStencilAttachmentWebGL(this.depthStencilAttachment.format),
-          this.depthStencilAttachment as WEBGLTexture
+          getDepthStencilAttachmentWebGL(this.depthStencilAttachment.props.format),
+          this.depthStencilAttachment as WEBGLTextureView
         );
       }
 
-      this.gl.bindFramebuffer(GL.FRAMEBUFFER, null);
-    }
+      /** Check the status */
+      // @ts-expect-error
+      if (props.check !== false) {
+        const status = this.gl.checkFramebufferStatus(GL.FRAMEBUFFER) as GL;
+        if (status !== GL.FRAMEBUFFER_COMPLETE) {
+          throw new Error(`Framebuffer ${_getFrameBufferStatus(status)}`);
+        }
+      }
 
-    // @ts-expect-error
-    if (props.check !== false) {
-      this._checkStatus();
+      this.gl.bindFramebuffer(GL.FRAMEBUFFER, null);
     }
   }
 
@@ -79,32 +86,20 @@ export class WEBGLFramebuffer extends Framebuffer {
 
   // PRIVATE
 
-  /** Check the status */
-  protected _checkStatus(): void {
-    const {gl} = this;
-    // TODO - should we really rely on this trick? 
-    const prevHandle = gl.bindFramebuffer(GL.FRAMEBUFFER, this.handle) as unknown as WebGLFramebuffer;
-    const status = gl.checkFramebufferStatus(GL.FRAMEBUFFER);
-    gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle || null);
-    if (status !== gl.FRAMEBUFFER_COMPLETE) {
-      throw new Error(`Framebuffer ${_getFrameBufferStatus(status)}`);
-    }
-  }
-
   /** In WebGL we must use renderbuffers for depth/stencil attachments (unless we have extensions) */
   protected override createDepthStencilTexture(format: TextureFormat): Texture {
-    return new WEBGLRenderbuffer(this.device, {
-      id: `${this.id}-depth-stencil`, // TODO misleading if not depth and stencil?
+    // return new WEBGLRenderbuffer(this.device, {
+    return new WEBGLTexture(this.device, {
+      id: `${this.id}-depth-stencil`,
       format,
-      // dataFormat: GL.DEPTH_STENCIL,
-      // type: GL.UNSIGNED_INT_24_8,
       width: this.width,
-      height: this.height
-    }) as unknown as WEBGLTexture;
+      height: this.height,
+      mipmaps: false
+    });
   }
 
-  /** 
-   * Attachment resize is expected to be a noop if size is same 
+  /**
+   * Attachment resize is expected to be a noop if size is same
    */
   protected override resizeAttachments(width: number, height: number): this {
     // for default framebuffer, just update the stored size
@@ -125,41 +120,51 @@ export class WEBGLFramebuffer extends Framebuffer {
     // TODO Not clear that this is better than default destroy/create implementation
 
     for (const colorAttachment of this.colorAttachments) {
-      (colorAttachment as WEBGLTexture).resize({width, height});
+      (colorAttachment.texture as WEBGLTexture).resize({width, height});
     }
     if (this.depthStencilAttachment) {
-      (this.depthStencilAttachment as WEBGLTexture).resize({width, height});
+      (this.depthStencilAttachment.texture as WEBGLTexture).resize({width, height});
     }
     return this;
   }
 
   /** Attach one attachment */
-  protected _attachOne(
-    attachmentPoint: GL,
-    attachment: Attachment
-  ): WEBGLTexture | WEBGLRenderbuffer {
-    if (attachment instanceof WEBGLRenderbuffer) {
-      this._attachWEBGLRenderbuffer(attachmentPoint, attachment);
-      return attachment;
-    } else if (Array.isArray(attachment)) {
+  protected _attachOne(attachmentPoint: GL, attachment: Attachment): WEBGLTexture {
+    // if (attachment instanceof WEBGLRenderbuffer) {
+    //   this._attachWEBGLRenderbuffer(attachmentPoint, attachment);
+    //   return attachment;
+    // }
+    if (Array.isArray(attachment)) {
       const [texture, layer = 0, level = 0] = attachment;
       this._attachTexture(attachmentPoint, texture as unknown as WEBGLTexture, layer, level);
       return texture as unknown as WEBGLTexture;
-    } else if (attachment instanceof WEBGLTexture) {
+    }
+    if (attachment instanceof WEBGLTexture) {
       this._attachTexture(attachmentPoint, attachment, 0, 0);
       return attachment;
     }
+    if (attachment instanceof WEBGLTextureView) {
+      const textureView = attachment;
+      this._attachTexture(
+        attachmentPoint,
+        textureView.texture,
+        textureView.props.baseMipLevel,
+        textureView.props.baseArrayLayer
+      );
+      return attachment.texture;
+    }
     throw new Error('attach');
   }
 
-  protected _attachWEBGLRenderbuffer(attachment: GL, renderbuffer: WEBGLRenderbuffer): void {
-    this.gl.framebufferRenderbuffer(
-      GL.FRAMEBUFFER,
-      attachment,
-      GL.RENDERBUFFER,
-      renderbuffer.handle
-    );
-  }
+  // TODO - we do not seem to need render buffers in WebGL 2
+  // protected _attachWEBGLRenderbuffer(attachment: GL, renderbuffer: WEBGLRenderbuffer): void {
+  //   this.gl.framebufferRenderbuffer(
+  //     GL.FRAMEBUFFER,
+  //     attachment,
+  //     GL.RENDERBUFFER,
+  //     renderbuffer.handle
+  //   );
+  // }
 
   /**
    * @param attachment
@@ -174,6 +179,7 @@ export class WEBGLFramebuffer extends Framebuffer {
     level: number
   ): void {
     const {gl} = this.device;
+
     gl.bindTexture(texture.target, texture.handle);
 
     switch (texture.target) {
@@ -206,7 +212,9 @@ export class WEBGLFramebuffer extends Framebuffer {
 function mapIndexToCubeMapFace(layer: number | GL): GL {
   // TEXTURE_CUBE_MAP_POSITIVE_X is a big value (0x8515)
   // if smaller assume layer is index, otherwise assume it is already a cube map face constant
-  return layer < (GL.TEXTURE_CUBE_MAP_POSITIVE_X as number) ? layer + GL.TEXTURE_CUBE_MAP_POSITIVE_X : layer;
+  return layer < (GL.TEXTURE_CUBE_MAP_POSITIVE_X as number)
+    ? layer + GL.TEXTURE_CUBE_MAP_POSITIVE_X
+    : layer;
 }
 
 // Helper METHODS

package/src/adapter/resources/webgl-query-set.ts

@@ -0,0 +1,171 @@
+// WebGL2 Query (also handles disjoint timer extensions)
+import {QuerySet, QuerySetProps} from '@luma.gl/core';
+import {GL} from '@luma.gl/constants';
+import {WebGLDevice} from '../webgl-device';
+
+/**
+ * Asynchronous queries for different kinds of information
+ */
+export class WEBGLQuerySet extends QuerySet {
+  device: WebGLDevice;
+  handle: WebGLQuery;
+
+  target: number | null = null;
+  _queryPending = false;
+  _pollingPromise: Promise<any> | null = null;
+
+  override get [Symbol.toStringTag](): string {
+    return 'Query';
+  }
+
+  // Create a query class
+  constructor(device: WebGLDevice, props: QuerySetProps) {
+    super(device, props);
+    this.device = device;
+
+    if (props.count > 1) {
+      throw new Error('WebGL QuerySet can only have one value');
+    }
+
+    this.handle = this.device.gl.createQuery();
+    Object.seal(this);
+  }
+
+  override destroy() {
+    this.device.gl.deleteQuery(this.handle);
+  }
+
+  // FOR RENDER PASS AND COMMAND ENCODER
+
+  /**
+   * Shortcut for timer query (dependent on extension in both WebGL1 and 2)
+   * Measures GPU time delta between this call and a matching `end` call in the
+   * GPU instruction stream.
+   */
+  beginTimestampQuery(): void {
+    return this._begin(GL.TIME_ELAPSED_EXT);
+  }
+
+  endTimestampQuery(): void {
+    this._end();
+  }
+
+  // Shortcut for occlusion queries
+  beginOcclusionQuery(options?: {conservative?: boolean}): void {
+    return this._begin(
+      options?.conservative ? GL.ANY_SAMPLES_PASSED_CONSERVATIVE : GL.ANY_SAMPLES_PASSED
+    );
+  }
+
+  endOcclusionQuery() {
+    this._end();
+  }
+
+  // Shortcut for transformFeedbackQuery
+  beginTransformFeedbackQuery(): void {
+    return this._begin(GL.TRANSFORM_FEEDBACK_PRIMITIVES_WRITTEN);
+  }
+
+  endTransformFeedbackQuery(): void {
+    this._end();
+  }
+
+  async resolveQuery(): Promise<bigint[]> {
+    const value = await this.pollQuery();
+    return [value];
+  }
+
+  // PRIVATE METHODS
+
+  /**
+   * Due to OpenGL API limitations, after calling `begin()` on one Query
+   * instance, `end()` must be called on that same instance before
+   * calling `begin()` on another query. While there can be multiple
+   * outstanding queries representing disjoint `begin()`/`end()` intervals.
+   * It is not possible to interleave or overlap `begin` and `end` calls.
+   */
+  protected _begin(target: number): void {
+    // Don't start a new query if one is already active.
+    if (this._queryPending) {
+      return;
+    }
+
+    this.target = target;
+    this.device.gl.beginQuery(this.target, this.handle);
+
+    return;
+  }
+
+  // ends the current query
+  protected _end(): void {
+    // Can't end a new query if the last one hasn't been resolved.
+    if (this._queryPending) {
+      return;
+    }
+
+    if (this.target) {
+      this.device.gl.endQuery(this.target);
+      this.target = null;
+      this._queryPending = true;
+    }
+    return;
+  }
+
+  // Returns true if the query result is available
+  isResultAvailable(): boolean {
+    if (!this._queryPending) {
+      return false;
+    }
+
+    const resultAvailable = this.device.gl.getQueryParameter(
+      this.handle,
+      GL.QUERY_RESULT_AVAILABLE
+    );
+    if (resultAvailable) {
+      this._queryPending = false;
+    }
+    return resultAvailable;
+  }
+
+  // Timing query is disjoint, i.e. results are invalid
+  isTimerDisjoint(): boolean {
+    return this.device.gl.getParameter(GL.GPU_DISJOINT_EXT);
+  }
+
+  // Returns query result.
+  getResult(): any {
+    return this.device.gl.getQueryParameter(this.handle, GL.QUERY_RESULT);
+  }
+
+  // Returns the query result, converted to milliseconds to match JavaScript conventions.
+  getTimerMilliseconds() {
+    return this.getResult() / 1e6;
+  }
+
+  // Polls the query
+  pollQuery(limit: number = Number.POSITIVE_INFINITY): Promise<any> {
+    if (this._pollingPromise) {
+      return this._pollingPromise;
+    }
+
+    let counter = 0;
+
+    this._pollingPromise = new Promise((resolve, reject) => {
+      const poll = () => {
+        if (this.isResultAvailable()) {
+          resolve(this.getResult());
+          this._pollingPromise = null;
+        } else if (counter++ > limit) {
+          reject('Timed out');
+          this._pollingPromise = null;
+        } else {
+          requestAnimationFrame(poll);
+        }
+      };
+
+      requestAnimationFrame(poll);
+    });
+
+    return this._pollingPromise;
+  }
+}