@luma.gl/webgl 8.6.0-alpha.5 → 9.0.0-alpha.4

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

@@ -0,0 +1,92 @@
+/*
+export default class WEBGLExternalTexture extends WEBGLTexture {
+  readonly device: WebGLDevice;
+  readonly gl: WebGLRenderingContext;
+  readonly gl2: WebGL2RenderingContext | null;
+  readonly handle: WebGLTexture;
+
+  data;
+
+  width: number = undefined;
+  height: number = undefined;
+  depth: number = undefined;
+
+  format = undefined;
+  type = undefined;
+  dataFormat = undefined;
+  border = undefined;
+  mipmaps: boolean = undefined;
+
+  textureUnit: number = undefined;
+
+  sampler: WEBGLSampler;
+
+  // Program.draw() checks the loaded flag of all textures to avoid
+  // Textures that are still loading from promises
+  // Set to true as soon as texture has been initialized with valid data
+  loaded = false;
+  _video;
+
+  readonly target: GL;
+  // target cannot be modified by bind:
+  // textures are special because when you first bind them to a target,
+  // they get special information. When you first bind a texture as a
+  // GL_TEXTURE_2D, you are actually setting special state in the texture.
+  // You are saying that this texture is a 2D texture.
+  // And it will always be a 2D texture; this state cannot be changed ever.
+  // If you have a texture that was first bound as a GL_TEXTURE_2D,
+  // you must always bind it as a GL_TEXTURE_2D;
+  // attempting to bind it as GL_TEXTURE_3D will give rise to an error
+  // (while run-time).
+
+  static isSupported(device: WebGLDevice, options?: TextureSupportOptions): boolean {
+    const {format, linearFiltering} = options;
+    let supported = true;
+    if (format) {
+      supported = supported && isFormatSupported(device.gl, format);
+      supported = supported && (!linearFiltering || isTextureFormatFilterable(device.gl, format));
+    }
+    return supported;
+  }
+
+  // eslint-disable-next-line max-statements
+  constructor(device: Device | WebGLRenderingContext, props: TextureProps) {
+    super(WebGLDevice.attach(device), {id: uid('texture'), ...props});
+
+    this.target = getWebGLTextureTarget(props);
+
+    this.device = WebGLDevice.attach(device);
+    this.gl = this.device.gl;
+    this.gl2 = this.device.gl2;
+    this.handle = this.props.handle || this.gl.createTexture();
+
+    let data = props.data;
+
+    const isVideo = typeof HTMLVideoElement !== 'undefined' && data instanceof HTMLVideoElement;
+    // @ts-expect-error
+    if (isVideo && data.readyState < HTMLVideoElement.HAVE_METADATA) {
+      this._video = null; // Declare member before the object is sealed
+      data.addEventListener('loadeddata', () => this.initialize(props));
+      return this;
+    }
+
+  update(): this {
+    if (this._video) {
+      const {video, parameters, lastTime} = this._video;
+      // @ts-expect-error
+      if (lastTime === video.currentTime || video.readyState < HTMLVideoElement.HAVE_CURRENT_DATA) {
+        return;
+      }
+      this.setSubImageData({
+        data: video,
+        parameters
+      });
+      if (this.mipmaps) {
+        this.generateMipmap();
+      }
+      this._video.lastTime = video.currentTime;
+    }
+  }
+
+
+*/

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

