@luma.gl/webgl 9.0.0-alpha.15 → 9.0.0-alpha.16

package/dist/adapter/resources/webgl-framebuffer.js

@@ -1,267 +1,240 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+// luma.gl, MIT license
 import { Framebuffer, Texture, log, assert } from '@luma.gl/api';
 import GL from '@luma.gl/constants';
-import WebGLTexture from './webgl-texture';
-import Renderbuffer from '../objects/webgl-renderbuffer';
-import { getWebGLTextureFormat, getWebGLDepthStencilAttachment } from '../converters/texture-formats';
+import WebGLTexture from './webgl-texture.js';
+import Renderbuffer from '../objects/webgl-renderbuffer.js';
+import { getWebGLTextureFormat, getWebGLDepthStencilAttachment } from '../converters/texture-formats.js';
+/** luma.gl Framebuffer, WebGL implementation  */
 export default class WEBGLFramebuffer extends Framebuffer {
-  get texture() {
-    return this.colorAttachments[0];
-  }
-
-  constructor(device, props) {
-    super(device, props);
-
-    _defineProperty(this, "device", void 0);
-
-    _defineProperty(this, "gl", void 0);
-
-    _defineProperty(this, "handle", void 0);
-
-    _defineProperty(this, "colorAttachments", []);
-
-    _defineProperty(this, "depthStencilAttachment", null);
-
-    _defineProperty(this, "_ownResources", []);
-
-    this.device = device;
-    this.gl = device.gl;
-    this.handle = this.props.handle !== undefined ? this.props.handle : this.gl.createFramebuffer();
-
-    if (this.handle) {
-      this.handle.__SPECTOR_Metadata = {
-        id: this.props.id,
-        props: this.props
-      };
+    get texture() { return this.colorAttachments[0]; }
+    constructor(device, props) {
+        super(device, props);
+        this.colorAttachments = [];
+        this.depthStencilAttachment = null;
+        this._ownResources = [];
+        this.device = device;
+        this.gl = device.gl;
+        this.handle = this.props.handle !== undefined ? this.props.handle : this.gl.createFramebuffer();
+        if (this.handle) { // default framebuffer is null...
+            // @ts-expect-error Per SPECTOR docs
+            this.handle.__SPECTOR_Metadata = { id: this.props.id, props: this.props };
+        }
+        this.colorAttachments = this._createColorAttachments();
+        // @ts-expect-error
+        this.depthStencilAttachment = this._createDepthStencilAttachment();
+        /** Attach from a map of attachments */
+        const prevHandle = this.gl.bindFramebuffer(GL.FRAMEBUFFER, this.handle);
+        // Walk the attachments
+        for (let i = 0; i < this.colorAttachments.length; ++i) {
+            const attachment = this.colorAttachments[i];
+            const attachmentPoint = GL.COLOR_ATTACHMENT0 + i;
+            if (attachment) {
+                this._attachOne(attachmentPoint, attachment);
+            }
+        }
+        if (this.props.depthStencilAttachment) {
+            this._attachOne(getWebGLDepthStencilAttachment(this.depthStencilAttachment.format), this.depthStencilAttachment);
+        }
+        // @ts-expect-error
+        this.gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle || null);
+        // @ts-expect-error
+        if (props.check !== false) {
+            this._checkStatus();
+        }
+    }
+    destroy() {
+        if (this.handle !== null) {
+            for (const resource of this._ownResources) {
+                resource.destroy();
+            }
+            this.gl.deleteFramebuffer(this.handle);
+            // this.handle = null;
+            this.destroyed = true;
+        }
+    }
+    // PRIVATE
+    /** Check the status */
+    _checkStatus() {
+        const { gl } = this;
+        const prevHandle = gl.bindFramebuffer(GL.FRAMEBUFFER, this.handle);
+        const status = gl.checkFramebufferStatus(GL.FRAMEBUFFER);
+        // @ts-expect-error
+        gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle || null);
+        if (status !== gl.FRAMEBUFFER_COMPLETE) {
+            throw new Error(`Framebuffer ${_getFrameBufferStatus(status)}`);
+        }
+    }
+    _createColorAttachments() {
+        return this.props.colorAttachments.map(colorAttachment => {
+            if (!colorAttachment) {
+                return undefined;
+            }
+            if (colorAttachment instanceof WebGLTexture) {
+                return colorAttachment;
+            }
+            // if (typeof colorAttachment === 'default') {
+            //   return this._createColorAttachment('rgba8unorm', this.width, this.height);
+            // }
+            // @ts-expect-error
+            return this._createColorAttachment(colorAttachment, this.width, this.height);
+        });
+    }
+    /** Create a color attachment */
+    _createColorAttachment(format, width, height) {
+        const texture = this.device._createTexture({
+            id: `${this.id}-color`,
+            data: null,
+            format,
+            // type: GL.UNSIGNED_BYTE,
+            width,
+            height,
+            // Note: Mipmapping can be disabled by texture resource when we resize the texture
+            // to a non-power-of-two dimenstion (NPOT texture) under WebGL1. To have consistant
+            // behavior we always disable mipmaps.
+            mipmaps: false,
+            // Set MIN and MAG filtering parameters so mipmaps are not used in sampling.
+            // Use LINEAR so subpixel algos like fxaa work.
+            // Set WRAP modes that support NPOT textures too.
+            sampler: {
+                minFilter: 'linear',
+                magFilter: 'linear',
+                addressModeU: 'clamp-to-edge',
+                addressModeV: 'clamp-to-edge'
+            },
+            // parameters: {
+            //   [GL.TEXTURE_MIN_FILTER]: GL.LINEAR,
+            //   [GL.TEXTURE_MAG_FILTER]: GL.LINEAR,
+            //   [GL.TEXTURE_WRAP_S]: GL.CLAMP_TO_EDGE,
+            //   [GL.TEXTURE_WRAP_T]: GL.CLAMP_TO_EDGE
+            // }
+        });
+        this._ownResources.push(texture);
+        return texture;
+    }
+    /** Create a depth stencil attachment GL.DEPTH24_STENCIL8 */
+    _createDepthStencilAttachment() {
+        if (!this.props.depthStencilAttachment) {
+            return undefined;
+        }
+        if (this.props.depthStencilAttachment instanceof Renderbuffer) {
+            return this.props.depthStencilAttachment;
+        }
+        if (this.props.depthStencilAttachment instanceof Texture) {
+            return this.props.depthStencilAttachment;
+        }
+        const format = this.props.depthStencilAttachment;
+        const webglFormat = getWebGLTextureFormat(this.gl, format);
+        const texture = new Renderbuffer(this.device, {
+            id: `${this.id}-depth-stencil`,
+            format: webglFormat,
+            // dataFormat: GL.DEPTH_STENCIL,
+            // type: GL.UNSIGNED_INT_24_8,
+            width: this.width,
+            height: this.height
+        });
+        this._ownResources.push(texture);
+        return texture;
+    }
+    /** Attachment resize is expected to be a noop if size is same */
+    _resizeAttachments(width, height) {
+        // for default framebuffer, just update the stored size
+        if (this.handle === null) {
+            // assert(width === undefined && height === undefined);
+            this.width = this.gl.drawingBufferWidth;
+            this.height = this.gl.drawingBufferHeight;
+            return this;
+        }
+        if (width === undefined) {
+            width = this.gl.drawingBufferWidth;
+        }
+        if (height === undefined) {
+            height = this.gl.drawingBufferHeight;
+        }
+        if (width !== this.width && height !== this.height) {
+            log.log(2, `Resizing framebuffer ${this.id} to ${width}x${height}`)();
+        }
+        for (const colorAttachment of this.colorAttachments) {
+            colorAttachment.resize({ width, height });
+        }
+        this.depthStencilAttachment?.resize({ width, height });
+        return this;
+    }
+    /** Attach one attachment */
+    _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 WebGLTexture) {
+            this._attachTexture(attachmentPoint, attachment, 0, 0);
+            return attachment;
+        }
+        throw new Error('attach');
+    }
+    _attachRenderbuffer(attachment, renderbuffer) {
+        this.gl.framebufferRenderbuffer(GL.FRAMEBUFFER, attachment, GL.RENDERBUFFER, renderbuffer.handle);
+    }
+    /**
+     * @param attachment
+     * @param texture
+     * @param layer = 0 - index into WebGLTextureArray and Texture3D or face for `TextureCubeMap`
+     * @param level  = 0 - mipmapLevel (must be 0 in WebGL1)
+     */
+    _attachTexture(attachment, texture, layer, level) {
+        const { gl, gl2 } = this.device;
+        gl.bindTexture(texture.target, texture.handle);
+        switch (texture.target) {
+            case GL.TEXTURE_2D_ARRAY:
+            case GL.TEXTURE_3D:
+                this.device.assertWebGL2();
+                gl2?.framebufferTextureLayer(GL.FRAMEBUFFER, attachment, texture.target, level, layer);
+                break;
+            case GL.TEXTURE_CUBE_MAP:
+                // layer must be a cubemap face (or if index, converted to cube map face)
+                const face = mapIndexToCubeMapFace(layer);
+                gl.framebufferTexture2D(GL.FRAMEBUFFER, attachment, face, texture.handle, level);
+                break;
+            case GL.TEXTURE_2D:
+                gl.framebufferTexture2D(GL.FRAMEBUFFER, attachment, GL.TEXTURE_2D, texture.handle, level);
+                break;
+            default:
+                assert(false, 'Illegal texture type');
+        }
+        gl.bindTexture(texture.target, null);
     }
