@luma.gl/webgl 9.0.0-alpha.3 → 9.0.0-alpha.30

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

@@ -1,72 +1,78 @@
-import type {FramebufferProps, DepthStencilTextureFormat, ColorTextureFormat} from '@luma.gl/api';
-import {Framebuffer, Texture, log, assert} from '@luma.gl/api';
-import GL from '@luma.gl/constants';
-import WebGLDevice from '../webgl-device';
-import WebGLTexture from './webgl-texture';
-import Renderbuffer from '../objects/webgl-renderbuffer';
-import {getWebGLTextureFormat, getWebGLDepthStencilAttachment} from '../converters/texture-formats';
+// luma.gl, MIT license
+
+import type {FramebufferProps, TextureFormat} from '@luma.gl/core';
+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 {getDepthStencilAttachmentWebGL} from '../converters/texture-formats';
 
 export type TextureAttachment = [Texture, number?, number?];
-export type Attachment = WebGLTexture | Renderbuffer | TextureAttachment;
+export type Attachment = WEBGLTexture | WEBGLRenderbuffer | TextureAttachment;
 
 /** luma.gl Framebuffer, WebGL implementation  */
-export default class WEBGLFramebuffer extends Framebuffer {
+export class WEBGLFramebuffer extends Framebuffer {
   device: WebGLDevice;
   gl: WebGLRenderingContext;
   handle: WebGLFramebuffer;
 
-  get texture() { return this.colorAttachments[0]; }
-  readonly colorAttachments: WebGLTexture[] = [];
-  readonly depthStencilAttachment: WebGLTexture | undefined = undefined;
-  protected _ownResources: (WebGLTexture | Renderbuffer)[] = [];
+  get texture() {
+    return this.colorAttachments[0];
+  }
 
   constructor(device: WebGLDevice, props: FramebufferProps) {
     super(device, props);
-    this.device = device;
-    this.gl = device.gl;
-    this.handle = this.props.handle !== undefined ? this.props.handle : this.gl.createFramebuffer();
 
-    if (this.handle) { // default framebuffer is null...
-      // @ts-expect-error Per SPECTOR docs
-      this.handle.__SPECTOR_Metadata = {id: this.props.id, props: this.props};
-    }
-
-    this.colorAttachments = this._createColorAttachments();
-    // @ts-expect-error
-    this.depthStencilAttachment = this._createDepthStencilAttachment();
+    // WebGL default framebuffer handle is null
+    const isDefaultFramebuffer = props.handle === null;
 
-    /** Attach from a map of attachments */
-    const prevHandle = this.gl.bindFramebuffer(GL.FRAMEBUFFER, this.handle);
+    this.device = device;
+    this.gl = device.gl;
+    this.handle =
+      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});
+
+      // Auto create textures for attachments if needed
+      this.autoCreateAttachmentTextures();
+
+      /** Attach from a map of attachments */
+      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._attachOne(attachmentPoint, attachment as WEBGLTexture);
+        }
+      }
 
-    // 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._attachOne(attachmentPoint, attachment);
+      if (this.depthStencilAttachment) {
+        this._attachOne(
+          getDepthStencilAttachmentWebGL(this.depthStencilAttachment.format),
+          this.depthStencilAttachment as WEBGLTexture
+        );
       }
-    }
 
-    if (this.props.depthStencilAttachment) {
-      this._attachOne(getWebGLDepthStencilAttachment(this.depthStencilAttachment.format), this.depthStencilAttachment);
+      this.gl.bindFramebuffer(GL.FRAMEBUFFER, null);
     }
 
-    // @ts-expect-error
-    this.gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle || null);
-
     // @ts-expect-error
     if (props.check !== false) {
       this._checkStatus();
     }
   }
 
