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

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

@@ -14,11 +14,10 @@ import {
   isObjectEmpty
 } from '@luma.gl/api';
 import {Texture, cast, log, assert, isPowerOfTwo, loadImage} from '@luma.gl/api';
-import GL from '@luma.gl/constants';
-import type {GLSamplerParameters} from '../../types/webgl';
+import {GL, GLSamplerParameters} from '@luma.gl/constants';
 import {withParameters} from '../../context/state-tracker/with-parameters';
 import {
-  getWebGLTextureFormat,
+  convertTextureFormatToGL,
   getWebGLTextureParameters,
   getTextureFormatBytesPerPixel
 } from '../converters/texture-formats';
@@ -30,7 +29,33 @@ import {WebGLDevice} from '../webgl-device';
 import {WEBGLBuffer} from './webgl-buffer';
 import {WEBGLSampler} from './webgl-sampler';
 
-export type {TextureProps};
+export type WEBGLTextureProps = TextureProps & {
+  /** @deprecated use props.sampler */
+  parameters?: Record<number, number>;
+  /** @deprecated use props.data */
+  pixels?: any;
+  /** @deprecated use props.format */
+  dataFormat?: number | null;
+  /** @deprecated rarely supported */
+  border?: number;
+  /** @deprecated WebGL only. */
+  pixelStore?: object;
+  /** @deprecated WebGL only. */
+  textureUnit?: number;
+  /** @deprecated WebGL only. Use dimension. */
+  target?: number;
+};
+
+export const DEFAULT_WEBGL_TEXTURE_PROPS = {
+  // deprecated
+  parameters: {},
+  pixelStore: {},
+  pixels: null,
+  border: 0,
+  dataFormat: undefined!,
+  textureUnit: undefined!,
+  target: undefined!,
+};
 
 export type TextureSourceData = 
   TypedArray |
