@predy-js/render-interface 0.1.10 → 0.1.12

package/dist/index.mjs

@@ -2,7 +2,7 @@
  * Name: @predy-js/render-interface
  * Description: undefined
  * Author: undefined
- * Version: v0.1.10
+ * Version: v0.1.12
  */
 
 /******************************************************************************
@@ -644,6 +644,7 @@ var GPUCapabilityEmpty = /** @class */ (function () {
     function GPUCapabilityEmpty() {
         this.level = 0;
         this.capability = {
+            maxSample: 0,
             floatTexture: 0,
             halfFloatTexture: 0,
             maxVertexUniforms: 0,
@@ -2903,7 +2904,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;
         }
@@ -3036,13 +3040,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]) {
@@ -3052,6 +3057,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));
@@ -3073,6 +3082,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) || RenderPassAttachmentStorageType.none;
         this.viewport = options.viewport;
@@ -3081,6 +3091,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", {
@@ -3119,6 +3130,7 @@ var GLFrameBuffer = /** @class */ (function () {
         var capability = renderer.gpu.capability;
         var depthStencilAttachment = options.depthStencilAttachment || { storageType: 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) {
@@ -3133,10 +3145,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 === 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;
                 }
@@ -3148,6 +3166,7 @@ var GLFrameBuffer = /** @class */ (function () {
                 this.depthStencilRenderBuffer = new GLRenderBuffer(renderer, {
                     format: constants.DEPTH_STENCIL,
                     attachment: constants.DEPTH_STENCIL_ATTACHMENT,
+                    multisample: this.multisample,
                     storageType: storageType,
                 });
             }
@@ -3155,6 +3174,9 @@ var GLFrameBuffer = /** @class */ (function () {
         }
         else if (storageType === 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;
@@ -3166,6 +3188,7 @@ var GLFrameBuffer = /** @class */ (function () {
             else {
                 this.depthStencilRenderBuffer = new GLRenderBuffer(renderer, {
                     attachment: constants.DEPTH_ATTACHMENT,
+                    multisample: this.multisample,
                     format: constants.DEPTH_COMPONENT16,
                     storageType: storageType,
                 });
@@ -3174,6 +3197,9 @@ var GLFrameBuffer = /** @class */ (function () {
         else if (storageType === 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;
                 }
@@ -3185,6 +3211,7 @@ var GLFrameBuffer = /** @class */ (function () {
                 this.depthStencilRenderBuffer = new GLRenderBuffer(renderer, {
                     attachment: constants.STENCIL_ATTACHMENT,
                     format: constants.STENCIL_INDEX8,
+                    multisample: this.multisample,
                     storageType: storageType,
                 });
             }
@@ -3238,6 +3265,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);
@@ -3248,9 +3276,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;
@@ -3262,30 +3295,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 === 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;
@@ -3295,8 +3372,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: 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);
         });
@@ -3315,7 +3406,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) {
@@ -3914,6 +4005,7 @@ var MarsRenderPassColorAttachment = /** @class */ (function () {
         }
         this._isDestroyed = false;
         this.readable = true;
+        this.multisample = options.multiSample || 1;
     }
     Object.defineProperty(MarsRenderPassColorAttachment.prototype, "isDestroyed", {
         get: function () {
@@ -3961,6 +4053,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 () {
@@ -4007,6 +4103,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;
@@ -4171,6 +4275,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; }),
@@ -5603,7 +5708,7 @@ var MarsSharedGeometry = /** @class */ (function (_super) {
     return MarsSharedGeometry;
 }(MarsGeometry));
 
-consoleLog('version: ' + "0.1.10");
+consoleLog('version: ' + "0.1.12");
 
 export { DestroyOptions, MarsGeometry as Geometry, MarsInstancedMesh as InstancedMesh, MarsTextureFactory, MarsMaterial as Material, MarsMaterialDataBlock as MaterialDataBlock, MarsMesh as Mesh, MarsRenderFrame as RenderFrame, MarsRenderPass as RenderPass, RenderPassAttachmentStorageType, RenderPassDestroyAttachmentType, RenderPassMeshOrder, RenderPassPriorityNormal, RenderPassPriorityPostprocess, RenderPassPriorityPrepare, MarsRenderer as Renderer, ShaderCompileResultStatus, ShaderLibraryEmpty, MarsSharedGeometry as SharedGeometry, MarsTexture as Texture, TextureLoadAction, TextureSourceType, TextureStoreAction, constants, getDefaultGPUCapability, getDefaultTextureFactory, setDefaultTextureFactory };
 //# sourceMappingURL=index.mjs.map