@predy-js/render-interface 0.1.8 → 0.1.11

package/dist/index.mjs

@@ -2,7 +2,7 @@
  * Name: @predy-js/render-interface
  * Description: undefined
  * Author: undefined
- * Version: v0.1.8
+ * Version: v0.1.11
  */
 
 /******************************************************************************
@@ -149,7 +149,7 @@ var TextureSourceType;
     TextureSourceType[TextureSourceType["mipmaps"] = 7] = "mipmaps";
 })(TextureSourceType || (TextureSourceType = {}));
 
-var _a$6;
+var _a$6, _b$2;
 // @ts-expect-error safe to assign
 var constants = {};
 {
@@ -188,6 +188,14 @@ function getBytesPerElementByGLType(type) {
     var _a;
     return ((_a = map[type]) === null || _a === void 0 ? void 0 : _a.BYTES_PER_ELEMENT) || 0;
 }
+var MatAttrLocPairMap = (_b$2 = {},
+    _b$2[constants.FLOAT_MAT2] = [2, 2],
+    _b$2[constants.FLOAT_MAT3] = [3, 3],
+    _b$2[constants.FLOAT_MAT4] = [4, 4],
+    _b$2);
+function getMatAttrLocPair(type) {
+    return MatAttrLocPairMap[type] || [1, 1];
+}
 
 var ShaderCompileResultStatus;
 (function (ShaderCompileResultStatus) {
@@ -636,6 +644,7 @@ var GPUCapabilityEmpty = /** @class */ (function () {
     function GPUCapabilityEmpty() {
         this.level = 0;
         this.capability = {
+            maxSample: 0,
             floatTexture: 0,
             halfFloatTexture: 0,
             maxVertexUniforms: 0,
@@ -1840,7 +1849,7 @@ var GLProgram = /** @class */ (function () {
         var uniformInfo = DATA_DICT[info.type];
         var subInfos = info.subInfos;
         if (subInfos.length > 0 && Array.isArray(value) && Array.isArray(value[0])) {
-            for (var i = 0; i < subInfos.length; ++i) {
+            for (var i = 0; i < subInfos.length && i < value.length; ++i) {
                 var subInfo = subInfos[i];
                 uniformInfo.uniform(gl, subInfo, value[i], this.renderer);
             }
@@ -1852,6 +1861,7 @@ var GLProgram = /** @class */ (function () {
         var _a;
         var gl = this.renderer.gl;
         var vao = geometry.createVao(this.id);
+        var gpu = this.renderer.gpu;
         if (vao) {
             vao.bind();
             if (vao.ready) {
@@ -1869,8 +1879,26 @@ var GLProgram = /** @class */ (function () {
                     throw Error("no buffer named ".concat(attribute.dataSource || name));
                 }
                 buffer.bind();
-                gl.enableVertexAttribArray(attrInfo.loc);
-                gl.vertexAttribPointer(attrInfo.loc, attribute.size, attribute.type, attribute.normalize, attribute.stride || 0, attribute.offset || 0);
+                if (attribute.size > 4) {
+                    var _a = getMatAttrLocPair(attrInfo.type), row = _a[0], col = _a[1];
+                    var bytesPerRow = getBytesPerElementByGLType(attribute.type) * col;
+                    var stride = row * bytesPerRow;
+                    for (var i = 0; i < row; i++) {
+                        var loc = attrInfo.loc + i;
+                        gl.enableVertexAttribArray(loc);
+                        gl.vertexAttribPointer(loc, col, attribute.type, attribute.normalize, stride, i * bytesPerRow);
+                        if (attribute.instanceDivisor && gpu.capability.instanceDraw) {
+                            gpu.vertexAttribDivisor(gl, loc, attribute.instanceDivisor);
+                        }
+                    }
+                }
+                else {
+                    gl.enableVertexAttribArray(attrInfo.loc);
+                    gl.vertexAttribPointer(attrInfo.loc, attribute.size, attribute.type, attribute.normalize, attribute.stride || 0, attribute.offset || 0);
+                    if (attribute.instanceDivisor && gpu.capability.instanceDraw) {
+                        gpu.vertexAttribDivisor(gl, attrInfo.loc, attribute.instanceDivisor);
+                    }
+                }
             }
         });
         (_a = geometry._indexBuffer) === null || _a === void 0 ? void 0 : _a.bind();
@@ -2223,6 +2251,7 @@ var GLGPUCapability = /** @class */ (function () {
             }
             this.internalFormatDepth16 = level2 ? gl.DEPTH_COMPONENT16 : gl.DEPTH_COMPONENT;
             this.internalFormatDepth24_stencil8 = level2 ? gl.DEPTH24_STENCIL8 : gl.DEPTH_STENCIL;
+            this.instanceDrawExt = gl.getExtension('ANGLE_instanced_arrays');
             var floatTexture = (level2 || gl.getExtension('OES_texture_float')) ? gl.FLOAT : 0;
             var halfFloatTexture = level2 ? WebGL2RenderingContext.HALF_FLOAT : (((_a = gl.getExtension('OES_texture_half_float')) === null || _a === void 0 ? void 0 : _a.HALF_FLOAT_OES) || 0);
             var detail = {
@@ -2242,7 +2271,7 @@ var GLGPUCapability = /** @class */ (function () {
                 floatLinear: floatLinear,
                 maxTextureAnisotropy: textureAnisotropicExt ? gl.getParameter(textureAnisotropicExt.MAX_TEXTURE_MAX_ANISOTROPY_EXT) : 0,
                 shaderTextureLod: level2 || !!gl.getExtension('EXT_shader_texture_lod'),
-                instanceDraw: level2 || !!gl.getExtension('ANGLE_instanced_arrays'),
+                instanceDraw: level2 || !!this.instanceDrawExt,
                 drawBuffers: level2 || !!this.drawBufferExtension,
                 asyncShaderCompile: !!gl.getExtension('KHR_parallel_shader_compile'),
                 intIndexElementBuffer: !!gl.getExtension('OES_element_index_uint'),
@@ -2292,6 +2321,39 @@ var GLGPUCapability = /** @class */ (function () {
             consoleError('invalid color attachment index:' + index);
         }
     };
+    GLGPUCapability.prototype.vertexAttribDivisor = function (gl, loc, divisor) {
+        if (this.level === 2) {
+            gl.vertexAttribDivisor(loc, divisor);
+        }
+        else if (this.instanceDrawExt) {
+            this.instanceDrawExt.vertexAttribDivisorANGLE(loc, divisor);
+        }
+        else {
+            consoleWarn('instance draw not support');
+        }
+    };
+    GLGPUCapability.prototype.drawElementsInstanced = function (gl, mode, count, type, offset, instanceCount) {
+        if (this.level === 2) {
+            gl.drawElementsInstanced(mode, count, type, offset, instanceCount);
+        }
+        else if (this.instanceDrawExt) {
+            this.instanceDrawExt.drawElementsInstancedANGLE(mode, count, type, offset, instanceCount);
+        }
+        else {
+            consoleWarn('instance draw not support');
+        }
+    };
+    GLGPUCapability.prototype.drawArraysInstanced = function (gl, mode, first, count, instanceCount) {
+        if (this.level === 2) {
+            gl.drawArraysInstanced(mode, first, count, instanceCount);
+        }
+        else if (this.instanceDrawExt) {
+            this.instanceDrawExt.drawArraysInstancedANGLE(mode, first, count, instanceCount);
+        }
+        else {
+            consoleWarn('instance draw not support');
+        }
+    };
     GLGPUCapability.prototype.drawBuffers = function (gl, bufferStates) {
         var ext = this.drawBufferExtension;
         if (this.level === 1 && !ext) {
@@ -2769,9 +2831,6 @@ var GLGPURenderer = /** @class */ (function () {
     GLGPURenderer.prototype.createBuffer = function (options) {
         return new GLGPUBuffer(options, this);
     };
-    GLGPURenderer.prototype.parseSceneSchema = function (schema) {
-        throw new Error('Method not implemented.');
-    };
     GLGPURenderer.prototype.resize = function (width, height) {
         var gl = this.gl;
         if (gl && gl.drawingBufferWidth !== width || gl.drawingBufferHeight !== height) {
@@ -2845,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;
         }
@@ -2978,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]) {
@@ -2994,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));
@@ -3015,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;
@@ -3023,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", {
@@ -3061,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) {
@@ -3075,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;
                 }
@@ -3090,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,
                 });
             }
@@ -3097,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;
@@ -3108,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,
                 });
@@ -3116,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;
                 }
@@ -3127,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,
                 });
             }
@@ -3180,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);
@@ -3190,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;
@@ -3204,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;
@@ -3237,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);
         });
@@ -3257,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) {
@@ -3856,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 () {
@@ -3903,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 () {
@@ -3949,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;
@@ -4113,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; }),
@@ -4734,10 +4897,12 @@ var GLGeometry = /** @class */ (function () {
         return null;
     };
     GLGeometry.prototype.draw = function (state) {
-        var _a;
+        var _a, _b;
         var index = this._indexBuffer;
         var gl = (_a = this.renderer) === null || _a === void 0 ? void 0 : _a.gl;
-        if (gl) {
+        var gpu = (_b = this.renderer) === null || _b === void 0 ? void 0 : _b.gpu;
+        var useInstancedDraw = (gpu === null || gpu === void 0 ? void 0 : gpu.capability.instanceDraw) && state.currentMesh.instanceCount > 0;
+        if (gl && gpu) {
             var drawCount = this.drawCount;
             if (index) {
                 var type = index.type;
@@ -4745,11 +4910,21 @@ var GLGeometry = /** @class */ (function () {
                 //this._indexBuffer?.bind();
                 var dc = isNaN(drawCount) ? index.elementCount : drawCount;
                 if (dc > 0) {
-                    gl.drawElements(this.mode, dc, type, this.drawStart || 0);
+                    if (useInstancedDraw) {
+                        gpu.drawElementsInstanced(gl, this.mode, dc, type, this.drawStart || 0, state.currentMesh.instanceCount);
+                    }
+                    else {
+                        gl.drawElements(this.mode, dc, type, this.drawStart || 0);
+                    }
                 }
             }
             else if (drawCount > 0) {
-                gl.drawArrays(this.mode, this.drawStart, this.drawCount);
+                if (useInstancedDraw) {
+                    gpu.drawArraysInstanced(gl, this.mode, this.drawStart, this.drawCount, state.currentMesh.instanceCount);
+                }
+                else {
+                    gl.drawArrays(this.mode, this.drawStart, this.drawCount);
+                }
             }
         }
     };
@@ -4840,6 +5015,7 @@ var MarsGeometry = /** @class */ (function () {
                     type: type || gltype,
                     normalize: !!attr.normalize,
                     dataSource: (name),
+                    instanceDivisor: attr.instanceDivisor,
                 };
                 attributesReleasable[name] = releasable || false;
                 dirtyFlags[name] = {
@@ -5170,7 +5346,7 @@ var MarsGeometry = /** @class */ (function () {
 
 var seed = 1;
 var MarsMesh = /** @class */ (function () {
-    function MarsMesh(options) {
+    function MarsMesh(options, renderer) {
         this._isDestroyed = false;
         this.material = options.material instanceof MarsMaterial ? options.material : new MarsMaterial(options.material);
         var geo = options.geometry;
@@ -5187,6 +5363,9 @@ var MarsMesh = /** @class */ (function () {
         this.priority = options.priority || 0;
         this.hide = false;
         this.worldMatrix = options.worldMatrix || [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
+        if (renderer) {
+            this.assignRenderer(renderer);
+        }
     }
     Object.defineProperty(MarsMesh.prototype, "isDestroyed", {
         get: function () {
@@ -5257,6 +5436,15 @@ var MarsMesh = /** @class */ (function () {
     };
     return MarsMesh;
 }());
+var MarsInstancedMesh = /** @class */ (function (_super) {
+    __extends(MarsInstancedMesh, _super);
+    function MarsInstancedMesh(options, renderer) {
+        var _this = _super.call(this, options, renderer) || this;
+        _this.instanceCount = options.instanceCount;
+        return _this;
+    }
+    return MarsInstancedMesh;
+}(MarsMesh));
 
 var copyShaderId = '$mri-internal-copy';
 var MarsExtWrap = /** @class */ (function () {
@@ -5520,7 +5708,7 @@ var MarsSharedGeometry = /** @class */ (function (_super) {
     return MarsSharedGeometry;
 }(MarsGeometry));
 
-consoleLog('version: ' + "0.1.8");
+consoleLog('version: ' + "0.1.11");
 
-export { DestroyOptions, MarsGeometry as Geometry, 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 };
+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