-  destroy() {
-    if (this.handle !== null) {
-      for (const resource of this._ownResources) {
-        resource.destroy();
-      }
+  /** destroys any auto created resources etc. */
+  override destroy(): void {
+    super.destroy(); // destroys owned resources etc.
+    if (!this.destroyed && this.handle !== null) {
       this.gl.deleteFramebuffer(this.handle);
-      this.handle = null;
+      // this.handle = null;
     }
   }
 
@@ -75,92 +81,31 @@ export default class WEBGLFramebuffer extends Framebuffer {
   /** Check the status */
   protected _checkStatus(): void {
     const {gl} = this;
-    const prevHandle = gl.bindFramebuffer(GL.FRAMEBUFFER, this.handle);
+    // 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);
-    // @ts-expect-error
     gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle || null);
     if (status !== gl.FRAMEBUFFER_COMPLETE) {
       throw new Error(`Framebuffer ${_getFrameBufferStatus(status)}`);
     }
   }
 
-  _createColorAttachments(): WebGLTexture[] {
-    return this.props.colorAttachments.map(colorAttachment => {
-      if (!colorAttachment) {
-        return undefined;
-      }
-      if (colorAttachment instanceof WebGLTexture) {
-        return colorAttachment;
-      }
-      // if (typeof colorAttachment === 'default') {
-      //   return this._createColorAttachment('rgba8unorm', this.width, this.height);
-      // }
-      // @ts-expect-error
-      return this._createColorAttachment(colorAttachment, this.width, this.height);
-    });
-  }
-
-  /** Create a color attachment */
-  protected _createColorAttachment(format: ColorTextureFormat, width: number, height: number): WebGLTexture {
-    const texture = this.device._createTexture({
-      id: `${this.id}-color`,
-      data: null, // reserves texture memory, but texels are undefined
-      format,
-      // type: GL.UNSIGNED_BYTE,
-      width,
-      height,
-      // Note: Mipmapping can be disabled by texture resource when we resize the texture
-      // to a non-power-of-two dimenstion (NPOT texture) under WebGL1. To have consistant
-      // behavior we always disable mipmaps.
-      mipmaps: false,
-      // Set MIN and MAG filtering parameters so mipmaps are not used in sampling.
-      // Use LINEAR so subpixel algos like fxaa work.
-      // Set WRAP modes that support NPOT textures too.
-      sampler: {
-        minFilter: 'linear',
-        magFilter: 'linear',
-        addressModeU: 'clamp-to-edge',
-        addressModeV: 'clamp-to-edge'
-      },
-      // parameters: {
-      //   [GL.TEXTURE_MIN_FILTER]: GL.LINEAR,
-      //   [GL.TEXTURE_MAG_FILTER]: GL.LINEAR,
-      //   [GL.TEXTURE_WRAP_S]: GL.CLAMP_TO_EDGE,
-      //   [GL.TEXTURE_WRAP_T]: GL.CLAMP_TO_EDGE
-      // }
-    }) as WebGLTexture;
-    this._ownResources.push(texture);
-    return texture;
-  }
-
-  /** Create a depth stencil attachment GL.DEPTH24_STENCIL8 */
-  protected _createDepthStencilAttachment(): Renderbuffer | WebGLTexture {
-    if (!this.props.depthStencilAttachment) {
-      return undefined;
-    }
-    if (this.props.depthStencilAttachment instanceof Renderbuffer) {
-      return this.props.depthStencilAttachment;
-    }
-    if (this.props.depthStencilAttachment instanceof Texture) {
-      return this.props.depthStencilAttachment as unknown as WebGLTexture;
-    }
-    const format = this.props.depthStencilAttachment;
-    const webglFormat = getWebGLTextureFormat(this.gl, format);
-
-    const texture = new Renderbuffer(this.device, {
+  /** 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?
-      format: webglFormat,
+      format,
       // dataFormat: GL.DEPTH_STENCIL,
       // type: GL.UNSIGNED_INT_24_8,
       width: this.width,
       height: this.height
-    });
-    this._ownResources.push(texture);
-    return texture;
+    }) as unknown as WEBGLTexture;
   }
 
-  /** Attachment resize is expected to be a noop if size is same */
-  protected _resizeAttachments(width: number, height: number): this {
+  /** 
+   * 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);
@@ -168,6 +113,7 @@ export default class WEBGLFramebuffer extends Framebuffer {
       this.height = this.gl.drawingBufferHeight;
       return this;
     }
+
     if (width === undefined) {
       width = this.gl.drawingBufferWidth;
     }
@@ -175,33 +121,37 @@ export default class WEBGLFramebuffer extends Framebuffer {
       height = this.gl.drawingBufferHeight;
     }
 
-    if (width !== this.width && height !== this.height) {
-      log.log(2, `Resizing framebuffer ${this.id} to ${width}x${height}`)();
-    }
+    // TODO Not clear that this is better than default destroy/create implementation
 
     for (const colorAttachment of this.colorAttachments) {
-      colorAttachment.resize({width, height});
+      (colorAttachment as WEBGLTexture).resize({width, height});
+    }
+    if (this.depthStencilAttachment) {
+      (this.depthStencilAttachment as WEBGLTexture).resize({width, height});
     }
-    this.depthStencilAttachment?.resize({width, height});
     return this;
   }
 
   /** Attach one attachment */
-  protected _attachOne(attachmentPoint: GL, attachment: Attachment): WebGLTexture | Renderbuffer {
-    if (attachment instanceof Renderbuffer) {
-      this._attachRenderbuffer(attachmentPoint, attachment);
+  protected _attachOne(
+    attachmentPoint: GL,
+    attachment: Attachment
+  ): WEBGLTexture | WEBGLRenderbuffer {
+    if (attachment instanceof WEBGLRenderbuffer) {
+      this._attachWEBGLRenderbuffer(attachmentPoint, attachment);
       return attachment;
     } else 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) {
+      this._attachTexture(attachmentPoint, texture as unknown as WEBGLTexture, layer, level);
+      return texture as unknown as WEBGLTexture;
+    } else if (attachment instanceof WEBGLTexture) {
       this._attachTexture(attachmentPoint, attachment, 0, 0);
       return attachment;
     }
+    throw new Error('attach');
   }
 
-  protected _attachRenderbuffer(attachment: GL, renderbuffer: Renderbuffer): void {
+  protected _attachWEBGLRenderbuffer(attachment: GL, renderbuffer: WEBGLRenderbuffer): void {
     this.gl.framebufferRenderbuffer(
       GL.FRAMEBUFFER,
       attachment,
@@ -213,10 +163,15 @@ export default class WEBGLFramebuffer extends Framebuffer {
   /**
    * @param attachment
    * @param texture
-   * @param layer = 0 - index into WebGLTextureArray and Texture3D or face for `TextureCubeMap`
+   * @param layer = 0 - index into WEBGLTextureArray and Texture3D or face for `TextureCubeMap`
    * @param level  = 0 - mipmapLevel (must be 0 in WebGL1)
    */
-   protected _attachTexture(attachment: GL, texture: WebGLTexture, layer: number, level: number): void {
+  protected _attachTexture(
+    attachment: GL,
+    texture: WEBGLTexture,
+    layer: number,
+    level: number
+  ): void {
     const {gl, gl2} = this.device;
     gl.bindTexture(texture.target, texture.handle);
 
@@ -224,7 +179,7 @@ export default class WEBGLFramebuffer extends Framebuffer {
       case GL.TEXTURE_2D_ARRAY:
       case GL.TEXTURE_3D:
         this.device.assertWebGL2();
-        gl2.framebufferTextureLayer(GL.FRAMEBUFFER, attachment, texture.target, level, layer);
+        gl2?.framebufferTextureLayer(GL.FRAMEBUFFER, attachment, texture.target, level, layer);
         break;
 
       case GL.TEXTURE_CUBE_MAP:
@@ -248,7 +203,7 @@ export default class WEBGLFramebuffer extends Framebuffer {
 // Helper functions
 
 // Map an index to a cube map face constant
-function mapIndexToCubeMapFace(layer) {
+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 ? layer + GL.TEXTURE_CUBE_MAP_POSITIVE_X : layer;
@@ -256,7 +211,7 @@ function mapIndexToCubeMapFace(layer) {
 
 // Helper METHODS
 // Get a string describing the framebuffer error if installed
-function _getFrameBufferStatus(status) {
+function _getFrameBufferStatus(status: GL) {
   switch (status) {
     case GL.FRAMEBUFFER_COMPLETE:
       return 'success';

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

@@ -1,14 +1,36 @@
-import {RenderPass, RenderPassProps} from '@luma.gl/api';
-import WebGLDevice from '../webgl-device';
+import {RenderPass, RenderPassProps, NumericArray, RenderPassParameters} from '@luma.gl/core';
+import {WebGLDevice} from '../webgl-device';
+import {GL, GLParameters} from '@luma.gl/constants';
+import {withParameters} from '../../context/state-tracker/with-parameters';
 
-export default class WEBGLRenderPass extends RenderPass {
+// 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;
+
+export class WEBGLRenderPass extends RenderPass {
   readonly device: WebGLDevice;
 
+  /** Parameters that should be applied before each draw call */
+  glParameters: GLParameters;
+
   constructor(device: WebGLDevice, props: RenderPassProps) {
     super(device, props);
+    this.device = device;
+
+    // TODO - do parameters (scissorRect) affect the clear operation?
+    this.setParameters(this.props.parameters);
+
+    // Hack - for now WebGL draws in "immediate mode" (instead of queueing the operations)...
+    this.clear();
   }
 
-  endPass(): void {}
+  end(): void {
+    // should add commands to CommandEncoder.
+  }
 
   pushDebugGroup(groupLabel: string): void {}
   popDebugGroup(): void {}
@@ -20,4 +42,133 @@ export default class WEBGLRenderPass extends RenderPass {
   // endOcclusionQuery(): void;
 
   // executeBundles(bundles: Iterable<GPURenderBundle>): void;
+
+  /**
+   * Maps RenderPass parameters to GL parameters
+   */
+  setParameters(parameters: RenderPassParameters = {}): void {
+    const glParameters: GLParameters = {};
+
+    // Framebuffers are specified using parameters in WebGL
+    if (this.props.framebuffer) {
+      glParameters.framebuffer = this.props.framebuffer;
+    }
+
+    if (this.props.depthReadOnly) {
+      glParameters.depthMask = !this.props.depthReadOnly;
+    }
+
+    glParameters.stencilMask = this.props.stencilReadOnly ? 0 : 1;
+
+    glParameters[GL.RASTERIZER_DISCARD] = this.props.discard;
+
+    // Map the four renderpass parameters to WebGL parameters
+    if (parameters.viewport) {
+      // WebGPU viewports are 6 coordinates (X, Y, Z)
+      if (parameters.viewport.length >= 6) {
+        glParameters.viewport = parameters.viewport.slice(0, 4);
+        glParameters.depthRange = [parameters.viewport[4], parameters.viewport[5]];
+      } else {
+        // WebGL viewports are 4 coordinates (X, Y)
+        glParameters.viewport = parameters.viewport;
+      }
+    }
+    glParameters.scissorTest = Boolean(parameters.scissorRect);
+    if (parameters.scissorRect) {
+      glParameters.scissor = parameters.scissorRect;
+    }
+    if (parameters.blendConstant) {
+      glParameters.blendColor = parameters.blendConstant;
+    }
+    if (parameters.stencilReference) {
+      // eslint-disable-next-line no-console
+      console.warn('RenderPassParameters.stencilReference not yet implemented in WebGL');
+      // parameters.stencilFunc = [func, ref, mask];
+      // Does this work?
+      parameters[GL.STENCIL_REF] = parameters.stencilReference;
+    }
+
+    this.glParameters = glParameters;
+  }
+
+  // Internal
+
+  /**
+   * Optionally clears depth, color and stencil buffers based on parameters
+   */
+  protected clear(): void {
+    const glParameters: GLParameters = {...this.glParameters};
+
+    let clearMask = 0;
+
+    if (this.props.clearColor !== false) {
+      clearMask |= GL_COLOR_BUFFER_BIT;
+      glParameters.clearColor = this.props.clearColor;
+    }
+    if (this.props.clearDepth !== false) {
+      clearMask |= GL_DEPTH_BUFFER_BIT;
+      glParameters.clearDepth = this.props.clearDepth;
+    }
+    if (this.props.clearStencil !== false) {
+      clearMask |= GL_STENCIL_BUFFER_BIT;
+      glParameters.clearStencil = this.props.clearStencil;
+    }
+
+    if (clearMask !== 0) {
+      // Temporarily set any clear "colors" and call clear
+      withParameters(this.device, glParameters, () => {
+        this.device.gl.clear(clearMask);
+      });
+
+      // TODO - clear multiple color attachments
+      // for (attachment of this.framebuffer.colorAttachments) {
+      //   this.clearColorBuffer  
+      // }
+    }
+  }
+
+  /** 
+   * WebGL2 - clear a specific color buffer 
+   */
+  protected clearColorBuffer(drawBuffer: number = 0, value: NumericArray = [0, 0, 0, 0]) {
+    withParameters(this.device.gl2, {framebuffer: this.props.framebuffer}, () => {
+      // Method selection per OpenGL ES 3 docs
+      switch (value.constructor) {
+        case Int32Array:
+          this.device.gl2.clearBufferiv(GL_COLOR, drawBuffer, value);
+          break;
+        case Uint32Array:
+          this.device.gl2.clearBufferuiv(GL_COLOR, drawBuffer, value);
+          break;
+        case Float32Array:
+        default:
+          this.device.gl2.clearBufferfv(GL_COLOR, drawBuffer, value);
+          break;
+      }
+    });
+  }
+
+  // clearDepthStencil() {
+  // const GL_DEPTH = 0x1801;
+  // const GL_STENCIL = 0x1802;
+  // const GL_DEPTH_STENCIL = 0x84f9;
+
+  //     case GL_DEPTH:
+  //       this.device.gl2.clearBufferfv(GL_DEPTH, 0, [value]);
+  //       break;
+
+  //     case GL_STENCIL:
+  //       this.device.gl2.clearBufferiv(GL_STENCIL, 0, [value]);
+  //       break;
+
+  //     case GL_DEPTH_STENCIL:
+  //       const [depth, stencil] = value;
+  //       this.device.gl2.clearBufferfi(GL_DEPTH_STENCIL, 0, depth, stencil);
+  //       break;
+
+  //     default:
+  //       assert(false, ERR_ARGUMENTS);
+  //   }
+  // });
 }
+