@luma.gl/webgl 8.5.7 → 8.6.0-alpha.1

package/dist/classes/framebuffer.js

@@ -0,0 +1,656 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import GL from '@luma.gl/constants';
+import { getWebGL2Context, assertWebGL2Context, log } from '@luma.gl/gltools';
+import Resource from './webgl-resource';
+import Texture2D from './texture-2d';
+import Renderbuffer from './renderbuffer';
+import { clear, clearBuffer } from './clear';
+import { copyToDataUrl } from './copy-and-blit';
+import { getLumaContextData } from '../context/luma-context-data';
+import { getFeatures } from '../features';
+import { getKey } from '../webgl-utils';
+import { assert } from '../utils';
+const ERR_MULTIPLE_RENDERTARGETS = 'Multiple render targets not supported';
+export class ImmutableFramebuffer extends Resource {
+  constructor(gl, props) {
+    super(gl, props, {});
+
+    this._initialize({
+      attachments: (props === null || props === void 0 ? void 0 : props.attachments) || {},
+      readBuffer: props === null || props === void 0 ? void 0 : props.readBuffer,
+      drawBuffers: props === null || props === void 0 ? void 0 : props.drawBuffers
+    });
+  }
+
+  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);
+    gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle || null);
+    return status;
+  }
+
+  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 ".concat(this.id);
+    const image = copyToDataUrl(this, {
+      targetMaxHeight: 100
+    });
+    log.image({
+      logLevel,
+      message,
+      image
+    }, message)();
+    return this;
+  }
+
+  bind({
+    target = GL.FRAMEBUFFER
+  } = {}) {
+    this.gl.bindFramebuffer(target, this.handle);
+    return this;
+  }
+
+  unbind({
+    target = GL.FRAMEBUFFER
+  } = {}) {
+    this.gl.bindFramebuffer(target, null);
+    return this;
+  }
+
+  _initialize(options) {
+    const {
+      attachments = {},
+      readBuffer,
+      drawBuffers
+    } = options;
+
+    this._attach(attachments);
+
+    const prevHandle = this.gl.bindFramebuffer(GL.FRAMEBUFFER, this.handle);
+
+    if (readBuffer) {
+      this._setReadBuffer(readBuffer);
+    }
+
+    if (drawBuffers) {
+      this._setDrawBuffers(drawBuffers);
+    }
+
+    this.gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle || null);
+    return this;
+  }
+
+  _attach(attachments) {
+    const prevHandle = this.gl.bindFramebuffer(GL.FRAMEBUFFER, this.handle);
+
+    for (const key in attachments) {
+      assert(key !== undefined, 'Misspelled framebuffer binding point?');
+      const attachmentPoint = Number(key);
+      const attachment = attachments[attachmentPoint];
+
+      this._attachOne(attachmentPoint, attachment);
+    }
+
+    this.gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle || null);
+  }
+
+  _attachOne(attachmentPoint, attachment) {
+    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, renderbuffer) {
+    this.gl.framebufferRenderbuffer(GL.FRAMEBUFFER, attachment, GL.RENDERBUFFER, renderbuffer.handle);
+  }
+
+  _attachTexture(attachment, 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:
+        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);
+  }
+
+  _setReadBuffer(readBuffer) {
+    const gl2 = getWebGL2Context(this.gl);
+
+    if (gl2) {
+      gl2.readBuffer(readBuffer);
+    } else {
+      assert(readBuffer === GL.COLOR_ATTACHMENT0 || readBuffer === GL.BACK, ERR_MULTIPLE_RENDERTARGETS);
+    }
+  }
+
+  _setDrawBuffers(drawBuffers) {
+    const {
+      gl
+    } = this;
+    const gl2 = assertWebGL2Context(gl);
+
+    if (gl2) {
+      gl2.drawBuffers(drawBuffers);
+    } else {
+      const ext = gl.getExtension('WEBGL_draw_buffers');
+
+      if (ext) {
+        ext.drawBuffersWEBGL(drawBuffers);
+      } else {
+        assert(drawBuffers.length === 1 && (drawBuffers[0] === GL.COLOR_ATTACHMENT0 || drawBuffers[0] === GL.BACK), ERR_MULTIPLE_RENDERTARGETS);
+      }
+    }
+  }
+
+  _createHandle() {
+    return this.gl.createFramebuffer();
+  }
+
+  _deleteHandle() {
+    this.gl.deleteFramebuffer(this.handle);
+  }
+
+  _bindHandle(handle) {
+    return this.gl.bindFramebuffer(GL.FRAMEBUFFER, handle);
+  }
+
+}
+export default class Framebuffer extends ImmutableFramebuffer {
+  static isSupported(gl, options) {
+    return isFloatColorBufferSupported(gl, options);
+  }
+
+  static getDefaultFramebuffer(gl) {
+    const lumaContextData = getLumaContextData(gl);
+    lumaContextData.defaultFramebuffer = lumaContextData.defaultFramebuffer || new Framebuffer(gl, {
+      id: 'default-framebuffer',
+      handle: null,
+      attachments: {}
+    });
+    return lumaContextData.defaultFramebuffer;
+  }
+
+  get MAX_COLOR_ATTACHMENTS() {
+    const gl2 = assertWebGL2Context(this.gl);
+    return gl2.getParameter(gl2.MAX_COLOR_ATTACHMENTS);
+  }
+
+  get MAX_DRAW_BUFFERS() {
+    const gl2 = assertWebGL2Context(this.gl);
+    return gl2.getParameter(gl2.MAX_DRAW_BUFFERS);
+  }
+
+  constructor(gl, props) {
+    super(gl, props);
+
+    _defineProperty(this, "width", null);
+
+    _defineProperty(this, "height", null);
+
+    _defineProperty(this, "attachments", {});
+
+    _defineProperty(this, "readBuffer", GL.COLOR_ATTACHMENT0);
+
+    _defineProperty(this, "drawBuffers", [GL.COLOR_ATTACHMENT0]);
+
+    _defineProperty(this, "ownResources", []);
+
+    this.initialize(props);
+    Object.seal(this);
+  }
+
+  get color() {
+    return this.attachments[GL.COLOR_ATTACHMENT0] || null;
+  }
+
+  get texture() {
+    return this.attachments[GL.COLOR_ATTACHMENT0] || null;
+  }
+
+  get depth() {
+    return this.attachments[GL.DEPTH_ATTACHMENT] || this.attachments[GL.DEPTH_STENCIL_ATTACHMENT] || null;
+  }
+
+  get stencil() {
+    return this.attachments[GL.STENCIL_ATTACHMENT] || this.attachments[GL.DEPTH_STENCIL_ATTACHMENT] || null;
+  }
+
+  initialize(props) {
+    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');
+    this.width = width;
+    this.height = height;
+
+    if (attachments) {
+      for (const attachment in attachments) {
+        const target = attachments[attachment];
+        const object = Array.isArray(target) ? target[0] : target;
+        object.resize({
+          width,
+          height
+        });
+      }
+    } else {
+      attachments = this._createDefaultAttachments(color, depth, stencil, width, height);
+    }
+
+    this.update({
+      clearAttachments: true,
+      attachments,
+      readBuffer,
+      drawBuffers
+    });
+
+    if (attachments && check) {
+      this.checkStatus();
+    }
+  }
+
+  delete() {
+    for (const resource of this.ownResources) {
+      resource.delete();
+    }
+
+    super.delete();
+    return this;
+  }
+
+  update(options) {
+    const {
+      attachments = {},
+      readBuffer,
+      drawBuffers,
+      clearAttachments = false,
+      resizeAttachments = true
+    } = options;
+    this.attach(attachments, {
+      clearAttachments,
+      resizeAttachments
+    });
+    const {
+      gl
+    } = this;
+    const prevHandle = gl.bindFramebuffer(GL.FRAMEBUFFER, this.handle);
+
+    if (readBuffer) {
+      this._setReadBuffer(readBuffer);
+
+      this.readBuffer = readBuffer;
+    }
+
+    if (drawBuffers) {
+      this._setDrawBuffers(drawBuffers);
+
+      this.drawBuffers = drawBuffers;
+    }
+
+    gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle || null);
+    return this;
+  }
+
+  resize(size) {
+    let {
+      width,
+      height
+    } = 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 ".concat(this.id, " to ").concat(width, "x").concat(height))();
+    }
+
+    for (const attachmentPoint in this.attachments) {
+      this.attachments[attachmentPoint].resize({
+        width,
+        height
+      });
+    }
+
+    this.width = width;
+    this.height = height;
+    return this;
+  }
+
+  attach(attachments, {
+    clearAttachments = false,
+    resizeAttachments = true
+  } = {}) {
+    const newAttachments = {};
+
+    if (clearAttachments) {
+      Object.keys(this.attachments).forEach(key => {
+        newAttachments[key] = null;
+      });
+    }
+
+    Object.assign(newAttachments, attachments);
+    const prevHandle = this.gl.bindFramebuffer(GL.FRAMEBUFFER, this.handle);
+
+    for (const key in newAttachments) {
+      assert(key !== undefined, 'Misspelled framebuffer binding point?');
+      const attachment = Number(key);
+      const descriptor = newAttachments[attachment];
+      let object = descriptor;
+
+      if (!object) {
+        this._unattach(attachment);
+      } else {
+        object = this._attachOne(attachment, object);
+        this.attachments[attachment] = object;
+      }
+
+      if (resizeAttachments && object) {
+        object.resize({
+          width: this.width,
+          height: this.height
+        });
+      }
+    }
+
+    this.gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle || null);
+    Object.assign(this.attachments, attachments);
+    Object.keys(this.attachments).filter(key => !this.attachments[key]).forEach(key => {
+      delete this.attachments[key];
+    });
+  }
+
+  clear(options) {
+    const {
+      color,
+      depth,
+      stencil,
+      drawBuffers = []
+    } = options;
+    const prevHandle = this.gl.bindFramebuffer(GL.FRAMEBUFFER, this.handle);
+
+    if (color || depth || stencil) {
+      clear(this.gl, {
+        color,
+        depth,
+        stencil
+      });
+    }
+
+    drawBuffers.forEach((value, drawBuffer) => {
+      clearBuffer(this.gl, {
+        drawBuffer,
+        value
+      });
+    });
+    this.gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle || null);
+    return this;
+  }
+
+  blit(opts = {}) {
+    log.error('Framebuffer.blit({...}) is no logner supported, use blit(source, target, opts)')();
+    return null;
+  }
+
+  invalidate(options) {
+    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;
+
+    if (invalidateAll) {
+      gl2.invalidateFramebuffer(GL.READ_FRAMEBUFFER, attachments);
+    } else {
+      gl2.invalidateFramebuffer(GL.READ_FRAMEBUFFER, attachments, x, y, width, height);
+    }
+
+    gl2.bindFramebuffer(GL.READ_FRAMEBUFFER, prevHandle);
+    return this;
+  }
+
+  getAttachmentParameter(attachment, pname, keys) {
+    let value = this._getAttachmentParameterFallback(pname);
+
+    if (value === null) {
+      this.gl.bindFramebuffer(GL.FRAMEBUFFER, this.handle);
+      value = this.gl.getFramebufferAttachmentParameter(GL.FRAMEBUFFER, attachment, pname);
+      this.gl.bindFramebuffer(GL.FRAMEBUFFER, null);
+    }
+
+    if (keys && value > 1000) {
+      value = getKey(this.gl, value);
+    }
+
+    return value;
+  }
+
+  getAttachmentParameters(attachment = GL.COLOR_ATTACHMENT0, keys, parameters = this.constructor.ATTACHMENT_PARAMETERS || []) {
+    const values = {};
+
+    for (const pname of parameters) {
+      const key = keys ? getKey(this.gl, pname) : pname;
+      values[key] = this.getAttachmentParameter(attachment, pname, keys);
+    }
+
+    return values;
+  }
+
+  getParameters(keys = true) {
+    const attachments = Object.keys(this.attachments);
+    const parameters = {};
+
+    for (const attachmentName of attachments) {
+      const attachment = Number(attachmentName);
+      const key = keys ? getKey(this.gl, attachment) : attachment;
+      parameters[key] = this.getAttachmentParameters(attachment, keys);
+    }
+
+    return parameters;
+  }
+
+  _createDefaultAttachments(color, depth, stencil, width, height) {
+    let defaultAttachments = null;
+
+    if (color) {
+      defaultAttachments = defaultAttachments || {};
+      defaultAttachments[GL.COLOR_ATTACHMENT0] = new Texture2D(this.gl, {
+        id: "".concat(this.id, "-color0"),
+        pixels: null,
+        format: GL.RGBA,
+        type: GL.UNSIGNED_BYTE,
+        width,
+        height,
+        mipmaps: false,
+        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
+        }
+      });
+      this.ownResources.push(defaultAttachments[GL.COLOR_ATTACHMENT0]);
+    }
+
+    if (depth && stencil) {
+      defaultAttachments = defaultAttachments || {};
+      defaultAttachments[GL.DEPTH_STENCIL_ATTACHMENT] = new Renderbuffer(this.gl, {
+        id: "".concat(this.id, "-depth-stencil"),
+        format: GL.DEPTH24_STENCIL8,
+        width,
+        height: 111
+      });
+      this.ownResources.push(defaultAttachments[GL.DEPTH_STENCIL_ATTACHMENT]);
+    } else if (depth) {
+      defaultAttachments = defaultAttachments || {};
+      defaultAttachments[GL.DEPTH_ATTACHMENT] = new Renderbuffer(this.gl, {
+        id: "".concat(this.id, "-depth"),
+        format: GL.DEPTH_COMPONENT16,
+        width,
+        height
+      });
+      this.ownResources.push(defaultAttachments[GL.DEPTH_ATTACHMENT]);
+    } else if (stencil) {
+      assert(false);
+    }
+
+    return defaultAttachments;
+  }
+
+  _unattach(attachment) {
+    const oldAttachment = this.attachments[attachment];
+
+    if (!oldAttachment) {
+      return;
+    }
+
+    if (oldAttachment instanceof Renderbuffer) {
+      this.gl.framebufferRenderbuffer(GL.FRAMEBUFFER, attachment, GL.RENDERBUFFER, null);
+    } else {
+      this.gl.framebufferTexture2D(GL.FRAMEBUFFER, attachment, GL.TEXTURE_2D, null, 0);
+    }
+
+    delete this.attachments[attachment];
+  }
+
+  _getAttachmentParameterFallback(pname) {
+    const caps = getFeatures(this.gl);
+
+    switch (pname) {
+      case GL.FRAMEBUFFER_ATTACHMENT_TEXTURE_LAYER:
+        return !caps.WEBGL2 ? 0 : null;
+
+      case GL.FRAMEBUFFER_ATTACHMENT_RED_SIZE:
+      case GL.FRAMEBUFFER_ATTACHMENT_GREEN_SIZE:
+      case GL.FRAMEBUFFER_ATTACHMENT_BLUE_SIZE:
+      case GL.FRAMEBUFFER_ATTACHMENT_ALPHA_SIZE:
+      case GL.FRAMEBUFFER_ATTACHMENT_DEPTH_SIZE:
+      case GL.FRAMEBUFFER_ATTACHMENT_STENCIL_SIZE:
+        return !caps.WEBGL2 ? 8 : null;
+
+      case GL.FRAMEBUFFER_ATTACHMENT_COMPONENT_TYPE:
+        return !caps.WEBGL2 ? GL.UNSIGNED_INT : null;
+
+      case GL.FRAMEBUFFER_ATTACHMENT_COLOR_ENCODING:
+        return !caps.WEBGL2 && !caps.EXT_sRGB ? GL.LINEAR : null;
+
+      default:
+        return null;
+    }
+  }
+
+}
+
+_defineProperty(Framebuffer, "FRAMEBUFFER_ATTACHMENT_PARAMETERS", [GL.FRAMEBUFFER_ATTACHMENT_OBJECT_NAME, GL.FRAMEBUFFER_ATTACHMENT_OBJECT_TYPE, GL.FRAMEBUFFER_ATTACHMENT_COLOR_ENCODING, GL.FRAMEBUFFER_ATTACHMENT_RED_SIZE, GL.FRAMEBUFFER_ATTACHMENT_GREEN_SIZE, GL.FRAMEBUFFER_ATTACHMENT_BLUE_SIZE, GL.FRAMEBUFFER_ATTACHMENT_ALPHA_SIZE, GL.FRAMEBUFFER_ATTACHMENT_DEPTH_SIZE, GL.FRAMEBUFFER_ATTACHMENT_STENCIL_SIZE]);
+
+function mapIndexToCubeMapFace(layer) {
+  return layer < GL.TEXTURE_CUBE_MAP_POSITIVE_X ? layer + GL.TEXTURE_CUBE_MAP_POSITIVE_X : layer;
+}
+
+function _getFrameBufferStatus(status) {
+  const STATUS = Framebuffer.STATUS || {};
+  return STATUS[status] || "Framebuffer error ".concat(status);
+}
+
+function isFloatColorBufferSupported(gl, options) {
+  const {
+    colorBufferFloat,
+    colorBufferHalfFloat
+  } = options;
+  let supported = true;
+
+  if (colorBufferFloat) {
+    supported = Boolean(gl.getExtension('EXT_color_buffer_float') || gl.getExtension('WEBGL_color_buffer_float') || gl.getExtension('OES_texture_float'));
+  }
+
+  if (colorBufferHalfFloat) {
+    supported = supported && Boolean(gl.getExtension('EXT_color_buffer_float') || gl.getExtension('EXT_color_buffer_half_float'));
+  }
+
+  return supported;
+}
+//# sourceMappingURL=framebuffer.js.map