@luma.gl/webgl 9.0.0-alpha.21 → 9.0.0-alpha.24

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

@@ -1,29 +1,17 @@
-/* eslint-disable no-inline-comments */
-import {assert, ResourceProps} from '@luma.gl/api';
+import {assert, ResourceProps, TextureFormat} 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 {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.
@@ -35,35 +23,53 @@ const DEFAULT_RENDERBUFFER_PROPS: Required<RenderbufferProps> = {
  * Renderbuffer objects also natively accommodate Multisampling (MSAA).
  */
 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,19 +78,16 @@ export 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

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

@@ -6,7 +6,7 @@ import {isWebGL2, assertWebGLContext} from '../../context/context/webgl-checks';
 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';
 
@@ -69,10 +69,6 @@ export abstract class WebGLResource<Props extends ResourceProps> extends Resourc
     return this._handle;
   }
 
-  override destroy(): void {
-    this.delete();
-  }
-
   override delete({deleteChildren = false} = {}) {
     // Delete this object, and get refs to any children
     // @ts-expect-error
@@ -86,7 +82,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.delete());
+      children.filter(Boolean).forEach((child) => child.destroy());
     }
 
     return this;
@@ -183,10 +179,10 @@ export abstract class WebGLResource<Props extends ResourceProps> extends Resourc
         (!('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

@@ -107,13 +107,14 @@ export class WEBGLBuffer extends Buffer {
       this.trackDeallocatedMemory();
       this.gl.deleteBuffer(this.handle);
       this.destroyed = true;
-      // this.handle = null;
+      // @ts-expect-error
+      this.handle = null;
     }
   }
 
   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
@@ -122,9 +123,7 @@ export class WEBGLBuffer extends Buffer {
     // WebGL2: subData supports additional srcOffset and length parameters
     if (srcOffset !== 0 || byteLength !== undefined) {
       this.device.assertWebGL2();
-
-      // @ts-expect-error
-      this.gl.bufferSubData(this.target, byteOffset, data, srcOffset, byteLength);
+      this.gl2.bufferSubData(target, byteOffset, data, srcOffset, byteLength);
     } else {
       this.gl.bufferSubData(target, byteOffset, data);
     }

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

@@ -1,12 +1,24 @@
+// luma.gl, MIT license
+
 import type {
   CopyBufferToBufferOptions,
   CopyBufferToTextureOptions,
   CopyTextureToBufferOptions,
   CopyTextureToTextureOptions
 } from '@luma.gl/api';
+import {
+  CommandBuffer,
+  Texture,
+  // Buffer,
+  Framebuffer
+} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
+
+// import {getTypedArrayFromGLType, getGLTypeFromTypedArray} from '../../classic/typed-array-utils';
 import {WebGLDevice} from '../webgl-device';
 import {WEBGLBuffer} from './webgl-buffer';
+import {WEBGLTexture} from './webgl-texture';
+import {WEBGLFramebuffer} from './webgl-framebuffer';
 
 function cast<T>(value: unknown): T {
   return value as T;
@@ -38,25 +50,31 @@ type Command =
   | CopyTextureToBufferCommand
   | CopyTextureToTextureCommand;
 
-export class CommandBuffer {
+export class WEBGLCommandBuffer extends CommandBuffer {
+  device: WebGLDevice;
   commands: Command[] = [];
-}
 
-export function submitCommands(device: WebGLDevice, commands: Command[] = []) {
-  for (const command of commands) {
-    switch (command.name) {
-      case 'copy-buffer-to-buffer':
-        _copyBufferToBuffer(device, command.options);
-        break;
-      case 'copy-buffer-to-texture':
-        _copyBufferToTexture(device, command.options);
-        break;
-      case 'copy-texture-to-buffer':
-        _copyTextureToBuffer(device, command.options);
-        break;
-      case 'copy-texture-to-texture':
-        _copyTextureToTexture(device, command.options);
-        break;
+  constructor(device: WebGLDevice) {
+    super({});
+    this.device = device;
+  }
+
+  submitCommands(commands: Command[] = this.commands) {
+    for (const command of commands) {
+      switch (command.name) {
+        case 'copy-buffer-to-buffer':
+          _copyBufferToBuffer(this.device, command.options);
+          break;
+        case 'copy-buffer-to-texture':
+          _copyBufferToTexture(this.device, command.options);
+          break;
+        case 'copy-texture-to-buffer':
+          _copyTextureToBuffer(this.device, command.options);
+          break;
+        case 'copy-texture-to-texture':
+          _copyTextureToTexture(this.device, command.options);
+          break;
+      }
     }
   }
 }
@@ -65,7 +83,7 @@ function _copyBufferToBuffer(device: WebGLDevice, options: CopyBufferToBufferOpt
   const source = cast<WEBGLBuffer>(options.source);
   const destination = cast<WEBGLBuffer>(options.destination);
 
-  const {gl2} = device;
+  const gl2 = device.assertWebGL2();
   if (gl2) {
     // In WebGL2 we can perform the copy on the GPU
     // Use GL.COPY_READ_BUFFER+GL.COPY_WRITE_BUFFER avoid disturbing other targets and locking type
@@ -87,8 +105,297 @@ function _copyBufferToBuffer(device: WebGLDevice, options: CopyBufferToBufferOpt
   }
 }
 
-function _copyBufferToTexture(device: WebGLDevice, options: CopyBufferToTextureOptions): void {}
+/**
+ * Copies data from a Buffer object into a Texture object
+ * NOTE: doesn't wait for copy to be complete
+ */
+function _copyBufferToTexture(device: WebGLDevice, options: CopyBufferToTextureOptions): void {
+  throw new Error('Not implemented');
+}
+
+/**
+ * Copies data from a Texture object into a Buffer object.
+ * NOTE: doesn't wait for copy to be complete
+ */
+function _copyTextureToBuffer(device: WebGLDevice, options: CopyTextureToBufferOptions): void {
+  const {
+    /** Texture to copy to/from. */
+    source,
+    /**  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,
+    /** Height to copy */
+    height = options.source.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,
+    /** Offset, in bytes, from the beginning of the buffer to the start of the image data (default 0) */
+    byteOffset = 0,
+    /**
+     * The stride, in bytes, between the beginning of each block row and the subsequent block row.
+     * Required if there are multiple block rows (i.e. the copy height or depth is more than one block).
+     */
+    bytesPerRow,
+    /**
+     * Number of block rows per single image of the texture.
+     * rowsPerImage &times; bytesPerRow is the stride, in bytes, between the beginning of each image of data and the subsequent image.
+     * Required if there are multiple images (i.e. the copy depth is more than one).
+     */
+    rowsPerImage
+  } = options;
+
+  // TODO - Not possible to read just stencil or depth part in WebGL?
+  if (aspect !== 'all') {
+    throw new Error('not supported');
+  }
+
+  // TODO - mipLevels are set when attaching texture to framebuffer
+  if (mipLevel !== 0 || depthOrArrayLayers !== undefined || bytesPerRow || rowsPerImage) {
+    throw new Error('not implemented');
+  }
+
+  // Asynchronous read (PIXEL_PACK_BUFFER) is WebGL2 only feature
+  const gl2 = device.assertWebGL2();
+
+  const {framebuffer, destroyFramebuffer} = getFramebuffer(source);
+  try {
+    const webglBuffer = destination as WEBGLBuffer;
+    const sourceWidth = width || framebuffer.width;
+    const sourceHeight = height || framebuffer.height;
+
+    // TODO - hack - should be deduced
+    const sourceFormat = GL.RGBA;
+    const sourceType = GL.UNSIGNED_BYTE;
+
+    // if (!target) {
+    //   // Create new buffer with enough size
+    //   const components = glFormatToComponents(sourceFormat);
+    //   const byteCount = glTypeToBytes(sourceType);
+    //   const byteLength = byteOffset + sourceWidth * sourceHeight * components * byteCount;
+    //   target = device.createBuffer({byteLength});
+    // }
+
+    gl2.bindBuffer(GL.PIXEL_PACK_BUFFER, webglBuffer.handle);
+    gl2.bindFramebuffer(GL.FRAMEBUFFER, framebuffer.handle);
+
+    gl2.readPixels(
+      origin[0],
+      origin[1],
+      sourceWidth,
+      sourceHeight,
+      sourceFormat,
+      sourceType,
+      byteOffset
+    );
+  } finally {
+    gl2.bindBuffer(GL.PIXEL_PACK_BUFFER, null);
+    gl2.bindFramebuffer(GL.FRAMEBUFFER, null);
+
+    if (destroyFramebuffer) {
+      framebuffer.destroy();
+    }
+  }
+}
+
+/**
+ * Copies data from a Framebuffer or a Texture object into a Buffer object.
+ * NOTE: doesn't wait for copy to be complete, it programs GPU to perform a DMA transfer.
+export function readPixelsToBuffer(
+  source: Framebuffer | Texture,
+  options?: {
+    sourceX?: number;
+    sourceY?: number;
+    sourceFormat?: number;
+    target?: Buffer; // A new Buffer object is created when not provided.
+    targetByteOffset?: number; // byte offset in buffer object
+    // following parameters are auto deduced if not provided
+    sourceWidth?: number;
+    sourceHeight?: number;
+    sourceType?: number;
+  }
+): Buffer
+ */
+
+/**
+ * Copy a rectangle from a Framebuffer or Texture object into a texture (at an offset)
+ */
+// eslint-disable-next-line complexity, max-statements
+function _copyTextureToTexture(device: WebGLDevice, options: CopyTextureToTextureOptions): void {
+  const {
+    /** Texture to copy to/from. */
+    source,
+    /**  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',
+    /** Defines the origin of the copy - the minimum corner of the texture sub-region to copy to/from. */
+    origin = [0, 0],
+
+    /** Texture to copy to/from. */
+    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,
+    // depthOrArrayLayers = 0
+  } = options;
+
+  const destinationMipmaplevel = 0;
+  const destinationInternalFormat = GL.RGBA;
+
+  const {framebuffer, destroyFramebuffer} = getFramebuffer(source);
+  const [sourceX, sourceY] = origin;
+
+  const isSubCopy = false;
+  // typeof destinationX !== 'undefined' ||
+  // typeof destinationY !== 'undefined' ||
+  // typeof destinationZ !== 'undefined';
+
+  // destinationX = destinationX || 0;
+  // destinationY = destinationY || 0;
+  // destinationZ = destinationZ || 0;
+  device.gl.bindFramebuffer(GL.FRAMEBUFFER, framebuffer.handle);
+  // TODO - support gl.readBuffer (WebGL2 only)
+  // const prevBuffer = gl.readBuffer(attachment);
+
+  let texture = null;
+  let textureTarget: GL;
+  if (destination instanceof WEBGLTexture) {
+    texture = destination;
+    width = Number.isFinite(width) ? width : texture.width;
+    height = Number.isFinite(height) ? height : texture.height;
+    texture.bind(0);
+    textureTarget = texture.destination;
+  } else {
+    throw new Error('whoops');
+    //  textureTarget = destination;
+  }
+
+  if (!isSubCopy) {
+    device.gl.copyTexImage2D(
+      textureTarget,
+      destinationMipmaplevel,
+      destinationInternalFormat,
+      sourceX,
+      sourceY,
+      width,
+      height,
+      0 /* border must be 0 */
+    );
+  } else {
+    // switch (textureTarget) {
+    //   case GL.TEXTURE_2D:
+    //   case GL.TEXTURE_CUBE_MAP:
+    //     device.gl.copyTexSubImage2D(
+    //       textureTarget,
+    //       destinationMipmaplevel,
+    //       destinationX,
+    //       destinationY,
+    //       sourceX,
+    //       sourceY,
+    //       width,
+    //       height
+    //     );
+    //     break;
+    //   case GL.TEXTURE_2D_ARRAY:
+    //   case GL.TEXTURE_3D:
+    //     const gl2 = device.assertWebGL2();
+    //     gl2.copyTexSubImage3D(
+    //       textureTarget,
+    //       destinationMipmaplevel,
+    //       destinationX,
+    //       destinationY,
+    //       destinationZ,
+    //       sourceX,
+    //       sourceY,
+    //       width,
+    //       height
+    //     );
+    //     break;
+    //   default:
+    // }
+  }
+  if (texture) {
+    texture.unbind();
+  }
+  // @ts-expect-error
+  device.gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle || null);
+  if (destroyFramebuffer) {
+    framebuffer.destroy();
+  }
+  return texture;
+}
+
+// Returns number of components in a specific readPixels WebGL format
+export function glFormatToComponents(format): 1 | 2 | 3 | 4 {
+  switch (format) {
+    case GL.ALPHA:
+    case GL.R32F:
+    case GL.RED:
+      return 1;
+    case GL.RG32F:
+    case GL.RG:
+      return 2;
+    case GL.RGB:
+    case GL.RGB32F:
+      return 3;
+    case GL.RGBA:
+    case GL.RGBA32F:
+      return 4;
+    // TODO: Add support for additional WebGL2 formats
+    default:
+      throw new Error('GLFormat');
+  }
+}
 
-function _copyTextureToBuffer(device: WebGLDevice, options: CopyTextureToBufferOptions): void {}
+// Return byte count for given readPixels WebGL type
+export function glTypeToBytes(type: GL): 1 | 2 | 4 {
+  switch (type) {
+    case GL.UNSIGNED_BYTE:
+      return 1;
+    case GL.UNSIGNED_SHORT_5_6_5:
+    case GL.UNSIGNED_SHORT_4_4_4_4:
+    case GL.UNSIGNED_SHORT_5_5_5_1:
+      return 2;
+    case GL.FLOAT:
+      return 4;
+    // TODO: Add support for additional WebGL2 types
+    default:
+      throw new Error('GLType');
+  }
+}
+
+// Helper methods
 
-function _copyTextureToTexture(device: WebGLDevice, options: CopyTextureToTextureOptions): void {}
+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

@@ -6,21 +6,26 @@ import type {
   CopyTextureToTextureOptions
 } from '@luma.gl/api';
 
-import {CommandBuffer} from './webgl-command-buffer';
+import {WEBGLCommandBuffer} from './webgl-command-buffer';
 import {WebGLDevice} from '../webgl-device';
 
 export class WEBGLCommandEncoder extends CommandEncoder {
   readonly device: WebGLDevice;
 
-  readonly commandBuffer = new CommandBuffer();
+  readonly commandBuffer: WEBGLCommandBuffer;
 
   constructor(device: WebGLDevice, props: CommandEncoderProps) {
     super(props);
     this.device = device;
+    this.commandBuffer = new WEBGLCommandBuffer(device);
   }
 
   override destroy(): void {}
 
+  override finish(): void {
+    this.commandBuffer.submitCommands();
+  }
+
   // beginRenderPass(GPURenderPassDescriptor descriptor): GPURenderPassEncoder;
   // beginComputePass(optional GPUComputePassDescriptor descriptor = {}): GPUComputePassEncoder;
   // finish(options?: {id?: string}): GPUCommandBuffer;