@luma.gl/webgl 9.1.0-alpha.16 → 9.1.0-alpha.18

package/src/adapter/helpers/webgl-texture-utils.ts

@@ -6,24 +6,24 @@
 // WebGL... the texture API from hell... hopefully made simpler
 //
 
+import {TypedArray} from '@math.gl/types';
 import type {ExternalImage} from '@luma.gl/core';
 import {Buffer, Texture, Framebuffer, FramebufferProps} from '@luma.gl/core';
-
 import {
   GL,
   GLTextureTarget,
   GLTextureCubeMapTarget,
   GLTexelDataFormat,
-  GLPixelType
+  GLPixelType,
+  GLDataType
 } from '@luma.gl/constants';
 
-import {TypedArray} from '@math.gl/types';
-
 import {WEBGLFramebuffer} from '../resources/webgl-framebuffer';
 import {getGLTypeFromTypedArray, getTypedArrayFromGLType} from './typed-array-utils';
 import {glFormatToComponents, glTypeToBytes} from './format-utils';
 import {WEBGLBuffer} from '../resources/webgl-buffer';
 import {WEBGLTexture} from '../resources/webgl-texture';
+import {withGLParameters} from '../../context/state-tracker/with-parameters';
 
 /** A "border" parameter is required in many WebGL texture APIs, but must always be 0... */
 const BORDER = 0;