@@ -48,7 +73,7 @@ type SetImageDataOptions = {
   width?: number;
   height?: number;
   depth?: number;
-  format?: any;
+  glFormat?: GL;
   type?: any;
   offset?: number;
   data: any; // TextureSourceData;
@@ -87,7 +112,7 @@ type SetSubImageDataOptions = {
   width?: number;
   height?: number;
   depth?: number;
-  format?: any;
+  glFormat?: any;
   type?: any;
   offset?: number;
   data: any;
@@ -114,7 +139,7 @@ type SetImageData3DOptions = {
 
 
 // Polyfill
-export class WEBGLTexture extends Texture {
+export class WEBGLTexture extends Texture<WEBGLTextureProps> {
   // TODO - remove?
   static FACES: number[] = [
     GL.TEXTURE_CUBE_MAP_POSITIVE_X,
@@ -131,13 +156,12 @@ export class WEBGLTexture extends Texture {
   readonly gl2: WebGL2RenderingContext | null;
   readonly handle: WebGLTexture;
 
-  data;
+  /** Sampler object (currently unused) */
+  sampler: WEBGLSampler = undefined;
 
-  width: number = undefined;
-  height: number = undefined;
-  depth: number = undefined;
+  // data;
 
-  format: GL = undefined;
+  glFormat: GL = undefined;
   type: GL = undefined;
   dataFormat: GL = undefined;
   mipmaps: boolean = undefined;
@@ -154,9 +178,6 @@ export class WEBGLTexture extends Texture {
   target: GL;
   textureUnit: number = undefined;
 
-  /** Sampler object (currently unused) */
-  sampler: WEBGLSampler = undefined;
-
   /**
    * Program.draw() checks the loaded flag of all textures to avoid
    * Textures that are still loading from promises
@@ -169,8 +190,8 @@ export class WEBGLTexture extends Texture {
     lastTime: number;
   };
 
-  constructor(device: Device, props: TextureProps) {
-    super(device, {format: GL.RGBA, ...props});
+  constructor(device: Device, props: WEBGLTextureProps) {
+    super(device, {...DEFAULT_WEBGL_TEXTURE_PROPS, format: 'rgba8unorm', ...props});
 
     this.device = cast<WebGLDevice>(device);
     this.gl = this.device.gl;
@@ -178,6 +199,7 @@ export class WEBGLTexture extends Texture {
     this.handle = this.props.handle || this.gl.createTexture();
     this.device.setSpectorMetadata(this.handle, {...this.props, data: typeof this.props.data}); // {name: this.props.id};
 
+    this.glFormat = GL.RGBA;
     this.target = getWebGLTextureTarget(this.props);
 
     // Program.draw() checks the loaded flag of all textures
@@ -208,7 +230,7 @@ export class WEBGLTexture extends Texture {
   }
 
   // eslint-disable-next-line max-statements
-  initialize(props: TextureProps = {}): this {
+  initialize(props: WEBGLTextureProps = {}): this {
     // Cube textures
     if (this.props.dimension === 'cube') {
       return this.initializeCube(props);
@@ -240,7 +262,7 @@ export class WEBGLTexture extends Texture {
     const {parameters = {}  as Record<GL, any>} = props;
 
     const {
-      pixels = null, recreate = false, pixelStore = {}, textureUnit = undefined} = props;
+      pixels = null, pixelStore = {}, textureUnit = undefined} = props;
 
     // pixels variable is for API compatibility purpose
     if (!data) {
@@ -253,6 +275,8 @@ export class WEBGLTexture extends Texture {
     let {width, height, dataFormat, type, compressed = false, mipmaps = true} = props;
     const {depth = 0} = props;
 
+    const glFormat = convertTextureFormatToGL(props.format, this.device.isWebGL2);
+
     // Deduce width and height
     ({width, height, compressed, dataFormat, type} = this._deduceParameters({
       format: props.format,
@@ -264,13 +288,11 @@ export class WEBGLTexture extends Texture {
       height
     }));
 
-    const format = getWebGLTextureFormat(this.gl, props.format);
-
     // Store opts for accessors
     this.width = width;
     this.height = height;
-    this.depth = depth;
-    this.format = format;
+    // this.depth = depth;
+    this.glFormat = glFormat;
     this.type = type;
     this.dataFormat = dataFormat;
     this.textureUnit = textureUnit;
@@ -292,7 +314,7 @@ export class WEBGLTexture extends Texture {
       width,
       height,
       depth,
-      format,
+      format: glFormat,
       type,
       dataFormat,
       // @ts-expect-error 
@@ -308,10 +330,6 @@ export class WEBGLTexture extends Texture {
       this.generateMipmap();
     }
 
-    // TODO - Store data to enable auto recreate on context loss
-    if (recreate) {
-      this.data = data;
-    }
     if (isVideo) {
       this._video = {
         video: data as HTMLVideoElement,
@@ -324,7 +342,7 @@ export class WEBGLTexture extends Texture {
     return this;
   }
 
-  initializeCube(props?: TextureProps): this {
+  initializeCube(props?: WEBGLTextureProps): this {
     const {mipmaps = true, parameters = {}  as Record<GL, any>} = props;
 
     // Store props for accessors
@@ -439,7 +457,7 @@ export class WEBGLTexture extends Texture {
    */
   // eslint-disable-next-line max-statements, complexity
   setImageData(options: SetImageDataOptions) {
-    if (this.props.dimension === '3d') {
+    if (this.props.dimension === '3d' || this.props.dimension === '2d-array') {
       return this.setImageData3D(options);
     }
 
@@ -449,7 +467,7 @@ export class WEBGLTexture extends Texture {
       target = this.target,
       pixels = null,
       level = 0,
-      format = this.format,
+      glFormat = this.glFormat,
       offset = 0,
       parameters = {}  as Record<GL, any>
     } = options;
@@ -489,7 +507,7 @@ export class WEBGLTexture extends Texture {
     withParameters(this.gl, parameters, () => {
       switch (dataType) {
         case 'null':
-          gl.texImage2D(target, level, format, width, height, 0 /* border*/, dataFormat, type, data);
+          gl.texImage2D(target, level, glFormat, width, height, 0 /* border*/, dataFormat, type, data);
           break;
         case 'typed-array':
           // Looks like this assert is not necessary, as offset is ignored under WebGL1
@@ -497,7 +515,7 @@ export class WEBGLTexture extends Texture {
           gl.texImage2D(
             target,
             level,
-            format,
+            glFormat,
             width,
             height,
             0, // border (must be 0)
@@ -515,7 +533,7 @@ export class WEBGLTexture extends Texture {
           gl2.texImage2D(
             target,
             level,
-            format,
+            glFormat,
             width,
             height,
             0 /* border*/,
@@ -530,7 +548,7 @@ export class WEBGLTexture extends Texture {
             gl.texImage2D(
               target,
               level,
-              format,
+              glFormat,
               width,
               height,
               0 /* border*/,
@@ -539,7 +557,7 @@ export class WEBGLTexture extends Texture {
               data
             );
           } else {
-            gl.texImage2D(target, level, format, dataFormat, type, data);
+            gl.texImage2D(target, level, glFormat, dataFormat, type, data);
           }
           break;
         case 'compressed':
@@ -564,7 +582,7 @@ export class WEBGLTexture extends Texture {
     if (data && data.byteLength) {
       this.trackAllocatedMemory(data.byteLength, 'Texture');
     } else {
-      const bytesPerPixel = getTextureFormatBytesPerPixel(this.gl, this.props.format);
+      const bytesPerPixel = getTextureFormatBytesPerPixel(this.props.format, this.device.isWebGL2);
       this.trackAllocatedMemory(this.width * this.height * bytesPerPixel, 'Texture');
     }
 
@@ -587,7 +605,7 @@ export class WEBGLTexture extends Texture {
     width = this.width,
     height = this.height,
     level = 0,
-    format = this.format,
+    glFormat = this.glFormat,
     type = this.type,
     dataFormat = this.dataFormat,
     compressed = false,
@@ -629,7 +647,7 @@ export class WEBGLTexture extends Texture {
     withParameters(this.gl, parameters, () => {
       // TODO - x,y parameters
       if (compressed) {
-        this.gl.compressedTexSubImage2D(target, level, x, y, width, height, format, data);
+        this.gl.compressedTexSubImage2D(target, level, x, y, width, height, glFormat, data);
       } else if (data === null) {
         this.gl.texSubImage2D(target, level, x, y, width, height, dataFormat, type, null);
       } else if (ArrayBuffer.isView(data)) {
@@ -723,12 +741,12 @@ export class WEBGLTexture extends Texture {
 
   // HELPER METHODS
 
-  _deduceParameters(opts: TextureProps) {
+  _deduceParameters(opts: WEBGLTextureProps) {
     const {format, data} = opts;
     let {width, height, dataFormat, type, compressed} = opts;
 
     // Deduce format and type from format
-    const parameters = getWebGLTextureParameters(this.gl, format);
+    const parameters = getWebGLTextureParameters(format, this.device.isWebGL2);
     dataFormat = dataFormat || parameters.dataFormat;
     type = type || parameters.type;
     compressed = compressed || parameters.compressed;
@@ -884,7 +902,7 @@ export class WEBGLTexture extends Texture {
 
     this.gl.bindTexture(this.target, this.handle);
 
-    const webglTextureFormat = getWebGLTextureParameters(this.gl, format);
+    const webglTextureFormat = getWebGLTextureParameters(format, this.device.isWebGL2);
 
     withParameters(this.gl, parameters, () => {
       if (ArrayBuffer.isView(data)) {
@@ -924,7 +942,7 @@ export class WEBGLTexture extends Texture {
     if (data && data.byteLength) {
       this.trackAllocatedMemory(data.byteLength, 'Texture');
     } else {
-      const bytesPerPixel = getTextureFormatBytesPerPixel(this.gl, this.props.format);
+      const bytesPerPixel = getTextureFormatBytesPerPixel(this.props.format, this.device.isWebGL2);
       this.trackAllocatedMemory(this.width * this.height * this.depth * bytesPerPixel, 'Texture');
     }
 

package/src/adapter/webgl-canvas-context.ts

@@ -5,8 +5,7 @@ import {WebGLDevice} from './webgl-device';
 import {WEBGLFramebuffer} from './resources/webgl-framebuffer';
 
 /** 
- * Holds a WebGL Canvas Context which will handle drawing buffer resizing etc 
- * @todo This class is WIP, intended to replace the old gltools-based context size tracking
+ * A WebGL Canvas Context which manages the canvas and handles drawing buffer resizing etc 
  */
 export class WebGLCanvasContext extends CanvasContext {
   readonly device: WebGLDevice;
@@ -24,6 +23,7 @@ export class WebGLCanvasContext extends CanvasContext {
 
   getCurrentFramebuffer(): WEBGLFramebuffer {
     this.update();
+    // Setting handle to null returns a reference to the default framebuffer
     this._framebuffer = this._framebuffer || new WEBGLFramebuffer(this.device, {handle: null});
     return this._framebuffer;
   }

package/src/adapter/webgl-device.ts

@@ -45,7 +45,9 @@ import type {
   // RenderPass,
   RenderPassProps,
   ComputePass,
-  ComputePassProps
+  ComputePassProps,
+  // CommandEncoder,
+  CommandEncoderProps
 } from '@luma.gl/api';
 
 import {ClassicBuffer} from '../classic/buffer';
@@ -56,6 +58,7 @@ import {WEBGLTexture} from './resources/webgl-texture';
 import {WEBGLFramebuffer} from './resources/webgl-framebuffer';
 import {WEBGLRenderPass} from './resources/webgl-render-pass';
 import {WEBGLRenderPipeline} from './resources/webgl-render-pipeline';
+import {WEBGLCommandEncoder} from './resources/webgl-command-encoder';
 
 const LOG_LEVEL = 1;
 
@@ -279,8 +282,9 @@ ${this.info.vendor}, ${this.info.renderer} for canvas: ${this.canvasContext.id}`
     throw new Error('WebGL only supports a single canvas');
   }
 
-  _createBuffer(props: BufferProps): WEBGLBuffer {
-    return new ClassicBuffer(this, props);
+  createBuffer(props: BufferProps | ArrayBuffer | ArrayBufferView): WEBGLBuffer {
+    const newProps = this._getBufferProps(props);
+    return new ClassicBuffer(this, newProps);
   }
 
   _createTexture(props: TextureProps): WEBGLTexture {
@@ -330,6 +334,10 @@ ${this.info.vendor}, ${this.info.renderer} for canvas: ${this.canvasContext.id}`
     return this.renderPass;
   }
 
+  override createCommandEncoder(props: CommandEncoderProps): WEBGLCommandEncoder {
+    return new WEBGLCommandEncoder(this, props);
+  }
+
   /**
    * Offscreen Canvas Support: Commit the frame
    * https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/commit
@@ -375,20 +383,22 @@ ${this.info.vendor}, ${this.info.renderer} for canvas: ${this.canvasContext.id}`
   }
 
   /**
-   * Loses the context
-   * @note Triggers context loss, mainly for testing
-   * @todo Promote to `Device` API?
+   * Triggers device (or WebGL context) loss.
+   * @note primarily intended for testing how application reacts to device loss
    */
-  loseDevice(): void {
+  override loseDevice(): boolean {
+    let deviceLossTriggered = false;
     const ext = this.gl.getExtension('WEBGL_lose_context');
     if (ext) {
+      deviceLossTriggered = true;
       ext.loseContext();
+      // ext.loseContext should trigger context loss callback but the platform may not do this, so do it explicitly
     }
-    // loseContext should trigger context loss callback but 
     this._resolveContextLost?.({
       reason: 'destroyed',
       message: 'Application triggered context loss'
     });
+    return deviceLossTriggered;
   }
 
   /** Save current WebGL context state onto an internal stack */
@@ -410,6 +420,25 @@ ${this.info.vendor}, ${this.info.renderer} for canvas: ${this.canvasContext.id}`
     // eslint-disable-next-line camelcase
     handle.__SPECTOR_Metadata = props;
   }
+
+  /** 
+   * Returns the GL.<KEY> constant that corresponds to a numeric value of a GL constant
+   * Be aware that there are some duplicates especially for constants that are 0,
+   * so this isn't guaranteed to return the right key in all cases.
+   */
+  getGLKey(value: unknown, gl?: WebGLRenderingContext): string {
+    // @ts-ignore expect-error depends on settings 
+    gl = gl || this.gl2 || this.gl;
+    const number = Number(value);
+    for (const key in gl) {
+      // @ts-ignore expect-error depends on settings
+      if (gl[key] === number) {
+        return `GL.${key}`;
+      }
+    }
+    // No constant found. Stringify the value and return it.
+    return String(value);
+  }
 }
 
 /** Check if supplied parameter is a WebGLRenderingContext */

package/src/classic/buffer.ts

@@ -108,9 +108,9 @@ export class ClassicBuffer extends WEBGLBuffer {
     Object.seal(this);
   }
 
-  override write(data: TypedArray, byteOffset?: number): void {
-    this.subData({data, offset: byteOffset});
-  }
+  // override write(data: TypedArray, byteOffset: number = 0): void {
+  //   this.subData({data, offset: byteOffset});
+  // }
 
   // returns number of elements in the buffer (assuming that the full buffer is used)
   getElementCount(accessor: AccessorObject = this.accessor): number {

package/src/classic/clear.ts

@@ -0,0 +1,110 @@
+import {Device, Framebuffer, assert} from '@luma.gl/api';
+import {WebGLDevice} from '../adapter/webgl-device';
+import {withParameters} from '../context/state-tracker/with-parameters';
+
+// 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 GL_DEPTH = 0x1801;
+const GL_STENCIL = 0x1802;
+const GL_DEPTH_STENCIL = 0x84f9;
+
+// Should disappear if asserts are removed
+const ERR_ARGUMENTS = 'clear: bad arguments';
+
+/** 
+ * Optionally clears depth, color and stencil buffers 
+ * @deprecated Set clear color when creating a RenderPass.
+ */
+export function clear(
+  gl: Device | WebGLRenderingContext,
+  options?: {framebuffer?: Framebuffer; color?: any; depth?: any; stencil?: any}
+): void {
+  const device = WebGLDevice.attach(gl);
+  const {framebuffer = null, color = null, depth = null, stencil = null} = options || {};
+  const parameters: any = {};
+
+  if (framebuffer) {
+    parameters.framebuffer = framebuffer;
+  }
+
+  let clearFlags = 0;
+
+  if (color) {
+    clearFlags |= GL_COLOR_BUFFER_BIT;
+    if (color !== true) {
+      parameters.clearColor = color;
+    }
+  }
+
+  if (depth) {
+    clearFlags |= GL_DEPTH_BUFFER_BIT;
+    if (depth !== true) {
+      parameters.clearDepth = depth;
+    }
+  }
+
+  if (stencil) {
+    clearFlags |= GL_STENCIL_BUFFER_BIT;
+    if (depth !== true) {
+      parameters.clearStencil = depth;
+    }
+  }
+
+  assert(clearFlags !== 0, ERR_ARGUMENTS);
+
+  // Temporarily set any clear "colors" and call clear
+  withParameters(device.gl, parameters, () => {
+    device.gl.clear(clearFlags);
+  });
+}
+
+/** 
+ * WebGL2 - clear a specific drawing buffer 
+ * @deprecated Set clear color when creating a RenderPass
+ */
+export function clearBuffer(
+  gl: Device | WebGLRenderingContext,
+  options?: {framebuffer?: Framebuffer; buffer?: any; drawBuffer?: any; value?: any}
+) {
+  const device = WebGLDevice.attach(gl);
+
+  const {framebuffer = null, buffer = GL_COLOR, drawBuffer = 0, value = [0, 0, 0, 0]} = options || {};
+  withParameters(device.gl2, {framebuffer}, () => {
+    // Method selection per OpenGL ES 3 docs
+    switch (buffer) {
+      case GL_COLOR:
+        switch (value.constructor) {
+          case Int32Array:
+            device.gl2.clearBufferiv(buffer, drawBuffer, value);
+            break;
+          case Uint32Array:
+            device.gl2.clearBufferuiv(buffer, drawBuffer, value);
+            break;
+          case Float32Array:
+          default:
+            device.gl2.clearBufferfv(buffer, drawBuffer, value);
+        }
+        break;
+
+      case GL_DEPTH:
+        device.gl2.clearBufferfv(GL_DEPTH, 0, [value]);
+        break;
+
+      case GL_STENCIL:
+        device.gl2.clearBufferiv(GL_STENCIL, 0, [value]);
+        break;
+
+      case GL_DEPTH_STENCIL:
+        const [depth, stencil] = value;
+        device.gl2.clearBufferfi(GL_DEPTH_STENCIL, 0, depth, stencil);
+        break;
+
+      default:
+        assert(false, ERR_ARGUMENTS);
+    }
+  });
+}