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

package/dist/es5/classes/framebuffer.js

@@ -7,644 +7,775 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.ImmutableFramebuffer = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 
-var _constants = _interopRequireDefault(require("@luma.gl/constants"));
+var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
 
-var _gltools = require("@luma.gl/gltools");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _webglResource = _interopRequireDefault(require("./webgl-resource"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _texture2d = _interopRequireDefault(require("./texture-2d"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
-var _renderbuffer = _interopRequireDefault(require("./renderbuffer"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
-var _clear = require("./clear");
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
-var _copyAndBlit = require("./copy-and-blit");
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 
-var _lumaContextData = require("../context/luma-context-data");
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _features = require("../features");
+var _api = require("@luma.gl/api");
 
-var _webglUtils = require("../webgl-utils");
+var _constants = _interopRequireDefault(require("@luma.gl/constants"));
 
-var _utils = require("../utils");
+var _webglDevice = _interopRequireDefault(require("../adapter/webgl-device"));
 
-const ERR_MULTIPLE_RENDERTARGETS = 'Multiple render targets not supported';
+var _webglChecks = require("../context/context/webgl-checks");
 
-class ImmutableFramebuffer extends _webglResource.default {
-  constructor(gl, props) {
-    super(gl, props, {});
+var _constantsToKeys = require("../webgl-utils/constants-to-keys");
 
-    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
-    });
-  }
+var _webglResource = _interopRequireDefault(require("./webgl-resource"));
 
-  checkStatus() {
-    const {
-      gl
-    } = this;
-    const status = this.getStatus();
+var _texture2d = _interopRequireDefault(require("./texture-2d"));
 
-    if (status !== gl.FRAMEBUFFER_COMPLETE) {
-      throw new Error(_getFrameBufferStatus(status));
-    }
+var _renderbuffer = _interopRequireDefault(require("./renderbuffer"));
 
-    return this;
-  }
+var _clear2 = require("./clear");
 
-  getStatus() {
-    const {
-      gl
-    } = this;
-    const prevHandle = gl.bindFramebuffer(_constants.default.FRAMEBUFFER, this.handle);
-    const status = gl.checkFramebufferStatus(_constants.default.FRAMEBUFFER);
-    gl.bindFramebuffer(_constants.default.FRAMEBUFFER, prevHandle || null);
-    return status;
-  }
+var _copyAndBlit = require("./copy-and-blit");
 
-  show() {
-    if (typeof window !== 'undefined') {
-      window.open((0, _copyAndBlit.copyToDataUrl)(this), 'luma-debug-texture');
-    }
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 
-    return this;
-  }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
-  log(logLevel = 0, message = '') {
-    if (logLevel > _gltools.log.level || typeof window === 'undefined') {
-      return this;
-    }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-    message = message || "Framebuffer ".concat(this.id);
-    const image = (0, _copyAndBlit.copyToDataUrl)(this, {
-      targetMaxHeight: 100
-    });
-
-    _gltools.log.image({
-      logLevel,
-      message,
-      image
-    }, message)();
-
-    return this;
-  }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
-  bind({
-    target = _constants.default.FRAMEBUFFER
-  } = {}) {
-    this.gl.bindFramebuffer(target, this.handle);
-    return this;
-  }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-  unbind({
-    target = _constants.default.FRAMEBUFFER
-  } = {}) {
-    this.gl.bindFramebuffer(target, null);
-    return this;
-  }
+var ERR_MULTIPLE_RENDERTARGETS = 'Multiple render targets not supported';
 
-  _initialize(options) {
-    const {
-      attachments = {},
-      readBuffer,
-      drawBuffers
-    } = options;
+var ImmutableFramebuffer = function (_Resource) {
+  (0, _inherits2.default)(ImmutableFramebuffer, _Resource);
 
-    this._attach(attachments);
+  var _super = _createSuper(ImmutableFramebuffer);
 
-    const prevHandle = this.gl.bindFramebuffer(_constants.default.FRAMEBUFFER, this.handle);
+  function ImmutableFramebuffer(gl, props) {
+    var _this;
 
-    if (readBuffer) {
-      this._setReadBuffer(readBuffer);
-    }
+    (0, _classCallCheck2.default)(this, ImmutableFramebuffer);
+    _this = _super.call(this, _webglDevice.default.attach(gl), props, {});
 
-    if (drawBuffers) {
-      this._setDrawBuffers(drawBuffers);
-    }
+    _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
+    });
 
-    this.gl.bindFramebuffer(_constants.default.FRAMEBUFFER, prevHandle || null);
-    return this;
+    return _this;
   }
 
-  _attach(attachments) {
-    const prevHandle = this.gl.bindFramebuffer(_constants.default.FRAMEBUFFER, this.handle);
+  (0, _createClass2.default)(ImmutableFramebuffer, [{
+    key: "checkStatus",
+    value: function checkStatus() {
+      var gl = this.gl;
+      var status = this.getStatus();
 
-    for (const key in attachments) {
-      (0, _utils.assert)(key !== undefined, 'Misspelled framebuffer binding point?');
-      const attachmentPoint = Number(key);
-      const attachment = attachments[attachmentPoint];
+      if (status !== gl.FRAMEBUFFER_COMPLETE) {
+        throw new Error(_getFrameBufferStatus(status));
+      }
 
-      this._attachOne(attachmentPoint, attachment);
+      return this;
     }
+  }, {
+    key: "getStatus",
+    value: function getStatus() {
+      var gl = this.gl;
+      var prevHandle = gl.bindFramebuffer(_constants.default.FRAMEBUFFER, this.handle);
+      var status = gl.checkFramebufferStatus(_constants.default.FRAMEBUFFER);
+      gl.bindFramebuffer(_constants.default.FRAMEBUFFER, prevHandle || null);
+      return status;
+    }
+  }, {
+    key: "show",
+    value: function show() {
+      if (typeof window !== 'undefined') {
+        window.open((0, _copyAndBlit.copyToDataUrl)(this), 'luma-debug-texture');
+      }
 
-    this.gl.bindFramebuffer(_constants.default.FRAMEBUFFER, prevHandle || null);
-  }
+      return this;
+    }
+  }, {
+    key: "log",
+    value: function log() {
+      var logLevel = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      var message = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
 
-  _attachOne(attachmentPoint, attachment) {
-    if (attachment instanceof _renderbuffer.default) {
-      this._attachRenderbuffer(attachmentPoint, attachment);
+      if (logLevel > _api.log.level || typeof window === 'undefined') {
+        return this;
+      }
 
-      return attachment;
-    } else if (Array.isArray(attachment)) {
-      const [texture, layer = 0, level = 0] = attachment;
+      message = message || "Framebuffer ".concat(this.id);
+      var image = (0, _copyAndBlit.copyToDataUrl)(this, {
+        targetMaxHeight: 100
+      });
 
-      this._attachTexture(attachmentPoint, texture, layer, level);
+      _api.log.image({
+        logLevel: logLevel,
+        message: message,
+        image: image
+      })();
 
-      return texture;
-    } else if (attachment instanceof _texture2d.default) {
-      this._attachTexture(attachmentPoint, attachment, 0, 0);
+      return this;
+    }
+  }, {
+    key: "bind",
+    value: function bind() {
+      var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          _ref$target = _ref.target,
+          target = _ref$target === void 0 ? _constants.default.FRAMEBUFFER : _ref$target;
 
-      return attachment;
+      this.gl.bindFramebuffer(target, this.handle);
+      return this;
     }
-  }
+  }, {
+    key: "unbind",
+    value: function unbind() {
+      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          _ref2$target = _ref2.target,
+          target = _ref2$target === void 0 ? _constants.default.FRAMEBUFFER : _ref2$target;
 
-  _attachRenderbuffer(attachment, renderbuffer) {
-    this.gl.framebufferRenderbuffer(_constants.default.FRAMEBUFFER, attachment, _constants.default.RENDERBUFFER, renderbuffer.handle);
-  }
+      this.gl.bindFramebuffer(target, null);
+      return this;
+    }
+  }, {
+    key: "_initialize",
+    value: function _initialize(options) {
+      var _options$attachments = options.attachments,
+          attachments = _options$attachments === void 0 ? {} : _options$attachments,
+          readBuffer = options.readBuffer,
+          drawBuffers = options.drawBuffers;
 
-  _attachTexture(attachment, texture, layer, level) {
-    const {
-      gl
-    } = this;
-    gl.bindTexture(texture.target, texture.handle);
+      this._attach(attachments);
 
-    switch (texture.target) {
-      case _constants.default.TEXTURE_2D_ARRAY:
-      case _constants.default.TEXTURE_3D:
-        const gl2 = (0, _gltools.assertWebGL2Context)(gl);
-        gl2.framebufferTextureLayer(_constants.default.FRAMEBUFFER, attachment, texture.target, level, layer);
-        break;
+      var prevHandle = this.gl.bindFramebuffer(_constants.default.FRAMEBUFFER, this.handle);
 
-      case _constants.default.TEXTURE_CUBE_MAP:
-        const face = mapIndexToCubeMapFace(layer);
-        gl.framebufferTexture2D(_constants.default.FRAMEBUFFER, attachment, face, texture.handle, level);
-        break;
+      if (readBuffer) {
+        this._setReadBuffer(readBuffer);
+      }
 
-      case _constants.default.TEXTURE_2D:
-        gl.framebufferTexture2D(_constants.default.FRAMEBUFFER, attachment, _constants.default.TEXTURE_2D, texture.handle, level);
-        break;
+      if (drawBuffers) {
+        this._setDrawBuffers(drawBuffers);
+      }
 
-      default:
-        (0, _utils.assert)(false, 'Illegal texture type');
+      this.gl.bindFramebuffer(_constants.default.FRAMEBUFFER, prevHandle || null);
+      return this;
     }
+  }, {
+    key: "_attach",
+    value: function _attach(attachments) {
+      var prevHandle = this.gl.bindFramebuffer(_constants.default.FRAMEBUFFER, this.handle);
 
-    gl.bindTexture(texture.target, null);
-  }
+      for (var key in attachments) {
+        (0, _api.assert)(key !== undefined, 'Misspelled framebuffer binding point?');
+        var attachmentPoint = Number(key);
+        var attachment = attachments[attachmentPoint];
 
-  _setReadBuffer(readBuffer) {
-    const gl2 = (0, _gltools.getWebGL2Context)(this.gl);
+        this._attachOne(attachmentPoint, attachment);
+      }
 
-    if (gl2) {
-      gl2.readBuffer(readBuffer);
-    } else {
-      (0, _utils.assert)(readBuffer === _constants.default.COLOR_ATTACHMENT0 || readBuffer === _constants.default.BACK, ERR_MULTIPLE_RENDERTARGETS);
+      this.gl.bindFramebuffer(_constants.default.FRAMEBUFFER, prevHandle || null);
     }
-  }
+  }, {
+    key: "_attachOne",
+    value: function _attachOne(attachmentPoint, attachment) {
+      if (attachment instanceof _renderbuffer.default) {
+        this._attachRenderbuffer(attachmentPoint, attachment);
 
-  _setDrawBuffers(drawBuffers) {
-    const {
-      gl
-    } = this;
-    const gl2 = (0, _gltools.assertWebGL2Context)(gl);
+        return attachment;
+      } else if (Array.isArray(attachment)) {
+        var _attachment = (0, _slicedToArray2.default)(attachment, 3),
+            texture = _attachment[0],
+            _attachment$ = _attachment[1],
+            layer = _attachment$ === void 0 ? 0 : _attachment$,
+            _attachment$2 = _attachment[2],
+            level = _attachment$2 === void 0 ? 0 : _attachment$2;
 
-    if (gl2) {
-      gl2.drawBuffers(drawBuffers);
-    } else {
-      const ext = gl.getExtension('WEBGL_draw_buffers');
+        this._attachTexture(attachmentPoint, texture, layer, level);
 
-      if (ext) {
-        ext.drawBuffersWEBGL(drawBuffers);
-      } else {
-        (0, _utils.assert)(drawBuffers.length === 1 && (drawBuffers[0] === _constants.default.COLOR_ATTACHMENT0 || drawBuffers[0] === _constants.default.BACK), ERR_MULTIPLE_RENDERTARGETS);
+        return texture;
+      } else if (attachment instanceof _texture2d.default) {
+        this._attachTexture(attachmentPoint, attachment, 0, 0);
+
+        return attachment;
       }
     }
-  }
+  }, {
+    key: "_attachRenderbuffer",
+    value: function _attachRenderbuffer(attachment, renderbuffer) {
+      this.gl.framebufferRenderbuffer(_constants.default.FRAMEBUFFER, attachment, _constants.default.RENDERBUFFER, renderbuffer.handle);
+    }
+  }, {
+    key: "_attachTexture",
+    value: function _attachTexture(attachment, texture, layer, level) {
+      var gl = this.gl;
+      gl.bindTexture(texture.target, texture.handle);
+
+      switch (texture.target) {
+        case _constants.default.TEXTURE_2D_ARRAY:
+        case _constants.default.TEXTURE_3D:
+          var gl2 = (0, _webglChecks.assertWebGL2Context)(gl);
+          gl2.framebufferTextureLayer(_constants.default.FRAMEBUFFER, attachment, texture.target, level, layer);
+          break;
+
+        case _constants.default.TEXTURE_CUBE_MAP:
+          var face = mapIndexToCubeMapFace(layer);
+          gl.framebufferTexture2D(_constants.default.FRAMEBUFFER, attachment, face, texture.handle, level);
+          break;
+
+        case _constants.default.TEXTURE_2D:
+          gl.framebufferTexture2D(_constants.default.FRAMEBUFFER, attachment, _constants.default.TEXTURE_2D, texture.handle, level);
+          break;
+
+        default:
+          (0, _api.assert)(false, 'Illegal texture type');
+      }
 
-  _createHandle() {
-    return this.gl.createFramebuffer();
-  }
+      gl.bindTexture(texture.target, null);
+    }
+  }, {
+    key: "_setReadBuffer",
+    value: function _setReadBuffer(readBuffer) {
+      var gl2 = (0, _webglChecks.getWebGL2Context)(this.gl);
 
-  _deleteHandle() {
-    this.gl.deleteFramebuffer(this.handle);
-  }
+      if (gl2) {
+        gl2.readBuffer(readBuffer);
+      } else {
+        (0, _api.assert)(readBuffer === _constants.default.COLOR_ATTACHMENT0 || readBuffer === _constants.default.BACK, ERR_MULTIPLE_RENDERTARGETS);
+      }
+    }
+  }, {
+    key: "_setDrawBuffers",
+    value: function _setDrawBuffers(drawBuffers) {
+      var gl = this.gl;
+      var gl2 = (0, _webglChecks.assertWebGL2Context)(gl);
 
-  _bindHandle(handle) {
-    return this.gl.bindFramebuffer(_constants.default.FRAMEBUFFER, handle);
-  }
+      if (gl2) {
+        gl2.drawBuffers(drawBuffers);
+      } else {
+        var ext = gl.getExtension('WEBGL_draw_buffers');
 
-}
+        if (ext) {
+          ext.drawBuffersWEBGL(drawBuffers);
+        } else {
+          (0, _api.assert)(drawBuffers.length === 1 && (drawBuffers[0] === _constants.default.COLOR_ATTACHMENT0 || drawBuffers[0] === _constants.default.BACK), ERR_MULTIPLE_RENDERTARGETS);
+        }
+      }
+    }
+  }, {
+    key: "_createHandle",
+    value: function _createHandle() {
+      return this.gl.createFramebuffer();
+    }
+  }, {
+    key: "_deleteHandle",
+    value: function _deleteHandle() {
+      this.gl.deleteFramebuffer(this.handle);
+    }
+  }, {
+    key: "_bindHandle",
+    value: function _bindHandle(handle) {
+      return this.gl.bindFramebuffer(_constants.default.FRAMEBUFFER, handle);
+    }
+  }]);
+  return ImmutableFramebuffer;
+}(_webglResource.default);
 
 exports.ImmutableFramebuffer = ImmutableFramebuffer;
 
-class Framebuffer extends ImmutableFramebuffer {
-  static isSupported(gl, options) {
-    return isFloatColorBufferSupported(gl, options);
-  }
-
-  static getDefaultFramebuffer(gl) {
-    const lumaContextData = (0, _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 = (0, _gltools.assertWebGL2Context)(this.gl);
-    return gl2.getParameter(gl2.MAX_COLOR_ATTACHMENTS);
-  }
-
-  get MAX_DRAW_BUFFERS() {
-    const gl2 = (0, _gltools.assertWebGL2Context)(this.gl);
-    return gl2.getParameter(gl2.MAX_DRAW_BUFFERS);
-  }
-
-  constructor(gl, props) {
-    super(gl, props);
-    (0, _defineProperty2.default)(this, "width", null);
-    (0, _defineProperty2.default)(this, "height", null);
-    (0, _defineProperty2.default)(this, "attachments", {});
-    (0, _defineProperty2.default)(this, "readBuffer", _constants.default.COLOR_ATTACHMENT0);
-    (0, _defineProperty2.default)(this, "drawBuffers", [_constants.default.COLOR_ATTACHMENT0]);
-    (0, _defineProperty2.default)(this, "ownResources", []);
-    this.initialize(props);
-    Object.seal(this);
-  }
-
-  get color() {
-    return this.attachments[_constants.default.COLOR_ATTACHMENT0] || null;
-  }
-
-  get texture() {
-    return this.attachments[_constants.default.COLOR_ATTACHMENT0] || null;
-  }
-
-  get depth() {
-    return this.attachments[_constants.default.DEPTH_ATTACHMENT] || this.attachments[_constants.default.DEPTH_STENCIL_ATTACHMENT] || null;
-  }
+var Framebuffer = function (_ImmutableFramebuffer) {
+  (0, _inherits2.default)(Framebuffer, _ImmutableFramebuffer);
+
+  var _super2 = _createSuper(Framebuffer);
+
+  function Framebuffer(gl, props) {
+    var _this2;
+
+    (0, _classCallCheck2.default)(this, Framebuffer);
+    _this2 = _super2.call(this, gl, props);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "width", null);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "height", null);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "attachments", {});
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "readBuffer", _constants.default.COLOR_ATTACHMENT0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "drawBuffers", [_constants.default.COLOR_ATTACHMENT0]);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "ownResources", []);
+
+    _this2.initialize(props);
+
+    Object.seal((0, _assertThisInitialized2.default)(_this2));
+    return _this2;
+  }
+
+  (0, _createClass2.default)(Framebuffer, [{
+    key: "MAX_COLOR_ATTACHMENTS",
+    get: function get() {
+      var gl2 = (0, _webglChecks.assertWebGL2Context)(this.gl);
+      return gl2.getParameter(gl2.MAX_COLOR_ATTACHMENTS);
+    }
+  }, {
+    key: "MAX_DRAW_BUFFERS",
+    get: function get() {
+      var gl2 = (0, _webglChecks.assertWebGL2Context)(this.gl);
+      return gl2.getParameter(gl2.MAX_DRAW_BUFFERS);
+    }
+  }, {
+    key: "color",
+    get: function get() {
+      return this.attachments[_constants.default.COLOR_ATTACHMENT0] || null;
+    }
+  }, {
+    key: "texture",
+    get: function get() {
+      return this.attachments[_constants.default.COLOR_ATTACHMENT0] || null;
+    }
+  }, {
+    key: "depth",
+    get: function get() {
+      return this.attachments[_constants.default.DEPTH_ATTACHMENT] || this.attachments[_constants.default.DEPTH_STENCIL_ATTACHMENT] || null;
+    }
+  }, {
+    key: "stencil",
+    get: function get() {
+      return this.attachments[_constants.default.STENCIL_ATTACHMENT] || this.attachments[_constants.default.DEPTH_STENCIL_ATTACHMENT] || null;
+    }
+  }, {
+    key: "initialize",
+    value: function initialize(props) {
+      var _ref3 = props || {},
+          _ref3$attachments = _ref3.attachments,
+          attachments = _ref3$attachments === void 0 ? null : _ref3$attachments;
+
+      var _ref4 = props || {},
+          _ref4$width = _ref4.width,
+          width = _ref4$width === void 0 ? 1 : _ref4$width,
+          _ref4$height = _ref4.height,
+          height = _ref4$height === void 0 ? 1 : _ref4$height,
+          _ref4$color = _ref4.color,
+          color = _ref4$color === void 0 ? true : _ref4$color,
+          _ref4$depth = _ref4.depth,
+          depth = _ref4$depth === void 0 ? true : _ref4$depth,
+          _ref4$stencil = _ref4.stencil,
+          stencil = _ref4$stencil === void 0 ? false : _ref4$stencil,
+          _ref4$check = _ref4.check,
+          check = _ref4$check === void 0 ? true : _ref4$check,
+          _ref4$readBuffer = _ref4.readBuffer,
+          readBuffer = _ref4$readBuffer === void 0 ? undefined : _ref4$readBuffer,
+          _ref4$drawBuffers = _ref4.drawBuffers,
+          drawBuffers = _ref4$drawBuffers === void 0 ? undefined : _ref4$drawBuffers;
+
+      (0, _api.assert)(width >= 0 && height >= 0, 'Width and height need to be integers');
+      this.width = width;
+      this.height = height;
+
+      if (attachments) {
+        for (var attachment in attachments) {
+          var target = attachments[attachment];
+          var object = Array.isArray(target) ? target[0] : target;
+          object.resize({
+            width: width,
+            height: height
+          });
+        }
+      } else {
+        attachments = this._createDefaultAttachments(color, depth, stencil, width, height);
+      }
 
-  get stencil() {
-    return this.attachments[_constants.default.STENCIL_ATTACHMENT] || this.attachments[_constants.default.DEPTH_STENCIL_ATTACHMENT] || null;
-  }
+      this.update({
+        clearAttachments: true,
+        attachments: attachments,
+        readBuffer: readBuffer,
+        drawBuffers: drawBuffers
+      });
 
-  initialize(props) {
-    let {
-      attachments = null
-    } = props || {};
-    const {
-      width = 1,
-      height = 1,
-      color = true,
-      depth = true,
-      stencil = false,
-      check = true,
-      readBuffer = undefined,
-      drawBuffers = undefined
-    } = props || {};
-    (0, _utils.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
-        });
+      if (attachments && check) {
+        this.checkStatus();
       }
-    } else {
-      attachments = this._createDefaultAttachments(color, depth, stencil, width, height);
     }
+  }, {
+    key: "delete",
+    value: function _delete() {
+      var _iterator = _createForOfIteratorHelper(this.ownResources),
+          _step;
 
-    this.update({
-      clearAttachments: true,
-      attachments,
-      readBuffer,
-      drawBuffers
-    });
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var resource = _step.value;
+          resource.delete();
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
 
-    if (attachments && check) {
-      this.checkStatus();
+      (0, _get2.default)((0, _getPrototypeOf2.default)(Framebuffer.prototype), "delete", this).call(this);
+      return this;
     }
-  }
+  }, {
+    key: "update",
+    value: function update(options) {
+      var _options$attachments2 = options.attachments,
+          attachments = _options$attachments2 === void 0 ? {} : _options$attachments2,
+          readBuffer = options.readBuffer,
+          drawBuffers = options.drawBuffers,
+          _options$clearAttachm = options.clearAttachments,
+          clearAttachments = _options$clearAttachm === void 0 ? false : _options$clearAttachm,
+          _options$resizeAttach = options.resizeAttachments,
+          resizeAttachments = _options$resizeAttach === void 0 ? true : _options$resizeAttach;
+      this.attach(attachments, {
+        clearAttachments: clearAttachments,
+        resizeAttachments: resizeAttachments
+      });
+      var gl = this.gl;
+      var prevHandle = gl.bindFramebuffer(_constants.default.FRAMEBUFFER, this.handle);
 
-  delete() {
-    for (const resource of this.ownResources) {
-      resource.delete();
-    }
+      if (readBuffer) {
+        this._setReadBuffer(readBuffer);
 
-    super.delete();
-    return this;
-  }
+        this.readBuffer = readBuffer;
+      }
 
-  update(options) {
-    const {
-      attachments = {},
-      readBuffer,
-      drawBuffers,
-      clearAttachments = false,
-      resizeAttachments = true
-    } = options;
-    this.attach(attachments, {
-      clearAttachments,
-      resizeAttachments
-    });
-    const {
-      gl
-    } = this;
-    const prevHandle = gl.bindFramebuffer(_constants.default.FRAMEBUFFER, this.handle);
+      if (drawBuffers) {
+        this._setDrawBuffers(drawBuffers);
 
-    if (readBuffer) {
-      this._setReadBuffer(readBuffer);
+        this.drawBuffers = drawBuffers;
+      }
 
-      this.readBuffer = readBuffer;
+      gl.bindFramebuffer(_constants.default.FRAMEBUFFER, prevHandle || null);
+      return this;
     }
+  }, {
+    key: "resize",
+    value: function resize(size) {
+      var _ref5 = size || {},
+          width = _ref5.width,
+          height = _ref5.height;
+
+      if (this.handle === null) {
+        (0, _api.assert)(width === undefined && height === undefined);
+        this.width = this.gl.drawingBufferWidth;
+        this.height = this.gl.drawingBufferHeight;
+        return this;
+      }
 
-    if (drawBuffers) {
-      this._setDrawBuffers(drawBuffers);
+      if (width === undefined) {
+        width = this.gl.drawingBufferWidth;
+      }
 
-      this.drawBuffers = drawBuffers;
-    }
+      if (height === undefined) {
+        height = this.gl.drawingBufferHeight;
+      }
 
-    gl.bindFramebuffer(_constants.default.FRAMEBUFFER, prevHandle || null);
-    return this;
-  }
+      if (width !== this.width && height !== this.height) {
+        _api.log.log(2, "Resizing framebuffer ".concat(this.id, " to ").concat(width, "x").concat(height))();
+      }
 
-  resize(size) {
-    let {
-      width,
-      height
-    } = size || {};
+      for (var attachmentPoint in this.attachments) {
+        this.attachments[attachmentPoint].resize({
+          width: width,
+          height: height
+        });
+      }
 
-    if (this.handle === null) {
-      (0, _utils.assert)(width === undefined && height === undefined);
-      this.width = this.gl.drawingBufferWidth;
-      this.height = this.gl.drawingBufferHeight;
+      this.width = width;
+      this.height = height;
       return this;
     }
+  }, {
+    key: "attach",
+    value: function attach(attachments) {
+      var _this3 = this;
 
-    if (width === undefined) {
-      width = this.gl.drawingBufferWidth;
-    }
+      var _ref6 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+          _ref6$clearAttachment = _ref6.clearAttachments,
+          clearAttachments = _ref6$clearAttachment === void 0 ? false : _ref6$clearAttachment,
+          _ref6$resizeAttachmen = _ref6.resizeAttachments,
+          resizeAttachments = _ref6$resizeAttachmen === void 0 ? true : _ref6$resizeAttachmen;
 
-    if (height === undefined) {
-      height = this.gl.drawingBufferHeight;
-    }
+      var newAttachments = {};
 
-    if (width !== this.width && height !== this.height) {
-      _gltools.log.log(2, "Resizing framebuffer ".concat(this.id, " to ").concat(width, "x").concat(height))();
-    }
+      if (clearAttachments) {
+        Object.keys(this.attachments).forEach(function (key) {
+          newAttachments[key] = null;
+        });
+      }
 
-    for (const attachmentPoint in this.attachments) {
-      this.attachments[attachmentPoint].resize({
-        width,
-        height
-      });
-    }
+      Object.assign(newAttachments, attachments);
+      var prevHandle = this.gl.bindFramebuffer(_constants.default.FRAMEBUFFER, this.handle);
 
-    this.width = width;
-    this.height = height;
-    return this;
-  }
+      for (var key in newAttachments) {
+        (0, _api.assert)(key !== undefined, 'Misspelled framebuffer binding point?');
+        var attachment = Number(key);
+        var descriptor = newAttachments[attachment];
+        var object = descriptor;
+
+        if (!object) {
+          this._unattach(attachment);
+        } else {
+          object = this._attachOne(attachment, object);
+          this.attachments[attachment] = object;
+        }
 
-  attach(attachments, {
-    clearAttachments = false,
-    resizeAttachments = true
-  } = {}) {
-    const newAttachments = {};
+        if (resizeAttachments && object) {
+          object.resize({
+            width: this.width,
+            height: this.height
+          });
+        }
+      }
 
-    if (clearAttachments) {
-      Object.keys(this.attachments).forEach(key => {
-        newAttachments[key] = null;
+      this.gl.bindFramebuffer(_constants.default.FRAMEBUFFER, prevHandle || null);
+      Object.assign(this.attachments, attachments);
+      Object.keys(this.attachments).filter(function (key) {
+        return !_this3.attachments[key];
+      }).forEach(function (key) {
+        delete _this3.attachments[key];
       });
     }
-
-    Object.assign(newAttachments, attachments);
-    const prevHandle = this.gl.bindFramebuffer(_constants.default.FRAMEBUFFER, this.handle);
-
-    for (const key in newAttachments) {
-      (0, _utils.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;
+  }, {
+    key: "clear",
+    value: function clear(options) {
+      var _this4 = this;
+
+      var color = options.color,
+          depth = options.depth,
+          stencil = options.stencil,
+          _options$drawBuffers = options.drawBuffers,
+          drawBuffers = _options$drawBuffers === void 0 ? [] : _options$drawBuffers;
+      var prevHandle = this.gl.bindFramebuffer(_constants.default.FRAMEBUFFER, this.handle);
+
+      if (color || depth || stencil) {
+        (0, _clear2.clear)(this.gl, {
+          color: color,
+          depth: depth,
+          stencil: stencil
+        });
       }
 
-      if (resizeAttachments && object) {
-        object.resize({
-          width: this.width,
-          height: this.height
+      drawBuffers.forEach(function (value, drawBuffer) {
+        (0, _clear2.clearBuffer)(_this4.gl, {
+          drawBuffer: drawBuffer,
+          value: value
         });
-      }
+      });
+      this.gl.bindFramebuffer(_constants.default.FRAMEBUFFER, prevHandle || null);
+      return this;
     }
+  }, {
+    key: "blit",
+    value: function blit() {
+      var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+      _api.log.error('Framebuffer.blit({...}) is no logner supported, use blit(source, target, opts)')();
+
+      return null;
+    }
+  }, {
+    key: "invalidate",
+    value: function invalidate(options) {
+      var _options$attachments3 = options.attachments,
+          attachments = _options$attachments3 === void 0 ? [] : _options$attachments3,
+          _options$x = options.x,
+          x = _options$x === void 0 ? 0 : _options$x,
+          _options$y = options.y,
+          y = _options$y === void 0 ? 0 : _options$y,
+          width = options.width,
+          height = options.height;
+      var gl2 = (0, _webglChecks.assertWebGL2Context)(this.gl);
+      var prevHandle = gl2.bindFramebuffer(_constants.default.READ_FRAMEBUFFER, this.handle);
+      var invalidateAll = x === 0 && y === 0 && width === undefined && height === undefined;
+
+      if (invalidateAll) {
+        gl2.invalidateFramebuffer(_constants.default.READ_FRAMEBUFFER, attachments);
+      } else {
+        gl2.invalidateFramebuffer(_constants.default.READ_FRAMEBUFFER, attachments, x, y, width, height);
+      }
 
-    this.gl.bindFramebuffer(_constants.default.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(_constants.default.FRAMEBUFFER, this.handle);
-
-    if (color || depth || stencil) {
-      (0, _clear.clear)(this.gl, {
-        color,
-        depth,
-        stencil
-      });
+      gl2.bindFramebuffer(_constants.default.READ_FRAMEBUFFER, prevHandle);
+      return this;
     }
+  }, {
+    key: "getAttachmentParameter",
+    value: function getAttachmentParameter(attachment, pname, keys) {
+      var value = this._getAttachmentParameterFallback(pname);
 
-    drawBuffers.forEach((value, drawBuffer) => {
-      (0, _clear.clearBuffer)(this.gl, {
-        drawBuffer,
-        value
-      });
-    });
-    this.gl.bindFramebuffer(_constants.default.FRAMEBUFFER, prevHandle || null);
-    return this;
-  }
+      if (value === null) {
+        this.gl.bindFramebuffer(_constants.default.FRAMEBUFFER, this.handle);
+        value = this.gl.getFramebufferAttachmentParameter(_constants.default.FRAMEBUFFER, attachment, pname);
+        this.gl.bindFramebuffer(_constants.default.FRAMEBUFFER, null);
+      }
 
-  blit(opts = {}) {
-    _gltools.log.error('Framebuffer.blit({...}) is no logner supported, use blit(source, target, opts)')();
+      if (keys && value > 1000) {
+        value = (0, _constantsToKeys.getKey)(this.gl, value);
+      }
 
-    return null;
-  }
+      return value;
+    }
+  }, {
+    key: "getAttachmentParameters",
+    value: function getAttachmentParameters() {
+      var attachment = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _constants.default.COLOR_ATTACHMENT0;
+      var keys = arguments.length > 1 ? arguments[1] : undefined;
+      var parameters = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.constructor.ATTACHMENT_PARAMETERS || [];
+      var values = {};
 
-  invalidate(options) {
-    const {
-      attachments = [],
-      x = 0,
-      y = 0,
-      width,
-      height
-    } = options;
-    const gl2 = (0, _gltools.assertWebGL2Context)(this.gl);
-    const prevHandle = gl2.bindFramebuffer(_constants.default.READ_FRAMEBUFFER, this.handle);
-    const invalidateAll = x === 0 && y === 0 && width === undefined && height === undefined;
-
-    if (invalidateAll) {
-      gl2.invalidateFramebuffer(_constants.default.READ_FRAMEBUFFER, attachments);
-    } else {
-      gl2.invalidateFramebuffer(_constants.default.READ_FRAMEBUFFER, attachments, x, y, width, height);
-    }
-
-    gl2.bindFramebuffer(_constants.default.READ_FRAMEBUFFER, prevHandle);
-    return this;
-  }
+      var _iterator2 = _createForOfIteratorHelper(parameters),
+          _step2;
 
-  getAttachmentParameter(attachment, pname, keys) {
-    let value = this._getAttachmentParameterFallback(pname);
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var pname = _step2.value;
+          var key = keys ? (0, _constantsToKeys.getKey)(this.gl, pname) : pname;
+          values[key] = this.getAttachmentParameter(attachment, pname, keys);
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
 
-    if (value === null) {
-      this.gl.bindFramebuffer(_constants.default.FRAMEBUFFER, this.handle);
-      value = this.gl.getFramebufferAttachmentParameter(_constants.default.FRAMEBUFFER, attachment, pname);
-      this.gl.bindFramebuffer(_constants.default.FRAMEBUFFER, null);
+      return values;
     }
+  }, {
+    key: "getParameters",
+    value: function getParameters() {
+      var keys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+      var attachments = Object.keys(this.attachments);
+      var parameters = {};
 
-    if (keys && value > 1000) {
-      value = (0, _webglUtils.getKey)(this.gl, value);
-    }
+      for (var _i = 0, _attachments = attachments; _i < _attachments.length; _i++) {
+        var attachmentName = _attachments[_i];
+        var attachment = Number(attachmentName);
+        var key = keys ? (0, _constantsToKeys.getKey)(this.gl, attachment) : attachment;
+        parameters[key] = this.getAttachmentParameters(attachment, keys);
+      }
 
-    return value;
-  }
+      return parameters;
+    }
+  }, {
+    key: "_createDefaultAttachments",
+    value: function _createDefaultAttachments(color, depth, stencil, width, height) {
+      var defaultAttachments = null;
+
+      if (color) {
+        var _parameters;
+
+        defaultAttachments = defaultAttachments || {};
+        defaultAttachments[_constants.default.COLOR_ATTACHMENT0] = new _texture2d.default(this.gl, {
+          id: "".concat(this.id, "-color0"),
+          pixels: null,
+          format: _constants.default.RGBA,
+          type: _constants.default.UNSIGNED_BYTE,
+          width: width,
+          height: height,
+          mipmaps: false,
+          parameters: (_parameters = {}, (0, _defineProperty2.default)(_parameters, _constants.default.TEXTURE_MIN_FILTER, _constants.default.LINEAR), (0, _defineProperty2.default)(_parameters, _constants.default.TEXTURE_MAG_FILTER, _constants.default.LINEAR), (0, _defineProperty2.default)(_parameters, _constants.default.TEXTURE_WRAP_S, _constants.default.CLAMP_TO_EDGE), (0, _defineProperty2.default)(_parameters, _constants.default.TEXTURE_WRAP_T, _constants.default.CLAMP_TO_EDGE), _parameters)
+        });
+        this.ownResources.push(defaultAttachments[_constants.default.COLOR_ATTACHMENT0]);
+      }
 
-  getAttachmentParameters(attachment = _constants.default.COLOR_ATTACHMENT0, keys, parameters = this.constructor.ATTACHMENT_PARAMETERS || []) {
-    const values = {};
+      if (depth && stencil) {
+        defaultAttachments = defaultAttachments || {};
+        defaultAttachments[_constants.default.DEPTH_STENCIL_ATTACHMENT] = new _renderbuffer.default(this.gl, {
+          id: "".concat(this.id, "-depth-stencil"),
+          format: _constants.default.DEPTH24_STENCIL8,
+          width: width,
+          height: 111
+        });
+        this.ownResources.push(defaultAttachments[_constants.default.DEPTH_STENCIL_ATTACHMENT]);
+      } else if (depth) {
+        defaultAttachments = defaultAttachments || {};
+        defaultAttachments[_constants.default.DEPTH_ATTACHMENT] = new _renderbuffer.default(this.gl, {
+          id: "".concat(this.id, "-depth"),
+          format: _constants.default.DEPTH_COMPONENT16,
+          width: width,
+          height: height
+        });
+        this.ownResources.push(defaultAttachments[_constants.default.DEPTH_ATTACHMENT]);
+      } else if (stencil) {
+        (0, _api.assert)(false);
+      }
 
-    for (const pname of parameters) {
-      const key = keys ? (0, _webglUtils.getKey)(this.gl, pname) : pname;
-      values[key] = this.getAttachmentParameter(attachment, pname, keys);
+      return defaultAttachments;
     }
+  }, {
+    key: "_unattach",
+    value: function _unattach(attachment) {
+      var oldAttachment = this.attachments[attachment];
 
-    return values;
-  }
+      if (!oldAttachment) {
+        return;
+      }
 
-  getParameters(keys = true) {
-    const attachments = Object.keys(this.attachments);
-    const parameters = {};
+      if (oldAttachment instanceof _renderbuffer.default) {
+        this.gl.framebufferRenderbuffer(_constants.default.FRAMEBUFFER, attachment, _constants.default.RENDERBUFFER, null);
+      } else {
+        this.gl.framebufferTexture2D(_constants.default.FRAMEBUFFER, attachment, _constants.default.TEXTURE_2D, null, 0);
+      }
 
-    for (const attachmentName of attachments) {
-      const attachment = Number(attachmentName);
-      const key = keys ? (0, _webglUtils.getKey)(this.gl, attachment) : attachment;
-      parameters[key] = this.getAttachmentParameters(attachment, keys);
+      delete this.attachments[attachment];
     }
+  }, {
+    key: "_getAttachmentParameterFallback",
+    value: function _getAttachmentParameterFallback(pname) {
+      var webglDevice = _webglDevice.default.fromContext(this.gl);
 
-    return parameters;
-  }
+      var features = webglDevice.features;
 
-  _createDefaultAttachments(color, depth, stencil, width, height) {
-    let defaultAttachments = null;
-
-    if (color) {
-      defaultAttachments = defaultAttachments || {};
-      defaultAttachments[_constants.default.COLOR_ATTACHMENT0] = new _texture2d.default(this.gl, {
-        id: "".concat(this.id, "-color0"),
-        pixels: null,
-        format: _constants.default.RGBA,
-        type: _constants.default.UNSIGNED_BYTE,
-        width,
-        height,
-        mipmaps: false,
-        parameters: {
-          [_constants.default.TEXTURE_MIN_FILTER]: _constants.default.LINEAR,
-          [_constants.default.TEXTURE_MAG_FILTER]: _constants.default.LINEAR,
-          [_constants.default.TEXTURE_WRAP_S]: _constants.default.CLAMP_TO_EDGE,
-          [_constants.default.TEXTURE_WRAP_T]: _constants.default.CLAMP_TO_EDGE
-        }
-      });
-      this.ownResources.push(defaultAttachments[_constants.default.COLOR_ATTACHMENT0]);
-    }
+      switch (pname) {
+        case _constants.default.FRAMEBUFFER_ATTACHMENT_TEXTURE_LAYER:
+          return !features.has('webgl2') ? 0 : null;
 
-    if (depth && stencil) {
-      defaultAttachments = defaultAttachments || {};
-      defaultAttachments[_constants.default.DEPTH_STENCIL_ATTACHMENT] = new _renderbuffer.default(this.gl, {
-        id: "".concat(this.id, "-depth-stencil"),
-        format: _constants.default.DEPTH24_STENCIL8,
-        width,
-        height: 111
-      });
-      this.ownResources.push(defaultAttachments[_constants.default.DEPTH_STENCIL_ATTACHMENT]);
-    } else if (depth) {
-      defaultAttachments = defaultAttachments || {};
-      defaultAttachments[_constants.default.DEPTH_ATTACHMENT] = new _renderbuffer.default(this.gl, {
-        id: "".concat(this.id, "-depth"),
-        format: _constants.default.DEPTH_COMPONENT16,
-        width,
-        height
-      });
-      this.ownResources.push(defaultAttachments[_constants.default.DEPTH_ATTACHMENT]);
-    } else if (stencil) {
-      (0, _utils.assert)(false);
-    }
+        case _constants.default.FRAMEBUFFER_ATTACHMENT_RED_SIZE:
+        case _constants.default.FRAMEBUFFER_ATTACHMENT_GREEN_SIZE:
+        case _constants.default.FRAMEBUFFER_ATTACHMENT_BLUE_SIZE:
+        case _constants.default.FRAMEBUFFER_ATTACHMENT_ALPHA_SIZE:
+        case _constants.default.FRAMEBUFFER_ATTACHMENT_DEPTH_SIZE:
+        case _constants.default.FRAMEBUFFER_ATTACHMENT_STENCIL_SIZE:
+          return !features.has('webgl2') ? 8 : null;
 
-    return defaultAttachments;
-  }
+        case _constants.default.FRAMEBUFFER_ATTACHMENT_COMPONENT_TYPE:
+          return !features.has('webgl2') ? _constants.default.UNSIGNED_INT : null;
 
-  _unattach(attachment) {
-    const oldAttachment = this.attachments[attachment];
+        case _constants.default.FRAMEBUFFER_ATTACHMENT_COLOR_ENCODING:
+          return !features.has('webgl2') && !features.has('webgl-color-encoding-srgb') ? _constants.default.LINEAR : null;
 
-    if (!oldAttachment) {
-      return;
+        default:
+          return null;
+      }
     }
-
-    if (oldAttachment instanceof _renderbuffer.default) {
-      this.gl.framebufferRenderbuffer(_constants.default.FRAMEBUFFER, attachment, _constants.default.RENDERBUFFER, null);
-    } else {
-      this.gl.framebufferTexture2D(_constants.default.FRAMEBUFFER, attachment, _constants.default.TEXTURE_2D, null, 0);
+  }], [{
+    key: "isSupported",
+    value: function isSupported(gl, options) {
+      return isFloatColorBufferSupported(gl, options);
     }
+  }, {
+    key: "getDefaultFramebuffer",
+    value: function getDefaultFramebuffer(gl) {
+      var webglDevice = _webglDevice.default.fromContext(gl);
 
-    delete this.attachments[attachment];
-  }
-
-  _getAttachmentParameterFallback(pname) {
-    const caps = (0, _features.getFeatures)(this.gl);
-
-    switch (pname) {
-      case _constants.default.FRAMEBUFFER_ATTACHMENT_TEXTURE_LAYER:
-        return !caps.WEBGL2 ? 0 : null;
-
-      case _constants.default.FRAMEBUFFER_ATTACHMENT_RED_SIZE:
-      case _constants.default.FRAMEBUFFER_ATTACHMENT_GREEN_SIZE:
-      case _constants.default.FRAMEBUFFER_ATTACHMENT_BLUE_SIZE:
-      case _constants.default.FRAMEBUFFER_ATTACHMENT_ALPHA_SIZE:
-      case _constants.default.FRAMEBUFFER_ATTACHMENT_DEPTH_SIZE:
-      case _constants.default.FRAMEBUFFER_ATTACHMENT_STENCIL_SIZE:
-        return !caps.WEBGL2 ? 8 : null;
-
-      case _constants.default.FRAMEBUFFER_ATTACHMENT_COMPONENT_TYPE:
-        return !caps.WEBGL2 ? _constants.default.UNSIGNED_INT : null;
-
-      case _constants.default.FRAMEBUFFER_ATTACHMENT_COLOR_ENCODING:
-        return !caps.WEBGL2 && !caps.EXT_sRGB ? _constants.default.LINEAR : null;
-
-      default:
-        return null;
+      webglDevice.defaultFramebuffer = webglDevice.defaultFramebuffer || new Framebuffer(gl, {
+        id: 'default-framebuffer',
+        handle: null,
+        attachments: {}
+      });
+      return webglDevice.defaultFramebuffer;
     }
-  }
-
-}
+  }]);
+  return Framebuffer;
+}(ImmutableFramebuffer);
 
 exports.default = Framebuffer;
 (0, _defineProperty2.default)(Framebuffer, "FRAMEBUFFER_ATTACHMENT_PARAMETERS", [_constants.default.FRAMEBUFFER_ATTACHMENT_OBJECT_NAME, _constants.default.FRAMEBUFFER_ATTACHMENT_OBJECT_TYPE, _constants.default.FRAMEBUFFER_ATTACHMENT_COLOR_ENCODING, _constants.default.FRAMEBUFFER_ATTACHMENT_RED_SIZE, _constants.default.FRAMEBUFFER_ATTACHMENT_GREEN_SIZE, _constants.default.FRAMEBUFFER_ATTACHMENT_BLUE_SIZE, _constants.default.FRAMEBUFFER_ATTACHMENT_ALPHA_SIZE, _constants.default.FRAMEBUFFER_ATTACHMENT_DEPTH_SIZE, _constants.default.FRAMEBUFFER_ATTACHMENT_STENCIL_SIZE]);
@@ -654,16 +785,14 @@ function mapIndexToCubeMapFace(layer) {
 }
 
 function _getFrameBufferStatus(status) {
-  const STATUS = Framebuffer.STATUS || {};
+  var STATUS = Framebuffer.STATUS || {};
   return STATUS[status] || "Framebuffer error ".concat(status);
 }
 
 function isFloatColorBufferSupported(gl, options) {
-  const {
-    colorBufferFloat,
-    colorBufferHalfFloat
-  } = options;
-  let supported = true;
+  var colorBufferFloat = options.colorBufferFloat,
+      colorBufferHalfFloat = options.colorBufferHalfFloat;
+  var supported = true;
 
   if (colorBufferFloat) {
     supported = Boolean(gl.getExtension('EXT_color_buffer_float') || gl.getExtension('WEBGL_color_buffer_float') || gl.getExtension('OES_texture_float'));