@@ -0,0 +1,279 @@
+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';
+
+export type TextureAttachment = [Texture, number?, number?];
+export type Attachment = WebGLTexture | Renderbuffer | TextureAttachment;
+
+/** luma.gl Framebuffer, WebGL implementation  */
+export default 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)[] = [];
+
+  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();
+
+    /** Attach from a map of attachments */
+    const prevHandle = 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);
+      }
+    }
+
+    if (this.props.depthStencilAttachment) {
+      this._attachOne(getWebGLDepthStencilAttachment(this.depthStencilAttachment.format), this.depthStencilAttachment);
+    }
+
+    // @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();
+      }
+      this.gl.deleteFramebuffer(this.handle);
+      this.handle = null;
+    }
+  }
+
+  // PRIVATE
+
+  /** Check the status */
+  protected _checkStatus(): void {
+    const {gl} = this;
+    const prevHandle = gl.bindFramebuffer(GL.FRAMEBUFFER, this.handle);
+    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, {
+      id: `${this.id}-depth-stencil`, // TODO misleading if not depth and stencil?
+      format: webglFormat,
+      // dataFormat: GL.DEPTH_STENCIL,
+      // type: GL.UNSIGNED_INT_24_8,
+      width: this.width,
+      height: this.height
+    });
+    this._ownResources.push(texture);
+    return texture;
+  }
+
+  /** Attachment resize is expected to be a noop if size is same */
+  protected _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;
+    }
+
+    if (width !== this.width && height !== this.height) {
+      log.log(2, `Resizing framebuffer ${this.id} to ${width}x${height}`)();
+    }
+
+    for (const colorAttachment of this.colorAttachments) {
+      colorAttachment.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);
+      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, attachment, 0, 0);
+      return attachment;
+    }
+  }
+
+  protected _attachRenderbuffer(attachment: GL, renderbuffer: Renderbuffer): void {
+    this.gl.framebufferRenderbuffer(
+      GL.FRAMEBUFFER,
+      attachment,
+      GL.RENDERBUFFER,
+      renderbuffer.handle
+    );
+  }
+
+  /**
+   * @param attachment
+   * @param texture
+   * @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 {
+    const {gl, gl2} = this.device;
+    gl.bindTexture(texture.target, texture.handle);
+
+    switch (texture.target) {
+      case GL.TEXTURE_2D_ARRAY:
+      case GL.TEXTURE_3D:
+        this.device.assertWebGL2();
+        gl2.framebufferTextureLayer(GL.FRAMEBUFFER, attachment, texture.target, level, layer);
+        break;
+
+      case GL.TEXTURE_CUBE_MAP:
+        // layer must be a cubemap face (or if index, converted to cube map face)
+        const face = mapIndexToCubeMapFace(layer);
+        gl.framebufferTexture2D(GL.FRAMEBUFFER, attachment, face, texture.handle, level);
+        break;
+
+      case GL.TEXTURE_2D:
+        gl.framebufferTexture2D(GL.FRAMEBUFFER, attachment, GL.TEXTURE_2D, texture.handle, level);
+        break;
+
+      default:
+        assert(false, 'Illegal texture type');
+    }
+
+    gl.bindTexture(texture.target, null);
+  }
+}
+
+// Helper functions
+
+// Map an index to a cube map face constant
+function mapIndexToCubeMapFace(layer) {
+  // 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;
+}
+
+// Helper METHODS
+// Get a string describing the framebuffer error if installed
+function _getFrameBufferStatus(status) {
+  switch (status) {
+    case GL.FRAMEBUFFER_COMPLETE:
+      return 'success';
+    case GL.FRAMEBUFFER_INCOMPLETE_ATTACHMENT:
+      return 'Mismatched attachments';
+    case GL.FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT:
+      return 'No attachments';
+    case GL.FRAMEBUFFER_INCOMPLETE_DIMENSIONS:
+      return 'Height/width mismatch';
+    case GL.FRAMEBUFFER_UNSUPPORTED:
+      return 'Unsupported or split attachments';
+    // WebGL2
+    case GL.FRAMEBUFFER_INCOMPLETE_MULTISAMPLE:
+      return 'Samples mismatch';
+    // OVR_multiview2 extension
+    // case GL.FRAMEBUFFER_INCOMPLETE_VIEW_TARGETS_OVR: return 'baseViewIndex mismatch';
+    default:
+      return `${status}`;
+  }
+}

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

@@ -0,0 +1,23 @@
+import {RenderPass, RenderPassProps} from '@luma.gl/api';
+import WebGLDevice from '../webgl-device';
+
+export default class WEBGLRenderPass extends RenderPass {
+  readonly device: WebGLDevice;
+
+  constructor(device: WebGLDevice, props: RenderPassProps) {
+    super(device, props);
+  }
+
+  endPass(): void {}
+
+  pushDebugGroup(groupLabel: string): void {}
+  popDebugGroup(): void {}
+  insertDebugMarker(markerLabel: string): void {}
+
+  // writeTimestamp(querySet: GPUQuerySet, queryIndex: number): void;
+
+  // beginOcclusionQuery(queryIndex: number): void;
+  // endOcclusionQuery(): void;
+
+  // executeBundles(bundles: Iterable<GPURenderBundle>): void;
+}