@@ -120,7 +120,7 @@ export function copyExternalImageToMipLevel(
   gl: WebGL2RenderingContext,
   handle: WebGLTexture,
   image: ExternalImage,
-  options: WebGLCopyTextureOptions
+  options: WebGLCopyTextureOptions & {flipY?: boolean}
 ): void {
   const {width, height} = options;
   const {dimension, depth = 0, mipLevel = 0} = options;
@@ -129,26 +129,29 @@ export function copyExternalImageToMipLevel(
 
   const glTarget = getWebGLCubeFaceTarget(options.glTarget, dimension, depth);
 
-  switch (dimension) {
-    case '2d-array':
-    case '3d':
-      gl.bindTexture(glTarget, handle);
-      // prettier-ignore
-      gl.texSubImage3D(glTarget, mipLevel, x, y, z, width, height, depth, glFormat, glType, image);
-      gl.bindTexture(glTarget, null);
-      break;
+  const glParameters = options.flipY ? {[GL.UNPACK_FLIP_Y_WEBGL]: true} : {};
+  withGLParameters(gl, glParameters, () => {
+    switch (dimension) {
+      case '2d-array':
+      case '3d':
+        gl.bindTexture(glTarget, handle);
+        // prettier-ignore
+        gl.texSubImage3D(glTarget, mipLevel, x, y, z, width, height, depth, glFormat, glType, image);
+        gl.bindTexture(glTarget, null);
+        break;
 
-    case '2d':
-    case 'cube':
-      gl.bindTexture(glTarget, handle);
-      // prettier-ignore
-      gl.texSubImage2D(glTarget, mipLevel, x, y, width, height, glFormat, glType, image);
-      gl.bindTexture(glTarget, null);
-      break;
+      case '2d':
+      case 'cube':
+        gl.bindTexture(glTarget, handle);
+        // prettier-ignore
+        gl.texSubImage2D(glTarget, mipLevel, x, y, width, height, glFormat, glType, image);
+        gl.bindTexture(glTarget, null);
+        break;
 
-    default:
-      throw new Error(dimension);
-  }
+      default:
+        throw new Error(dimension);
+    }
+  });
 }
 
 /**
@@ -278,7 +281,7 @@ export function getWebGLCubeFaceTarget(
  * Wrapper for the messy WebGL texture API
  *
 export function clearMipLevel(gl: WebGL2RenderingContext, options: WebGLSetTextureOptions): void {
-  const {dimension, width, height, depth = 0, level = 0} = options;
+  const {dimension, width, height, depth = 0, mipLevel = 0} = options;
   const {glInternalFormat, glFormat, glType, compressed} = options;
   const glTarget = getWebGLCubeFaceTarget(options.glTarget, dimension, depth);
 
@@ -287,10 +290,10 @@ export function clearMipLevel(gl: WebGL2RenderingContext, options: WebGLSetTextu
     case '3d':
       if (compressed) {
         // prettier-ignore
-        gl.compressedTexImage3D(glTarget, level, glInternalFormat, width, height, depth, BORDER, null);
+        gl.compressedTexImage3D(glTarget, mipLevel, glInternalFormat, width, height, depth, BORDER, null);
       } else {
         // prettier-ignore
-        gl.texImage3D( glTarget, level, glInternalFormat, width, height, depth, BORDER, glFormat, glType, null);
+        gl.texImage3D( glTarget, mipLevel, glInternalFormat, width, height, depth, BORDER, glFormat, glType, null);
       }
       break;
 
@@ -298,10 +301,10 @@ export function clearMipLevel(gl: WebGL2RenderingContext, options: WebGLSetTextu
     case 'cube':
       if (compressed) {
         // prettier-ignore
-        gl.compressedTexImage2D(glTarget, level, glInternalFormat, width, height, BORDER, null);
+        gl.compressedTexImage2D(glTarget, mipLevel, glInternalFormat, width, height, BORDER, null);
       } else {
         // prettier-ignore
-        gl.texImage2D(glTarget, level, glInternalFormat, width, height, BORDER, glFormat, glType, null);
+        gl.texImage2D(glTarget, mipLevel, glInternalFormat, width, height, BORDER, glFormat, glType, null);
       }
       break;
 
@@ -309,6 +312,7 @@ export function clearMipLevel(gl: WebGL2RenderingContext, options: WebGLSetTextu
       throw new Error(dimension);
   }
 }
+  */
 
 /**
  * Set a texture mip level to the contents of an external image.
@@ -533,7 +537,7 @@ export function readPixelsToArray(
   const {
     sourceX = 0,
     sourceY = 0,
-    sourceAttachment = GL.COLOR_ATTACHMENT0 // TODO - support gl.readBuffer
+    sourceAttachment = 0 // TODO - support gl.readBuffer
   } = options || {};
   let {
     target = null,
@@ -548,21 +552,19 @@ export function readPixelsToArray(
   const {framebuffer, deleteFramebuffer} = getFramebuffer(source);
   // assert(framebuffer);
   const {gl, handle} = framebuffer;
-  const attachment = sourceAttachment - GL.COLOR_ATTACHMENT0;
 
   sourceWidth ||= framebuffer.width;
   sourceHeight ||= framebuffer.height;
 
-  // TODO - Set and unset gl.readBuffer
-  // if (sourceAttachment === GL.COLOR_ATTACHMENT0 && handle === null) {
-  //   sourceAttachment = GL.FRONT;
-  // }
-
-  sourceDepth = framebuffer.colorAttachments[attachment]?.texture?.depth || 1;
+  const texture = framebuffer.colorAttachments[sourceAttachment]?.texture;
+  if (!texture) {
+    throw new Error(`Invalid framebuffer attachment ${sourceAttachment}`);
+  }
+  sourceDepth = texture?.depth || 1;
 
-  sourceFormat ||= framebuffer.colorAttachments[attachment]?.texture?.glFormat || GL.RGBA;
+  sourceFormat ||= texture?.glFormat || GL.RGBA;
   // Deduce the type from color attachment if not provided.
-  sourceType ||= framebuffer.colorAttachments[attachment]?.texture?.glType || GL.UNSIGNED_BYTE;
+  sourceType ||= texture?.glType || GL.UNSIGNED_BYTE;
 
   // Deduce type and allocated pixelArray if needed
   target = getPixelArray(target, sourceType, sourceFormat, sourceWidth, sourceHeight, sourceDepth);
@@ -570,13 +572,31 @@ export function readPixelsToArray(
   // Pixel array available, if necessary, deduce type from it.
   sourceType = sourceType || getGLTypeFromTypedArray(target);
 
-  const prevHandle = gl.bindFramebuffer(GL.FRAMEBUFFER, handle);
+  // Note: luma.gl overrides bindFramebuffer so that we can reliably restore the previous framebuffer (this is the only function for which we do that)
+  const prevHandle = gl.bindFramebuffer(
+    GL.FRAMEBUFFER,
+    handle
+  ) as unknown as WebGLFramebuffer | null;
+
+  // Select the color attachment to read from
+  gl.readBuffer(gl.COLOR_ATTACHMENT0 + sourceAttachment);
+
+  // There is a lot of hedging in the WebGL2 spec about what formats are guaranteed to be readable
+  // (It should always be possible to read RGBA/UNSIGNED_BYTE, but most other combinations are not guaranteed)
+  // Querying is possible but expensive:
+  // const {device} = framebuffer;
+  // texture.glReadFormat ||= gl.getParameter(gl.IMPLEMENTATION_COLOR_READ_FORMAT);
+  // texture.glReadType ||= gl.getParameter(gl.IMPLEMENTATION_COLOR_READ_TYPE);
+  // console.log('params', device.getGLKey(texture.glReadFormat), device.getGLKey(texture.glReadType));
+
   gl.readPixels(sourceX, sourceY, sourceWidth, sourceHeight, sourceFormat, sourceType, target);
-  // @ts-expect-error
+  gl.readBuffer(gl.COLOR_ATTACHMENT0);
   gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle || null);
+
   if (deleteFramebuffer) {
     framebuffer.destroy();
   }
+
   return target;
 }
 
@@ -788,8 +808,8 @@ export function toFramebuffer(texture: Texture, props?: FramebufferProps): WEBGL
 // eslint-disable-next-line max-params
 function getPixelArray(
   pixelArray,
-  type,
-  format,
+  glType: GLDataType | GLPixelType,
+  glFormat: GL,
   width: number,
   height: number,
   depth?: number
@@ -797,10 +817,11 @@ function getPixelArray(
   if (pixelArray) {
     return pixelArray;
   }
+  // const formatInfo = decodeTextureFormat(format);
   // Allocate pixel array if not already available, using supplied type
-  type = type || GL.UNSIGNED_BYTE;
-  const ArrayType = getTypedArrayFromGLType(type, {clamped: false});
-  const components = glFormatToComponents(format);
+  glType ||= GL.UNSIGNED_BYTE;
+  const ArrayType = getTypedArrayFromGLType(glType, {clamped: false});
+  const components = glFormatToComponents(glFormat);
   // TODO - check for composite type (components = 1).
   return new ArrayType(width * height * components) as Uint8Array | Uint16Array | Float32Array;
 }

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

@@ -7,9 +7,18 @@ 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';
@@ -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,6 +88,11 @@ 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);
       }
     }
   }
@@ -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

@@ -77,8 +77,7 @@ export class WEBGLFramebuffer extends Framebuffer {
     }
 
     /** Check the status */
-    // @ts-expect-error
-    if (this.props.check !== false) {
+    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)}`);

package/src/adapter/resources/webgl-render-pass.ts

@@ -10,12 +10,6 @@ import {withGLParameters} from '../../context/state-tracker/with-parameters';
 import {setGLParameters} from '../../context/parameters/unified-parameter-api';
 import {WEBGLQuerySet} from './webgl-query-set';
 
-// Should collapse during minification
-const GL_DEPTH_BUFFER_BIT = 0x00000100;
-const GL_STENCIL_BUFFER_BIT = 0x00000400;
-const GL_COLOR_BUFFER_BIT = 0x00004000;
-
-const GL_COLOR = 0x1800;
 const COLOR_CHANNELS = [0x1, 0x2, 0x4, 0x8]; // GPUColorWrite RED, GREEN, BLUE, ALPHA
 
 export class WEBGLRenderPass extends RenderPass {
@@ -46,6 +40,16 @@ export class WEBGLRenderPass extends RenderPass {
     this.device.pushState();
     this.setParameters({viewport, ...this.props.parameters});
 
+    // Specify mapping of draw buffer locations to color attachments
+    if (this.props.framebuffer) {
+      const drawBuffers = this.props.framebuffer.colorAttachments.map(
+        (_, i) => GL.COLOR_ATTACHMENT0 + i
+      );
+      this.device.gl.drawBuffers(drawBuffers);
+    } else {
+      this.device.gl.drawBuffers([GL.BACK]);
+    }
+
     // Hack - for now WebGL draws in "immediate mode" (instead of queueing the operations)...
     this.clear();
   }
@@ -138,16 +142,24 @@ export class WEBGLRenderPass extends RenderPass {
 
     let clearMask = 0;
 
-    if (this.props.clearColor !== false) {
-      clearMask |= GL_COLOR_BUFFER_BIT;
+    if (this.props.clearColors) {
+      this.props.clearColors.forEach((color, drawBufferIndex) => {
+        if (color) {
+          this.clearColorBuffer(drawBufferIndex, color);
+        }
+      });
+    }
+
+    if (this.props.clearColor !== false && this.props.clearColors === undefined) {
+      clearMask |= GL.COLOR_BUFFER_BIT;
       glParameters.clearColor = this.props.clearColor;
     }
     if (this.props.clearDepth !== false) {
-      clearMask |= GL_DEPTH_BUFFER_BIT;
+      clearMask |= GL.DEPTH_BUFFER_BIT;
       glParameters.clearDepth = this.props.clearDepth;
     }
     if (this.props.clearStencil !== false) {
-      clearMask |= GL_STENCIL_BUFFER_BIT;
+      clearMask |= GL.STENCIL_BUFFER_BIT;
       glParameters.clearStencil = this.props.clearStencil;
     }
 
@@ -156,11 +168,6 @@ export class WEBGLRenderPass extends RenderPass {
       withGLParameters(this.device.gl, glParameters, () => {
         this.device.gl.clear(clearMask);
       });
-
-      // TODO - clear multiple color attachments
-      // for (attachment of this.framebuffer.colorAttachments) {
-      //   this.clearColorBuffer
-      // }
     }
   }
 
@@ -171,22 +178,28 @@ export class WEBGLRenderPass extends RenderPass {
     withGLParameters(this.device.gl, {framebuffer: this.props.framebuffer}, () => {
       // Method selection per OpenGL ES 3 docs
       switch (value.constructor) {
+        case Int8Array:
+        case Int16Array:
         case Int32Array:
-          this.device.gl.clearBufferiv(GL_COLOR, drawBuffer, value);
+          this.device.gl.clearBufferiv(GL.COLOR, drawBuffer, value);
           break;
+        case Uint8Array:
+        case Uint8ClampedArray:
+        case Uint16Array:
         case Uint32Array:
-          this.device.gl.clearBufferuiv(GL_COLOR, drawBuffer, value);
+          this.device.gl.clearBufferuiv(GL.COLOR, drawBuffer, value);
           break;
         case Float32Array:
-        default:
-          this.device.gl.clearBufferfv(GL_COLOR, drawBuffer, value);
+          this.device.gl.clearBufferfv(GL.COLOR, drawBuffer, value);
           break;
+        default:
+          throw new Error('clearColorBuffer: color must be typed array');
       }
     });
   }
 
   // clearDepthStencil() {
-  // const GL_DEPTH = 0x1801;
+  // const GL.DEPTH = 0x1801;
   // const GL_STENCIL = 0x1802;
   // const GL_DEPTH_STENCIL = 0x84f9;
 

package/src/adapter/resources/webgl-render-pipeline.ts

@@ -414,11 +414,12 @@ export class WEBGLRenderPipeline extends RenderPipeline {
       }
     }
 
-    for (const [, texture] of Object.entries(this.bindings)) {
-      if (texture instanceof WEBGLTexture) {
-        texture.update();
-      }
-    }
+    // TODO - remove this should be handled by ExternalTexture
+    // for (const [, texture] of Object.entries(this.bindings)) {
+    //   if (texture instanceof WEBGLTexture) {
+    //     texture.update();
+    //   }
+    // }
 
     return texturesRenderable;
   }

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

@@ -70,7 +70,7 @@ export class WEBGLShader extends Shader {
     gl.compileShader(this.handle);
 
     // For performance reasons, avoid checking shader compilation errors on production
-    if (log.level === 0) {
+    if (!this.device.props.debug) {
       this.compilationStatus = 'pending';
       return;
     }