@luma.gl/webgl 8.5.9 → 8.6.0-alpha.3

package/src/classes/{framebuffer.js → framebuffer.ts}

@@ -1,86 +1,309 @@
+import {log, assert} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
-import {getWebGL2Context, assertWebGL2Context, log} from '@luma.gl/gltools';
-import Resource from './resource';
+import WebGLDevice from '../adapter/webgl-device';
+import {getWebGL2Context, assertWebGL2Context} from '../context/context/webgl-checks';
+import {getKey} from '../webgl-utils/constants-to-keys';
+import Resource, {ResourceProps} from './webgl-resource';
 import Texture2D from './texture-2d';
 import Renderbuffer from './renderbuffer';
 import {clear, clearBuffer} from './clear';
-import {copyToDataUrl} from './copy-and-blit.js';
-
-import {getFeatures} from '../features';
-import {getKey} from '../webgl-utils/constants-to-keys';
-import {assert} from '../utils/assert';
+import {copyToDataUrl} from './copy-and-blit';
 
 const ERR_MULTIPLE_RENDERTARGETS = 'Multiple render targets not supported';
 
-export default class Framebuffer extends Resource {
-  static isSupported(gl, options = {}) {
-    const {
-      colorBufferFloat, // Whether floating point textures can be rendered and read
-      colorBufferHalfFloat // Whether half float textures can be rendered and read
-    } = options;
-    let supported = true;
+type TextureAttachment = {
+  texture: Texture2D;
+  layer?: number; //  = 0
+  level?: number; // = 0
+};
+
+type Attachment = Renderbuffer | Texture2D | TextureAttachment;
+
+export type ImmutableFramebufferProps = ResourceProps & {
+  attachments?: Record<string, Attachment>;
+  readBuffer?: number;
+  drawBuffers?: number[];
+  check?: boolean;
+};
+
+export type FramebufferProps = ImmutableFramebufferProps & {
+  width?: number;
+  height?: number;
+  color?: boolean;
+  depth?: boolean;
+  stencil?: boolean;
+};
+
+type colorBufferFloatOptions = {colorBufferFloat?: boolean; colorBufferHalfFloat?: boolean};
+
+export class ImmutableFramebuffer extends Resource<FramebufferProps> {
+  constructor(gl: WebGLRenderingContext, props?: FramebufferProps) {
+    super(WebGLDevice.attach(gl), props, {} as any);
+    this._initialize({
+      attachments: props?.attachments || {},
+      readBuffer: props?.readBuffer,
+      drawBuffers: props?.drawBuffers
+    });
+  }
 
-    if (colorBufferFloat) {
-      supported = Boolean(
-        // WebGL 2
-        gl.getExtension('EXT_color_buffer_float') ||
-          // WebGL 1, not exposed on all platforms
-          gl.getExtension('WEBGL_color_buffer_float') ||
-          // WebGL 1, implicitly enables float render targets https://www.khronos.org/registry/webgl/extensions/OES_texture_float/
-          gl.getExtension('OES_texture_float')
+  checkStatus(): this {
+    const {gl} = this;
+    const status = this.getStatus();
+    if (status !== gl.FRAMEBUFFER_COMPLETE) {
+      throw new Error(_getFrameBufferStatus(status));
+    }
+    return this;
+  }
+
+  getStatus(): number {
+    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);
+    return status;
+  }
+
+  // DEBUG
+
+  // Note: Will only work when called in an event handler
+  show() {
+    if (typeof window !== 'undefined') {
+      window.open(copyToDataUrl(this), 'luma-debug-texture');
+    }
+    return this;
+  }
+
+  log(logLevel = 0, message = '') {
+    if (logLevel > log.level || typeof window === 'undefined') {
+      return this;
+    }
+    message = message || `Framebuffer ${this.id}`;
+    const image = copyToDataUrl(this, {targetMaxHeight: 100});
+    // @ts-expect-error probe.gl typings incorrectly require priority...
+    log.image({logLevel, message, image})();
+    return this;
+  }
+
+  // WEBGL INTERFACE
+  bind({target = GL.FRAMEBUFFER} = {}) {
+    this.gl.bindFramebuffer(target, this.handle);
+    return this;
+  }
+
+  unbind({target = GL.FRAMEBUFFER} = {}) {
+    this.gl.bindFramebuffer(target, null);
+    return this;
+  }
+
+  // PRIVATE
+
+  _initialize(options: {attachments: Record<string, Attachment>; readBuffer?: number; drawBuffers?: number[]}): this {
+    const {attachments = {}, readBuffer, drawBuffers} = options;
+
+    this._attach(attachments);
+
+    // Multiple render target support, set read buffer and draw buffers
+    const prevHandle = this.gl.bindFramebuffer(GL.FRAMEBUFFER, this.handle);
+    if (readBuffer) {
+      this._setReadBuffer(readBuffer);
+    }
+    if (drawBuffers) {
+      this._setDrawBuffers(drawBuffers);
+    }
+    // @ts-expect-error
+    this.gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle || null);
+
+    return this;
+  }
+
+  /** Attach from a map of attachments */
+  _attach(attachments: Record<string, Attachment>) {
+    const prevHandle = this.gl.bindFramebuffer(GL.FRAMEBUFFER, this.handle);
+
+    // Walk the attachments
+    for (const key in attachments) {
+      // Ensure key is not undefined
+      assert(key !== undefined, 'Misspelled framebuffer binding point?');
+      const attachmentPoint = Number(key) as GL;
+      const attachment = attachments[attachmentPoint];
+      this._attachOne(attachmentPoint, attachment);
+    }
+
+    // @ts-expect-error
+    this.gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle || null);
+  }
+
+  /** Attach one attachment */
+  _attachOne(attachmentPoint: GL, attachment: Attachment): Renderbuffer | Texture2D {
+    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, layer, level);
+      return texture;
+    } else if (attachment instanceof Texture2D) {
+      this._attachTexture(attachmentPoint, attachment, 0, 0);
+      return attachment;
+    }
+  }
+
+  _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 Texture2DArray and Texture3D or face for `TextureCubeMap`
+   * @param level  = 0 - mipmapLevel (must be 0 in WebGL1)
+   */
+  _attachTexture(attachment: GL, texture: Texture2D, layer: number, level: number): void {
+    const {gl} = this;
+    gl.bindTexture(texture.target, texture.handle);
+
+    switch (texture.target) {
+      case GL.TEXTURE_2D_ARRAY:
+      case GL.TEXTURE_3D:
+        const gl2 = assertWebGL2Context(gl);
+        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);
+  }
+
+  /** @note Expects framebuffer to be bound */
+  _setReadBuffer(readBuffer: number): void {
+    const gl2 = getWebGL2Context(this.gl);
+    if (gl2) {
+      gl2.readBuffer(readBuffer);
+    } else {
+      // Setting to color attachment 0 is a noop, so allow it in WebGL1
+      assert(
+        readBuffer === GL.COLOR_ATTACHMENT0 || readBuffer === GL.BACK,
+        ERR_MULTIPLE_RENDERTARGETS
       );
     }
+  }
 
