@luma.gl/webgl 9.1.0-alpha.2 → 9.1.0-beta.1

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

@@ -7,15 +7,24 @@ import type {
   CopyBufferToTextureOptions,
   CopyTextureToBufferOptions,
   CopyTextureToTextureOptions
+  // ClearTextureOptions,
+  // ReadTextureOptions
 } from '@luma.gl/core';
 import {CommandBuffer, Texture, Framebuffer} from '@luma.gl/core';
-import {GL} from '@luma.gl/constants';
+import {
+  GL,
+  GLTextureTarget,
+  GLTextureCubeMapTarget
+  // GLTexelDataFormat,
+  // GLPixelType,
+  // GLDataType
+} from '@luma.gl/constants';
 
 import {WebGLDevice} from '../webgl-device';
 import {WEBGLBuffer} from './webgl-buffer';
 import {WEBGLTexture} from './webgl-texture';
 import {WEBGLFramebuffer} from './webgl-framebuffer';
-import {getTextureFormatWebGL} from '../converters/texture-formats';
+import {getTextureFormatWebGL} from '../converters/webgl-texture-table';
 
 type CopyBufferToBufferCommand = {
   name: 'copy-buffer-to-buffer';
@@ -37,11 +46,23 @@ type CopyTextureToTextureCommand = {
   options: CopyTextureToTextureOptions;
 };
 
+type ClearTextureCommand = {
+  name: 'clear-texture';
+  options: {}; // ClearTextureOptions;
+};
+
+type ReadTextureCommand = {
+  name: 'read-texture';
+  options: {}; // ReadTextureOptions;
+};
+
 type Command =
   | CopyBufferToBufferCommand
   | CopyBufferToTextureCommand
   | CopyTextureToBufferCommand
-  | CopyTextureToTextureCommand;
+  | CopyTextureToTextureCommand
+  | ClearTextureCommand
+  | ReadTextureCommand;
 
 export class WEBGLCommandBuffer extends CommandBuffer {
   device: WebGLDevice;
@@ -67,14 +88,19 @@ export class WEBGLCommandBuffer extends CommandBuffer {
         case 'copy-texture-to-texture':
           _copyTextureToTexture(this.device, command.options);
           break;
+        // case 'clear-texture':
+        //   _clearTexture(this.device, command.options);
+        //   break;
+        default:
+          throw new Error(command.name);
       }
     }
   }
 }
 
 function _copyBufferToBuffer(device: WebGLDevice, options: CopyBufferToBufferOptions): void {
-  const source = options.source as WEBGLBuffer;
-  const destination = options.destination as WEBGLBuffer;
+  const source = options.sourceBuffer as WEBGLBuffer;
+  const destination = options.destinationBuffer as WEBGLBuffer;
 
   // {In WebGL2 we can p}erform the copy on the GPU
   // Use GL.COPY_READ_BUFFER+GL.COPY_WRITE_BUFFER avoid disturbing other targets and locking type
@@ -106,22 +132,22 @@ function _copyBufferToTexture(device: WebGLDevice, options: CopyBufferToTextureO
 function _copyTextureToBuffer(device: WebGLDevice, options: CopyTextureToBufferOptions): void {
   const {
     /** Texture to copy to/from. */
-    source,
+    sourceTexture,
     /**  Mip-map level of the texture to copy to/from. (Default 0) */
     mipLevel = 0,
     /** Defines which aspects of the texture to copy to/from. */
     aspect = 'all',
 
     /** Width to copy */
-    width = options.source.width,
+    width = options.sourceTexture.width,
     /** Height to copy */
-    height = options.source.height,
+    height = options.sourceTexture.height,
     depthOrArrayLayers = 0,
     /** Defines the origin of the copy - the minimum corner of the texture sub-region to copy to/from. */
     origin = [0, 0],
 
     /** Destination buffer */
-    destination,
+    destinationBuffer,
     /** Offset, in bytes, from the beginning of the buffer to the start of the image data (default 0) */
     byteOffset = 0,
     /**
@@ -139,7 +165,7 @@ function _copyTextureToBuffer(device: WebGLDevice, options: CopyTextureToBufferO
 
   // TODO - Not possible to read just stencil or depth part in WebGL?
   if (aspect !== 'all') {
-    throw new Error('not supported');
+    throw new Error('aspect not supported in WebGL');
   }
 
   // TODO - mipLevels are set when attaching texture to framebuffer
@@ -148,10 +174,10 @@ function _copyTextureToBuffer(device: WebGLDevice, options: CopyTextureToBufferO
   }
 
   // Asynchronous read (PIXEL_PACK_BUFFER) is WebGL2 only feature
-  const {framebuffer, destroyFramebuffer} = getFramebuffer(source);
+  const {framebuffer, destroyFramebuffer} = getFramebuffer(sourceTexture);
   let prevHandle: WebGLFramebuffer | null | undefined;
   try {
-    const webglBuffer = destination as WEBGLBuffer;
+    const webglBuffer = destinationBuffer as WEBGLBuffer;
     const sourceWidth = width || framebuffer.width;
     const sourceHeight = height || framebuffer.height;
     const sourceParams = getTextureFormatWebGL(
@@ -220,7 +246,7 @@ export function readPixelsToBuffer(
 function _copyTextureToTexture(device: WebGLDevice, options: CopyTextureToTextureOptions): void {
   const {
     /** Texture to copy to/from. */
-    source,
+    sourceTexture,
     /**  Mip-map level of the texture to copy to (Default 0) */
     destinationMipLevel = 0,
     /** Defines which aspects of the texture to copy to/from. */
@@ -232,7 +258,7 @@ function _copyTextureToTexture(device: WebGLDevice, options: CopyTextureToTextur
     destinationOrigin = [0, 0],
 
     /** Texture to copy to/from. */
-    destination
+    destinationTexture
     /**  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. */
@@ -242,12 +268,12 @@ function _copyTextureToTexture(device: WebGLDevice, options: CopyTextureToTextur
   } = options;
 
   let {
-    width = options.destination.width,
-    height = options.destination.height
+    width = options.destinationTexture.width,
+    height = options.destinationTexture.height
     // depthOrArrayLayers = 0
   } = options;
 
-  const {framebuffer, destroyFramebuffer} = getFramebuffer(source);
+  const {framebuffer, destroyFramebuffer} = getFramebuffer(sourceTexture);
   const [sourceX, sourceY] = origin;
   const [destinationX, destinationY, destinationZ] = destinationOrigin;
 
@@ -261,8 +287,8 @@ function _copyTextureToTexture(device: WebGLDevice, options: CopyTextureToTextur
 
   let texture: WEBGLTexture = null;
   let textureTarget: GL;
-  if (destination instanceof WEBGLTexture) {
-    texture = destination;
+  if (destinationTexture instanceof WEBGLTexture) {
+    texture = destinationTexture;
     width = Number.isFinite(width) ? width : texture.width;
     height = Number.isFinite(height) ? height : texture.height;
     texture.bind(0);
@@ -311,7 +337,82 @@ function _copyTextureToTexture(device: WebGLDevice, options: CopyTextureToTextur
   }
 }
 
-// Returns number of components in a specific readPixels WebGL format
+/** Clear one mip level of a texture *
+function _clearTexture(device: WebGLDevice, options: ClearTextureOptions) {
+  const BORDER = 0;
+  const {dimension, width, height, depth = 0, mipLevel = 0} = options;
+  const {glInternalFormat, glFormat, glType, compressed} = options;
+  const glTarget = getWebGLCubeFaceTarget(options.glTarget, dimension, depth);
+
+  switch (dimension) {
+    case '2d-array':
+    case '3d':
+      if (compressed) {
+        // prettier-ignore
+        device.gl.compressedTexImage3D(glTarget, mipLevel, glInternalFormat, width, height, depth, BORDER, null);
+      } else {
+        // prettier-ignore
+        device.gl.texImage3D( glTarget, mipLevel, glInternalFormat, width, height, depth, BORDER, glFormat, glType, null);
+      }
+      break;
+
+    case '2d':
+    case 'cube':
+      if (compressed) {
+        // prettier-ignore
+        device.gl.compressedTexImage2D(glTarget, mipLevel, glInternalFormat, width, height, BORDER, null);
+      } else {
+        // prettier-ignore
+        device.gl.texImage2D(glTarget, mipLevel, glInternalFormat, width, height, BORDER, glFormat, glType, null);
+      }
+      break;
+
+    default:
+      throw new Error(dimension);
+  }
+}
+  */
+
+// function _readTexture(device: WebGLDevice, options: CopyTextureToBufferOptions) {}
+
+// HELPERS
+
+/**
+ * In WebGL, cube maps specify faces by overriding target instead of using the depth parameter.
+ * @note We still bind the texture using GL.TEXTURE_CUBE_MAP, but we need to use the face-specific target when setting mip levels.
+ * @returns glTarget unchanged, if dimension !== 'cube'.
+ */
+export function getWebGLCubeFaceTarget(
+  glTarget: GLTextureTarget,
+  dimension: '1d' | '2d' | '2d-array' | 'cube' | 'cube-array' | '3d',
+  level: number
+): GLTextureTarget | GLTextureCubeMapTarget {
+  return dimension === 'cube' ? GL.TEXTURE_CUBE_MAP_POSITIVE_X + level : glTarget;
+}
+
+/** Wrap a texture in a framebuffer so that we can use WebGL APIs that work on framebuffers */
+function getFramebuffer(source: Texture | Framebuffer): {
+  framebuffer: WEBGLFramebuffer;
+  destroyFramebuffer: boolean;
+} {
+  if (source instanceof Texture) {
+    const {width, height, id} = source;
+    const framebuffer = source.device.createFramebuffer({
+      id: `framebuffer-for-${id}`,
+      width,
+      height,
+      colorAttachments: [source]
+    }) as unknown as WEBGLFramebuffer;
+
+    return {framebuffer, destroyFramebuffer: true};
+  }
+  return {framebuffer: source as unknown as WEBGLFramebuffer, destroyFramebuffer: false};
+}
+
+/**
+ * Returns number of components in a specific readPixels WebGL format
+ * @todo use shadertypes utils instead?
+ */
 export function glFormatToComponents(format): 1 | 2 | 3 | 4 {
   switch (format) {
     case GL.ALPHA:
@@ -333,7 +434,10 @@ export function glFormatToComponents(format): 1 | 2 | 3 | 4 {
   }
 }
 
-// Return byte count for given readPixels WebGL type
+/**
+ * Return byte count for given readPixels WebGL type
+ * @todo use shadertypes utils instead?
+ */
 export function glTypeToBytes(type: GL): 1 | 2 | 4 {
   switch (type) {
     case GL.UNSIGNED_BYTE:
@@ -349,23 +453,3 @@ export function glTypeToBytes(type: GL): 1 | 2 | 4 {
       throw new Error('GLType');
   }
 }
-
-// Helper methods
-
-function getFramebuffer(source: Texture | Framebuffer): {
-  framebuffer: WEBGLFramebuffer;
-  destroyFramebuffer: boolean;
-} {
-  if (source instanceof Texture) {
-    const {width, height, id} = source;
-    const framebuffer = source.device.createFramebuffer({
-      id: `framebuffer-for-${id}`,
-      width,
-      height,
-      colorAttachments: [source]
-    }) as unknown as WEBGLFramebuffer;
-
-    return {framebuffer, destroyFramebuffer: true};
-  }
-  return {framebuffer: source as unknown as WEBGLFramebuffer, destroyFramebuffer: false};
-}

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

@@ -8,6 +8,8 @@ import type {
   CopyBufferToTextureOptions,
   CopyTextureToBufferOptions,
   CopyTextureToTextureOptions,
+  // ClearTextureOptions,
+  // ReadTextureOptions,
   QuerySet,
   Buffer
 } from '@luma.gl/core';
@@ -52,6 +54,10 @@ export class WEBGLCommandEncoder extends CommandEncoder {
     this.commandBuffer.commands.push({name: 'copy-texture-to-texture', options});
   }
 
+  // clearTexture(options: ClearTextureOptions): void {
+  //   this.commandBuffer.commands.push({name: 'copy-texture-to-texture', options});
+  // }
+
   override pushDebugGroup(groupLabel: string): void {}
   override popDebugGroup() {}
 

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

@@ -72,6 +72,20 @@ export class WEBGLExternalTexture extends WEBGLTexture {
       data.addEventListener('loadeddata', () => this.initialize(props));
       return this;
     }
+  }
+
+  initialize() {
+        // TODO - Video handling, move to ExternalTexture?
+    // if (isVideo) {
+    //   this._video = {
+    //     video: data,
+    //     // TODO  - should we be using the sampler parameters here?
+    //     parameters: {},
+    //     // @ts-expect-error HTMLVideoElement.HAVE_CURRENT_DATA is not declared
+    //     lastTime: data.readyState >= HTMLVideoElement.HAVE_CURRENT_DATA ? data.currentTime : -1
+    //   };
+    // }
+  }
 
   update(): this {
     if (this._video) {

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

@@ -2,13 +2,13 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import type {FramebufferProps, TextureFormat} from '@luma.gl/core';
-import {Framebuffer, Texture} from '@luma.gl/core';
+import type {FramebufferProps} from '@luma.gl/core';
+import {Framebuffer} from '@luma.gl/core';
 import {GL} from '@luma.gl/constants';
 import {WebGLDevice} from '../webgl-device';
 import {WEBGLTexture} from './webgl-texture';
 import {WEBGLTextureView} from './webgl-texture-view';
-import {getDepthStencilAttachmentWebGL} from '../converters/texture-formats';
+import {getDepthStencilAttachmentWebGL} from '../converters/webgl-texture-table';
 
 export type Attachment = WEBGLTextureView | WEBGLTexture; // | WEBGLRenderbuffer;
 
@@ -33,45 +33,13 @@ export class WEBGLFramebuffer extends Framebuffer {
       this.props.handle || isDefaultFramebuffer ? this.props.handle : this.gl.createFramebuffer();
 
     if (!isDefaultFramebuffer) {
-      // default framebuffer handle is null, so we can't set spector metadata...
-      device.setSpectorMetadata(this.handle, {id: this.props.id, props: this.props});
+      // default framebuffer handle is null, so we can't set debug metadata...
+      device._setWebGLDebugMetadata(this.handle, this, {spector: this.props});
 
       // Auto create textures for attachments if needed
       this.autoCreateAttachmentTextures();
 
-      /** Attach from a map of attachments */
-      // @ts-expect-error native bindFramebuffer is overridden by our state tracker
-      const prevHandle: WebGLFramebuffer | null = this.gl.bindFramebuffer(
-        GL.FRAMEBUFFER,
-        this.handle
-      );
-
-      // Walk the attachments
-      for (let i = 0; i < this.colorAttachments.length; ++i) {
-        const attachment = this.colorAttachments[i];
-        const attachmentPoint = GL.COLOR_ATTACHMENT0 + i;
-        if (attachment) {
-          this._attachTexture(attachmentPoint, attachment);
-        }
-      }
-
-      if (this.depthStencilAttachment) {
-        this._attachTexture(
-          getDepthStencilAttachmentWebGL(this.depthStencilAttachment.props.format),
-          this.depthStencilAttachment
-        );
-      }
-
-      /** 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)}`);
-        }
-      }
-
-      this.gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle);
+      this.updateAttachments();
     }
   }
 
@@ -84,60 +52,55 @@ export class WEBGLFramebuffer extends Framebuffer {
     }
   }
 
-  // PRIVATE
-
-  /** 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, {
-    return new WEBGLTexture(this.device, {
-      id: `${this.id}-depth-stencil`,
-      format,
-      width: this.width,
-      height: this.height,
-      mipmaps: false
-    });
-  }
-
-  /**
-   * 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
-    if (this.handle === null) {
-      // assert(width === undefined && height === undefined);
-      this.width = this.gl.drawingBufferWidth;
-      this.height = this.gl.drawingBufferHeight;
-      return this;
+  protected updateAttachments(): void {
+    /** Attach from a map of attachments */
+    // @ts-expect-error native bindFramebuffer is overridden by our state tracker
+    const prevHandle: WebGLFramebuffer | null = this.gl.bindFramebuffer(
+      GL.FRAMEBUFFER,
+      this.handle
+    );
+
+    // Walk the attachments
+    for (let i = 0; i < this.colorAttachments.length; ++i) {
+      const attachment = this.colorAttachments[i];
+      if (attachment) {
+        const attachmentPoint = GL.COLOR_ATTACHMENT0 + i;
+        this._attachTextureView(attachmentPoint, attachment);
+      }
     }
 
-    if (width === undefined) {
-      width = this.gl.drawingBufferWidth;
-    }
-    if (height === undefined) {
-      height = this.gl.drawingBufferHeight;
+    if (this.depthStencilAttachment) {
+      const attachmentPoint = getDepthStencilAttachmentWebGL(
+        this.depthStencilAttachment.props.format
+      );
+      this._attachTextureView(attachmentPoint, this.depthStencilAttachment);
     }
 
-    // TODO Not clear that this is better than default destroy/create implementation
-
-    for (const colorAttachment of this.colorAttachments) {
-      colorAttachment.texture.clone({width, height});
-    }
-    if (this.depthStencilAttachment) {
-      this.depthStencilAttachment.texture.resize({width, height});
+    /** Check the status */
+    if (this.device.props.debug) {
+      const status = this.gl.checkFramebufferStatus(GL.FRAMEBUFFER) as GL;
+      if (status !== GL.FRAMEBUFFER_COMPLETE) {
+        throw new Error(`Framebuffer ${_getFrameBufferStatus(status)}`);
+      }
     }
-    return this;
-  }
-  */
-
-  /** Attach one attachment */
-  protected _attachTexture(attachmentPoint: GL, textureView: WEBGLTextureView): void {
-    // if (attachment instanceof WEBGLRenderbuffer) {
-    //   this._attachWEBGLRenderbuffer(attachmentPoint, attachment);
-    //   return attachment;
-    // }
-    this._attachTextureView(attachmentPoint, textureView);
+
+    this.gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle);
   }
 
+  // PRIVATE
+
+  /** 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, {
+  //   return new WEBGLTexture(this.device, {
+  //     id: `${this.id}-depth-stencil`,
+  //     format,
+  //     width: this.width,
+  //     height: this.height,
+  //     mipmaps: false
+  //   });
+  // }
+
   /**
    * @param attachment
    * @param texture
@@ -155,7 +118,7 @@ export class WEBGLFramebuffer extends Framebuffer {
     switch (texture.glTarget) {
       case GL.TEXTURE_2D_ARRAY:
       case GL.TEXTURE_3D:
-        gl.framebufferTextureLayer(GL.FRAMEBUFFER, attachment, texture.glTarget, level, layer);
+        gl.framebufferTextureLayer(GL.FRAMEBUFFER, attachment, texture.handle, level, layer);
         break;
 
       case GL.TEXTURE_CUBE_MAP:
@@ -210,3 +173,34 @@ function _getFrameBufferStatus(status: GL) {
       return `${status}`;
   }
 }
+
+/**
+ * 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
+  if (this.handle === null) {
+    // assert(width === undefined && height === undefined);
+    this.width = this.gl.drawingBufferWidth;
+    this.height = this.gl.drawingBufferHeight;
+    return this;
+  }
+
+  if (width === undefined) {
+    width = this.gl.drawingBufferWidth;
+  }
+  if (height === undefined) {
+    height = this.gl.drawingBufferHeight;
+  }
+
+  // TODO Not clear that this is better than default destroy/create implementation
+
+  for (const colorAttachment of this.colorAttachments) {
+    colorAttachment.texture.clone({width, height});
+  }
+  if (this.depthStencilAttachment) {
+    this.depthStencilAttachment.texture.resize({width, height});
+  }
+  return this;
+}
+*/