@predy-js/render-interface 0.1.8 → 0.1.11

package/dist/index.js

@@ -2,7 +2,7 @@
  * Name: @predy-js/render-interface
  * Description: undefined
  * Author: undefined
- * Version: v0.1.8
+ * Version: v0.1.11
  */
 
 'use strict';
@@ -153,7 +153,7 @@ exports.TextureSourceType = void 0;
     TextureSourceType[TextureSourceType["mipmaps"] = 7] = "mipmaps";
 })(exports.TextureSourceType || (exports.TextureSourceType = {}));
 
-var _a$6;
+var _a$6, _b$2;
 // @ts-expect-error safe to assign
 var constants = {};
 {
@@ -192,6 +192,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];
+}
 
 exports.ShaderCompileResultStatus = void 0;
 (function (ShaderCompileResultStatus) {
@@ -640,6 +648,7 @@ var GPUCapabilityEmpty = /** @class */ (function () {
     function GPUCapabilityEmpty() {
         this.level = 0;
         this.capability = {
+            maxSample: 0,
             floatTexture: 0,
             halfFloatTexture: 0,
             maxVertexUniforms: 0,
@@ -1844,7 +1853,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);
             }
@@ -1856,6 +1865,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) {
@@ -1873,8 +1883,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();
@@ -2227,6 +2255,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 = {
@@ -2246,7 +2275,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'),
@@ -2296,6 +2325,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) {
@@ -2773,9 +2835,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) {
@@ -2849,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;
         }
@@ -2982,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]) {
@@ -2998,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));
@@ -3019,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;
@@ -3027,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", {
@@ -3065,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) {
@@ -3079,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;
                 }
@@ -3094,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,
                 });
             }
@@ -3101,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;
@@ -3112,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,
                 });
@@ -3120,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;
                 }
@@ -3131,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,
                 });
             }
@@ -3184,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);
@@ -3194,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;
@@ -3208,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;
@@ -3241,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);
         });
@@ -3261,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) {
@@ -3860,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 () {
@@ -3907,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 () {
@@ -3953,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;
@@ -4117,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; }),
@@ -4738,10 +4901,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;
@@ -4749,11 +4914,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);
+                }
             }
         }
     };
@@ -4844,6 +5019,7 @@ var MarsGeometry = /** @class */ (function () {
                     type: type || gltype,
                     normalize: !!attr.normalize,
                     dataSource: (name),
+                    instanceDivisor: attr.instanceDivisor,
                 };
                 attributesReleasable[name] = releasable || false;
                 dirtyFlags[name] = {
@@ -5174,7 +5350,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;
@@ -5191,6 +5367,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 () {
@@ -5261,6 +5440,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 () {
@@ -5524,9 +5712,10 @@ var MarsSharedGeometry = /** @class */ (function (_super) {
     return MarsSharedGeometry;
 }(MarsGeometry));
 
-consoleLog('version: ' + "0.1.8");
+consoleLog('version: ' + "0.1.11");
 
 exports.Geometry = MarsGeometry;
+exports.InstancedMesh = MarsInstancedMesh;
 exports.MarsTextureFactory = MarsTextureFactory;
 exports.Material = MarsMaterial;
 exports.MaterialDataBlock = MarsMaterialDataBlock;