-    if (colorBufferHalfFloat) {
-      supported =
-        supported &&
-        Boolean(
-          // WebGL 2
-          gl.getExtension('EXT_color_buffer_float') ||
-            // WebGL 1
-            gl.getExtension('EXT_color_buffer_half_float')
+  /** @note Expects framebuffer to be bound */
+  _setDrawBuffers(drawBuffers: number[]) {
+    const {gl} = this;
+    const gl2 = assertWebGL2Context(gl);
+    if (gl2) {
+      gl2.drawBuffers(drawBuffers);
+    } else {
+      // TODO - is this not handled by polyfills?
+      const ext = gl.getExtension('WEBGL_draw_buffers');
+      if (ext) {
+        ext.drawBuffersWEBGL(drawBuffers);
+      } else {
+        // Setting a single draw buffer to color attachment 0 is a noop, allow in WebGL1
+        assert(
+          drawBuffers.length === 1 &&
+            (drawBuffers[0] === GL.COLOR_ATTACHMENT0 || drawBuffers[0] === GL.BACK),
+          ERR_MULTIPLE_RENDERTARGETS
         );
+      }
     }
+  }
+
+  // RESOURCE METHODS
 
-    return supported;
+  _createHandle() {
+    return this.gl.createFramebuffer();
   }
 
-  // Create a Framebuffer wrapper for the default framebuffer (target === null)
-  static getDefaultFramebuffer(gl) {
-    gl.luma = gl.luma || {};
-    gl.luma.defaultFramebuffer =
-      gl.luma.defaultFramebuffer ||
+  _deleteHandle() {
+    this.gl.deleteFramebuffer(this.handle);
+  }
+
+  _bindHandle(handle) {
+    return this.gl.bindFramebuffer(GL.FRAMEBUFFER, handle);
+  }
+}
+
+export default class Framebuffer extends ImmutableFramebuffer {
+  width = null;
+  height = null;
+  attachments = {};
+  readBuffer = GL.COLOR_ATTACHMENT0;
+  drawBuffers = [GL.COLOR_ATTACHMENT0];
+  ownResources = [];
+
+  static readonly FRAMEBUFFER_ATTACHMENT_PARAMETERS = [
+    GL.FRAMEBUFFER_ATTACHMENT_OBJECT_NAME, // WebGLRenderbuffer or WebGLTexture
+    GL.FRAMEBUFFER_ATTACHMENT_OBJECT_TYPE, // GL.RENDERBUFFER, GL.TEXTURE, GL.NONE
+    // GL.FRAMEBUFFER_ATTACHMENT_TEXTURE_CUBE_MAP_FACE, // GL.TEXTURE_CUBE_MAP_POSITIVE_X, etc.
+    // GL.FRAMEBUFFER_ATTACHMENT_TEXTURE_LEVEL, // GLint
+    // EXT_sRGB or WebGL2
+    GL.FRAMEBUFFER_ATTACHMENT_COLOR_ENCODING, // GL.LINEAR, GL.SRBG
+    // WebGL2
+    // GL.FRAMEBUFFER_ATTACHMENT_TEXTURE_LAYER, // GLint
+    GL.FRAMEBUFFER_ATTACHMENT_RED_SIZE, // GLint
+    GL.FRAMEBUFFER_ATTACHMENT_GREEN_SIZE, // GLint
+    GL.FRAMEBUFFER_ATTACHMENT_BLUE_SIZE, // GLint
+    GL.FRAMEBUFFER_ATTACHMENT_ALPHA_SIZE, // GLint
+    GL.FRAMEBUFFER_ATTACHMENT_DEPTH_SIZE, // GLint
+    GL.FRAMEBUFFER_ATTACHMENT_STENCIL_SIZE // GLint
+    // GL.FRAMEBUFFER_ATTACHMENT_COMPONENT_TYPE
+    // GL.FLOAT, GL.INT, GL.UNSIGNED_INT, GL.SIGNED_NORMALIZED, OR GL.UNSIGNED_NORMALIZED.
+  ];
+
+  /**
+   * Check color buffer float support
+   * @param options.colorBufferFloat  Whether floating point textures can be rendered and read
+   * @param options.colorBufferHalfFloat Whether half float textures can be rendered and read
+   */
+  static isSupported(gl: WebGLRenderingContext, options: colorBufferFloatOptions): boolean {
+    return isFloatColorBufferSupported(gl, options);
+  }
+
+  /**
+   * returns the default Framebuffer
+   * Creates a Framebuffer object wrapper for the default WebGL framebuffer (target === null)
+   */
+  static getDefaultFramebuffer(gl: WebGLRenderingContext): Framebuffer {
+    const webglDevice = WebGLDevice.fromContext(gl);
+    webglDevice.defaultFramebuffer =
+      webglDevice.defaultFramebuffer ||
       new Framebuffer(gl, {
         id: 'default-framebuffer',
         handle: null,
         attachments: {}
       });
     // TODO - can we query for and get a handle to the GL.FRONT renderbuffer?
-    return gl.luma.defaultFramebuffer;
+    return webglDevice.defaultFramebuffer;
   }
 
-  get MAX_COLOR_ATTACHMENTS() {
+  get MAX_COLOR_ATTACHMENTS(): number {
     const gl2 = assertWebGL2Context(this.gl);
     return gl2.getParameter(gl2.MAX_COLOR_ATTACHMENTS);
   }
 
-  get MAX_DRAW_BUFFERS() {
+  get MAX_DRAW_BUFFERS(): number {
     const gl2 = assertWebGL2Context(this.gl);
     return gl2.getParameter(gl2.MAX_DRAW_BUFFERS);
   }
 
-  constructor(gl, opts = {}) {
-    super(gl, opts);
-
-    // Public members
-    this.width = null;
-    this.height = null;
-    this.attachments = {};
-    this.readBuffer = GL.COLOR_ATTACHMENT0;
-    this.drawBuffers = [GL.COLOR_ATTACHMENT0];
-    this.ownResources = [];
-    this.initialize(opts);
-
+  constructor(gl: WebGLRenderingContext, props?: FramebufferProps) {
+    super(gl, props);
+    this.initialize(props);
     Object.seal(this);
   }
 
@@ -106,17 +329,19 @@ export default class Framebuffer extends Resource {
     );
   }
 
-  initialize({
-    width = 1,
-    height = 1,
-    attachments = null,
-    color = true,
-    depth = true,
-    stencil = false,
-    check = true,
-    readBuffer = undefined,
-    drawBuffers = undefined
-  }) {
+  // initialize(props?: FramebufferProps): this;
+  initialize(props: FramebufferProps) {
+    let {attachments = null} = props || {};
+    const {
+      width = 1,
+      height = 1,
+      color = true,
+      depth = true,
+      stencil = false,
+      check = true,
+      readBuffer = undefined,
+      drawBuffers = undefined
+    } = props || {};
     assert(width >= 0 && height >= 0, 'Width and height need to be integers');
 
     // Store actual width and height for diffing
@@ -144,7 +369,7 @@ export default class Framebuffer extends Resource {
     }
   }
 
-  delete() {
+  delete(): this {
     for (const resource of this.ownResources) {
       resource.delete();
     }
@@ -152,13 +377,22 @@ export default class Framebuffer extends Resource {
     return this;
   }
 
-  update({
-    attachments = {},
-    readBuffer,
-    drawBuffers,
-    clearAttachments = false,
-    resizeAttachments = true
-  }) {
+  update(options: {
+    attachments: Record<string, Attachment>,
+    readBuffer?: number,
+    drawBuffers?,
+    clearAttachments?: boolean,
+    resizeAttachments?: boolean
+  }): this {
+
+    const {
+      attachments = {},
+      readBuffer,
+      drawBuffers,
+      clearAttachments = false,
+      resizeAttachments = true
+    } = options;
+
     this.attach(attachments, {clearAttachments, resizeAttachments});
 
     const {gl} = this;
@@ -166,19 +400,21 @@ export default class Framebuffer extends Resource {
     const prevHandle = gl.bindFramebuffer(GL.FRAMEBUFFER, this.handle);
     if (readBuffer) {
       this._setReadBuffer(readBuffer);
+      this.readBuffer = readBuffer;
     }
     if (drawBuffers) {
       this._setDrawBuffers(drawBuffers);
+      this.drawBuffers = drawBuffers;
     }
-    // @ts-ignore
+    // @ts-expect-error
     gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle || null);
 
     return this;
   }
 
-  // Attachment resize is expected to be a noop if size is same
-  resize(options = {}) {
-    let {width, height} = options;
+  /** Attachment resize is expected to be a noop if size is same */
+  resize(size?: {width?: number; height?: number}): this {
+    let {width, height} = size || {};
     // for default framebuffer, just update the stored size
     if (this.handle === null) {
       assert(width === undefined && height === undefined);
@@ -205,13 +441,13 @@ export default class Framebuffer extends Resource {
     return this;
   }
 
-  // Attach from a map of attachments
+  /** Attach from a map of attachments */
   attach(attachments, {clearAttachments = false, resizeAttachments = true} = {}) {
     const newAttachments = {};
 
     // Any current attachments need to be removed, add null values to map
     if (clearAttachments) {
-      Object.keys(this.attachments).forEach(key => {
+      Object.keys(this.attachments).forEach((key) => {
         newAttachments[key] = null;
       });
     }
@@ -232,14 +468,9 @@ export default class Framebuffer extends Resource {
       let object = descriptor;
       if (!object) {
         this._unattach(attachment);
-      } else if (object instanceof Renderbuffer) {
-        this._attachRenderbuffer({attachment, renderbuffer: object});
-      } else if (Array.isArray(descriptor)) {
-        const [texture, layer = 0, level = 0] = descriptor;
-        object = texture;
-        this._attachTexture({attachment, texture, layer, level});
       } else {
-        this._attachTexture({attachment, texture: object, layer: 0, level: 0});
+        object = this._attachOne(attachment, object);
+        this.attachments[attachment] = object;
       }
 
       // Resize objects
@@ -248,37 +479,19 @@ export default class Framebuffer extends Resource {
       }
     }
 
-    // @ts-ignore
+    // @ts-expect-error
     this.gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle || null);
 
     // Assign to attachments and remove any nulls to get a clean attachment map
     Object.assign(this.attachments, attachments);
     Object.keys(this.attachments)
-      .filter(key => !this.attachments[key])
-      .forEach(key => {
+      .filter((key) => !this.attachments[key])
+      .forEach((key) => {
         delete this.attachments[key];
       });
   }
 
-  checkStatus() {
-    const {gl} = this;
-    const status = this.getStatus();
-    if (status !== gl.FRAMEBUFFER_COMPLETE) {
-      throw new Error(_getFrameBufferStatus(status));
-    }
-    return this;
-  }
-
-  getStatus() {
-    const {gl} = this;
-    const prevHandle = gl.bindFramebuffer(GL.FRAMEBUFFER, this.handle);
-    const status = gl.checkFramebufferStatus(GL.FRAMEBUFFER);
-    // @ts-ignore
-    gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle || null);
-    return status;
-  }
-
-  clear(options = {}) {
+  clear(options?: {color?: any; depth?: any; stencil?: any; drawBuffers?: any[]}): this {
     const {color, depth, stencil, drawBuffers = []} = options;
 
     // Bind framebuffer and delegate to global clear functions
@@ -292,66 +505,12 @@ export default class Framebuffer extends Resource {
       clearBuffer(this.gl, {drawBuffer, value});
     });
 
-    // @ts-ignore
+    // @ts-expect-error
     this.gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle || null);
 
     return this;
   }
 
-  // NOTE: Slow requires roundtrip to GPU
-  // App can provide pixelArray or have it auto allocated by this method
-  // @returns {Uint8Array|Uint16Array|FloatArray} - pixel array,
-  //  newly allocated by this method unless provided by app.
-  readPixels(opts = {}) {
-    log.error(
-      'Framebuffer.readPixels() is no logner supported, use readPixelsToArray(framebuffer)'
-    )();
-    return null;
-  }
-
-  // Reads data into provided buffer object asynchronously
-  // This function doesn't wait for copy to be complete, it programs GPU to perform a DMA transffer.
-  readPixelsToBuffer(opts = {}) {
-    log.error(
-      'Framebuffer.readPixelsToBuffer()is no logner supported, use readPixelsToBuffer(framebuffer)'
-    )();
-    return null;
-  }
-
-  // Reads pixels as a dataUrl
-  copyToDataUrl(opts = {}) {
-    log.error(
-      'Framebuffer.copyToDataUrl() is no logner supported, use copyToDataUrl(framebuffer)'
-    )();
-    return null;
-  }
-
-  // Reads pixels into an HTML Image
-  copyToImage(opts = {}) {
-    log.error('Framebuffer.copyToImage() is no logner supported, use copyToImage(framebuffer)')();
-    return null;
-  }
-
-  // copyToFramebuffer({width, height}) {
-  //   const scaleX = width / this.width;
-  //   const scaleY = height / this.height;
-  //   const scale = Math.min(scaleX, scaleY);
-  //   width = width * scale;
-  //   height = height * scale;
-  //   const scaledFramebuffer = new Framebuffer(this.gl, {width, height});
-  //   this.blit();
-  // }
-
-  // Copy a rectangle from a framebuffer attachment into a texture (at an offset)
-  // NOTE: assumes texture has enough storage allocated
-  // eslint-disable-next-line complexity
-  copyToTexture(opts = {}) {
-    log.error(
-      'Framebuffer.copyToTexture({...}) is no logner supported, use copyToTexture(source, target, opts})'
-    )();
-    return null;
-  }
-
   // WEBGL2 INTERFACE
 
   // Copies a rectangle of pixels between framebuffers
@@ -362,7 +521,8 @@ export default class Framebuffer extends Resource {
   }
 
   // signals to the GL that it need not preserve all pixels of a specified region of the framebuffer
-  invalidate({attachments = [], x = 0, y = 0, width, height}) {
+  invalidate(options: {attachments: []; x?: number; y?: number; width: number; height: number}) {
+    const {attachments = [], x = 0, y = 0, width, height} = options;
     const gl2 = assertWebGL2Context(this.gl);
     const prevHandle = gl2.bindFramebuffer(GL.READ_FRAMEBUFFER, this.handle);
     const invalidateAll = x === 0 && y === 0 && width === undefined && height === undefined;
@@ -370,10 +530,10 @@ export default class Framebuffer extends Resource {
       gl2.invalidateFramebuffer(GL.READ_FRAMEBUFFER, attachments);
     } else {
       // TODO - why does type checking fail on this line
-      // @ts-ignore
+      // @ts-expect-error
       gl2.invalidateFramebuffer(GL.READ_FRAMEBUFFER, attachments, x, y, width, height);
     }
-    // @ts-ignore
+    // @ts-expect-error
     gl2.bindFramebuffer(GL.READ_FRAMEBUFFER, prevHandle);
     return this;
   }
@@ -388,7 +548,7 @@ export default class Framebuffer extends Resource {
       this.gl.bindFramebuffer(GL.FRAMEBUFFER, null);
     }
     if (keys && value > 1000) {
-      // @ts-ignore
+      // @ts-expect-error
       value = getKey(this.gl, value);
     }
     return value;
@@ -397,7 +557,7 @@ export default class Framebuffer extends Resource {
   getAttachmentParameters(
     attachment = GL.COLOR_ATTACHMENT0,
     keys,
-    // @ts-ignore
+    // @ts-expect-error
     parameters = this.constructor.ATTACHMENT_PARAMETERS || []
   ) {
     const values = {};
@@ -408,6 +568,7 @@ export default class Framebuffer extends Resource {
     return values;
   }
 
+  // @ts-expect-error
   getParameters(keys = true) {
     const attachments = Object.keys(this.attachments);
     // if (this === this.gl.luma.defaultFramebuffer) {
@@ -422,37 +583,6 @@ export default class Framebuffer extends Resource {
     return parameters;
   }
 
-  // DEBUG
-
-  // Note: Will only work when called in an event handler
-  show() {
-    if (typeof window !== 'undefined') {
-      window.open(copyToDataUrl(this), 'luma-debug-texture');
-    }
-    return this;
-  }
-
-  log(logLevel = 0, message = '') {
-    if (logLevel > log.level || typeof window === 'undefined') {
-      return this;
-    }
-    message = message || `Framebuffer ${this.id}`;
-    const image = copyToDataUrl(this, {targetMaxHeight: 100});
-    log.image({logLevel, message, image}, message)();
-    return this;
-  }
-
-  // WEBGL INTERFACE
-  bind({target = GL.FRAMEBUFFER} = {}) {
-    this.gl.bindFramebuffer(target, this.handle);
-    return this;
-  }
-
-  unbind({target = GL.FRAMEBUFFER} = {}) {
-    this.gl.bindFramebuffer(target, null);
-    return this;
-  }
-
   // PRIVATE METHODS
 
   _createDefaultAttachments(color, depth, stencil, width, height) {
@@ -541,126 +671,36 @@ export default class Framebuffer extends Resource {
     delete this.attachments[attachment];
   }
 
-  _attachRenderbuffer({attachment = GL.COLOR_ATTACHMENT0, renderbuffer}) {
-    const {gl} = this;
-    // TODO - is the bind needed?
-    // gl.bindRenderbuffer(GL.RENDERBUFFER, renderbuffer.handle);
-    gl.framebufferRenderbuffer(GL.FRAMEBUFFER, attachment, GL.RENDERBUFFER, renderbuffer.handle);
-    // TODO - is the unbind needed?
-    // gl.bindRenderbuffer(GL.RENDERBUFFER, null);
-
-    this.attachments[attachment] = renderbuffer;
-  }
-
-  // layer = 0 - index into Texture2DArray and Texture3D or face for `TextureCubeMap`
-  // level = 0 - mipmapLevel (must be 0 in WebGL1)
-  _attachTexture({attachment = GL.COLOR_ATTACHMENT0, texture, layer, level}) {
-    const {gl} = this;
-    gl.bindTexture(texture.target, texture.handle);
-
-    switch (texture.target) {
-      case GL.TEXTURE_2D_ARRAY:
-      case GL.TEXTURE_3D:
-        const gl2 = assertWebGL2Context(gl);
-        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);
-    this.attachments[attachment] = texture;
-  }
-
-  // Expects framebuffer to be bound
-  _setReadBuffer(readBuffer) {
-    const gl2 = getWebGL2Context(this.gl);
-    if (gl2) {
-      gl2.readBuffer(readBuffer);
-    } else {
-      // Setting to color attachment 0 is a noop, so allow it in WebGL1
-      assert(
-        readBuffer === GL.COLOR_ATTACHMENT0 || readBuffer === GL.BACK,
-        ERR_MULTIPLE_RENDERTARGETS
-      );
-    }
-    this.readBuffer = readBuffer;
-  }
-
-  // Expects framebuffer to be bound
-  _setDrawBuffers(drawBuffers) {
-    const {gl} = this;
-    const gl2 = assertWebGL2Context(gl);
-    if (gl2) {
-      gl2.drawBuffers(drawBuffers);
-    } else {
-      // TODO - is this not handled by polyfills?
-      const ext = gl.getExtension('WEBGL_draw_buffers');
-      if (ext) {
-        ext.drawBuffersWEBGL(drawBuffers);
-      } else {
-        // Setting a single draw buffer to color attachment 0 is a noop, allow in WebGL1
-        assert(
-          drawBuffers.length === 1 &&
-            (drawBuffers[0] === GL.COLOR_ATTACHMENT0 || drawBuffers[0] === GL.BACK),
-          ERR_MULTIPLE_RENDERTARGETS
-        );
-      }
-    }
-    this.drawBuffers = drawBuffers;
-  }
-
-  // Attempt to provide workable defaults for WebGL2 symbols under WebGL1
-  // null means OK to query
-  // TODO - move to webgl1 polyfills
-  /* eslint-disable complexity */
+  /**
+   * Attempt to provide workable defaults for WebGL2 symbols under WebGL1
+   * null means OK to query
+   * TODO - move to webgl1 polyfills
+   * @param pname 
+   * @returns 
+   */
+  // eslint-disable-next-line complexity
   _getAttachmentParameterFallback(pname) {
-    const caps = getFeatures(this.gl);
+    const webglDevice = WebGLDevice.fromContext(this.gl);
+    const features = webglDevice.features;
 
     switch (pname) {
       case GL.FRAMEBUFFER_ATTACHMENT_TEXTURE_LAYER: // GLint
-        return !caps.WEBGL2 ? 0 : null;
+        return !features.has('webgl2') ? 0 : null;
       case GL.FRAMEBUFFER_ATTACHMENT_RED_SIZE: // GLint
       case GL.FRAMEBUFFER_ATTACHMENT_GREEN_SIZE: // GLint
       case GL.FRAMEBUFFER_ATTACHMENT_BLUE_SIZE: // GLint
       case GL.FRAMEBUFFER_ATTACHMENT_ALPHA_SIZE: // GLint
       case GL.FRAMEBUFFER_ATTACHMENT_DEPTH_SIZE: // GLint
       case GL.FRAMEBUFFER_ATTACHMENT_STENCIL_SIZE: // GLint
-        return !caps.WEBGL2 ? 8 : null;
+        return !features.has('webgl2') ? 8 : null;
       case GL.FRAMEBUFFER_ATTACHMENT_COMPONENT_TYPE: // GLenum
-        return !caps.WEBGL2 ? GL.UNSIGNED_INT : null;
+        return !features.has('webgl2') ? GL.UNSIGNED_INT : null;
       case GL.FRAMEBUFFER_ATTACHMENT_COLOR_ENCODING:
-        return !caps.WEBGL2 && !caps.EXT_sRGB ? GL.LINEAR : null;
+        return !features.has('webgl2') && !features.has('webgl-color-encoding-srgb') ? GL.LINEAR : null;
       default:
         return null;
     }
   }
-  /* eslint-enable complexity */
-
-  // RESOURCE METHODS
-
-  _createHandle() {
-    return this.gl.createFramebuffer();
-  }
-
-  _deleteHandle() {
-    this.gl.deleteFramebuffer(this.handle);
-  }
-
-  _bindHandle(handle) {
-    return this.gl.bindFramebuffer(GL.FRAMEBUFFER, handle);
-  }
 }
 
 // PUBLIC METHODS
@@ -676,28 +716,48 @@ function mapIndexToCubeMapFace(layer) {
 // Get a string describing the framebuffer error if installed
 function _getFrameBufferStatus(status) {
   // Use error mapping if installed
-  // @ts-ignore
+  // @ts-expect-error
   const STATUS = Framebuffer.STATUS || {};
   return STATUS[status] || `Framebuffer error ${status}`;
 }
 
-export const FRAMEBUFFER_ATTACHMENT_PARAMETERS = [
-  GL.FRAMEBUFFER_ATTACHMENT_OBJECT_NAME, // WebGLRenderbuffer or WebGLTexture
-  GL.FRAMEBUFFER_ATTACHMENT_OBJECT_TYPE, // GL.RENDERBUFFER, GL.TEXTURE, GL.NONE
-  // GL.FRAMEBUFFER_ATTACHMENT_TEXTURE_CUBE_MAP_FACE, // GL.TEXTURE_CUBE_MAP_POSITIVE_X, etc.
-  // GL.FRAMEBUFFER_ATTACHMENT_TEXTURE_LEVEL, // GLint
-  // EXT_sRGB or WebGL2
-  GL.FRAMEBUFFER_ATTACHMENT_COLOR_ENCODING, // GL.LINEAR, GL.SRBG
-  // WebGL2
-  // GL.FRAMEBUFFER_ATTACHMENT_TEXTURE_LAYER, // GLint
-  GL.FRAMEBUFFER_ATTACHMENT_RED_SIZE, // GLint
-  GL.FRAMEBUFFER_ATTACHMENT_GREEN_SIZE, // GLint
-  GL.FRAMEBUFFER_ATTACHMENT_BLUE_SIZE, // GLint
-  GL.FRAMEBUFFER_ATTACHMENT_ALPHA_SIZE, // GLint
-  GL.FRAMEBUFFER_ATTACHMENT_DEPTH_SIZE, // GLint
-  GL.FRAMEBUFFER_ATTACHMENT_STENCIL_SIZE // GLint
-  // GL.FRAMEBUFFER_ATTACHMENT_COMPONENT_TYPE
-  // GL.FLOAT, GL.INT, GL.UNSIGNED_INT, GL.SIGNED_NORMALIZED, OR GL.UNSIGNED_NORMALIZED.
-];
-
-Framebuffer.ATTACHMENT_PARAMETERS = FRAMEBUFFER_ATTACHMENT_PARAMETERS;
+/**
+ * Support
+ * @param gl
+ * @param options.colorBufferFloat  Whether floating point textures can be rendered and read
+ * @param options.colorBufferHalfFloat Whether half float textures can be rendered and read
+ */
+function isFloatColorBufferSupported(
+  gl: WebGLRenderingContext,
+  options: {colorBufferFloat?: boolean; colorBufferHalfFloat?: boolean}
+): boolean {
+  const {
+    colorBufferFloat, // Whether floating point textures can be rendered and read
+    colorBufferHalfFloat // Whether half float textures can be rendered and read
+  } = options;
+  let supported = true;
+
+  if (colorBufferFloat) {
+    supported = Boolean(
+      // WebGL 2
+      gl.getExtension('EXT_color_buffer_float') ||
+        // WebGL 1, not exposed on all platforms
+        gl.getExtension('WEBGL_color_buffer_float') ||
+        // WebGL 1, implicitly enables float render targets https://www.khronos.org/registry/webgl/extensions/OES_texture_float/
+        gl.getExtension('OES_texture_float')
+    );
+  }
+
+  if (colorBufferHalfFloat) {
+    supported =
+      supported &&
+      Boolean(
+        // WebGL 2
+        gl.getExtension('EXT_color_buffer_float') ||
+          // WebGL 1
+          gl.getExtension('EXT_color_buffer_half_float')
+      );
+  }
+
+  return supported;
+}