-
-    this.colorAttachments = this._createColorAttachments();
-    this.depthStencilAttachment = this._createDepthStencilAttachment();
-    const prevHandle = this.gl.bindFramebuffer(GL.FRAMEBUFFER, this.handle);
-
-    for (let i = 0; i < this.colorAttachments.length; ++i) {
-      const attachment = this.colorAttachments[i];
-      const attachmentPoint = GL.COLOR_ATTACHMENT0 + i;
-
-      if (attachment) {
-        this._attachOne(attachmentPoint, attachment);
-      }
-    }
-
-    if (this.props.depthStencilAttachment) {
-      this._attachOne(getWebGLDepthStencilAttachment(this.depthStencilAttachment.format), this.depthStencilAttachment);
-    }
-
-    this.gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle || null);
-
-    if (props.check !== false) {
-      this._checkStatus();
-    }
-  }
-
-  destroy() {
-    if (this.handle !== null) {
-      for (const resource of this._ownResources) {
-        resource.destroy();
-      }
-
-      this.gl.deleteFramebuffer(this.handle);
-      this.destroyed = true;
-    }
-  }
-
-  _checkStatus() {
-    const {
-      gl
-    } = this;
-    const prevHandle = gl.bindFramebuffer(GL.FRAMEBUFFER, this.handle);
-    const status = gl.checkFramebufferStatus(GL.FRAMEBUFFER);
-    gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle || null);
-
-    if (status !== gl.FRAMEBUFFER_COMPLETE) {
-      throw new Error("Framebuffer ".concat(_getFrameBufferStatus(status)));
-    }
-  }
-
-  _createColorAttachments() {
-    return this.props.colorAttachments.map(colorAttachment => {
-      if (!colorAttachment) {
-        return undefined;
-      }
-
-      if (colorAttachment instanceof WebGLTexture) {
-        return colorAttachment;
-      }
-
-      return this._createColorAttachment(colorAttachment, this.width, this.height);
-    });
-  }
-
-  _createColorAttachment(format, width, height) {
-    const texture = this.device._createTexture({
-      id: "".concat(this.id, "-color"),
-      data: null,
-      format,
-      width,
-      height,
-      mipmaps: false,
-      sampler: {
-        minFilter: 'linear',
-        magFilter: 'linear',
-        addressModeU: 'clamp-to-edge',
-        addressModeV: 'clamp-to-edge'
-      }
-    });
-
-    this._ownResources.push(texture);
-
-    return texture;
-  }
-
-  _createDepthStencilAttachment() {
-    if (!this.props.depthStencilAttachment) {
-      return undefined;
-    }
-
-    if (this.props.depthStencilAttachment instanceof Renderbuffer) {
-      return this.props.depthStencilAttachment;
-    }
-
-    if (this.props.depthStencilAttachment instanceof Texture) {
-      return this.props.depthStencilAttachment;
-    }
-
-    const format = this.props.depthStencilAttachment;
-    const webglFormat = getWebGLTextureFormat(this.gl, format);
-    const texture = new Renderbuffer(this.device, {
-      id: "".concat(this.id, "-depth-stencil"),
-      format: webglFormat,
-      width: this.width,
-      height: this.height
-    });
-
-    this._ownResources.push(texture);
-
-    return texture;
-  }
-
-  _resizeAttachments(width, height) {
-    var _this$depthStencilAtt;
-
-    if (this.handle === null) {
-      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 colorAttachment of this.colorAttachments) {
-      colorAttachment.resize({
-        width,
-        height
-      });
-    }
-
-    (_this$depthStencilAtt = this.depthStencilAttachment) === null || _this$depthStencilAtt === void 0 ? void 0 : _this$depthStencilAtt.resize({
-      width,
-      height
-    });
-    return this;
-  }
-
-  _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 WebGLTexture) {
-      this._attachTexture(attachmentPoint, attachment, 0, 0);
-
-      return attachment;
-    }
-
-    throw new Error('attach');
-  }
-
-  _attachRenderbuffer(attachment, renderbuffer) {
-    this.gl.framebufferRenderbuffer(GL.FRAMEBUFFER, attachment, GL.RENDERBUFFER, renderbuffer.handle);
-  }
-
-  _attachTexture(attachment, texture, layer, level) {
-    const {
-      gl,
-      gl2
-    } = this.device;
-    gl.bindTexture(texture.target, texture.handle);
-
-    switch (texture.target) {
-      case GL.TEXTURE_2D_ARRAY:
-      case GL.TEXTURE_3D:
-        this.device.assertWebGL2();
-        gl2 === null || gl2 === void 0 ? void 0 : 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);
-  }
-
 }
