@predy-js/render-interface 0.1.10 → 0.1.12

package/dist/index.js

@@ -2,7 +2,7 @@
  * Name: @predy-js/render-interface
  * Description: undefined
  * Author: undefined
- * Version: v0.1.10
+ * Version: v0.1.12
  */
 
 'use strict';
@@ -648,6 +648,7 @@ var GPUCapabilityEmpty = /** @class */ (function () {
     function GPUCapabilityEmpty() {
         this.level = 0;
         this.capability = {
+            maxSample: 0,
             floatTexture: 0,
             halfFloatTexture: 0,
             maxVertexUniforms: 0,
@@ -2907,7 +2908,10 @@ var GLGPURenderer = /** @class */ (function () {
     };
     GLGPURenderer.prototype.deleteGLFrameBuffer = function (frameBuffer) {
         if (frameBuffer && !this._isDestroyed) {
-            this.gl.deleteFramebuffer(frameBuffer.fbo);
+            var gl = this.gl;
+            gl.deleteFramebuffer(frameBuffer.fbo);
+            gl.deleteFramebuffer(frameBuffer.multisampleFbo);
+            frameBuffer.multisampleRbs.forEach(function (rb) { return rb.destroy(); });
             arrRemove(this._frameBuffers, frameBuffer);
             delete frameBuffer.fbo;
         }
@@ -3040,13 +3044,14 @@ var CanvasEmpty = /** @class */ (function () {
 
 var GLRenderBuffer = /** @class */ (function () {
     function GLRenderBuffer(renderer, options) {
+        var _a;
         this.storageType = options.storageType;
         this.renderer = renderer;
         this.glHandle = renderer.createGLRenderBuffer(this);
         this.internalFormat = this.format = options.format;
         this.attachment = options.attachment;
         this.size = [0, 0];
-        this.multiSample = 1;
+        this.multiSample = (_a = options.multisample) !== null && _a !== void 0 ? _a : 0;
     }
     GLRenderBuffer.prototype.setSize = function (width, height) {
         if (width !== this.size[0] || height !== this.size[1]) {
@@ -3056,6 +3061,10 @@ var GLRenderBuffer = /** @class */ (function () {
             state.bindRenderBuffer(gl.RENDERBUFFER, this.glHandle);
             if (width && height) {
                 gl.renderbufferStorage(gl.RENDERBUFFER, internalFormat, this.size[0] = width, this.size[1] = height);
+                if (this.multiSample > 1) {
+                    var if2 = internalFormat === gl.DEPTH_STENCIL ? gl.DEPTH24_STENCIL8 : internalFormat;
+                    gl.renderbufferStorageMultisample(gl.RENDERBUFFER, this.multiSample, if2, width, height);
+                }
             }
             else {
                 consoleError("invalid render buffer size ".concat(width, "x").concat(height));
@@ -3077,6 +3086,7 @@ var seed$5 = 1;
 var GLFrameBuffer = /** @class */ (function () {
     function GLFrameBuffer(options, renderer) {
         var _a;
+        this.multisampleRbs = [];
         this.renderer = renderer;
         this.depthStencilStorageType = ((_a = options.depthStencilAttachment) === null || _a === void 0 ? void 0 : _a.storageType) || exports.RenderPassAttachmentStorageType.none;
         this.viewport = options.viewport;
@@ -3085,6 +3095,7 @@ var GLFrameBuffer = /** @class */ (function () {
         this.name = options.name || ('GLFrameBuffer' + seed$5++);
         this.storeAction = options.storeAction;
         this._attachmentHandles = [];
+        this.multisample = renderer.level > 1 ? options.multisample || 0 : 0;
         this.checkOptions(options);
     }
     Object.defineProperty(GLFrameBuffer.prototype, "stencilStorage", {
@@ -3123,6 +3134,7 @@ var GLFrameBuffer = /** @class */ (function () {
         var capability = renderer.gpu.capability;
         var depthStencilAttachment = options.depthStencilAttachment || { storageType: exports.RenderPassAttachmentStorageType.none };
         var willUseFbo = options.attachments.length > 0;
+        var willMultisample = this.multisample > 1;
         this.externalStorage = false;
         var separateDepthStencil = true;
         if (options.attachments.length > 1 && !capability.drawBuffers) {
@@ -3137,10 +3149,16 @@ var GLFrameBuffer = /** @class */ (function () {
         if (willUseFbo) {
             this.fbo = renderer.createGLFrameBuffer(this, this.name);
         }
+        if (willMultisample) {
+            this.multisampleFbo = renderer.createGLFrameBuffer(this, this.name + '_multisample');
+        }
         var storageType = depthStencilAttachment.storageType;
         if (storageType === exports.RenderPassAttachmentStorageType.depth_stencil_opaque) {
             if (depthStencilAttachment.storage) {
                 if (depthStencilAttachment.storage instanceof GLRenderBuffer) {
+                    if (this.multisample !== depthStencilAttachment.storage.multiSample && this.multisample > 1) {
+                        throw Error('fbo multisample not eql depth stencil attachment');
+                    }
                     this.depthStencilRenderBuffer = depthStencilAttachment.storage;
                     this.externalStorage = true;
                 }
@@ -3152,6 +3170,7 @@ var GLFrameBuffer = /** @class */ (function () {
                 this.depthStencilRenderBuffer = new GLRenderBuffer(renderer, {
                     format: constants.DEPTH_STENCIL,
                     attachment: constants.DEPTH_STENCIL_ATTACHMENT,
+                    multisample: this.multisample,
                     storageType: storageType,
                 });
             }
@@ -3159,6 +3178,9 @@ var GLFrameBuffer = /** @class */ (function () {
         }
         else if (storageType === exports.RenderPassAttachmentStorageType.depth_16_opaque) {
             if (depthStencilAttachment.storage) {
+                if (this.multisample !== depthStencilAttachment.storage.multiSample && this.multisample > 1) {
+                    throw Error('fbo multisample not eql depth attachment');
+                }
                 if (depthStencilAttachment.storage instanceof GLRenderBuffer) {
                     this.depthStencilRenderBuffer = depthStencilAttachment.storage;
                     this.externalStorage = true;
@@ -3170,6 +3192,7 @@ var GLFrameBuffer = /** @class */ (function () {
             else {
                 this.depthStencilRenderBuffer = new GLRenderBuffer(renderer, {
                     attachment: constants.DEPTH_ATTACHMENT,
+                    multisample: this.multisample,
                     format: constants.DEPTH_COMPONENT16,
                     storageType: storageType,
                 });
@@ -3178,6 +3201,9 @@ var GLFrameBuffer = /** @class */ (function () {
         else if (storageType === exports.RenderPassAttachmentStorageType.stencil_8_opaque) {
             if (depthStencilAttachment.storage) {
                 if (depthStencilAttachment.storage instanceof GLRenderBuffer) {
+                    if (this.multisample !== depthStencilAttachment.storage.multiSample && this.multisample > 1) {
+                        throw Error('fbo multisample not eql stencil attachment');
+                    }
                     this.depthStencilRenderBuffer = depthStencilAttachment.storage;
                     this.externalStorage = true;
                 }
@@ -3189,6 +3215,7 @@ var GLFrameBuffer = /** @class */ (function () {
                 this.depthStencilRenderBuffer = new GLRenderBuffer(renderer, {
                     attachment: constants.STENCIL_ATTACHMENT,
                     format: constants.STENCIL_INDEX8,
+                    multisample: this.multisample,
                     storageType: storageType,
                 });
             }
@@ -3242,6 +3269,7 @@ var GLFrameBuffer = /** @class */ (function () {
     };
     GLFrameBuffer.prototype.unbind = function () {
         var att = this.storeInvalidAttachments;
+        this.resolveMultiSample();
         if (att && att.length) {
             var gl = this.renderer.gl;
             gl.invalidateFramebuffer(gl.FRAMEBUFFER, att);
@@ -3252,9 +3280,14 @@ var GLFrameBuffer = /** @class */ (function () {
     GLFrameBuffer.prototype.bind = function () {
         var gl = this.renderer.gl;
         var state = this.renderer.state;
-        if (this.fbo) {
-            var FRAMEBUFFER = gl.FRAMEBUFFER;
-            var viewport = this.viewport;
+        var FRAMEBUFFER = gl.FRAMEBUFFER;
+        var viewport = this.viewport;
+        var multisampleFbo = this.multisampleFbo;
+        if (multisampleFbo) {
+            state.bindFramebuffer(FRAMEBUFFER, multisampleFbo);
+            state.viewport(viewport[0], viewport[1], viewport[2], viewport[3]);
+        }
+        else if (this.fbo) {
             state.bindFramebuffer(FRAMEBUFFER, this.fbo);
             state.viewport(viewport[0], viewport[1], viewport[2], viewport[3]);
             var r_1 = this.renderer.emptyTexture2D.glHandle;
@@ -3266,30 +3299,74 @@ var GLFrameBuffer = /** @class */ (function () {
                     state.bindTexture(constants.TEXTURE_2D, r_1, true);
                 }
             });
-            if (!this.ready) {
-                var _a = this, depthStencilRenderBuffer = _a.depthStencilRenderBuffer, depthTexture = _a.depthTexture, stencilTexture = _a.stencilTexture;
-                state.activeTexture(gl.TEXTURE0);
-                if (depthStencilRenderBuffer) {
-                    depthStencilRenderBuffer.setSize(viewport[2], viewport[3]);
-                    gl.framebufferRenderbuffer(FRAMEBUFFER, depthStencilRenderBuffer.attachment, gl.RENDERBUFFER, depthStencilRenderBuffer.glHandle);
-                }
-                else if (depthTexture) {
-                    depthTexture.update({ data: { width: viewport[2], height: viewport[3], data: new Uint16Array(0) } });
-                    var attachment = depthTexture && stencilTexture ? gl.DEPTH_STENCIL_ATTACHMENT : gl.DEPTH_ATTACHMENT;
-                    gl.framebufferTexture2D(FRAMEBUFFER, attachment, gl.TEXTURE_2D, depthTexture.glHandle, 0);
+        }
+        if (!this.ready) {
+            var _a = this, depthStencilRenderBuffer = _a.depthStencilRenderBuffer, depthTexture = _a.depthTexture, stencilTexture = _a.stencilTexture;
+            state.activeTexture(gl.TEXTURE0);
+            if (depthStencilRenderBuffer) {
+                depthStencilRenderBuffer.setSize(viewport[2], viewport[3]);
+                gl.framebufferRenderbuffer(FRAMEBUFFER, depthStencilRenderBuffer.attachment, gl.RENDERBUFFER, depthStencilRenderBuffer.glHandle);
+            }
+            else if (depthTexture) {
+                if (multisampleFbo) {
+                    var attachment_1 = gl.DEPTH_ATTACHMENT;
+                    var format = gl.DEPTH_COMPONENT16;
+                    if (this.depthStencilStorageType === exports.RenderPassAttachmentStorageType.depth_24_stencil_8_texture) {
+                        attachment_1 = gl.DEPTH_STENCIL_ATTACHMENT;
+                        format = gl.DEPTH24_STENCIL8;
+                    }
+                    var renderBuffer = new GLRenderBuffer(this.renderer, {
+                        storageType: this.depthStencilStorageType,
+                        attachment: attachment_1,
+                        format: format,
+                        multisample: this.multisample,
+                    });
+                    gl.bindFramebuffer(gl.FRAMEBUFFER, multisampleFbo);
+                    this.multisampleRbs.push(renderBuffer);
+                    renderBuffer.setSize(viewport[2], viewport[3]);
+                    gl.framebufferRenderbuffer(gl.FRAMEBUFFER, attachment_1, gl.RENDERBUFFER, renderBuffer.glHandle);
+                    gl.bindFramebuffer(gl.FRAMEBUFFER, this.fbo);
                 }
-                this.resetColorTextures(this.colorTextures);
-                var status_1 = gl.checkFramebufferStatus(FRAMEBUFFER);
-                if (status_1 !== gl.FRAMEBUFFER_COMPLETE) {
-                    var error = gl.getError();
-                    throw Error("framebuffer failed status ".concat(status_1, " error:").concat(error));
+                depthTexture.update({ data: { width: viewport[2], height: viewport[3], data: new Uint16Array(0) } });
+                var attachment = depthTexture && stencilTexture ? gl.DEPTH_STENCIL_ATTACHMENT : gl.DEPTH_ATTACHMENT;
+                gl.framebufferTexture2D(FRAMEBUFFER, attachment, gl.TEXTURE_2D, depthTexture.glHandle, 0);
+            }
+            this.resetColorTextures(this.colorTextures);
+            [multisampleFbo, this.fbo].forEach(function (fbo) {
+                if (fbo) {
+                    gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+                    var status_1 = gl.checkFramebufferStatus(FRAMEBUFFER);
+                    if (status_1 !== gl.FRAMEBUFFER_COMPLETE) {
+                        var error = gl.getError();
+                        throw Error("framebuffer failed status ".concat(status_1, " error:").concat(error));
+                    }
                 }
-                //@ts-expect-error safe to assign
-                this.ready = true;
+            });
+            //@ts-expect-error safe to assign
+            this.ready = true;
+        }
+    };
+    GLFrameBuffer.prototype.resolveMultiSample = function () {
+        var multisampleFbo = this.multisampleFbo;
+        var fbo = this.fbo;
+        if (multisampleFbo && fbo) {
+            var gl = this.renderer.gl;
+            gl.bindFramebuffer(gl.READ_FRAMEBUFFER, multisampleFbo);
+            gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, fbo);
+            var vp = this.viewport;
+            var bit = gl.COLOR_BUFFER_BIT;
+            if (this.depthTexture) {
+                bit = bit | gl.DEPTH_BUFFER_BIT;
             }
+            gl.blitFramebuffer(0, 0, vp[2], vp[3], // Source region
+            0, 0, vp[2], vp[3], // Destination region
+            bit, gl.LINEAR // Buffer mask and filter
+            );
+            gl.bindFramebuffer(gl.FRAMEBUFFER, multisampleFbo);
         }
     };
     GLFrameBuffer.prototype.resetColorTextures = function (colors) {
+        var _this = this;
         var gl = this.renderer.gl;
         var gpu = this.renderer.gpu;
         var viewport = this.viewport;
@@ -3299,8 +3376,22 @@ var GLFrameBuffer = /** @class */ (function () {
             this.colorTextures = colors.slice();
         }
         this.renderer.state.activeTexture(gl.TEXTURE0);
+        var multisampleFBO = this.multisampleFbo;
         this.colorTextures.forEach(function (tex, index) {
             tex.update({ data: data });
+            if (multisampleFBO) {
+                gl.bindFramebuffer(gl.FRAMEBUFFER, multisampleFBO);
+                var renderBuffer = new GLRenderBuffer(_this.renderer, {
+                    format: gl.RGBA8,
+                    attachment: gl.COLOR_ATTACHMENT0 + index,
+                    storageType: exports.RenderPassAttachmentStorageType.color,
+                    multisample: _this.multisample,
+                });
+                _this.multisampleRbs.push(renderBuffer);
+                renderBuffer.setSize(tex.width, tex.height);
+                gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0 + index, gl.RENDERBUFFER, renderBuffer.glHandle);
+            }
+            gl.bindFramebuffer(gl.FRAMEBUFFER, _this.fbo);
             gpu.framebufferTexture2D(gl, gl.FRAMEBUFFER, index, gl.TEXTURE_2D, tex.glHandle);
             buffers.push(true);
         });
@@ -3319,7 +3410,7 @@ var GLFrameBuffer = /** @class */ (function () {
                 (_b = this.depthTexture) === null || _b === void 0 ? void 0 : _b.destroy();
             }
             //@ts-expect-error safe to assign
-            this.renderer = this.stencilRenderBuffer = this.depthStencilRenderBuffer = null;
+            this.renderer = this.depthStencilRenderBuffer = null;
         }
     };
     GLFrameBuffer.prototype.resize = function (x, y, width, height) {
@@ -3918,6 +4009,7 @@ var MarsRenderPassColorAttachment = /** @class */ (function () {
         }
         this._isDestroyed = false;
         this.readable = true;
+        this.multisample = options.multiSample || 1;
     }
     Object.defineProperty(MarsRenderPassColorAttachment.prototype, "isDestroyed", {
         get: function () {
@@ -3965,6 +4057,10 @@ var MarsRenderPassColorAttachment = /** @class */ (function () {
         if (this.texture) {
             this.texture.assignRenderer(renderer);
         }
+        if (this.multisample > 1) {
+            this.multisample = Math.min(renderer.gpu.capability.maxSample, this.multisample);
+        }
+        this.texture.internal.multisample = this.multisample;
         return this;
     };
     MarsRenderPassColorAttachment.prototype.destroy = function () {
@@ -4011,6 +4107,14 @@ var MarsRenderPass = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(MarsRenderPass.prototype, "multisample", {
+        get: function () {
+            var _a;
+            return ((_a = this.frameBuffer) === null || _a === void 0 ? void 0 : _a.multisample) || 0;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(MarsRenderPass.prototype, "attachments", {
         get: function () {
             return this._attachments;
@@ -4175,6 +4279,7 @@ var MarsRenderPass = /** @class */ (function () {
                 storeAction: this.storeAction,
                 name: name,
                 viewport: viewport,
+                multisample: options.multiSample,
                 viewportScale: this.viewportScale,
                 isCustomViewport: this._isCustomViewport,
                 attachments: attachments.map(function (att) { return (att.texture).internal; }),
@@ -5607,7 +5712,7 @@ var MarsSharedGeometry = /** @class */ (function (_super) {
     return MarsSharedGeometry;
 }(MarsGeometry));
 
-consoleLog('version: ' + "0.1.10");
+consoleLog('version: ' + "0.1.12");
 
 exports.Geometry = MarsGeometry;
 exports.InstancedMesh = MarsInstancedMesh;