-
+// Helper functions
+// Map an index to a cube map face constant
 function mapIndexToCubeMapFace(layer) {
-  return layer < GL.TEXTURE_CUBE_MAP_POSITIVE_X ? layer + GL.TEXTURE_CUBE_MAP_POSITIVE_X : layer;
+    // TEXTURE_CUBE_MAP_POSITIVE_X is a big value (0x8515)
+    // if smaller assume layer is index, otherwise assume it is already a cube map face constant
+    return layer < GL.TEXTURE_CUBE_MAP_POSITIVE_X ? layer + GL.TEXTURE_CUBE_MAP_POSITIVE_X : layer;
 }
-
+// Helper METHODS
+// Get a string describing the framebuffer error if installed
 function _getFrameBufferStatus(status) {
-  switch (status) {
-    case GL.FRAMEBUFFER_COMPLETE:
-      return 'success';
-
-    case GL.FRAMEBUFFER_INCOMPLETE_ATTACHMENT:
-      return 'Mismatched attachments';
-
-    case GL.FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT:
-      return 'No attachments';
-
-    case GL.FRAMEBUFFER_INCOMPLETE_DIMENSIONS:
-      return 'Height/width mismatch';
-
-    case GL.FRAMEBUFFER_UNSUPPORTED:
-      return 'Unsupported or split attachments';
-
-    case GL.FRAMEBUFFER_INCOMPLETE_MULTISAMPLE:
-      return 'Samples mismatch';
-
-    default:
-      return "".concat(status);
-  }
+    switch (status) {
+        case GL.FRAMEBUFFER_COMPLETE:
+            return 'success';
+        case GL.FRAMEBUFFER_INCOMPLETE_ATTACHMENT:
+            return 'Mismatched attachments';
+        case GL.FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT:
+            return 'No attachments';
+        case GL.FRAMEBUFFER_INCOMPLETE_DIMENSIONS:
+            return 'Height/width mismatch';
+        case GL.FRAMEBUFFER_UNSUPPORTED:
+            return 'Unsupported or split attachments';
+        // WebGL2
+        case GL.FRAMEBUFFER_INCOMPLETE_MULTISAMPLE:
+            return 'Samples mismatch';
+        // OVR_multiview2 extension
+        // case GL.FRAMEBUFFER_INCOMPLETE_VIEW_TARGETS_OVR: return 'baseViewIndex mismatch';
+        default:
+            return `${status}`;
+    }
 }
-//# sourceMappingURL=webgl-framebuffer.js.map

package/dist/adapter/resources/webgl-render-pass.d.ts

@@ -3,7 +3,7 @@ import WebGLDevice from '../webgl-device';
 export default class WEBGLRenderPass extends RenderPass {
     readonly device: WebGLDevice;
     constructor(device: WebGLDevice, props: RenderPassProps);
-    endPass(): void;
+    end(): void;
     pushDebugGroup(groupLabel: string): void;
     popDebugGroup(): void;
     insertDebugMarker(markerLabel: string): void;

package/dist/adapter/resources/webgl-render-pass.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"webgl-render-pass.d.ts","sourceRoot":"","sources":["../../../src/adapter/resources/webgl-render-pass.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,cAAc,CAAC;AACzD,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAE1C,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,UAAU;IACrD,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAC;gBAEjB,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,eAAe;IAKvD,OAAO,IAAI,IAAI;IAEf,cAAc,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI;IACxC,aAAa,IAAI,IAAI;IACrB,iBAAiB,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI;CAQ7C"}
+{"version":3,"file":"webgl-render-pass.d.ts","sourceRoot":"","sources":["../../../src/adapter/resources/webgl-render-pass.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,cAAc,CAAC;AACzD,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAE1C,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,UAAU;IACrD,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAC;gBAEjB,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,eAAe;IAKvD,GAAG,IAAI,IAAI;IAEX,cAAc,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI;IACxC,aAAa,IAAI,IAAI;IACrB,iBAAiB,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI;CAQ7C"}

package/dist/adapter/resources/webgl-render-pass.js

@@ -1,21 +1,11 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { RenderPass } from '@luma.gl/api';
 export default class WEBGLRenderPass extends RenderPass {
-  constructor(device, props) {
-    super(device, props);
-
-    _defineProperty(this, "device", void 0);
-
-    this.device = device;
-  }
-
-  endPass() {}
-
-  pushDebugGroup(groupLabel) {}
-
-  popDebugGroup() {}
-
-  insertDebugMarker(markerLabel) {}
-
+    constructor(device, props) {
+        super(device, props);
+        this.device = device;
+    }
+    end() { }
+    pushDebugGroup(groupLabel) { }
+    popDebugGroup() { }
+    insertDebugMarker(markerLabel) { }
 }
-//# sourceMappingURL=webgl-render-pass.js.map