@galacean/effects-threejs 2.10.0-alpha.1 → 2.10.0-alpha.2

package/dist/index.js

@@ -3,7 +3,7 @@
  * Description: Galacean Effects runtime threejs plugin for the web
  * Author: Ant Group CO., Ltd.
  * Contributors: 燃然,飂兮,十弦,云垣,茂安,意绮
- * Version: v2.10.0-alpha.1
+ * Version: v2.10.0-alpha.2
  */
 
 'use strict';
@@ -8250,7 +8250,7 @@ function _loadMipmapImage() {
     return _loadMipmapImage.apply(this, arguments);
 }
 
-var seed$a = 1;
+var seed$9 = 1;
 /**
  * Texture 抽象类
  */ var Texture = /*#__PURE__*/ function(EffectsObject) {
@@ -8259,7 +8259,7 @@ var seed$a = 1;
         var _this;
         _this = EffectsObject.call(this, engine) || this;
         _this.destroyed = false;
-        _this.id = "Tex" + seed$a++;
+        _this.id = "Tex" + seed$9++;
         return _this;
     }
     var _proto = Texture.prototype;
@@ -11678,10 +11678,11 @@ exports.GLSLVersion = void 0;
 })(exports.GLSLVersion || (exports.GLSLVersion = {}));
 var ShaderVariant = /*#__PURE__*/ function(EffectsObject) {
     _inherits(ShaderVariant, EffectsObject);
-    function ShaderVariant(engine, source) {
+    function ShaderVariant(engine, source, key) {
         var _this;
         _this = EffectsObject.call(this, engine) || this;
         _this.source = source;
+        _this.key = key;
         return _this;
     }
     var _proto = ShaderVariant.prototype;
@@ -11987,7 +11988,7 @@ exports.MaterialRenderType = void 0;
 /**
  * 用于设置材质默认名称的自增序号
  * @internal
- */ var seed$9 = 1;
+ */ var seed$8 = 1;
 /**
  * Material 类
  */ var Material = /*#__PURE__*/ function(EffectsObject) {
@@ -12019,7 +12020,7 @@ exports.MaterialRenderType = void 0;
         _this.macrosDirty = true;
         _this.materialState = new MaterialState();
         if (props) {
-            var _props_name = props.name, name = _props_name === void 0 ? "Material" + seed$9++ : _props_name, _props_renderType = props.renderType, renderType = _props_renderType === void 0 ? 0 : _props_renderType, shader = props.shader;
+            var _props_name = props.name, name = _props_name === void 0 ? "Material" + seed$8++ : _props_name, _props_renderType = props.renderType, renderType = _props_renderType === void 0 ? 0 : _props_renderType, shader = props.shader;
             _this.name = name;
             _this.renderType = renderType; // TODO 没有地方用到
             _this.shaderSource = shader;
@@ -12030,7 +12031,7 @@ exports.MaterialRenderType = void 0;
                 dataType: DataType.Shader
             });
         } else {
-            _this.name = "Material" + seed$9++;
+            _this.name = "Material" + seed$8++;
             _this.renderType = 0;
         }
         return _this;
@@ -12760,6 +12761,30 @@ var MAX_MASK_REFERENCE_COUNT = 254;
         /**
    * 期望的 stencil 值（等于正向蒙版的数量）
    */ this.expectedStencilValue = 0;
+        this.prevStencilFunc = [
+            0,
+            0
+        ];
+        this.prevStencilOpFail = [
+            0,
+            0
+        ];
+        this.prevStencilOpZFail = [
+            0,
+            0
+        ];
+        this.prevStencilOpZPass = [
+            0,
+            0
+        ];
+        this.prevStencilRef = [
+            0,
+            0
+        ];
+        this.prevStencilMask = [
+            0,
+            0
+        ];
         this.stencilClearAction = {
             stencilAction: exports.TextureLoadAction.clear
         };
@@ -12917,22 +12942,22 @@ var MAX_MASK_REFERENCE_COUNT = 254;
         if (subMeshIndex === void 0) subMeshIndex = 0;
         var prevColorMask = material.colorMask;
         var prevStencilTest = material.stencilTest;
-        var prevStencilFunc = material.stencilFunc;
-        var prevStencilOpFail = material.stencilOpFail;
-        var prevStencilOpZFail = material.stencilOpZFail;
-        var prevStencilOpZPass = material.stencilOpZPass;
-        var prevStencilRef = material.stencilRef;
-        var prevStencilMask = material.stencilMask;
+        this.copyStencilArrayValue(this.prevStencilFunc, material.stencilFunc);
+        this.copyStencilArrayValue(this.prevStencilOpFail, material.stencilOpFail);
+        this.copyStencilArrayValue(this.prevStencilOpZFail, material.stencilOpZFail);
+        this.copyStencilArrayValue(this.prevStencilOpZPass, material.stencilOpZPass);
+        this.copyStencilArrayValue(this.prevStencilRef, material.stencilRef);
+        this.copyStencilArrayValue(this.prevStencilMask, material.stencilMask);
         this.setupMaskMaterial(material, maskRef);
         renderer.drawGeometry(geometry, worldMatrix, material, subMeshIndex);
         material.colorMask = prevColorMask;
         material.stencilTest = prevStencilTest;
-        material.stencilFunc = prevStencilFunc;
-        material.stencilOpFail = prevStencilOpFail;
-        material.stencilOpZFail = prevStencilOpZFail;
-        material.stencilOpZPass = prevStencilOpZPass;
-        material.stencilRef = prevStencilRef;
-        material.stencilMask = prevStencilMask;
+        material.stencilFunc = this.prevStencilFunc;
+        material.stencilOpFail = this.prevStencilOpFail;
+        material.stencilOpZFail = this.prevStencilOpZFail;
+        material.stencilOpZPass = this.prevStencilOpZPass;
+        material.stencilRef = this.prevStencilRef;
+        material.stencilMask = this.prevStencilMask;
     };
     /**
    * 设置蒙版材质的 stencil 属性（写入蒙版）
@@ -13006,6 +13031,13 @@ var MAX_MASK_REFERENCE_COUNT = 254;
             material.stencilTest = false;
         }
     };
+    _proto.copyStencilArrayValue = function copyStencilArrayValue(target, source) {
+        if (!source) {
+            return;
+        }
+        target[0] = source[0];
+        target[1] = source[1];
+    };
     _create_class(MaskProcessor, [
         {
             key: "maskable",
@@ -13030,6 +13062,401 @@ var MAX_MASK_REFERENCE_COUNT = 254;
     return MaskProcessor;
 }();
 
+exports.BufferUsage = void 0;
+(function(BufferUsage) {
+    BufferUsage[BufferUsage["Stream"] = 35040] = "Stream";
+    BufferUsage[BufferUsage["Static"] = 35044] = "Static";
+    BufferUsage[BufferUsage["Dynamic"] = 35048] = "Dynamic";
+})(exports.BufferUsage || (exports.BufferUsage = {}));
+exports.BufferDataType = void 0;
+(function(BufferDataType) {
+    BufferDataType[BufferDataType["Byte"] = 5120] = "Byte";
+    BufferDataType[BufferDataType["UnsignedByte"] = 5121] = "UnsignedByte";
+    BufferDataType[BufferDataType["Short"] = 5122] = "Short";
+    BufferDataType[BufferDataType["UnsignedShort"] = 5123] = "UnsignedShort";
+    BufferDataType[BufferDataType["Int"] = 5124] = "Int";
+    BufferDataType[BufferDataType["UnsignedInt"] = 5125] = "UnsignedInt";
+    BufferDataType[BufferDataType["Float"] = 5126] = "Float";
+})(exports.BufferDataType || (exports.BufferDataType = {}));
+/**
+ * 后端缓冲区的最小抽象，只保存资源状态。
+ */ var DataBuffer = /*#__PURE__*/ function() {
+    function DataBuffer() {
+        this.references = 0;
+        this.capacity = 0;
+        this.is32Bits = false;
+    }
+    _create_class(DataBuffer, [
+        {
+            key: "underlyingResource",
+            get: function get() {
+                return null;
+            }
+        }
+    ]);
+    return DataBuffer;
+}();
+function getBytesPerElement(type) {
+    switch(type){
+        case 5120:
+        case 5121:
+            return 1;
+        case 5122:
+        case 5123:
+            return 2;
+        case 5124:
+        case 5125:
+        case 5126:
+            return 4;
+        default:
+            return 0;
+    }
+}
+function getDataType(data) {
+    if (_instanceof1(data, Int8Array)) {
+        return 5120;
+    }
+    if (_instanceof1(data, Uint8Array)) {
+        return 5121;
+    }
+    if (_instanceof1(data, Int16Array)) {
+        return 5122;
+    }
+    if (_instanceof1(data, Uint16Array)) {
+        return 5123;
+    }
+    if (_instanceof1(data, Int32Array)) {
+        return 5124;
+    }
+    if (_instanceof1(data, Uint32Array)) {
+        return 5125;
+    }
+    return 5126;
+}
+function getDataByteLength(data) {
+    if (Array.isArray(data)) {
+        return data.length * Float32Array.BYTES_PER_ELEMENT;
+    }
+    return data.byteLength;
+}
+function toBufferView(data) {
+    if (Array.isArray(data)) {
+        return new Float32Array(data);
+    }
+    if (_instanceof1(data, ArrayBuffer)) {
+        return new Uint8Array(data);
+    }
+    return data;
+}
+function createTypedArray(type, length) {
+    switch(type){
+        case 5120:
+            return new Int8Array(length);
+        case 5121:
+            return new Uint8Array(length);
+        case 5122:
+            return new Int16Array(length);
+        case 5123:
+            return new Uint16Array(length);
+        case 5124:
+            return new Int32Array(length);
+        case 5125:
+            return new Uint32Array(length);
+        default:
+            return new Float32Array(length);
+    }
+}
+
+/**
+ * 管理顶点数据及其对应的后端缓冲区。
+ */ var Buffer = /*#__PURE__*/ function() {
+    function Buffer(engine, data, updatable, stride, postponeInternalCreation, instanced, useBytes, divisor, label) {
+        if (stride === void 0) stride = 0;
+        if (postponeInternalCreation === void 0) postponeInternalCreation = false;
+        if (instanced === void 0) instanced = false;
+        if (useBytes === void 0) useBytes = false;
+        this.engine = engine;
+        this.isAlreadyOwned = false;
+        this._isDisposed = false;
+        this.updatable = updatable;
+        this.instanced = instanced;
+        this.divisor = divisor || 1;
+        this.label = label;
+        this.byteStride = useBytes ? stride : stride * Float32Array.BYTES_PER_ELEMENT;
+        if (_instanceof1(data, DataBuffer)) {
+            this.buffer = data;
+        } else {
+            this.data = data;
+        }
+        if (!postponeInternalCreation) {
+            this.create();
+        }
+    }
+    var _proto = Buffer.prototype;
+    _proto.isUpdatable = function isUpdatable() {
+        return this.updatable;
+    };
+    _proto.getData = function getData() {
+        return this.data;
+    };
+    _proto.getBuffer = function getBuffer() {
+        return this.buffer;
+    };
+    _proto.getStrideSize = function getStrideSize() {
+        return this.byteStride / Float32Array.BYTES_PER_ELEMENT;
+    };
+    _proto.createVertexBuffer = function createVertexBuffer(kind, offset, size, stride, instanced, useBytes, divisor) {
+        if (useBytes === void 0) useBytes = false;
+        var byteOffset = useBytes ? offset : offset * Float32Array.BYTES_PER_ELEMENT;
+        var byteStride = stride ? useBytes ? stride : stride * Float32Array.BYTES_PER_ELEMENT : this.byteStride;
+        return new VertexBuffer(this.engine, this, kind, {
+            size: size,
+            stride: byteStride,
+            offset: byteOffset,
+            instanced: instanced === undefined ? this.instanced : instanced,
+            useBytes: true,
+            divisor: divisor != null ? divisor : this.divisor
+        });
+    };
+    _proto.create = function create(data) {
+        if (!data && this.buffer) {
+            return;
+        }
+        data = data != null ? data : this.data;
+        if (!data) {
+            return;
+        }
+        var options = this.getDataBufferOptions(data);
+        if (!this.buffer) {
+            this.buffer = this.updatable ? this.engine.createDynamicVertexBuffer(data, options) : this.engine.createVertexBuffer(data, options);
+            if (this.updatable) {
+                this.data = data;
+            }
+        } else if (this.updatable) {
+            this.engine.updateDynamicVertexBuffer(this.buffer, data);
+            this.data = data;
+        }
+    };
+    _proto.update = function update(data) {
+        this.create(data);
+    };
+    _proto.updateDirectly = function updateDirectly(data, offset, vertexCount, useBytes) {
+        if (useBytes === void 0) useBytes = false;
+        if (!this.buffer || !this.updatable) {
+            return;
+        }
+        this.engine.updateDynamicVertexBuffer(this.buffer, data, useBytes ? offset : offset * Float32Array.BYTES_PER_ELEMENT, vertexCount ? vertexCount * this.byteStride : undefined);
+        if (offset === 0 && vertexCount === undefined) {
+            this.data = data;
+        } else {
+            this.data = undefined;
+        }
+    };
+    /**
+   * @internal
+   */ _proto.rebuild = function rebuild() {
+        if (!this.data) {
+            if (!this.buffer) {
+                return;
+            }
+            var capacity = this.buffer.capacity;
+            if (capacity > 0) {
+                var options = this.getDataBufferOptions();
+                this.buffer = this.updatable ? this.engine.createDynamicVertexBuffer(capacity, options) : this.engine.createVertexBuffer(capacity, options);
+            } else {
+                this.buffer = undefined;
+            }
+            return;
+        }
+        this.buffer = undefined;
+        this.create(this.data);
+    };
+    /**
+   * @internal
+   */ _proto.increaseReferences = function increaseReferences() {
+        if (!this.buffer) {
+            return;
+        }
+        if (!this.isAlreadyOwned) {
+            this.isAlreadyOwned = true;
+            return;
+        }
+        this.buffer.references++;
+    };
+    _proto.dispose = function dispose() {
+        if (!this.buffer) {
+            return;
+        }
+        if (this.engine.releaseBuffer(this.buffer)) {
+            this.data = undefined;
+            this.buffer = undefined;
+            this._isDisposed = true;
+        }
+    };
+    _proto.getDataBufferOptions = function getDataBufferOptions(data) {
+        return {
+            usage: this.updatable ? exports.BufferUsage.Dynamic : exports.BufferUsage.Static,
+            type: data ? getDataType(data) : exports.BufferDataType.Float,
+            byteStride: this.byteStride,
+            instanceDivisor: this.instanced ? this.divisor : 0,
+            label: this.label
+        };
+    };
+    _create_class(Buffer, [
+        {
+            key: "isDisposed",
+            get: function get() {
+                return this._isDisposed;
+            }
+        },
+        {
+            key: "capacity",
+            get: function get() {
+                var _this_buffer;
+                var _this_buffer_capacity;
+                return (_this_buffer_capacity = (_this_buffer = this.buffer) == null ? void 0 : _this_buffer.capacity) != null ? _this_buffer_capacity : this.data ? getDataByteLength(this.data) : 0;
+            }
+        }
+    ]);
+    return Buffer;
+}();
+
+/**
+ * 描述一个顶点属性如何读取共享缓冲区。
+ */ var VertexBuffer = /*#__PURE__*/ function() {
+    function VertexBuffer(engine, data, kind, props) {
+        if (props === void 0) props = {};
+        this._isDisposed = false;
+        this.engine = engine;
+        this.kind = kind;
+        if (_instanceof1(data, Buffer)) {
+            this.buffer = data;
+            var _props_takeBufferOwnership;
+            this.ownsBuffer = (_props_takeBufferOwnership = props.takeBufferOwnership) != null ? _props_takeBufferOwnership : false;
+        } else {
+            var _props_updatable, _props_stride, _props_postponeInternalCreation, _props_instanced, _props_useBytes;
+            this.buffer = new Buffer(engine, data, (_props_updatable = props.updatable) != null ? _props_updatable : false, (_props_stride = props.stride) != null ? _props_stride : 0, (_props_postponeInternalCreation = props.postponeInternalCreation) != null ? _props_postponeInternalCreation : false, (_props_instanced = props.instanced) != null ? _props_instanced : false, (_props_useBytes = props.useBytes) != null ? _props_useBytes : false, props.divisor, props.label);
+            this.ownsBuffer = true;
+        }
+        var source = this.getData();
+        var _props_type;
+        this.type = (_props_type = props.type) != null ? _props_type : source ? getDataType(source) : VertexBuffer.FLOAT;
+        var typeByteLength = getBytesPerElement(this.type);
+        var _props_useBytes1;
+        var useBytes = (_props_useBytes1 = props.useBytes) != null ? _props_useBytes1 : false;
+        var _props_stride1;
+        var stride = (_props_stride1 = props.stride) != null ? _props_stride1 : 0;
+        var _props_offset;
+        var offset = (_props_offset = props.offset) != null ? _props_offset : 0;
+        if (useBytes) {
+            this.size = props.size || (stride ? stride / typeByteLength : 0);
+            this.byteStride = stride || this.buffer.byteStride || this.size * typeByteLength;
+            this.byteOffset = offset;
+        } else {
+            this.size = props.size || stride;
+            this.byteStride = stride ? stride * typeByteLength : this.buffer.byteStride || this.size * typeByteLength;
+            this.byteOffset = offset * typeByteLength;
+        }
+        var _props_normalized;
+        this.normalized = (_props_normalized = props.normalized) != null ? _props_normalized : false;
+        var _props_instanced1;
+        this.instanced = (_props_instanced1 = props.instanced) != null ? _props_instanced1 : false;
+        var _props_divisor;
+        this._instanceDivisor = this.instanced ? (_props_divisor = props.divisor) != null ? _props_divisor : 1 : 0;
+    }
+    var _proto = VertexBuffer.prototype;
+    _proto.getKind = function getKind() {
+        return this.kind;
+    };
+    _proto.isUpdatable = function isUpdatable() {
+        return this.buffer.isUpdatable();
+    };
+    _proto.getData = function getData() {
+        return this.buffer.getData();
+    };
+    _proto.getBuffer = function getBuffer() {
+        return this.buffer.getBuffer();
+    };
+    _proto.getWrapperBuffer = function getWrapperBuffer() {
+        return this.buffer;
+    };
+    _proto.getStrideSize = function getStrideSize() {
+        return this.byteStride / getBytesPerElement(this.type);
+    };
+    _proto.getOffset = function getOffset() {
+        return this.byteOffset / getBytesPerElement(this.type);
+    };
+    _proto.getSize = function getSize(sizeInBytes) {
+        if (sizeInBytes === void 0) sizeInBytes = false;
+        return sizeInBytes ? this.size * getBytesPerElement(this.type) : this.size;
+    };
+    _proto.getIsInstanced = function getIsInstanced() {
+        return this.instanced;
+    };
+    _proto.getInstanceDivisor = function getInstanceDivisor() {
+        return this._instanceDivisor;
+    };
+    _proto.create = function create(data) {
+        this.buffer.create(data);
+    };
+    _proto.update = function update(data) {
+        this.buffer.update(data);
+    };
+    _proto.updateDirectly = function updateDirectly(data, offset, useBytes) {
+        if (useBytes === void 0) useBytes = false;
+        this.buffer.updateDirectly(data, offset, undefined, useBytes);
+    };
+    /**
+   * @internal
+   */ _proto.rebuild = function rebuild() {
+        this.buffer.rebuild();
+    };
+    _proto.dispose = function dispose() {
+        if (this.ownsBuffer) {
+            this.buffer.dispose();
+        }
+        this._isDisposed = true;
+    };
+    _create_class(VertexBuffer, [
+        {
+            key: "isDisposed",
+            get: function get() {
+                return this._isDisposed;
+            }
+        },
+        {
+            key: "instanceDivisor",
+            get: function get() {
+                return this._instanceDivisor;
+            },
+            set: function set(value) {
+                this._instanceDivisor = value;
+                this.instanced = value !== 0;
+            }
+        }
+    ]);
+    return VertexBuffer;
+}();
+VertexBuffer.PositionKind = "aPos";
+VertexBuffer.NormalKind = "aNormal";
+VertexBuffer.TangentKind = "aTangent";
+VertexBuffer.UVKind = "aUV";
+VertexBuffer.UV2Kind = "aUV2";
+VertexBuffer.UV3Kind = "aUV3";
+VertexBuffer.UV4Kind = "aUV4";
+VertexBuffer.UV5Kind = "aUV5";
+VertexBuffer.UV6Kind = "aUV6";
+VertexBuffer.ColorKind = "aColor";
+VertexBuffer.JointsKind = "aJoints";
+VertexBuffer.WeightsKind = "aWeights";
+VertexBuffer.BYTE = exports.BufferDataType.Byte;
+VertexBuffer.UNSIGNED_BYTE = exports.BufferDataType.UnsignedByte;
+VertexBuffer.SHORT = exports.BufferDataType.Short;
+VertexBuffer.UNSIGNED_SHORT = exports.BufferDataType.UnsignedShort;
+VertexBuffer.INT = exports.BufferDataType.Int;
+VertexBuffer.UNSIGNED_INT = exports.BufferDataType.UnsignedInt;
+VertexBuffer.FLOAT = exports.BufferDataType.Float;
+
 exports.HitTestType = void 0;
 (function(HitTestType) {
     HitTestType[HitTestType["triangle"] = 1] = "triangle";
@@ -13352,7 +13779,7 @@ BoundingBox.tempVector2 = new Vector3();
     };
     _proto.geometryToTriangles = function geometryToTriangles(geometry) {
         var indices = geometry.getIndexData();
-        var vertices = geometry.getAttributeData("aPos");
+        var vertices = geometry.getAttributeData(VertexBuffer.PositionKind);
         var res = [];
         if (!indices || !vertices) {
             return res;
@@ -13558,7 +13985,7 @@ var HELP_LINK = {
 var tempQuat$1 = new Quaternion();
 var tempVector3$1 = new Vector3();
 var tempVector3Second$1 = new Vector3();
-var seed$8 = 1;
+var seed$7 = 1;
 /**
  * 变换组件，用于描述元素的位置、旋转、缩放等信息
  */ var Transform = /*#__PURE__*/ function() {
@@ -13613,7 +14040,7 @@ var seed$8 = 1;
             quat: new Quaternion(0, 0, 0, 1),
             scale: new Vector3(1, 1, 1)
         };
-        this.name = "transform_" + seed$8++;
+        this.name = "transform_" + seed$7++;
         if (props) {
             this.setTransform(props);
         }
@@ -20055,310 +20482,6 @@ exports.CompositionComponent = __decorate([
     effectsClass("CompositionComponent")
 ], exports.CompositionComponent);
 
-/**
- * Mesh 组件
- */ var MeshComponent = /*#__PURE__*/ function(RendererComponent) {
-    _inherits(MeshComponent, RendererComponent);
-    function MeshComponent(engine) {
-        var _this;
-        _this = RendererComponent.call(this, engine) || this;
-        // TODO 点击测试后续抽象一个 Collider 组件
-        _this.getHitTestParams = function(force) {
-            var worldMatrix = _this.transform.getWorldMatrix();
-            _this.boundingBoxInfo.setGeometry(_this.geometry, worldMatrix);
-            var area = _this.boundingBoxInfo.getRawBoundingBoxTriangle();
-            if (area) {
-                return {
-                    type: area.type,
-                    triangles: area.area,
-                    clipMasks: _this.frameClipMasks
-                };
-            }
-        };
-        return _this;
-    }
-    var _proto = MeshComponent.prototype;
-    _proto.render = function render(renderer) {
-        this.maskManager.drawStencilMask(renderer, this);
-        for(var i = 0; i < this.materials.length; i++){
-            var material = this.materials[i];
-            renderer.drawGeometry(this.geometry, this.transform.getWorldMatrix(), material, i);
-        }
-    };
-    _proto.drawStencilMask = function drawStencilMask(maskRef) {
-        if (!this.isActiveAndEnabled) {
-            return;
-        }
-        for(var i = 0; i < this.materials.length; i++){
-            var material = this.materials[i];
-            this.maskManager.drawGeometryMask(this.engine.renderer, this.geometry, this.transform.getWorldMatrix(), material, maskRef, i);
-        }
-    };
-    _proto.getBoundingBox = function getBoundingBox() {
-        var worldMatrix = this.transform.getWorldMatrix();
-        this.boundingBoxInfo.setGeometry(this.geometry, worldMatrix);
-        var boundingBox = this.boundingBoxInfo.getBoundingBoxTriangle();
-        return boundingBox;
-    };
-    _proto.getBoundingBoxInfo = function getBoundingBoxInfo() {
-        var positionArray = this.geometry.getAttributeData("aPos");
-        if (positionArray) {
-            var minMaxResult = extractMinAndMax(positionArray, 0, positionArray.length / 3);
-            minMaxResult.minimum.x *= this.transform.size.x;
-            minMaxResult.minimum.y *= this.transform.size.y;
-            minMaxResult.maximum.x *= this.transform.size.x;
-            minMaxResult.maximum.y *= this.transform.size.y;
-            this.boundingBoxInfo.reConstruct(minMaxResult.minimum, minMaxResult.maximum, this.transform.getWorldMatrix());
-        }
-        return this.boundingBoxInfo;
-    };
-    _proto.fromData = function fromData(data) {
-        RendererComponent.prototype.fromData.call(this, data);
-        var maskOptions = data.mask;
-        if (maskOptions) {
-            this.maskManager.setMaskOptions(this.engine, maskOptions);
-        }
-    };
-    return MeshComponent;
-}(RendererComponent);
-__decorate([
-    serialize()
-], MeshComponent.prototype, "geometry", void 0);
-
-exports.EffectComponent = /*#__PURE__*/ function(MeshComponent) {
-    _inherits(EffectComponent, MeshComponent);
-    function EffectComponent(engine) {
-        var _this;
-        _this = MeshComponent.call(this, engine) || this;
-        _this.time = 0;
-        _this.name = "EffectComponent";
-        return _this;
-    }
-    var _proto = EffectComponent.prototype;
-    _proto.onStart = function onStart() {
-        this.item.getHitTestParams = this.getHitTestParams;
-    };
-    _proto.onUpdate = function onUpdate(dt) {
-        var time = this.time;
-        var _this_material_getVector4;
-        var _Time = (_this_material_getVector4 = this.material.getVector4("_Time")) != null ? _this_material_getVector4 : new Vector4();
-        this.material.setVector4("_Time", _Time.set(time / 20, time, time * 2, time * 3));
-        this.time += dt / 1000;
-    };
-    _proto.fromData = function fromData(data) {
-        MeshComponent.prototype.fromData.call(this, data);
-        this.material = this.materials[0];
-    };
-    return EffectComponent;
-}(MeshComponent);
-exports.EffectComponent = __decorate([
-    effectsClass(DataType.EffectComponent)
-], exports.EffectComponent);
-
-var tempVector3 = new Vector3(0, 0, 0);
-var tempVector3Second = new Vector3(0, 0, 0);
-var ConstraintTarget = function ConstraintTarget() {
-    this.target = null;
-    this.weight = 1.0;
-};
-exports.PositionConstraint = /*#__PURE__*/ function(Component) {
-    _inherits(PositionConstraint, Component);
-    function PositionConstraint() {
-        var _this;
-        _this = Component.apply(this, arguments) || this;
-        /**
-   * 初始位置（当前元素的初始世界位置）
-   */ _this.positionAtRest = new Vector3(0, 0, 0);
-        /**
-   * 位置偏移
-   */ _this.positionOffset = new Vector3(0, 0, 0);
-        /**
-   * 约束权重 (0-1)
-   */ _this.weight = 1.0;
-        /**
-   * 是否约束 X 轴
-   */ _this.constrainX = true;
-        /**
-   * 是否约束 Y 轴
-   */ _this.constrainY = true;
-        /**
-   * 是否约束 Z 轴
-   */ _this.constrainZ = true;
-        /**
-   * 约束目标
-   */ _this.targets = [];
-        return _this;
-    }
-    var _proto = PositionConstraint.prototype;
-    _proto.onStart = function onStart() {
-        // 保存当前元素的初始世界位置
-        var pos = this.item.transform.getWorldPosition();
-        this.positionAtRest.copyFrom(pos);
-    };
-    _proto.onUpdate = function onUpdate(dt) {
-        if (this.targets.length === 0) {
-            return;
-        }
-        // 重置 tempVector3 用于计算融合位置
-        tempVector3.set(0, 0, 0);
-        var totalWeight = 0;
-        // 计算所有目标的加权平均位置
-        for(var _iterator = _create_for_of_iterator_helper_loose(this.targets), _step; !(_step = _iterator()).done;){
-            var constraintTarget = _step.value;
-            if (constraintTarget.target) {
-                var targetPos = constraintTarget.target.transform.getWorldPosition();
-                var weight = constraintTarget.weight;
-                tempVector3.x += targetPos.x * weight;
-                tempVector3.y += targetPos.y * weight;
-                tempVector3.z += targetPos.z * weight;
-                totalWeight += weight;
-            }
-        }
-        // 归一化加权位置
-        if (totalWeight > 0) {
-            tempVector3.x /= totalWeight;
-            tempVector3.y /= totalWeight;
-            tempVector3.z /= totalWeight;
-        }
-        // 应用偏移
-        tempVector3.x += this.positionOffset.x;
-        tempVector3.y += this.positionOffset.y;
-        tempVector3.z += this.positionOffset.z;
-        // 根据全局权重在初始位置和融合位置之间插值，结果存入 tempVector3Second
-        tempVector3Second.set(this.lerp(this.positionAtRest.x, tempVector3.x, this.weight), this.lerp(this.positionAtRest.y, tempVector3.y, this.weight), this.lerp(this.positionAtRest.z, tempVector3.z, this.weight));
-        // 应用轴约束，复用 tempVector3 存储当前位置
-        tempVector3.copyFrom(this.item.transform.getWorldPosition());
-        var finalX = this.constrainX ? tempVector3Second.x : tempVector3.x;
-        var finalY = this.constrainY ? tempVector3Second.y : tempVector3.y;
-        var finalZ = this.constrainZ ? tempVector3Second.z : tempVector3.z;
-        // 设置新的世界位置
-        this.item.transform.setWorldPosition(finalX, finalY, finalZ);
-    };
-    /**
-   * 添加约束目标
-   * @param target - 目标元素
-   * @param weight - 权重值 (0-1)
-   */ _proto.addTarget = function addTarget(target, weight) {
-        if (weight === void 0) weight = 1.0;
-        var constraintTarget = new ConstraintTarget();
-        constraintTarget.target = target;
-        constraintTarget.weight = Math.max(0, Math.min(1, weight));
-        this.targets.push(constraintTarget);
-    };
-    /**
-   * 移除约束目标
-   * @param target - 要移除的目标元素
-   */ _proto.removeTarget = function removeTarget(target) {
-        var index = this.targets.findIndex(function(ct) {
-            return ct.target === target;
-        });
-        if (index !== -1) {
-            this.targets.splice(index, 1);
-        }
-    };
-    /**
-   * 清除所有约束目标
-   */ _proto.clearTargets = function clearTargets() {
-        this.targets = [];
-    };
-    /**
-   * 设置位置偏移
-   * @param x - X 轴偏移
-   * @param y - Y 轴偏移
-   * @param z - Z 轴偏移
-   */ _proto.setPositionOffset = function setPositionOffset(x, y, z) {
-        this.positionOffset.set(x, y, z);
-    };
-    /**
-   * 设置全局约束权重
-   * @param weight - 权重值 (0-1)，0 表示保持初始位置，1 表示完全跟随目标
-   */ _proto.setWeight = function setWeight(weight) {
-        this.weight = Math.max(0, Math.min(1, weight));
-    };
-    /**
-   * 线性插值
-   * @param start - 起始值
-   * @param end - 结束值
-   * @param t - 插值因子 (0-1)
-   */ _proto.lerp = function lerp(start, end, t) {
-        return start + (end - start) * t;
-    };
-    _proto.fromData = function fromData(data) {
-        Component.prototype.fromData.call(this, data);
-        // Deserialize all properties
-        this.positionAtRest.copyFrom(data.positionAtRest);
-        this.positionOffset.copyFrom(data.positionOffset);
-        this.weight = data.weight;
-        this.constrainX = data.constrainX;
-        this.constrainY = data.constrainY;
-        this.constrainZ = data.constrainZ;
-        this.targets = [];
-        for(var _iterator = _create_for_of_iterator_helper_loose(data.targets), _step; !(_step = _iterator()).done;){
-            var targetData = _step.value;
-            var constraintTarget = new ConstraintTarget();
-            constraintTarget.target = this.engine.findObject(targetData.target);
-            constraintTarget.weight = targetData.weight;
-            this.targets.push(constraintTarget);
-        }
-    };
-    return PositionConstraint;
-}(Component);
-exports.PositionConstraint = __decorate([
-    effectsClass("PositionConstraint")
-], exports.PositionConstraint);
-
-exports.PostProcessVolume = /*#__PURE__*/ function(Component) {
-    _inherits(PostProcessVolume, Component);
-    function PostProcessVolume(engine) {
-        var _this;
-        _this = Component.call(this, engine) || this;
-        _this.bloom = {
-            threshold: 0,
-            intensity: 0,
-            active: false
-        };
-        _this.vignette = {
-            intensity: 0,
-            smoothness: 0,
-            roundness: 0,
-            active: false
-        };
-        _this.tonemapping = {
-            active: false
-        };
-        _this.colorAdjustments = {
-            brightness: 0,
-            saturation: 0,
-            contrast: 0,
-            active: false
-        };
-        return _this;
-    }
-    var _proto = PostProcessVolume.prototype;
-    _proto.onStart = function onStart() {
-        var composition = this.item.composition;
-        if (composition) {
-            composition.renderFrame.globalVolume = this;
-        }
-    };
-    return PostProcessVolume;
-}(Component);
-__decorate([
-    serialize()
-], exports.PostProcessVolume.prototype, "bloom", void 0);
-__decorate([
-    serialize()
-], exports.PostProcessVolume.prototype, "vignette", void 0);
-__decorate([
-    serialize()
-], exports.PostProcessVolume.prototype, "tonemapping", void 0);
-__decorate([
-    serialize()
-], exports.PostProcessVolume.prototype, "colorAdjustments", void 0);
-exports.PostProcessVolume = __decorate([
-    effectsClass(DataType.PostProcessVolume)
-], exports.PostProcessVolume);
-
 var EFFECTS_COPY_MESH_NAME = "effects-internal-copy";
 var COPY_MESH_SHADER_ID = "effects-internal-copy-mesh";
 var COPY_VERTEX_SHADER = "\nprecision highp float;\nattribute vec2 aPos;\nvarying vec2 vTex;\nvoid main(){\n    gl_Position = vec4(aPos,0.,1.0);\n    vTex = (aPos + vec2(1.0))/2.;\n}";
@@ -20549,7 +20672,7 @@ exports.RenderPassDestroyAttachmentType = void 0;
    * 强制销毁
    */ RenderPassDestroyAttachmentType[RenderPassDestroyAttachmentType["destroy"] = 0] = "destroy";
 })(exports.RenderPassDestroyAttachmentType || (exports.RenderPassDestroyAttachmentType = {}));
-var seed$7 = 1;
+var seed$6 = 1;
 /**
  * RenderPass 抽象类
  */ var RenderPass = /*#__PURE__*/ function() {
@@ -20559,7 +20682,7 @@ var seed$7 = 1;
    */ this.priority = 0;
         /**
    * 名称
-   */ this.name = "RenderPass" + seed$7++;
+   */ this.name = "RenderPass" + seed$6++;
         /**
    * 包含的 Mesh 列表
    */ this.meshes = [];
@@ -20684,48 +20807,577 @@ var DrawObjectPass = /*#__PURE__*/ function(RenderPass) {
     return DrawObjectPass;
 }(RenderPass);
 
-var _obj$4;
-var BYTES_TYPE_MAP = (_obj$4 = {}, _obj$4[glContext.FLOAT] = Float32Array.BYTES_PER_ELEMENT, _obj$4[glContext.INT] = Int32Array.BYTES_PER_ELEMENT, _obj$4[glContext.SHORT] = Int16Array.BYTES_PER_ELEMENT, _obj$4[glContext.BYTE] = Int8Array.BYTES_PER_ELEMENT, _obj$4);
+var geometryId = 1;
 /**
- * Geometry 抽象类
+ * 几何数据、属性布局和绘制范围的后端无关实现。
  */ var Geometry = /*#__PURE__*/ function(EffectsObject) {
     _inherits(Geometry, EffectsObject);
-    function Geometry() {
+    function Geometry(engine, props) {
         var _this;
-        _this = EffectsObject.apply(this, arguments) || this;
-        /**
-   * Geometry 的名称
-   */ _this.name = "";
-        /**
-   * 子网格数据
-   */ _this.subMeshes = [];
+        _this = EffectsObject.call(this, engine) || this;
+        _this.name = "";
+        _this.subMeshes = [];
+        /** @hide */ _this.mode = 4;
+        /** @hide */ _this.instanceCount = 0;
+        _this.vertexBuffers = {};
+        _this.indices = new Uint16Array(0);
+        _this.drawCount = 0;
+        _this.drawStart = 0;
+        _this.skin = {};
+        _this.disposed = false;
+        _this.initialized = false;
+        _this.bufferUsage = exports.BufferUsage.Static;
+        if (supportsVertexArrayObjects(engine)) {
+            _this.vertexArrayObjects = {};
+        }
+        if (props) {
+            _this.processProps(props);
+        }
         return _this;
     }
     var _proto = Geometry.prototype;
+    /** @hide */ _proto.isDisposed = function isDisposed() {
+        return this.disposed;
+    };
     /**
-   * 初始化 GPU 资源
-   * @override
-   */ _proto.initialize = function initialize() {
-    // OVERRIDE
+   * @internal
+   */ _proto.getOptions = function getOptions() {
+        return this.options ? _extends({}, this.options) : undefined;
+    };
+    /** @hide */ _proto.getVertexBuffer = function getVertexBuffer(name) {
+        return this.vertexBuffers[name];
     };
     /**
-   * 几何数据刷新
-   */ _proto.flush = function flush() {
-    // OVERRIDE
+   * @internal
+   */ _proto.getVertexBuffers = function getVertexBuffers() {
+        return this.vertexBuffers;
+    };
+    /** @hide */ _proto.setVerticesBuffer = function setVerticesBuffer(vertexBuffer, disposeExistingBuffer) {
+        if (disposeExistingBuffer === void 0) disposeExistingBuffer = true;
+        var kind = vertexBuffer.getKind();
+        var current = this.vertexBuffers[kind];
+        if (current && disposeExistingBuffer) {
+            current.dispose();
+        }
+        if (vertexBuffer.ownsBuffer) {
+            vertexBuffer.buffer.increaseReferences();
+        }
+        this.vertexBuffers[kind] = vertexBuffer;
+        this.disposeVertexArrayObjects();
+    };
+    /** @hide */ _proto.getAttributeBuffer = function getAttributeBuffer(name) {
+        var _this_vertexBuffers_name;
+        return (_this_vertexBuffers_name = this.vertexBuffers[name]) == null ? void 0 : _this_vertexBuffers_name.getWrapperBuffer();
+    };
+    _proto.getAttributeData = function getAttributeData(name) {
+        var _this_vertexBuffers_name;
+        return (_this_vertexBuffers_name = this.vertexBuffers[name]) == null ? void 0 : _this_vertexBuffers_name.getData();
+    };
+    _proto.setAttributeData = function setAttributeData(name, data) {
+        var vertexBuffer = this.vertexBuffers[name];
+        if (!vertexBuffer) {
+            return;
+        }
+        vertexBuffer.update(data);
+        this.disposeVertexArrayObjects();
+    };
+    _proto.setAttributeSubData = function setAttributeSubData(name, offset, data) {
+        var vertexBuffer = this.vertexBuffers[name];
+        if (!vertexBuffer) {
+            return;
+        }
+        var buffer = vertexBuffer.getWrapperBuffer();
+        var vertexCount = buffer.byteStride > 0 ? Math.ceil(data.byteLength / buffer.byteStride) : 0;
+        buffer.updateDirectly(data, offset, vertexCount);
+        this.disposeVertexArrayObjects();
+    };
+    _proto.getAttributeStride = function getAttributeStride(name) {
+        var _this_vertexBuffers_name;
+        var _this_vertexBuffers_name_byteStride;
+        return (_this_vertexBuffers_name_byteStride = (_this_vertexBuffers_name = this.vertexBuffers[name]) == null ? void 0 : _this_vertexBuffers_name.byteStride) != null ? _this_vertexBuffers_name_byteStride : 0;
+    };
+    _proto.getAttributeNames = function getAttributeNames() {
+        return Object.keys(this.vertexBuffers);
+    };
+    /** @hide */ _proto.getIndexBuffer = function getIndexBuffer() {
+        return this.indexBuffer;
+    };
+    _proto.getIndexData = function getIndexData() {
+        return this.indices;
+    };
+    /** @hide */ _proto.getIndexType = function getIndexType() {
+        var _this_indexBuffer;
+        return ((_this_indexBuffer = this.indexBuffer) == null ? void 0 : _this_indexBuffer.is32Bits) || shouldUse32Bits(this.indices) ? exports.BufferDataType.UnsignedInt : exports.BufferDataType.UnsignedShort;
+    };
+    _proto.setIndexData = function setIndexData(data) {
+        if (!isIndexData(data)) {
+            throw new TypeError("Index data must use a supported integer array.");
+        }
+        this.indices = Array.isArray(data) ? shouldUse32Bits(data) ? new Uint32Array(data) : new Uint16Array(data) : data;
+        this.releaseIndexBuffer();
+        this.disposeVertexArrayObjects();
+        if (this.initialized) {
+            this.createIndexBuffer();
+        }
+    };
+    _proto.setIndexSubData = function setIndexSubData(offset, data) {
+        var indices = this.indices;
+        if (offset < 0 || offset + data.length > indices.length) {
+            throw new RangeError("Buffer '" + this.name + "##index' update is out of range.");
+        }
+        indices.set(data, offset);
+        if (this.indexBuffer) {
+            var updatedData = indices.slice(offset, offset + data.length);
+            this.engine.updateDynamicIndexBuffer(this.indexBuffer, updatedData, offset * (this.indexBuffer.is32Bits ? Uint32Array.BYTES_PER_ELEMENT : Uint16Array.BYTES_PER_ELEMENT));
+            this.disposeVertexArrayObjects();
+        }
+    };
+    _proto.setDrawStart = function setDrawStart(start) {
+        this.drawStart = start;
+    };
+    _proto.getDrawStart = function getDrawStart() {
+        return this.drawStart;
+    };
+    _proto.setDrawCount = function setDrawCount(count) {
+        this.drawCount = count;
+    };
+    _proto.getDrawCount = function getDrawCount() {
+        return this.drawCount;
+    };
+    _proto.getSkinProps = function getSkinProps() {
+        return this.skin;
+    };
+    /** @hide */ _proto.bind = function bind(shader) {
+        var vertexArrayObjects = this.vertexArrayObjects;
+        var engine = this.engine;
+        if (!vertexArrayObjects || !supportsVertexArrayObjects(engine)) {
+            engine.bindBuffers(this.vertexBuffers, this.indexBuffer, shader);
+            return;
+        }
+        var vertexArrayObject = vertexArrayObjects[shader.key];
+        if (!vertexArrayObject) {
+            vertexArrayObject = engine.recordVertexArrayObject(this.vertexBuffers, this.indexBuffer, shader);
+            if (vertexArrayObject) {
+                vertexArrayObjects[shader.key] = vertexArrayObject;
+            }
+        }
+        if (vertexArrayObject) {
+            engine.bindVertexArrayObject(vertexArrayObject, this.indexBuffer);
+        } else {
+            engine.bindBuffers(this.vertexBuffers, this.indexBuffer, shader);
+        }
+    };
+    _proto.releaseVertexArrayObject = function releaseVertexArrayObject(key) {
+        var vertexArrayObjects = this.vertexArrayObjects;
+        if (!vertexArrayObjects) {
+            return;
+        }
+        var vertexArrayObject = vertexArrayObjects[key];
+        if (vertexArrayObject && hasVertexArrayObjectMethods(this.engine)) {
+            this.engine.releaseVertexArrayObject(vertexArrayObject);
+        }
+        delete vertexArrayObjects[key];
+    };
+    _proto.initialize = function initialize() {
+        if (this.initialized || this.disposed) {
+            return;
+        }
+        this.forEachVertexBuffer(function(buffer) {
+            buffer.create();
+        });
+        this.createIndexBuffer();
+        this.engine.addGeometry(this);
+        this.initialized = true;
+        this.options = undefined;
+    };
+    _proto.flush = function flush() {
+        if (this.disposed) {
+            return;
+        }
+        this.initialize();
+        this.forEachVertexBuffer(function(buffer) {
+            return buffer.create();
+        });
+    };
+    /** @hide */ _proto.restore = function restore() {
+        if (!this.initialized || this.disposed) {
+            return;
+        }
+        if (this.vertexArrayObjects) {
+            this.vertexArrayObjects = {};
+        }
+        this.forEachVertexBuffer(function(buffer) {
+            return buffer.rebuild();
+        });
+        if (this.indices.length > 0) {
+            this.indexBuffer = undefined;
+            this.createIndexBuffer();
+        }
+    };
+    _proto.fromData = function fromData(data) {
+        EffectsObject.prototype.fromData.call(this, data);
+        this.subMeshes = data.subMeshes;
+        var buffer;
+        if (data.buffer) {
+            buffer = new Uint8Array(decodeBase64ToArrayBuffer(data.buffer));
+        } else if (data.binaryData) {
+            buffer = data.binaryData;
+        }
+        if (!buffer) {
+            return;
+        }
+        var vertexCount = data.vertexData.vertexCount;
+        var props = {
+            name: data.name,
+            mode: 4,
+            attributes: {}
+        };
+        if (hasSemantic(data)) {
+            data.vertexData.channels.forEach(function(channel) {
+                var _vertexBufferSemanticMap_channel_semantic;
+                var attributeName = (_vertexBufferSemanticMap_channel_semantic = vertexBufferSemanticMap[channel.semantic]) != null ? _vertexBufferSemanticMap_channel_semantic : channel.semantic;
+                props.attributes[attributeName] = {
+                    type: vertexFormatToDataType(channel.format),
+                    size: channel.dimension,
+                    data: createVertexTypedArray(channel, buffer, vertexCount),
+                    normalize: channel.normalize
+                };
+            });
+        } else {
+            var positionChannel = data.vertexData.channels[0];
+            var uvChannel = data.vertexData.channels[1];
+            var normalChannel = data.vertexData.channels[2];
+            var _obj;
+            props.attributes = (_obj = {}, _obj[VertexBuffer.PositionKind] = createAttributeFromChannel(positionChannel, buffer, vertexCount, 3), _obj[VertexBuffer.UVKind] = createAttributeFromChannel(uvChannel, buffer, vertexCount, 2), _obj[VertexBuffer.NormalKind] = createAttributeFromChannel(normalChannel, buffer, vertexCount, 3), _obj);
+        }
+        if (data.indexFormat !== IndexFormatType.None) {
+            var indices = createIndexTypedArray(data.indexFormat, buffer, data.indexOffset);
+            props.indices = {
+                data: indices
+            };
+            props.drawCount = indices.length;
+        } else {
+            props.drawCount = vertexCount;
+        }
+        this.processProps(props);
+        this.skin = {
+            boneNames: data.boneNames,
+            rootBoneName: data.rootBoneName,
+            inverseBindMatrices: data.inverseBindMatrices
+        };
+    };
+    _proto.dispose = function dispose() {
+        var _this = this;
+        if (this.disposed) {
+            return;
+        }
+        this.disposeVertexArrayObjects();
+        Object.keys(this.vertexBuffers).forEach(function(name) {
+            return _this.vertexBuffers[name].dispose();
+        });
+        this.releaseIndexBuffer();
+        this.vertexBuffers = {};
+        this.indices = new Uint16Array(0);
+        this.options = undefined;
+        this.drawStart = 0;
+        this.drawCount = 0;
+        if (this.initialized) {
+            this.engine.removeGeometry(this);
+        }
+        this.initialized = false;
+        this.disposed = true;
+        EffectsObject.prototype.dispose.call(this);
     };
+    _proto.processProps = function processProps(props) {
+        var _this = this;
+        this.releaseCurrentBuffers();
+        var _props_bufferUsage;
+        var usage = (_props_bufferUsage = props.bufferUsage) != null ? _props_bufferUsage : exports.BufferUsage.Static;
+        var sourceBuffers = {};
+        var sourceDivisors = {};
+        var sourceTypes = {};
+        Object.keys(props.attributes).forEach(function(name) {
+            var attribute = props.attributes[name];
+            var source = "dataSource" in attribute ? attribute.dataSource : name;
+            var _sourceDivisors_source, _attribute_instanceDivisor;
+            sourceDivisors[source] = Math.max((_sourceDivisors_source = sourceDivisors[source]) != null ? _sourceDivisors_source : 0, (_attribute_instanceDivisor = attribute.instanceDivisor) != null ? _attribute_instanceDivisor : 0);
+        });
+        Object.keys(props.attributes).forEach(function(name) {
+            var attribute = props.attributes[name];
+            if ("dataSource" in attribute) {
+                return;
+            }
+            var typedData = isTypedArray(attribute.data) ? attribute.data : undefined;
+            var _attribute_type;
+            var type = (_attribute_type = attribute.type) != null ? _attribute_type : typedData ? getDataType(typedData) : exports.BufferDataType.Float;
+            var bytesPerElement = getBytesPerElement(type);
+            var byteStride = attribute.stride || attribute.size * bytesPerElement;
+            var data = typedData != null ? typedData : createTypedArray(type, 0);
+            if (data.length === 0 && props.maxVertex && props.maxVertex > 0) {
+                var elementStride = byteStride / bytesPerElement;
+                data = createTypedArray(type, Math.ceil(props.maxVertex * elementStride));
+            }
+            var _sourceDivisors_name;
+            var instanceDivisor = (_sourceDivisors_name = sourceDivisors[name]) != null ? _sourceDivisors_name : 0;
+            sourceTypes[name] = type;
+            sourceBuffers[name] = new Buffer(_this.engine, data, usage !== exports.BufferUsage.Static, byteStride, false, instanceDivisor > 0, true, instanceDivisor, name);
+        });
+        Object.keys(props.attributes).forEach(function(name) {
+            var attribute = props.attributes[name];
+            var source = "dataSource" in attribute ? attribute.dataSource : name;
+            var buffer = sourceBuffers[source];
+            if (!buffer) {
+                throw new Error("Attribute '" + name + "' references missing data source '" + source + "'.");
+            }
+            var _attribute_type, _ref;
+            var type = (_ref = (_attribute_type = attribute.type) != null ? _attribute_type : sourceTypes[source]) != null ? _ref : exports.BufferDataType.Float;
+            var byteStride = attribute.stride || buffer.byteStride;
+            var _attribute_instanceDivisor;
+            var instanceDivisor = (_attribute_instanceDivisor = attribute.instanceDivisor) != null ? _attribute_instanceDivisor : 0;
+            var _attribute_offset, _attribute_normalize;
+            var vertexBuffer = new VertexBuffer(_this.engine, buffer, name, {
+                size: attribute.size,
+                type: type,
+                stride: byteStride,
+                offset: (_attribute_offset = attribute.offset) != null ? _attribute_offset : 0,
+                normalized: (_attribute_normalize = attribute.normalize) != null ? _attribute_normalize : false,
+                instanced: instanceDivisor > 0,
+                divisor: instanceDivisor,
+                useBytes: true,
+                takeBufferOwnership: true
+            });
+            _this.setVerticesBuffer(vertexBuffer);
+        });
+        var _props_name;
+        this.name = (_props_name = props.name) != null ? _props_name : "effectsGeometry:" + geometryId++;
+        var _props_drawStart;
+        this.drawStart = (_props_drawStart = props.drawStart) != null ? _props_drawStart : 0;
+        var _props_drawCount;
+        this.drawCount = (_props_drawCount = props.drawCount) != null ? _props_drawCount : 0;
+        var _props_mode;
+        this.mode = (_props_mode = props.mode) != null ? _props_mode : 4;
+        var _props_instanceCount;
+        this.instanceCount = (_props_instanceCount = props.instanceCount) != null ? _props_instanceCount : 0;
+        this.bufferUsage = usage;
+        this.options = props;
+        if (props.indices) {
+            var data = props.indices.data;
+            if (!isIndexData(data)) {
+                throw new TypeError("Index data must use a supported integer array.");
+            }
+            // 索引还会参与 CPU 侧的命中检测和几何查询，因此始终保留源数据。
+            this.indices = Array.isArray(data) ? shouldUse32Bits(data) ? new Uint32Array(data) : new Uint16Array(data) : data;
+        }
+        this.disposeVertexArrayObjects();
+    };
+    _proto.releaseCurrentBuffers = function releaseCurrentBuffers() {
+        var _this = this;
+        var wasInitialized = this.initialized;
+        this.disposeVertexArrayObjects();
+        Object.keys(this.vertexBuffers).forEach(function(name) {
+            return _this.vertexBuffers[name].dispose();
+        });
+        this.releaseIndexBuffer();
+        this.vertexBuffers = {};
+        this.indices = new Uint16Array(0);
+        if (wasInitialized) {
+            this.engine.removeGeometry(this);
+            this.initialized = false;
+        }
+    };
+    _proto.disposeVertexArrayObjects = function disposeVertexArrayObjects() {
+        var _this = this;
+        var vertexArrayObjects = this.vertexArrayObjects;
+        if (!vertexArrayObjects) {
+            return;
+        }
+        Object.keys(vertexArrayObjects).forEach(function(key) {
+            var vertexArrayObject = vertexArrayObjects[key];
+            if (vertexArrayObject && hasVertexArrayObjectMethods(_this.engine)) {
+                _this.engine.releaseVertexArrayObject(vertexArrayObject);
+            }
+        });
+        this.vertexArrayObjects = {};
+    };
+    _proto.createIndexBuffer = function createIndexBuffer() {
+        var indices = this.indices;
+        if (indices.length === 0 || this.indexBuffer) {
+            return;
+        }
+        this.indexBuffer = this.engine.createIndexBuffer(indices, {
+            usage: this.bufferUsage,
+            type: this.getIndexType(),
+            byteStride: 0,
+            instanceDivisor: 0,
+            label: "" + this.name + "##index"
+        });
+    };
+    _proto.releaseIndexBuffer = function releaseIndexBuffer() {
+        if (!this.indexBuffer) {
+            return;
+        }
+        this.engine.releaseBuffer(this.indexBuffer);
+        this.indexBuffer = undefined;
+    };
+    _proto.forEachVertexBuffer = function forEachVertexBuffer(callback) {
+        var _this = this;
+        var visited = new Set();
+        Object.keys(this.vertexBuffers).forEach(function(name) {
+            var buffer = _this.vertexBuffers[name].getWrapperBuffer();
+            if (!visited.has(buffer)) {
+                visited.add(buffer);
+                callback(buffer);
+            }
+        });
+    };
+    _create_class(Geometry, [
+        {
+            key: "isInitialized",
+            get: /**
+   * @internal
+   */ function get() {
+                return this.initialized;
+            }
+        }
+    ]);
     return Geometry;
 }(EffectsObject);
-function generateEmptyTypedArray(type) {
-    if (type === glContext.INT) {
-        return new Int32Array(0);
+Geometry.create = function(engine, props) {
+    return new Geometry(engine, props);
+};
+function isTypedArray(value) {
+    return ArrayBuffer.isView(value) && !_instanceof1(value, DataView);
+}
+function hasVertexArrayObjectMethods(engine) {
+    var candidate = engine;
+    return typeof candidate.recordVertexArrayObject === "function" && typeof candidate.bindVertexArrayObject === "function" && typeof candidate.releaseVertexArrayObject === "function";
+}
+function supportsVertexArrayObjects(engine) {
+    var _engine_gpuCapability;
+    return ((_engine_gpuCapability = engine.gpuCapability) == null ? void 0 : _engine_gpuCapability.detail.vertexArrayObject) === true && hasVertexArrayObjectMethods(engine);
+}
+function isIndexData(data) {
+    return Array.isArray(data) || _instanceof1(data, Int32Array) || _instanceof1(data, Uint16Array) || _instanceof1(data, Uint32Array);
+}
+function shouldUse32Bits(data) {
+    if (_instanceof1(data, Uint32Array)) {
+        return true;
+    }
+    if (_instanceof1(data, Uint16Array)) {
+        return false;
     }
-    if (type === glContext.SHORT) {
-        return new Int16Array(0);
+    for(var i = 0; i < data.length; i++){
+        if (data[i] >= 65535) {
+            return true;
+        }
     }
-    return new Float32Array(0);
+    return false;
+}
+function createAttributeFromChannel(channel, buffer, vertexCount, size) {
+    return {
+        type: vertexFormatToDataType(channel.format),
+        size: size,
+        data: createVertexTypedArray(channel, buffer, vertexCount),
+        normalize: channel.normalize
+    };
+}
+function createVertexTypedArray(channel, baseBuffer, vertexCount) {
+    var arrayBuffer = baseBuffer.buffer;
+    var byteOffset = baseBuffer.byteOffset + channel.offset;
+    var length = channel.dimension * vertexCount;
+    switch(channel.format){
+        case VertexFormatType.Float32:
+            return new Float32Array(arrayBuffer, byteOffset, length);
+        case VertexFormatType.Int16:
+            return new Int16Array(arrayBuffer, byteOffset, length);
+        case VertexFormatType.Int8:
+            return new Int8Array(arrayBuffer, byteOffset, length);
+        case VertexFormatType.UInt16:
+            return new Uint16Array(arrayBuffer, byteOffset, length);
+        case VertexFormatType.UInt8:
+            return new Uint8Array(arrayBuffer, byteOffset, length);
+        default:
+            throw new Error("Unsupported vertex format: " + channel.format + ".");
+    }
+}
+function createIndexTypedArray(type, baseBuffer, offset) {
+    var arrayBuffer = baseBuffer.buffer;
+    var byteOffset = baseBuffer.byteOffset + offset;
+    var byteLength = baseBuffer.byteLength - offset;
+    switch(type){
+        case IndexFormatType.UInt16:
+            return new Uint16Array(arrayBuffer, byteOffset, byteLength / Uint16Array.BYTES_PER_ELEMENT);
+        case IndexFormatType.UInt32:
+            return new Uint32Array(arrayBuffer, byteOffset, byteLength / Uint32Array.BYTES_PER_ELEMENT);
+        default:
+            throw new Error("Unsupported index format: " + type + ".");
+    }
+}
+function vertexFormatToDataType(format) {
+    switch(format){
+        case VertexFormatType.Float32:
+            return exports.BufferDataType.Float;
+        case VertexFormatType.Int16:
+            return exports.BufferDataType.Short;
+        case VertexFormatType.Int8:
+            return exports.BufferDataType.Byte;
+        case VertexFormatType.UInt16:
+            return exports.BufferDataType.UnsignedShort;
+        case VertexFormatType.UInt8:
+            return exports.BufferDataType.UnsignedByte;
+        default:
+            throw new Error("Unsupported vertex format: " + format + ".");
+    }
+}
+function hasSemantic(data) {
+    return data.vertexData.channels.some(function(channel) {
+        return !!channel.semantic;
+    });
+}
+function decodeBase64ToArrayBuffer(value) {
+    var binary = atob(value);
+    var bytes = new Uint8Array(binary.length);
+    for(var i = 0; i < binary.length; i++){
+        bytes[i] = binary.charCodeAt(i);
+    }
+    return bytes.buffer;
+}
+var vertexBufferSemanticMap = {
+    POSITION: VertexBuffer.PositionKind,
+    TEXCOORD0: VertexBuffer.UVKind,
+    TEXCOORD_0: VertexBuffer.UVKind,
+    TEXCOORD1: VertexBuffer.UV2Kind,
+    NORMAL: VertexBuffer.NormalKind,
+    TANGENT: VertexBuffer.TangentKind,
+    COLOR: VertexBuffer.ColorKind,
+    JOINTS: VertexBuffer.JointsKind,
+    JOINTS_0: VertexBuffer.JointsKind,
+    WEIGHTS: VertexBuffer.WeightsKind,
+    WEIGHTS_0: VertexBuffer.WeightsKind,
+    POSITION_BS0: "aTargetPosition0",
+    POSITION_BS1: "aTargetPosition1",
+    POSITION_BS2: "aTargetPosition2",
+    POSITION_BS3: "aTargetPosition3",
+    POSITION_BS4: "aTargetPosition4",
+    POSITION_BS5: "aTargetPosition5",
+    POSITION_BS6: "aTargetPosition6",
+    POSITION_BS7: "aTargetPosition7",
+    NORMAL_BS0: "aTargetNormal0",
+    NORMAL_BS1: "aTargetNormal1",
+    NORMAL_BS2: "aTargetNormal2",
+    NORMAL_BS3: "aTargetNormal3",
+    TANGENT_BS0: "aTargetTangent0",
+    TANGENT_BS1: "aTargetTangent1",
+    TANGENT_BS2: "aTargetTangent2",
+    TANGENT_BS3: "aTargetTangent3"
+};
+var _obj$4;
+var BYTES_TYPE_MAP = (_obj$4 = {}, _obj$4[exports.BufferDataType.Float] = 4, _obj$4[exports.BufferDataType.Int] = 4, _obj$4[exports.BufferDataType.UnsignedInt] = 4, _obj$4[exports.BufferDataType.Short] = 2, _obj$4[exports.BufferDataType.UnsignedShort] = 2, _obj$4[exports.BufferDataType.Byte] = 1, _obj$4[exports.BufferDataType.UnsignedByte] = 1, _obj$4);
+function generateEmptyTypedArray(type) {
+    return createTypedArray(type, 0);
 }
 
-var seed$6 = 1;
+var seed$5 = 1;
 /**
  * Mesh 抽象类
  */ var Mesh = /*#__PURE__*/ function(RendererComponent) {
@@ -20737,14 +21389,14 @@ var seed$6 = 1;
         _this.visible = true;
         if (props) {
             var material = props.material, geometry = props.geometry, _props_name = props.name, name = _props_name === void 0 ? "<unnamed>" : _props_name, _props_priority = props.priority, priority = _props_priority === void 0 ? 0 : _props_priority, _props_worldMatrix = props.worldMatrix, worldMatrix = _props_worldMatrix === void 0 ? Matrix4.fromIdentity() : _props_worldMatrix;
-            _this.id = "Mesh" + seed$6++;
+            _this.id = "Mesh" + seed$5++;
             _this.name = name;
             _this.geometry = geometry;
             _this.material = material;
             _this.priority = priority;
             _this.worldMatrix = worldMatrix;
         } else {
-            _this.id = "Mesh" + seed$6++;
+            _this.id = "Mesh" + seed$5++;
             _this.name = "<unnamed>";
             _this.worldMatrix = Matrix4.fromIdentity();
             _this._priority = 0;
@@ -21137,25 +21789,24 @@ var ToneMappingPass = /*#__PURE__*/ function(RenderPass) {
         var name = "PostProcess";
         var engine = _this.renderer.engine;
         _this.sceneTextureHandle = sceneTextureHandle ? sceneTextureHandle : new RenderTargetHandle(engine);
+        var _obj;
         var geometry = Geometry.create(engine, {
             name: name,
             mode: glContext.TRIANGLE_STRIP,
-            attributes: {
-                aPos: {
-                    type: glContext.FLOAT,
-                    size: 2,
-                    data: new Float32Array([
-                        -1,
-                        1,
-                        -1,
-                        -1,
-                        1,
-                        1,
-                        1,
-                        -1
-                    ])
-                }
-            },
+            attributes: (_obj = {}, _obj[VertexBuffer.PositionKind] = {
+                type: glContext.FLOAT,
+                size: 2,
+                data: new Float32Array([
+                    -1,
+                    1,
+                    -1,
+                    -1,
+                    1,
+                    1,
+                    1,
+                    -1
+                ])
+            }, _obj),
             drawCount: 4
         });
         var material = Material.create(engine, {
@@ -21238,7 +21889,7 @@ var ToneMappingPass = /*#__PURE__*/ function(RenderPass) {
     return ToneMappingPass;
 }(RenderPass);
 
-var seed$5 = 1;
+var seed$4 = 1;
 /**
  * RenderFrame 抽象类
  */ var RenderFrame = /*#__PURE__*/ function() {
@@ -21278,7 +21929,7 @@ var seed$5 = 1;
             var postProcessPass = new ToneMappingPass(renderer, sceneTextureHandle);
             this.addRenderPass(postProcessPass);
         }
-        this.name = "RenderFrame" + seed$5++;
+        this.name = "RenderFrame" + seed$4++;
         this.camera = camera;
         this.editorTransform = Vector4.fromArray(editorTransform);
     }
@@ -21585,6 +22236,7 @@ var GPUCapability = /*#__PURE__*/ function() {
             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"),
+            vertexArrayObject: level2 || !!this.vaoExt,
             ktx2Support: detectKTX2Support(this.compressTextureCapabilityList),
             drawBuffers: level2 || !!this.drawBufferExtension,
             asyncShaderCompile: !!this.glAsyncCompileExt,
@@ -21809,24 +22461,23 @@ var Renderer = /*#__PURE__*/ function() {
    */ _proto.blit = function blit(source, destination, material) {
         // 懒加载创建 blit geometry
         if (!this.blitGeometry) {
+            var _obj;
             this.blitGeometry = Geometry.create(this.engine, {
                 mode: glContext.TRIANGLE_STRIP,
-                attributes: {
-                    aPos: {
-                        type: glContext.FLOAT,
-                        size: 2,
-                        data: new Float32Array([
-                            -1,
-                            1,
-                            -1,
-                            -1,
-                            1,
-                            1,
-                            1,
-                            -1
-                        ])
-                    }
-                },
+                attributes: (_obj = {}, _obj[VertexBuffer.PositionKind] = {
+                    type: glContext.FLOAT,
+                    size: 2,
+                    data: new Float32Array([
+                        -1,
+                        1,
+                        -1,
+                        -1,
+                        1,
+                        1,
+                        1,
+                        -1
+                    ])
+                }, _obj),
                 drawCount: 4
             });
         }
@@ -22298,61 +22949,57 @@ var Graphics = /*#__PURE__*/ function() {
         this.currentBatchTexture = null;
         this.transformStack = [];
         this.currentTransform = Matrix3.fromIdentity();
+        var _obj;
         this.geometry = Geometry.create(this.engine, {
-            attributes: {
-                aPos: {
-                    type: glContext.FLOAT,
-                    size: 2,
-                    data: new Float32Array([
-                        -0.5,
-                        0.5,
-                        -0.5,
-                        -0.5,
-                        0.5,
-                        0.5,
-                        0.5,
-                        -0.5
-                    ])
-                },
-                aColor: {
-                    type: glContext.FLOAT,
-                    size: 4,
-                    data: new Float32Array([
-                        1,
-                        1,
-                        1,
-                        1,
-                        1,
-                        1,
-                        1,
-                        1,
-                        1,
-                        1,
-                        1,
-                        1,
-                        1,
-                        1,
-                        1,
-                        1
-                    ])
-                },
-                aUV: {
-                    size: 2,
-                    offset: 0,
-                    releasable: true,
-                    type: glContext.FLOAT,
-                    data: new Float32Array([
-                        0,
-                        1,
-                        0,
-                        0,
-                        1,
-                        1,
-                        1,
-                        0
-                    ])
-                }
-            },
+            attributes: (_obj = {}, _obj[VertexBuffer.PositionKind] = {
+                type: glContext.FLOAT,
+                size: 2,
+                data: new Float32Array([
+                    -0.5,
+                    0.5,
+                    -0.5,
+                    -0.5,
+                    0.5,
+                    0.5,
+                    0.5,
+                    -0.5
+                ])
+            }, _obj[VertexBuffer.ColorKind] = {
+                type: glContext.FLOAT,
+                size: 4,
+                data: new Float32Array([
+                    1,
+                    1,
+                    1,
+                    1,
+                    1,
+                    1,
+                    1,
+                    1,
+                    1,
+                    1,
+                    1,
+                    1,
+                    1,
+                    1,
+                    1,
+                    1
+                ])
+            }, _obj[VertexBuffer.UVKind] = {
+                size: 2,
+                offset: 0,
+                type: glContext.FLOAT,
+                data: new Float32Array([
+                    0,
+                    1,
+                    0,
+                    0,
+                    1,
+                    1,
+                    1,
+                    0
+                ])
+            }, _obj),
             indices: {
                 data: new Uint16Array([
                     0,
@@ -22361,11 +23008,11 @@ var Graphics = /*#__PURE__*/ function() {
                     2,
                     1,
                     3
-                ]),
-                releasable: true
+                ])
             },
             mode: glContext.TRIANGLES,
-            drawCount: 6
+            drawCount: 6,
+            bufferUsage: glContext.DYNAMIC_DRAW
         });
         this.coloredMaterial = Material.create(this.engine, {
             shader: {
@@ -22453,9 +23100,9 @@ var Graphics = /*#__PURE__*/ function() {
         var colorsArray = new Float32Array(this.colors);
         var uvsArray = new Float32Array(this.uvs);
         var indicesArray = new Uint16Array(this.indices);
-        this.geometry.setAttributeData("aPos", verticesArray);
-        this.geometry.setAttributeData("aColor", colorsArray);
-        this.geometry.setAttributeData("aUV", uvsArray);
+        this.updateAttributeData(VertexBuffer.PositionKind, verticesArray, 2);
+        this.updateAttributeData(VertexBuffer.ColorKind, colorsArray, 4);
+        this.updateAttributeData(VertexBuffer.UVKind, uvsArray, 2);
         this.geometry.setIndexData(indicesArray);
         this.geometry.setDrawCount(this.currentIndexCount);
         var material;
@@ -22473,6 +23120,18 @@ var Graphics = /*#__PURE__*/ function() {
         this.colors.length = 0;
         this.uvs.length = 0;
     };
+    _proto.updateAttributeData = function updateAttributeData(name, data, size) {
+        var _this_geometry_getVertexBuffer;
+        var dataBuffer = (_this_geometry_getVertexBuffer = this.geometry.getVertexBuffer(name)) == null ? void 0 : _this_geometry_getVertexBuffer.getBuffer();
+        if (dataBuffer && data.byteLength > dataBuffer.capacity) {
+            this.geometry.setVerticesBuffer(new VertexBuffer(this.engine, data, name, {
+                updatable: true,
+                size: size
+            }));
+            return;
+        }
+        this.geometry.setAttributeData(name, data);
+    };
     /**
    * 线段顶点按顺序连接 (p0-p1, p1-p2, p2-p3, ...)
    * @param points - 点数组，格式 [x1,y1,x2,y2,...]，至少需要2个点(4个数值)
@@ -22842,6 +23501,310 @@ var Graphics = /*#__PURE__*/ function() {
     return Graphics;
 }();
 
+/**
+ * Mesh 组件
+ */ var MeshComponent = /*#__PURE__*/ function(RendererComponent) {
+    _inherits(MeshComponent, RendererComponent);
+    function MeshComponent(engine) {
+        var _this;
+        _this = RendererComponent.call(this, engine) || this;
+        // TODO 点击测试后续抽象一个 Collider 组件
+        _this.getHitTestParams = function(force) {
+            var worldMatrix = _this.transform.getWorldMatrix();
+            _this.boundingBoxInfo.setGeometry(_this.geometry, worldMatrix);
+            var area = _this.boundingBoxInfo.getRawBoundingBoxTriangle();
+            if (area) {
+                return {
+                    type: area.type,
+                    triangles: area.area,
+                    clipMasks: _this.frameClipMasks
+                };
+            }
+        };
+        return _this;
+    }
+    var _proto = MeshComponent.prototype;
+    _proto.render = function render(renderer) {
+        this.maskManager.drawStencilMask(renderer, this);
+        for(var i = 0; i < this.materials.length; i++){
+            var material = this.materials[i];
+            renderer.drawGeometry(this.geometry, this.transform.getWorldMatrix(), material, i);
+        }
+    };
+    _proto.drawStencilMask = function drawStencilMask(maskRef) {
+        if (!this.isActiveAndEnabled) {
+            return;
+        }
+        for(var i = 0; i < this.materials.length; i++){
+            var material = this.materials[i];
+            this.maskManager.drawGeometryMask(this.engine.renderer, this.geometry, this.transform.getWorldMatrix(), material, maskRef, i);
+        }
+    };
+    _proto.getBoundingBox = function getBoundingBox() {
+        var worldMatrix = this.transform.getWorldMatrix();
+        this.boundingBoxInfo.setGeometry(this.geometry, worldMatrix);
+        var boundingBox = this.boundingBoxInfo.getBoundingBoxTriangle();
+        return boundingBox;
+    };
+    _proto.getBoundingBoxInfo = function getBoundingBoxInfo() {
+        var positionArray = this.geometry.getAttributeData(VertexBuffer.PositionKind);
+        if (positionArray) {
+            var minMaxResult = extractMinAndMax(positionArray, 0, positionArray.length / 3);
+            minMaxResult.minimum.x *= this.transform.size.x;
+            minMaxResult.minimum.y *= this.transform.size.y;
+            minMaxResult.maximum.x *= this.transform.size.x;
+            minMaxResult.maximum.y *= this.transform.size.y;
+            this.boundingBoxInfo.reConstruct(minMaxResult.minimum, minMaxResult.maximum, this.transform.getWorldMatrix());
+        }
+        return this.boundingBoxInfo;
+    };
+    _proto.fromData = function fromData(data) {
+        RendererComponent.prototype.fromData.call(this, data);
+        var maskOptions = data.mask;
+        if (maskOptions) {
+            this.maskManager.setMaskOptions(this.engine, maskOptions);
+        }
+    };
+    return MeshComponent;
+}(RendererComponent);
+__decorate([
+    serialize()
+], MeshComponent.prototype, "geometry", void 0);
+
+exports.EffectComponent = /*#__PURE__*/ function(MeshComponent) {
+    _inherits(EffectComponent, MeshComponent);
+    function EffectComponent(engine) {
+        var _this;
+        _this = MeshComponent.call(this, engine) || this;
+        _this.time = 0;
+        _this.name = "EffectComponent";
+        return _this;
+    }
+    var _proto = EffectComponent.prototype;
+    _proto.onStart = function onStart() {
+        this.item.getHitTestParams = this.getHitTestParams;
+    };
+    _proto.onUpdate = function onUpdate(dt) {
+        var time = this.time;
+        var _this_material_getVector4;
+        var _Time = (_this_material_getVector4 = this.material.getVector4("_Time")) != null ? _this_material_getVector4 : new Vector4();
+        this.material.setVector4("_Time", _Time.set(time / 20, time, time * 2, time * 3));
+        this.time += dt / 1000;
+    };
+    _proto.fromData = function fromData(data) {
+        MeshComponent.prototype.fromData.call(this, data);
+        this.material = this.materials[0];
+    };
+    return EffectComponent;
+}(MeshComponent);
+exports.EffectComponent = __decorate([
+    effectsClass(DataType.EffectComponent)
+], exports.EffectComponent);
+
+var tempVector3 = new Vector3(0, 0, 0);
+var tempVector3Second = new Vector3(0, 0, 0);
+var ConstraintTarget = function ConstraintTarget() {
+    this.target = null;
+    this.weight = 1.0;
+};
+exports.PositionConstraint = /*#__PURE__*/ function(Component) {
+    _inherits(PositionConstraint, Component);
+    function PositionConstraint() {
+        var _this;
+        _this = Component.apply(this, arguments) || this;
+        /**
+   * 初始位置（当前元素的初始世界位置）
+   */ _this.positionAtRest = new Vector3(0, 0, 0);
+        /**
+   * 位置偏移
+   */ _this.positionOffset = new Vector3(0, 0, 0);
+        /**
+   * 约束权重 (0-1)
+   */ _this.weight = 1.0;
+        /**
+   * 是否约束 X 轴
+   */ _this.constrainX = true;
+        /**
+   * 是否约束 Y 轴
+   */ _this.constrainY = true;
+        /**
+   * 是否约束 Z 轴
+   */ _this.constrainZ = true;
+        /**
+   * 约束目标
+   */ _this.targets = [];
+        return _this;
+    }
+    var _proto = PositionConstraint.prototype;
+    _proto.onStart = function onStart() {
+        // 保存当前元素的初始世界位置
+        var pos = this.item.transform.getWorldPosition();
+        this.positionAtRest.copyFrom(pos);
+    };
+    _proto.onUpdate = function onUpdate(dt) {
+        if (this.targets.length === 0) {
+            return;
+        }
+        // 重置 tempVector3 用于计算融合位置
+        tempVector3.set(0, 0, 0);
+        var totalWeight = 0;
+        // 计算所有目标的加权平均位置
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.targets), _step; !(_step = _iterator()).done;){
+            var constraintTarget = _step.value;
+            if (constraintTarget.target) {
+                var targetPos = constraintTarget.target.transform.getWorldPosition();
+                var weight = constraintTarget.weight;
+                tempVector3.x += targetPos.x * weight;
+                tempVector3.y += targetPos.y * weight;
+                tempVector3.z += targetPos.z * weight;
+                totalWeight += weight;
+            }
+        }
+        // 归一化加权位置
+        if (totalWeight > 0) {
+            tempVector3.x /= totalWeight;
+            tempVector3.y /= totalWeight;
+            tempVector3.z /= totalWeight;
+        }
+        // 应用偏移
+        tempVector3.x += this.positionOffset.x;
+        tempVector3.y += this.positionOffset.y;
+        tempVector3.z += this.positionOffset.z;
+        // 根据全局权重在初始位置和融合位置之间插值，结果存入 tempVector3Second
+        tempVector3Second.set(this.lerp(this.positionAtRest.x, tempVector3.x, this.weight), this.lerp(this.positionAtRest.y, tempVector3.y, this.weight), this.lerp(this.positionAtRest.z, tempVector3.z, this.weight));
+        // 应用轴约束，复用 tempVector3 存储当前位置
+        tempVector3.copyFrom(this.item.transform.getWorldPosition());
+        var finalX = this.constrainX ? tempVector3Second.x : tempVector3.x;
+        var finalY = this.constrainY ? tempVector3Second.y : tempVector3.y;
+        var finalZ = this.constrainZ ? tempVector3Second.z : tempVector3.z;
+        // 设置新的世界位置
+        this.item.transform.setWorldPosition(finalX, finalY, finalZ);
+    };
+    /**
+   * 添加约束目标
+   * @param target - 目标元素
+   * @param weight - 权重值 (0-1)
+   */ _proto.addTarget = function addTarget(target, weight) {
+        if (weight === void 0) weight = 1.0;
+        var constraintTarget = new ConstraintTarget();
+        constraintTarget.target = target;
+        constraintTarget.weight = Math.max(0, Math.min(1, weight));
+        this.targets.push(constraintTarget);
+    };
+    /**
+   * 移除约束目标
+   * @param target - 要移除的目标元素
+   */ _proto.removeTarget = function removeTarget(target) {
+        var index = this.targets.findIndex(function(ct) {
+            return ct.target === target;
+        });
+        if (index !== -1) {
+            this.targets.splice(index, 1);
+        }
+    };
+    /**
+   * 清除所有约束目标
+   */ _proto.clearTargets = function clearTargets() {
+        this.targets = [];
+    };
+    /**
+   * 设置位置偏移
+   * @param x - X 轴偏移
+   * @param y - Y 轴偏移
+   * @param z - Z 轴偏移
+   */ _proto.setPositionOffset = function setPositionOffset(x, y, z) {
+        this.positionOffset.set(x, y, z);
+    };
+    /**
+   * 设置全局约束权重
+   * @param weight - 权重值 (0-1)，0 表示保持初始位置，1 表示完全跟随目标
+   */ _proto.setWeight = function setWeight(weight) {
+        this.weight = Math.max(0, Math.min(1, weight));
+    };
+    /**
+   * 线性插值
+   * @param start - 起始值
+   * @param end - 结束值
+   * @param t - 插值因子 (0-1)
+   */ _proto.lerp = function lerp(start, end, t) {
+        return start + (end - start) * t;
+    };
+    _proto.fromData = function fromData(data) {
+        Component.prototype.fromData.call(this, data);
+        // Deserialize all properties
+        this.positionAtRest.copyFrom(data.positionAtRest);
+        this.positionOffset.copyFrom(data.positionOffset);
+        this.weight = data.weight;
+        this.constrainX = data.constrainX;
+        this.constrainY = data.constrainY;
+        this.constrainZ = data.constrainZ;
+        this.targets = [];
+        for(var _iterator = _create_for_of_iterator_helper_loose(data.targets), _step; !(_step = _iterator()).done;){
+            var targetData = _step.value;
+            var constraintTarget = new ConstraintTarget();
+            constraintTarget.target = this.engine.findObject(targetData.target);
+            constraintTarget.weight = targetData.weight;
+            this.targets.push(constraintTarget);
+        }
+    };
+    return PositionConstraint;
+}(Component);
+exports.PositionConstraint = __decorate([
+    effectsClass("PositionConstraint")
+], exports.PositionConstraint);
+
+exports.PostProcessVolume = /*#__PURE__*/ function(Component) {
+    _inherits(PostProcessVolume, Component);
+    function PostProcessVolume(engine) {
+        var _this;
+        _this = Component.call(this, engine) || this;
+        _this.bloom = {
+            threshold: 0,
+            intensity: 0,
+            active: false
+        };
+        _this.vignette = {
+            intensity: 0,
+            smoothness: 0,
+            roundness: 0,
+            active: false
+        };
+        _this.tonemapping = {
+            active: false
+        };
+        _this.colorAdjustments = {
+            brightness: 0,
+            saturation: 0,
+            contrast: 0,
+            active: false
+        };
+        return _this;
+    }
+    var _proto = PostProcessVolume.prototype;
+    _proto.onStart = function onStart() {
+        var composition = this.item.composition;
+        if (composition) {
+            composition.renderFrame.globalVolume = this;
+        }
+    };
+    return PostProcessVolume;
+}(Component);
+__decorate([
+    serialize()
+], exports.PostProcessVolume.prototype, "bloom", void 0);
+__decorate([
+    serialize()
+], exports.PostProcessVolume.prototype, "vignette", void 0);
+__decorate([
+    serialize()
+], exports.PostProcessVolume.prototype, "tonemapping", void 0);
+__decorate([
+    serialize()
+], exports.PostProcessVolume.prototype, "colorAdjustments", void 0);
+exports.PostProcessVolume = __decorate([
+    effectsClass(DataType.PostProcessVolume)
+], exports.PostProcessVolume);
+
 /**
  * @since 2.7.0
  */ var MaskableGraphic = /*#__PURE__*/ function(RendererComponent) {
@@ -22880,42 +23843,40 @@ var Graphics = /*#__PURE__*/ function() {
             side: SideMode.DOUBLE,
             mask: 0
         };
+        var _obj;
         _this.defaultGeometry = Geometry.create(_this.engine, {
-            attributes: {
-                aPos: {
-                    type: glContext.FLOAT,
-                    size: 3,
-                    data: new Float32Array([
-                        -0.5,
-                        0.5,
-                        0,
-                        -0.5,
-                        -0.5,
-                        0,
-                        0.5,
-                        0.5,
-                        0,
-                        0.5,
-                        -0.5,
-                        0
-                    ])
-                },
-                aUV: {
-                    size: 2,
-                    offset: 0,
-                    type: glContext.FLOAT,
-                    data: new Float32Array([
-                        0,
-                        1,
-                        0,
-                        0,
-                        1,
-                        1,
-                        1,
-                        0
-                    ])
-                }
-            },
+            attributes: (_obj = {}, _obj[VertexBuffer.PositionKind] = {
+                type: glContext.FLOAT,
+                size: 3,
+                data: new Float32Array([
+                    -0.5,
+                    0.5,
+                    0,
+                    -0.5,
+                    -0.5,
+                    0,
+                    0.5,
+                    0.5,
+                    0,
+                    0.5,
+                    -0.5,
+                    0
+                ])
+            }, _obj[VertexBuffer.UVKind] = {
+                size: 2,
+                offset: 0,
+                type: glContext.FLOAT,
+                data: new Float32Array([
+                    0,
+                    1,
+                    0,
+                    0,
+                    1,
+                    1,
+                    1,
+                    0
+                ])
+            }, _obj),
             indices: {
                 data: new Uint16Array([
                     0,
@@ -22924,11 +23885,11 @@ var Graphics = /*#__PURE__*/ function() {
                     2,
                     1,
                     3
-                ]),
-                releasable: true
+                ])
             },
             mode: glContext.TRIANGLES,
-            drawCount: 6
+            drawCount: 6,
+            bufferUsage: glContext.DYNAMIC_DRAW
         });
         _this.geometry = _this.defaultGeometry;
         var material = Material.create(_this.engine, {
@@ -23037,7 +23998,7 @@ var Graphics = /*#__PURE__*/ function() {
         return boundingBox;
     };
     _proto.getBoundingBoxInfo = function getBoundingBoxInfo() {
-        var positionArray = this.geometry.getAttributeData("aPos");
+        var positionArray = this.geometry.getAttributeData(VertexBuffer.PositionKind);
         if (positionArray) {
             var minMaxResult = extractMinAndMax(positionArray, 0, positionArray.length / 3);
             minMaxResult.minimum.x *= this.transform.size.x;
@@ -23251,61 +24212,66 @@ exports.FrameComponent = /*#__PURE__*/ function(RendererComponent1) {
         _this.color = new Color(1, 1, 1, 1);
         _this.worldMatrix = new Matrix4();
         _this.getHitTestParams = function(force) {
+            if (!force) {
+                return;
+            }
+            // frame 边的四角（局部 [-0.5, 0.5] 经 size 与世界变换）
             var sizeMatrix = Matrix4.fromScale(_this.transform.size.x, _this.transform.size.y, 1);
             var worldMatrix = sizeMatrix.premultiply(_this.transform.getWorldMatrix());
-            if (force) {
-                _this.boundingBoxInfo.setGeometry(_this.clipGeometry, worldMatrix);
-                var area = _this.boundingBoxInfo.getRawBoundingBoxTriangle();
-                if (area) {
-                    return {
-                        type: area.type,
-                        triangles: area.area,
-                        clipMasks: _this.frameClipMasks
-                    };
-                }
-            }
+            var toWorld = function(x, y) {
+                return worldMatrix.transformPoint(new Vector3(x, y, 0), new Vector3());
+            };
+            var TL = toWorld(-0.5, 0.5);
+            var TR = toWorld(0.5, 0.5);
+            var BR = toWorld(0.5, -0.5);
+            var BL = toWorld(-0.5, -0.5);
+            // 命中带为屏幕像素恒定的环带，中心落在 frame 边上，仅边缘可命中（内部镂空）
+            var thickness = _this.getBorderWorldThickness(TL, TR);
+            var triangles = _this.getBorderTriangles(TL, TR, BR, BL, thickness);
+            return {
+                type: exports.HitTestType.triangle,
+                triangles: triangles,
+                clipMasks: _this.frameClipMasks
+            };
         };
         return _this;
     }
     var _proto = FrameComponent.prototype;
     _proto.onAwake = function onAwake() {
+        var _obj;
         this.clipGeometry = Geometry.create(this.engine, {
-            attributes: {
-                aPos: {
-                    type: glContext.FLOAT,
-                    size: 3,
-                    data: new Float32Array([
-                        -0.5,
-                        0.5,
-                        0,
-                        -0.5,
-                        -0.5,
-                        0,
-                        0.5,
-                        0.5,
-                        0,
-                        0.5,
-                        -0.5,
-                        0
-                    ])
-                },
-                aUV: {
-                    size: 2,
-                    offset: 0,
-                    releasable: true,
-                    type: glContext.FLOAT,
-                    data: new Float32Array([
-                        0,
-                        1,
-                        0,
-                        0,
-                        1,
-                        1,
-                        1,
-                        0
-                    ])
-                }
-            },
+            attributes: (_obj = {}, _obj[VertexBuffer.PositionKind] = {
+                type: glContext.FLOAT,
+                size: 3,
+                data: new Float32Array([
+                    -0.5,
+                    0.5,
+                    0,
+                    -0.5,
+                    -0.5,
+                    0,
+                    0.5,
+                    0.5,
+                    0,
+                    0.5,
+                    -0.5,
+                    0
+                ])
+            }, _obj[VertexBuffer.UVKind] = {
+                size: 2,
+                offset: 0,
+                type: glContext.FLOAT,
+                data: new Float32Array([
+                    0,
+                    1,
+                    0,
+                    0,
+                    1,
+                    1,
+                    1,
+                    0
+                ])
+            }, _obj),
             indices: {
                 data: new Uint16Array([
                     0,
@@ -23314,8 +24280,7 @@ exports.FrameComponent = /*#__PURE__*/ function(RendererComponent1) {
                     2,
                     1,
                     3
-                ]),
-                releasable: true
+                ])
             },
             mode: glContext.TRIANGLES,
             drawCount: 6
@@ -23365,6 +24330,62 @@ exports.FrameComponent = /*#__PURE__*/ function(RendererComponent1) {
             this.color.copyFrom(data.color);
         }
     };
+    /**
+   * 由相机把命中带的屏幕像素厚度换算成世界厚度。对齐 Excalidraw frame 命中阈值：
+   * 描边两侧各 0.85 × DEFAULT_COLLISION_THRESHOLD（≈8px），整条带 ≈13.6px，不受 size/scale/zoom 影响。
+   */ _proto.getBorderWorldThickness = function getBorderWorldThickness(topLeft, topRight) {
+        var _this_item_composition;
+        var fallbackThickness = 0.05; // 相机不可用时的兜底世界厚度
+        var camera = (_this_item_composition = this.item.composition) == null ? void 0 : _this_item_composition.camera;
+        if (!camera) {
+            return fallbackThickness;
+        }
+        var screenLeft = camera.worldToScreenPoint(topLeft);
+        var screenRight = camera.worldToScreenPoint(topRight);
+        var pixelDist = Math.hypot(screenRight.x - screenLeft.x, screenRight.y - screenLeft.y);
+        var worldDist = Math.hypot(topRight.x - topLeft.x, topRight.y - topLeft.y) || 1;
+        var pixelPerWorldUnit = pixelDist / worldDist;
+        // 命中带整条宽度（像素）：2 × 0.85 × DEFAULT_COLLISION_THRESHOLD，其中 DEFAULT_COLLISION_THRESHOLD ≈ 8
+        var borderPixels = 2 * 0.85 * 8;
+        return pixelPerWorldUnit > 0 ? borderPixels / pixelPerWorldUnit : fallbackThickness;
+    };
+    /**
+   * 构造以 frame 边为中心、给定世界厚度的边框环带三角形（内部镂空）。
+   * 带中心落在 frame 边上：half 向外、half 向内；沿 frame 局部坐标轴偏移以兼容旋转。
+   */ _proto.getBorderTriangles = function getBorderTriangles(TL, TR, BR, BL, thickness) {
+        // frame 局部坐标轴在世界空间的方向
+        var axisX = TR.clone().subtract(TL).normalize();
+        var axisY = TL.clone().subtract(BL).normalize();
+        var offset = function(corner, dx, dy) {
+            return corner.clone().addScaledVector(axisX, dx).addScaledVector(axisY, dy);
+        };
+        // 外圈向外扩 half、内圈向内收 half，使带中心落在 frame 边上
+        var half = thickness / 2;
+        var outerTL = offset(TL, -half, half);
+        var outerTR = offset(TR, half, half);
+        var outerBR = offset(BR, half, -half);
+        var outerBL = offset(BL, -half, -half);
+        var innerTL = offset(TL, half, -half);
+        var innerTR = offset(TR, -half, -half);
+        var innerBR = offset(BR, -half, half);
+        var innerBL = offset(BL, half, half);
+        // 每条带是一个四边形，拆成 2 个三角形
+        var quad = function(a, b, c, d) {
+            return [
+                {
+                    p0: a,
+                    p1: b,
+                    p2: c
+                },
+                {
+                    p0: a,
+                    p1: c,
+                    p2: d
+                }
+            ];
+        };
+        return [].concat(quad(outerTL, outerTR, innerTR, innerTL), quad(outerTR, outerBR, innerBR, innerTR), quad(outerBR, outerBL, innerBL, innerBR), quad(outerBL, outerTL, innerTL, innerBL));
+    };
     _proto.setClipRectangle = function setClipRectangle() {
         this.setClipRectangleRecursive(this.item);
     };
@@ -24677,9 +25698,9 @@ var InteractLoader = /*#__PURE__*/ function(Plugin) {
     return InteractLoader;
 }(_wrap_native_super(Plugin));
 
-var vertex = "\nprecision highp float;\n\nattribute vec2 aPoint;\nuniform vec4 uPos;\nuniform vec2 uSize;\nuniform vec4 uQuat;\nuniform vec4 uColor;\nuniform mat4 effects_ObjectToWorld;\nuniform mat4 effects_MatrixInvV;\nuniform mat4 effects_MatrixVP;\nvarying vec4 vColor;\n\nvec3 rotateByQuat(vec3 a, vec4 quat){\n  vec3 qvec = quat.xyz;\n  vec3 uv = cross(qvec, a);\n  vec3 uuv = cross(qvec, uv) * 2.;\n  return a +(uv * 2. * quat.w + uuv);\n}\n\nvoid main() {\n  vec4 _pos = uPos;\n  vec3 point = rotateByQuat(vec3(aPoint.xy * uSize, 0.),uQuat);\n  vec4 pos = vec4(_pos.xyz, 1.0);\n  pos = effects_ObjectToWorld * pos;\n  pos.xyz += effects_MatrixInvV[0].xyz * point.x+ effects_MatrixInvV[1].xyz * point.y;\n  gl_Position = effects_MatrixVP * pos;\n  vColor = uColor;\n}\n";
+var vertex = "\nprecision highp float;\n\nattribute vec2 aPos;\nuniform vec4 uPos;\nuniform vec2 uSize;\nuniform vec4 uQuat;\nuniform vec4 uColor;\nuniform mat4 effects_ObjectToWorld;\nuniform mat4 effects_MatrixInvV;\nuniform mat4 effects_MatrixVP;\nvarying vec4 vColor;\n\nvec3 rotateByQuat(vec3 a, vec4 quat){\n  vec3 qvec = quat.xyz;\n  vec3 uv = cross(qvec, a);\n  vec3 uuv = cross(qvec, uv) * 2.;\n  return a +(uv * 2. * quat.w + uuv);\n}\n\nvoid main() {\n  vec4 _pos = uPos;\n  vec3 point = rotateByQuat(vec3(aPos.xy * uSize, 0.),uQuat);\n  vec4 pos = vec4(_pos.xyz, 1.0);\n  pos = effects_ObjectToWorld * pos;\n  pos.xyz += effects_MatrixInvV[0].xyz * point.x+ effects_MatrixInvV[1].xyz * point.y;\n  gl_Position = effects_MatrixVP * pos;\n  vColor = uColor;\n}\n";
 var fragment = "\nprecision highp float;\n\n#define fragColor gl_FragColor\n\nvarying vec4 vColor;\nvoid main() {\n  gl_FragColor = vColor*vColor.a;\n}\n";
-var seed$4 = 1;
+var seed$3 = 1;
 var InteractMesh = /*#__PURE__*/ function() {
     function InteractMesh(props, transform, engine) {
         this.transform = transform;
@@ -24734,7 +25755,7 @@ var InteractMesh = /*#__PURE__*/ function() {
         return material;
     };
     _proto.createGeometry = function createGeometry() {
-        var indexData = new Uint8Array([
+        var indexData = new Uint16Array([
             0,
             1,
             1,
@@ -24744,24 +25765,23 @@ var InteractMesh = /*#__PURE__*/ function() {
             3,
             0
         ]);
+        var _obj;
         return Geometry.create(this.engine, {
-            attributes: {
-                aPoint: {
-                    size: 2,
-                    offset: 0,
-                    stride: 2 * Float32Array.BYTES_PER_ELEMENT,
-                    data: new Float32Array([
-                        -0.5,
-                        0.5,
-                        0.5,
-                        0.5,
-                        0.5,
-                        -0.5,
-                        -0.5,
-                        -0.5
-                    ])
-                }
-            },
+            attributes: (_obj = {}, _obj[VertexBuffer.PositionKind] = {
+                size: 2,
+                offset: 0,
+                stride: 2 * Float32Array.BYTES_PER_ELEMENT,
+                data: new Float32Array([
+                    -0.5,
+                    0.5,
+                    0.5,
+                    0.5,
+                    0.5,
+                    -0.5,
+                    -0.5,
+                    -0.5
+                ])
+            }, _obj),
             drawCount: indexData.length,
             indices: {
                 data: indexData
@@ -24772,7 +25792,7 @@ var InteractMesh = /*#__PURE__*/ function() {
     };
     _proto.createMesh = function createMesh(geometry, material) {
         return Mesh.create(this.engine, {
-            name: "Interact_preview" + seed$4++,
+            name: "Interact_preview" + seed$3++,
             priority: 0,
             worldMatrix: Matrix4.fromIdentity(),
             geometry: geometry,
@@ -26688,6 +27708,11 @@ exports.SpritePropertyTrack = __decorate([
     effectsClass("SpritePropertyTrack")
 ], exports.SpritePropertyTrack);
 
+function _assert_this_initialized(self) {
+    if (self === void 0) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    return self;
+}
+
 var Cone = /*#__PURE__*/ function() {
     function Cone(props) {
         var _this = this;
@@ -27769,7 +28794,9 @@ var tmp0 = new Vector3();
 var tmp1 = new Vector3();
 var TrailMesh = /*#__PURE__*/ function() {
     function TrailMesh(engine, props) {
+        var _this = this;
         this.pointStart = [];
+        this.attributeData = new Map();
         var colorOverLifetime = props.colorOverLifetime, colorOverTrail = props.colorOverTrail, maxTrailCount = props.maxTrailCount, _props_opacityOverLifetime = props.opacityOverLifetime, opacityOverLifetime = _props_opacityOverLifetime === void 0 ? createValueGetter(1) : _props_opacityOverLifetime, widthOverTrail = props.widthOverTrail, name = props.name, occlusion = props.occlusion, blending = props.blending, texture = props.texture, transparentOcclusion = props.transparentOcclusion, minimumVertexDistance = props.minimumVertexDistance, lifetime = props.lifetime, matrix = props.matrix;
         var _engine_gpuCapability = engine.gpuCapability, detail = _engine_gpuCapability.detail, level = _engine_gpuCapability.level;
         var pointCountPerTrail = Math.max(props.pointCountPerTrail, 2);
@@ -27852,42 +28879,36 @@ var TrailMesh = /*#__PURE__*/ function() {
         var maxTriangleCount = (pointCountPerTrail - 1) * maxTrailCount;
         var bpe = Float32Array.BYTES_PER_ELEMENT;
         var v12 = 12 * bpe;
+        var _obj;
         var geometryOptions = {
-            attributes: {
-                aColor: {
-                    size: 4,
-                    stride: v12,
-                    data: new Float32Array(maxVertexCount * 12)
-                },
-                aSeed: {
-                    size: 1,
-                    stride: v12,
-                    offset: 4 * bpe,
-                    dataSource: "aColor"
-                },
-                aInfo: {
-                    size: 3,
-                    stride: v12,
-                    offset: 5 * bpe,
-                    dataSource: "aColor"
-                },
-                aPos: {
-                    size: 4,
-                    stride: v12,
-                    offset: 8 * bpe,
-                    dataSource: "aColor"
-                },
-                //
-                aTime: {
-                    size: 1,
-                    data: new Float32Array(maxVertexCount)
-                },
-                //
-                aDir: {
-                    size: 3,
-                    data: new Float32Array(maxVertexCount * 3)
-                }
-            },
+            attributes: (_obj = {}, _obj[VertexBuffer.ColorKind] = {
+                size: 4,
+                stride: v12,
+                data: new Float32Array(maxVertexCount * 12)
+            }, _obj.aSeed = {
+                size: 1,
+                stride: v12,
+                offset: 4 * bpe,
+                dataSource: VertexBuffer.ColorKind
+            }, _obj.aInfo = {
+                size: 3,
+                stride: v12,
+                offset: 5 * bpe,
+                dataSource: VertexBuffer.ColorKind
+            }, _obj[VertexBuffer.PositionKind] = {
+                size: 4,
+                stride: v12,
+                offset: 8 * bpe,
+                dataSource: VertexBuffer.ColorKind
+            }, //
+            _obj.aTime = {
+                size: 1,
+                data: new Float32Array(maxVertexCount)
+            }, //
+            _obj.aDir = {
+                size: 3,
+                data: new Float32Array(maxVertexCount * 3)
+            }, _obj),
             indices: {
                 data: new Uint16Array(maxVertexCount * 6)
             },
@@ -27961,6 +28982,13 @@ var TrailMesh = /*#__PURE__*/ function() {
             this.mesh.worldMatrix = matrix;
         }
         this.geometry = mesh.firstGeometry();
+        this.geometry.getAttributeNames().forEach(function(name) {
+            var vertexBuffer = _this.geometry.getVertexBuffer(name);
+            var data = _this.geometry.getAttributeData(name);
+            if (vertexBuffer && _instanceof1(data, Float32Array)) {
+                _this.attributeData.set(vertexBuffer.getWrapperBuffer(), data);
+            }
+        });
         this.trailCursors = new Uint16Array(maxTrailCount);
     }
     var _proto = TrailMesh.prototype;
@@ -27991,8 +29019,8 @@ var TrailMesh = /*#__PURE__*/ function() {
         var dirData = new Float32Array(6);
         dirData.set(dir, 0);
         dirData.set(dir, 3);
-        geometry.setAttributeSubData("aDir", dirStartIndex, dirData);
-        geometry.setAttributeSubData("aTime", pointStartIndex * 2, new Float32Array([
+        this.setAttributeSubData("aDir", dirStartIndex, dirData);
+        this.setAttributeSubData("aTime", pointStartIndex * 2, new Float32Array([
             time,
             time
         ]));
@@ -28014,13 +29042,13 @@ var TrailMesh = /*#__PURE__*/ function() {
         colorData[19] = 1;
         colorData.set(positionData, 20);
         colorData[23] = -0.5 * size;
-        geometry.setAttributeSubData("aColor", pointStartIndex * 24, colorData);
+        this.setAttributeSubData(VertexBuffer.ColorKind, pointStartIndex * 24, colorData);
         if (previousIndex >= 0) {
             var bPreviousPoint = this.getTrailPosition(trailIndex, bpreviousIndex, tmp1);
             var previousDir = new Float32Array(calculateDirection(bPreviousPoint, previousPoint, position));
             var previousDirStartIndex = (trailIndex * pointCountPerTrail + previousIndex) * 6;
-            geometry.setAttributeSubData("aDir", previousDirStartIndex, previousDir);
-            geometry.setAttributeSubData("aDir", previousDirStartIndex + 3, previousDir);
+            this.setAttributeSubData("aDir", previousDirStartIndex, previousDir);
+            this.setAttributeSubData("aDir", previousDirStartIndex + 3, previousDir);
             var indicesStart = trailIndex * pointCountPerTrail * 2;
             var indicesData = new Uint16Array([
                 previousIndex * 2 + indicesStart,
@@ -28043,7 +29071,7 @@ var TrailMesh = /*#__PURE__*/ function() {
             for(var i = 0; i < len; i++){
                 startData[i] = trailStart;
             }
-            geometry.setAttributeSubData("aTrailStart", trailIndex * startData.length, startData);
+            this.setAttributeSubData("aTrailStart", trailIndex * startData.length, startData);
         } else {
             var value = mtl.getFloats("uTrailStart");
             if (value != undefined) {
@@ -28060,8 +29088,7 @@ var TrailMesh = /*#__PURE__*/ function() {
         var pointCountPerTrail = this.pointCountPerTrail;
         if (index >= 0 && index < pointCountPerTrail) {
             var startIndex = (trail * pointCountPerTrail + index) * 24 + 8;
-            var data = this.geometry.getAttributeData("aColor");
-            assertExist(data);
+            var data = this.getAttributeData(VertexBuffer.ColorKind);
             out.x = data[startIndex];
             out.y = data[1 + startIndex];
             out.z = data[2 + startIndex];
@@ -28075,12 +29102,11 @@ var TrailMesh = /*#__PURE__*/ function() {
         this.geometry.setIndexData(new Uint16Array(indexData.length));
     };
     _proto.minusTime = function minusTime(time) {
-        var data = this.geometry.getAttributeData("aTime");
-        assertExist(data);
+        var data = this.getAttributeData("aTime");
         for(var i = 0; i < data.length; i++){
             data[i] -= time;
         }
-        this.geometry.setAttributeData("aTime", data);
+        this.setAttributeData("aTime", data);
         this.time -= time;
     };
     _proto.clearTrail = function clearTrail(index) {
@@ -28101,6 +29127,35 @@ var TrailMesh = /*#__PURE__*/ function() {
         this.pointStart[index] = pos;
     };
     _proto.onUpdate = function onUpdate(escapeTime) {};
+    _proto.getAttributeData = function getAttributeData(name) {
+        var vertexBuffer = this.geometry.getVertexBuffer(name);
+        var data = vertexBuffer && this.attributeData.get(vertexBuffer.getWrapperBuffer());
+        assertExist(data);
+        return data;
+    };
+    _proto.setAttributeData = function setAttributeData(name, data) {
+        var vertexBuffer = this.geometry.getVertexBuffer(name);
+        assertExist(vertexBuffer);
+        this.attributeData.set(vertexBuffer.getWrapperBuffer(), data);
+        this.geometry.setAttributeData(name, data);
+    };
+    _proto.setAttributeSubData = function setAttributeSubData(name, offset, data) {
+        var target = this.getAttributeData(name);
+        target.set(data, offset);
+        this.geometry.setAttributeSubData(name, offset, data);
+    };
+    /**
+   * @internal
+   */ _proto.rebuild = function rebuild() {
+        if (!this.geometry.isInitialized || this.geometry.isDisposed()) {
+            return;
+        }
+        this.attributeData.forEach(function(data, buffer) {
+            if (!buffer.getData()) {
+                buffer.update(data);
+            }
+        });
+    };
     _create_class(TrailMesh, [
         {
             key: "time",
@@ -28224,11 +29279,13 @@ var particleUniformTypeMap = {
 
 var ParticleMesh = /*#__PURE__*/ function() {
     function ParticleMesh(engine, props) {
+        var _this = this;
         this.particleCount = 0;
         this.cachedRotationVector3 = new Vector3();
         this.cachedRotationMatrix = new Matrix3();
         this.cachedLinearMove = new Vector3();
         this.tempMatrix3 = new Matrix3();
+        this.attributeData = new Map();
         this.VERT_MAX_KEY_FRAME_COUNT = 0;
         var env = (engine != null ? engine : {}).env;
         var speedOverLifetime = props.speedOverLifetime, colorOverLifetime = props.colorOverLifetime, linearVelOverLifetime = props.linearVelOverLifetime, orbitalVelOverLifetime = props.orbitalVelOverLifetime, sizeOverLifetime = props.sizeOverLifetime, rotationOverLifetime = props.rotationOverLifetime, sprite = props.sprite, gravityModifier = props.gravityModifier, maxCount = props.maxCount, textureFlip = props.textureFlip, useSprite = props.useSprite, name = props.name, gravity = props.gravity, forceTarget = props.forceTarget, side = props.side, occlusion = props.occlusion, anchor = props.anchor, blending = props.blending, transparentOcclusion = props.transparentOcclusion, _props_renderMode = props.renderMode, renderMode = _props_renderMode === void 0 ? 0 : _props_renderMode, _props_diffuse = props.diffuse, diffuse = _props_diffuse === void 0 ? Texture.createWithData(engine) : _props_diffuse;
@@ -28527,6 +29584,13 @@ var ParticleMesh = /*#__PURE__*/ function() {
         this.anchor = anchor;
         this.mesh = mesh;
         this.geometry = mesh.firstGeometry();
+        this.geometry.getAttributeNames().forEach(function(name) {
+            var vertexBuffer = _this.geometry.getVertexBuffer(name);
+            var data = _this.geometry.getAttributeData(name);
+            if (vertexBuffer && _instanceof1(data, Float32Array)) {
+                _this.attributeData.set(vertexBuffer.getWrapperBuffer(), data);
+            }
+        });
         this.forceTarget = forceTarget;
         this.sizeOverLifetime = sizeOverLifetime;
         this.speedOverLifetime = speedOverLifetime;
@@ -28536,6 +29600,7 @@ var ParticleMesh = /*#__PURE__*/ function() {
         this.gravityModifier = gravityModifier;
         this.rotationOverLifetime = rotationOverLifetime;
         this.maxCount = maxCount;
+        this.maxParticleBufferCount = maxCount;
         // this.duration = duration;
         this.textureOffsets = textureFlip ? [
             0,
@@ -28569,9 +29634,8 @@ var ParticleMesh = /*#__PURE__*/ function() {
     //   // this.mesh.material.setVector4('uParams', new Vector4(+v, this.duration, 0, 0));
     // }
     _proto.getPointColor = function getPointColor(index) {
-        var data = this.geometry.getAttributeData("aRot");
+        var data = this.getAttributeData("aRot");
         var i = index * 32 + 4;
-        assertExist(data);
         return [
             data[i],
             data[i + 1],
@@ -28580,46 +29644,31 @@ var ParticleMesh = /*#__PURE__*/ function() {
         ];
     };
     _proto.clearPoints = function clearPoints() {
-        this.resetGeometryData(this.geometry);
         this.particleCount = 0;
         this.geometry.setDrawCount(0);
-        this.maxParticleBufferCount = 0;
-    };
-    _proto.resetGeometryData = function resetGeometryData(geometry) {
-        var names = geometry.getAttributeNames();
-        var index = geometry.getIndexData();
-        for(var i = 0; i < names.length; i++){
-            var name = names[i];
-            var data = geometry.getAttributeData(name);
-            if (data) {
-                // @ts-expect-error
-                geometry.setAttributeData(name, new data.constructor(0));
-            }
-        }
-        // @ts-expect-error
-        geometry.setIndexData(new index.constructor(0));
     };
     _proto.onUpdate = function onUpdate(dt) {
-        var aPosArray = this.geometry.getAttributeData("aPos"); // vector3
+        var aPosArray = this.getAttributeData(VertexBuffer.PositionKind); // vector3
         var vertexCount = Math.ceil(aPosArray.length / 12);
         this.applyTranslation(vertexCount, dt);
         this.applyRotation(vertexCount, dt);
         this.applyLinearMove(vertexCount, dt);
     };
     _proto.minusTime = function minusTime(time) {
-        var aOffset = this.geometry.getAttributeData("aOffset");
+        var aOffset = this.getAttributeData("aOffset");
         for(var i = 0; i < aOffset.length; i += 4){
             aOffset[i + 2] -= time;
         }
-        this.geometry.setAttributeData("aOffset", aOffset);
+        this.setAttributeData("aOffset", aOffset);
         this.time -= time;
     };
     _proto.removePoint = function removePoint(index) {
         if (index < this.particleCount) {
-            this.geometry.setAttributeSubData("aOffset", index * 16, new Float32Array(16));
+            this.setAttributeSubData("aOffset", index * 16, new Float32Array(16));
         }
     };
     _proto.setPoint = function setPoint(index, point) {
+        var _this = this;
         var maxCount = this.maxCount;
         if (index < maxCount) {
             var particleCount = index + 1;
@@ -28736,13 +29785,12 @@ var ParticleMesh = /*#__PURE__*/ function() {
                 var data = pointData[name];
                 var attrSize = geometry.getAttributeStride(name) / Float32Array.BYTES_PER_ELEMENT;
                 if (increaseBuffer) {
-                    var baseData = geometry.getAttributeData(name);
-                    assertExist(baseData);
+                    var baseData = _this.getAttributeData(name);
                     var geoData = enlargeBuffer(baseData, vertexCount * attrSize, maxCount * 4 * attrSize, inc);
                     geoData.set(data, data.length * index);
-                    geometry.setAttributeData(name, geoData);
+                    _this.setAttributeData(name, geoData);
                 } else {
-                    geometry.setAttributeSubData(name, data.length * index, data);
+                    _this.setAttributeSubData(name, data.length * index, data);
                 }
             });
             this.particleCount = Math.max(particleCount, this.particleCount);
@@ -28751,9 +29799,9 @@ var ParticleMesh = /*#__PURE__*/ function() {
     };
     _proto.applyTranslation = function applyTranslation(vertexCount, deltaTime) {
         var localTime = this.time;
-        var aTranslationArray = this.geometry.getAttributeData("aTranslation");
-        var aVelArray = this.geometry.getAttributeData("aVel"); // vector3
-        var aOffsetArray = this.geometry.getAttributeData("aOffset");
+        var aTranslationArray = this.getAttributeData("aTranslation");
+        var aVelArray = this.getAttributeData("aVel"); // vector3
+        var aOffsetArray = this.getAttributeData("aOffset");
         if (aTranslationArray.length < vertexCount * 3) {
             aTranslationArray = this.expandArray(aTranslationArray, vertexCount * 3);
         }
@@ -28812,13 +29860,13 @@ var ParticleMesh = /*#__PURE__*/ function() {
                 aTranslationArray[aTranslationOffset + 11] += aTranslationZ;
             }
         }
-        this.geometry.setAttributeData("aTranslation", aTranslationArray);
+        this.setAttributeData("aTranslation", aTranslationArray);
     };
     _proto.applyRotation = function applyRotation(vertexCount, deltaTime) {
-        var aRotationArray = this.geometry.getAttributeData("aRotation0");
-        var aOffsetArray = this.geometry.getAttributeData("aOffset");
-        var aRotArray = this.geometry.getAttributeData("aRot"); // vector3
-        var aSeedArray = this.geometry.getAttributeData("aSeed"); // float
+        var aRotationArray = this.getAttributeData("aRotation0");
+        var aOffsetArray = this.getAttributeData("aOffset");
+        var aRotArray = this.getAttributeData("aRot"); // vector3
+        var aSeedArray = this.getAttributeData("aSeed"); // float
         var localTime = this.time;
         var aRotationMatrix = this.cachedRotationMatrix;
         if (aRotationArray.length < vertexCount * 9) {
@@ -28909,12 +29957,12 @@ var ParticleMesh = /*#__PURE__*/ function() {
                 aRotationArray.set(matrixArray, aRotationOffset + 27);
             }
         }
-        this.geometry.setAttributeData("aRotation0", aRotationArray);
+        this.setAttributeData("aRotation0", aRotationArray);
     };
     _proto.applyLinearMove = function applyLinearMove(vertexCount, deltaTime) {
-        var aLinearMoveArray = this.geometry.getAttributeData("aLinearMove");
-        var aOffsetArray = this.geometry.getAttributeData("aOffset");
-        var aSeedArray = this.geometry.getAttributeData("aSeed"); // float
+        var aLinearMoveArray = this.getAttributeData("aLinearMove");
+        var aOffsetArray = this.getAttributeData("aOffset");
+        var aSeedArray = this.getAttributeData("aSeed"); // float
         var localTime = this.time;
         if (aLinearMoveArray.length < vertexCount * 3) {
             aLinearMoveArray = this.expandArray(aLinearMoveArray, vertexCount * 3);
@@ -28989,7 +30037,36 @@ var ParticleMesh = /*#__PURE__*/ function() {
                 aLinearMoveArray[aLinearMoveOffset + 11] = linearMove.z;
             }
         }
-        this.geometry.setAttributeData("aLinearMove", aLinearMoveArray);
+        this.setAttributeData("aLinearMove", aLinearMoveArray);
+    };
+    _proto.getAttributeData = function getAttributeData(name) {
+        var vertexBuffer = this.geometry.getVertexBuffer(name);
+        var data = vertexBuffer && this.attributeData.get(vertexBuffer.getWrapperBuffer());
+        assertExist(data);
+        return data;
+    };
+    _proto.setAttributeData = function setAttributeData(name, data) {
+        var vertexBuffer = this.geometry.getVertexBuffer(name);
+        assertExist(vertexBuffer);
+        this.attributeData.set(vertexBuffer.getWrapperBuffer(), data);
+        this.geometry.setAttributeData(name, data);
+    };
+    _proto.setAttributeSubData = function setAttributeSubData(name, offset, data) {
+        var target = this.getAttributeData(name);
+        target.set(data, offset);
+        this.geometry.setAttributeSubData(name, offset, data);
+    };
+    /**
+   * @internal
+   */ _proto.rebuild = function rebuild() {
+        if (!this.geometry.isInitialized || this.geometry.isDisposed()) {
+            return;
+        }
+        this.attributeData.forEach(function(data, buffer) {
+            if (!buffer.getData()) {
+                buffer.update(data);
+            }
+        });
     };
     _proto.expandArray = function expandArray(array, newSize) {
         var newArr = new Float32Array(newSize);
@@ -29001,83 +30078,70 @@ var ParticleMesh = /*#__PURE__*/ function() {
 function generateGeometryProps(maxVertex, useSprite, name) {
     var bpe = Float32Array.BYTES_PER_ELEMENT;
     var j12 = bpe * 12;
-    var attributes = {
-        aPos: {
-            size: 3,
-            offset: 0,
-            stride: j12,
-            data: new Float32Array(0)
-        },
-        aVel: {
-            size: 3,
-            offset: 3 * bpe,
-            stride: j12,
-            dataSource: "aPos"
-        },
-        aDirX: {
-            size: 3,
-            offset: 6 * bpe,
-            stride: j12,
-            dataSource: "aPos"
-        },
-        aDirY: {
-            size: 3,
-            offset: 9 * bpe,
-            stride: j12,
-            dataSource: "aPos"
-        },
-        //
-        aRot: {
-            size: 3,
-            offset: 0,
-            stride: 8 * bpe,
-            data: new Float32Array(0)
-        },
-        aSeed: {
-            size: 1,
-            offset: 3 * bpe,
-            stride: 8 * bpe,
-            dataSource: "aRot"
-        },
-        aColor: {
-            size: 4,
-            offset: 4 * bpe,
-            stride: 8 * bpe,
-            dataSource: "aRot"
-        },
-        //
-        aOffset: {
-            size: 4,
-            stride: 4 * bpe,
-            data: new Float32Array(0)
-        },
-        aTranslation: {
-            size: 3,
-            data: new Float32Array(0)
-        },
-        aLinearMove: {
-            size: 3,
-            data: new Float32Array(0)
-        },
-        aRotation0: {
-            size: 3,
-            offset: 0,
-            stride: 9 * bpe,
-            data: new Float32Array(0)
-        },
-        aRotation1: {
-            size: 3,
-            offset: 3 * bpe,
-            stride: 9 * bpe,
-            dataSource: "aRotation0"
-        },
-        aRotation2: {
-            size: 3,
-            offset: 6 * bpe,
-            stride: 9 * bpe,
-            dataSource: "aRotation0"
-        }
-    };
+    var _obj;
+    var attributes = (_obj = {}, _obj[VertexBuffer.PositionKind] = {
+        size: 3,
+        offset: 0,
+        stride: j12,
+        data: new Float32Array(0)
+    }, _obj.aVel = {
+        size: 3,
+        offset: 3 * bpe,
+        stride: j12,
+        dataSource: VertexBuffer.PositionKind
+    }, _obj.aDirX = {
+        size: 3,
+        offset: 6 * bpe,
+        stride: j12,
+        dataSource: VertexBuffer.PositionKind
+    }, _obj.aDirY = {
+        size: 3,
+        offset: 9 * bpe,
+        stride: j12,
+        dataSource: VertexBuffer.PositionKind
+    }, //
+    _obj.aRot = {
+        size: 3,
+        offset: 0,
+        stride: 8 * bpe,
+        data: new Float32Array(0)
+    }, _obj.aSeed = {
+        size: 1,
+        offset: 3 * bpe,
+        stride: 8 * bpe,
+        dataSource: "aRot"
+    }, _obj[VertexBuffer.ColorKind] = {
+        size: 4,
+        offset: 4 * bpe,
+        stride: 8 * bpe,
+        dataSource: "aRot"
+    }, //
+    _obj.aOffset = {
+        size: 4,
+        stride: 4 * bpe,
+        data: new Float32Array(0)
+    }, _obj.aTranslation = {
+        size: 3,
+        data: new Float32Array(0)
+    }, _obj.aLinearMove = {
+        size: 3,
+        data: new Float32Array(0)
+    }, _obj.aRotation0 = {
+        size: 3,
+        offset: 0,
+        stride: 9 * bpe,
+        data: new Float32Array(0)
+    }, _obj.aRotation1 = {
+        size: 3,
+        offset: 3 * bpe,
+        stride: 9 * bpe,
+        dataSource: "aRotation0"
+    }, _obj.aRotation2 = {
+        size: 3,
+        offset: 6 * bpe,
+        stride: 9 * bpe,
+        dataSource: "aRotation0"
+    }, _obj);
     if (useSprite) {
         attributes["aSprite"] = {
             size: 3,
@@ -29088,10 +30152,11 @@ function generateGeometryProps(maxVertex, useSprite, name) {
     return {
         attributes: attributes,
         indices: {
-            data: new Uint16Array(0)
+            data: new Uint16Array(maxVertex / 4 * 6)
         },
         name: name,
-        maxVertex: maxVertex
+        maxVertex: maxVertex,
+        bufferUsage: exports.BufferUsage.Dynamic
     };
 }
 function getParticleMeshShader(item, gpuCapability, env) {
@@ -29371,6 +30436,13 @@ function modifyMaxKeyframeShader(shader, maxVertex, maxFrag) {
             this.materials.push(this.trailMesh.mesh.material);
         }
     };
+    /**
+   * @internal
+   */ _proto.rebuild = function rebuild() {
+        var _this_trailMesh;
+        this.particleMesh.rebuild();
+        (_this_trailMesh = this.trailMesh) == null ? void 0 : _this_trailMesh.rebuild();
+    };
     _proto.reset = function reset() {
         var _this_trailMesh;
         this.particleMesh.clearPoints();
@@ -29470,6 +30542,7 @@ exports.ParticleSystem = /*#__PURE__*/ function(Component) {
                 };
             }
         };
+        engine.addParticleSystem(_assert_this_initialized(_this));
         _this.maskManager = new MaskProcessor();
         if (props) {
             _this.fromData(props);
@@ -29741,6 +30814,18 @@ exports.ParticleSystem = /*#__PURE__*/ function(Component) {
             });
         }
     };
+    /**
+   * @hidden
+   * Internal utility.
+   * Not part of the public API — do not rely on this in your code.
+   */ _proto.rebuild = function rebuild() {
+        var _this_renderer;
+        (_this_renderer = this.renderer) == null ? void 0 : _this_renderer.rebuild();
+    };
+    _proto.dispose = function dispose() {
+        this.engine.removeParticleSystem(this);
+        Component.prototype.dispose.call(this);
+    };
     _proto.getParticleBoxes = function getParticleBoxes() {
         var link = this.particleLink;
         var renderer = this.renderer;
@@ -30800,7 +31885,7 @@ var TimelineInstance = /*#__PURE__*/ function() {
     return TimelineInstance;
 }();
 
-var seed$3 = 0;
+var seed$2 = 0;
 exports.SpriteColorPlayableAsset = /*#__PURE__*/ function(PlayableAsset) {
     _inherits(SpriteColorPlayableAsset, PlayableAsset);
     function SpriteColorPlayableAsset() {
@@ -30887,7 +31972,7 @@ exports.SpriteComponent = /*#__PURE__*/ function(MaskableGraphic) {
         _this = MaskableGraphic.call(this, engine) || this;
         _this.time = 0;
         _this.duration = 1;
-        _this.name = "MSprite" + seed$3++;
+        _this.name = "MSprite" + seed$2++;
         if (props) {
             _this.fromData(props);
         }
@@ -31008,8 +32093,8 @@ exports.SpriteComponent = /*#__PURE__*/ function(MaskableGraphic) {
         var width = isRotate90 ? h : w;
         var height = isRotate90 ? w : h;
         var angle = isRotate90 ? -Math.PI / 2 : 0;
-        var aUV = geometry.getAttributeData("aUV");
-        var aPos = geometry.getAttributeData("aPos");
+        var aUV = geometry.getAttributeData(VertexBuffer.UVKind);
+        var aPos = geometry.getAttributeData(VertexBuffer.PositionKind);
         var indices = geometry.getIndexData();
         var tempPosition = [
             0,
@@ -31028,8 +32113,8 @@ exports.SpriteComponent = /*#__PURE__*/ function(MaskableGraphic) {
                 aUV[uvOffset] = (tempPosition[0] + 0.5) * width + x;
                 aUV[uvOffset + 1] = (tempPosition[1] + 0.5) * height + y;
             }
-            this.geometry.setAttributeData("aPos", aPos.slice());
-            this.geometry.setAttributeData("aUV", aUV.slice());
+            this.updateAttributeData(VertexBuffer.PositionKind, aPos.slice(), 3);
+            this.updateAttributeData(VertexBuffer.UVKind, aUV.slice(), 2);
             this.geometry.setIndexData(indices.slice());
             this.geometry.setDrawCount(indices.length);
         }
@@ -31149,11 +32234,23 @@ exports.SpriteComponent = /*#__PURE__*/ function(MaskableGraphic) {
                 index.push(base, 1 + base, 2 + base, 2 + base, 1 + base, 3 + base);
             }
         }
-        geometry.setAttributeData("aPos", new Float32Array(position));
+        this.updateAttributeData(VertexBuffer.PositionKind, new Float32Array(position), 3);
         geometry.setIndexData(new Uint16Array(index));
-        geometry.setAttributeData("aUV", new Float32Array(aUV));
+        this.updateAttributeData(VertexBuffer.UVKind, new Float32Array(aUV), 2);
         geometry.setDrawCount(index.length);
     };
+    _proto.updateAttributeData = function updateAttributeData(name, data, size) {
+        var vertexBuffer = this.geometry.getVertexBuffer(name);
+        var dataBuffer = vertexBuffer == null ? void 0 : vertexBuffer.getBuffer();
+        if (!vertexBuffer || dataBuffer && data.byteLength > dataBuffer.capacity) {
+            this.geometry.setVerticesBuffer(new VertexBuffer(this.engine, data, name, {
+                updatable: true,
+                size: size
+            }));
+            return;
+        }
+        this.geometry.setAttributeData(name, data);
+    };
     _create_class(SpriteComponent, [
         {
             key: "sprite",
@@ -31622,20 +32719,22 @@ var TextStyle = /*#__PURE__*/ function() {
             return;
         }
         var context = this.context;
+        var textureWidth = Math.max(1, width);
+        var textureHeight = Math.max(1, height);
         // 先保存状态
         context.save();
         // 设置canvas尺寸
-        this.canvas.width = width;
-        this.canvas.height = height;
+        this.canvas.width = textureWidth;
+        this.canvas.height = textureHeight;
         //重置变换
         context.setTransform(1, 0, 0, 1, 0, 0);
         // 处理翻转
         if (!flipY) {
-            context.translate(0, height);
+            context.translate(0, textureHeight);
             context.scale(1, -1);
         }
         // 在翻转后清空画布
-        context.clearRect(0, 0, width, height);
+        context.clearRect(0, 0, textureWidth, textureHeight);
         // 设置 alpha 修复用填充色（不实际输出像素）
         context.fillStyle = "rgba(255, 255, 255, " + this.ALPHA_FIX_VALUE + ")";
         // 执行绘制回调
@@ -31643,7 +32742,7 @@ var TextStyle = /*#__PURE__*/ function() {
         // 创建纹理前恢复状态
         context.restore();
         // 创建新纹理
-        var imageData = context.getImageData(0, 0, width, height);
+        var imageData = context.getImageData(0, 0, textureWidth, textureHeight);
         var texture = Texture.createWithData(this.engine, {
             data: new Uint8Array(imageData.data),
             width: imageData.width,
@@ -31679,7 +32778,7 @@ var DEFAULT_FONTS = [
     "courier"
 ];
 /** 检测字符串是否包含需要 RTL 和连写排版的字符（阿拉伯语等） */ var HAS_RTL_OR_JOINING = /[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\uFB50-\uFDFF\uFE70-\uFEFF]/;
-var seed$2 = 0;
+var seed$1 = 0;
 exports.TextComponent = /*#__PURE__*/ function(MaskableGraphic) {
     _inherits(TextComponent, MaskableGraphic);
     function TextComponent(engine) {
@@ -31696,7 +32795,7 @@ exports.TextComponent = /*#__PURE__*/ function(MaskableGraphic) {
         /**
    * 每一行文本的最大宽度
    */ _this.maxLineWidth = 0;
-        _this.name = "MText" + seed$2++;
+        _this.name = "MText" + seed$1++;
         // 初始化canvas资源
         var canvasAndContext = canvasPool.getCanvasAndContext(1, 1);
         _this.canvas = canvasAndContext.canvas;
@@ -33612,45 +34711,42 @@ exports.ShapeComponent = /*#__PURE__*/ function(RendererComponent) {
             easingOuts: [],
             shapes: []
         };
+        var _obj;
         // Create Geometry
         //-------------------------------------------------------------------------
         _this.geometry = Geometry.create(_this.engine, {
-            attributes: {
-                aPos: {
-                    type: glContext.FLOAT,
-                    size: 3,
-                    data: new Float32Array([
-                        -0.5,
-                        0.5,
-                        0,
-                        -0.5,
-                        -0.5,
-                        0,
-                        0.5,
-                        0.5,
-                        0,
-                        0.5,
-                        -0.5,
-                        0
-                    ])
-                },
-                aUV: {
-                    size: 2,
-                    offset: 0,
-                    releasable: true,
-                    type: glContext.FLOAT,
-                    data: new Float32Array([
-                        0,
-                        1,
-                        0,
-                        0,
-                        1,
-                        1,
-                        1,
-                        0
-                    ])
-                }
-            },
+            attributes: (_obj = {}, _obj[VertexBuffer.PositionKind] = {
+                type: glContext.FLOAT,
+                size: 3,
+                data: new Float32Array([
+                    -0.5,
+                    0.5,
+                    0,
+                    -0.5,
+                    -0.5,
+                    0,
+                    0.5,
+                    0.5,
+                    0,
+                    0.5,
+                    -0.5,
+                    0
+                ])
+            }, _obj[VertexBuffer.UVKind] = {
+                size: 2,
+                offset: 0,
+                type: glContext.FLOAT,
+                data: new Float32Array([
+                    0,
+                    1,
+                    0,
+                    0,
+                    1,
+                    1,
+                    1,
+                    0
+                ])
+            }, _obj),
             indices: {
                 data: new Uint16Array([
                     0,
@@ -33659,11 +34755,11 @@ exports.ShapeComponent = /*#__PURE__*/ function(RendererComponent) {
                     2,
                     1,
                     3
-                ]),
-                releasable: true
+                ])
             },
             mode: glContext.TRIANGLES,
-            drawCount: 6
+            drawCount: 6,
+            bufferUsage: glContext.DYNAMIC_DRAW
         });
         _this.geometry.subMeshes.push({
             offset: 0,
@@ -33729,7 +34825,7 @@ exports.ShapeComponent = /*#__PURE__*/ function(RendererComponent) {
         return boundingBox;
     };
     _proto.getBoundingBoxInfo = function getBoundingBoxInfo() {
-        var positionArray = this.geometry.getAttributeData("aPos");
+        var positionArray = this.geometry.getAttributeData(VertexBuffer.PositionKind);
         if (positionArray) {
             var minMaxResult = extractMinAndMax(positionArray, 0, positionArray.length / 3);
             minMaxResult.minimum.x *= this.transform.size.x;
@@ -33780,8 +34876,8 @@ exports.ShapeComponent = /*#__PURE__*/ function(RendererComponent) {
         var strokeIndexCount = indices.length - fillIndexCount;
         var vertexCount = vertices.length / 2;
         // Get the current attribute and index arrays from the geometry, avoiding re-creation
-        var positionArray = this.geometry.getAttributeData("aPos");
-        var uvArray = this.geometry.getAttributeData("aUV");
+        var positionArray = this.geometry.getAttributeData(VertexBuffer.PositionKind);
+        var uvArray = this.geometry.getAttributeData(VertexBuffer.UVKind);
         var indexArray = this.geometry.getIndexData();
         if (!positionArray || positionArray.length < vertexCount * 3) {
             positionArray = new Float32Array(vertexCount * 3);
@@ -33822,8 +34918,8 @@ exports.ShapeComponent = /*#__PURE__*/ function(RendererComponent) {
         // Set index array
         indexArray.set(indices);
         // Rewrite to geometry
-        this.geometry.setAttributeData("aPos", positionArray);
-        this.geometry.setAttributeData("aUV", uvArray);
+        this.updateAttributeData(VertexBuffer.PositionKind, positionArray, 3);
+        this.updateAttributeData(VertexBuffer.UVKind, uvArray, 2);
         this.geometry.setIndexData(indexArray);
         this.geometry.setDrawCount(indices.length);
         var u16Size = 2;
@@ -33833,6 +34929,18 @@ exports.ShapeComponent = /*#__PURE__*/ function(RendererComponent) {
         strokeSubMesh.offset = fillIndexCount * u16Size;
         strokeSubMesh.indexCount = strokeIndexCount;
     };
+    _proto.updateAttributeData = function updateAttributeData(name, data, size) {
+        var _this_geometry_getVertexBuffer;
+        var dataBuffer = (_this_geometry_getVertexBuffer = this.geometry.getVertexBuffer(name)) == null ? void 0 : _this_geometry_getVertexBuffer.getBuffer();
+        if (dataBuffer && data.byteLength > dataBuffer.capacity) {
+            this.geometry.setVerticesBuffer(new VertexBuffer(this.engine, data, name, {
+                updatable: true,
+                size: size
+            }));
+            return;
+        }
+        this.geometry.setAttributeData(name, data);
+    };
     _proto.computeScreenScale = function computeScreenScale() {
         var defaultPpu = 1;
         var composition = this.item.composition;
@@ -36609,7 +37717,7 @@ function getStandardSpriteContent(sprite, transform) {
     return ret;
 }
 
-var version$2 = "2.10.0-alpha.1";
+var version$2 = "2.10.0-alpha.2";
 var v0 = /^(\d+)\.(\d+)\.(\d+)(-(\w+)\.\d+)?$/;
 var standardVersion = /^(\d+)\.(\d+)$/;
 var reverseParticle = false;
@@ -37106,7 +38214,7 @@ function _combineImageTemplate() {
     this.options = options;
 };
 
-var seed$1 = 1;
+var seed = 1;
 /**
  * 资源管理器
  * 用于加载和动效中所有的资源文件，包括图片、插件、图层粒子数据等
@@ -37118,7 +38226,7 @@ var seed$1 = 1;
         this.downloader = downloader;
         this.assets = {};
         this.sourceFrom = {};
-        this.id = seed$1++;
+        this.id = seed++;
         this.timers = [];
         this.updateOptions(options);
     }
@@ -38400,11 +39508,6 @@ var tmpScale = new Vector3(1, 1, 1);
     return Camera;
 }();
 
-function _assert_this_initialized(self) {
-    if (self === void 0) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-    return self;
-}
-
 /**
  *
  */ var SceneTicking = /*#__PURE__*/ function() {
@@ -38571,7 +39674,7 @@ var PreRenderTickData = /*#__PURE__*/ function(TickData) {
         _this.paused = true;
         _this.isEndCalled = false;
         _this._textures = [];
-        var _ref = props != null ? props : {}, _ref_reusable = _ref.reusable, reusable = _ref_reusable === void 0 ? false : _ref_reusable, _ref_speed = _ref.speed, speed = _ref_speed === void 0 ? 1 : _ref_speed, _ref_baseRenderOrder = _ref.baseRenderOrder, baseRenderOrder = _ref_baseRenderOrder === void 0 ? 0 : _ref_baseRenderOrder, event = _ref.event, onItemMessage = _ref.onItemMessage;
+        var _ref = props != null ? props : {}, _ref_reusable = _ref.reusable, reusable = _ref_reusable === void 0 ? false : _ref_reusable, _ref_speed = _ref.speed, speed = _ref_speed === void 0 ? 1 : _ref_speed, _ref_baseRenderOrder = _ref.baseRenderOrder, baseRenderOrder = _ref_baseRenderOrder === void 0 ? 0 : _ref_baseRenderOrder, onItemMessage = _ref.onItemMessage;
         _this.engine.addComposition(_assert_this_initialized(_this));
         var sourceContent = null;
         if (scene) {
@@ -38629,7 +39732,7 @@ var PreRenderTickData = /*#__PURE__*/ function(TickData) {
         _this.id = (_sourceContent_id = sourceContent == null ? void 0 : sourceContent.id) != null ? _sourceContent_id : generateGUID();
         var _sourceContent_startTime;
         _this.startTime = (_sourceContent_startTime = sourceContent == null ? void 0 : sourceContent.startTime) != null ? _sourceContent_startTime : 0;
-        _this.event = event;
+        _this.event = engine.eventSystem;
         var _scene_startTime, _scene_totalTime;
         _this.statistic = {
             loadStart: (_scene_startTime = scene == null ? void 0 : scene.startTime) != null ? _scene_startTime : 0,
@@ -40975,6 +42078,7 @@ var DEFAULT_FPS = 60;
         _this.renderPasses = [];
         _this.framebuffers = [];
         _this.renderbuffers = [];
+        _this.particleSystems = [];
         _this.clearAction = {
             stencilAction: exports.TextureLoadAction.clear,
             clearStencil: 0,
@@ -41013,7 +42117,6 @@ var DEFAULT_FPS = 60;
         _this.assetLoader = new AssetLoader(_assert_this_initialized(_this));
         _this.assetService = new AssetService(_assert_this_initialized(_this));
         _this.renderTargetPool = new RenderTargetPool(_assert_this_initialized(_this));
-        _this.graphics = new Graphics(_assert_this_initialized(_this));
         _this.renderingData = {
             // @ts-expect-error
             currentFrame: {}
@@ -41224,55 +42327,27 @@ var DEFAULT_FPS = 60;
         });
         this.emit("resize", this);
     };
-    _proto.getTargetSize = function getTargetSize(parentEle) {
-        if (parentEle === undefined || parentEle === null) {
-            throw new Error("Container is not an HTMLElement, see " + HELP_LINK["Container is not an HTMLElement"] + ".");
-        }
-        var displayAspect = this.displayAspect;
-        // 小程序环境没有 getComputedStyle
-        var computedStyle = window.getComputedStyle == null ? void 0 : window.getComputedStyle.call(window, parentEle);
-        var targetWidth;
-        var targetHeight;
-        var finalWidth = 0;
-        var finalHeight = 0;
-        if (computedStyle) {
-            finalWidth = parseInt(computedStyle.width, 10);
-            finalHeight = parseInt(computedStyle.height, 10);
-        } else {
-            finalWidth = parentEle.clientWidth;
-            finalHeight = parentEle.clientHeight;
-        }
-        if (displayAspect) {
-            var parentAspect = finalWidth / finalHeight;
-            if (parentAspect > displayAspect) {
-                targetHeight = finalHeight * this.displayScale;
-                targetWidth = targetHeight * displayAspect;
-            } else {
-                targetWidth = finalWidth * this.displayScale;
-                targetHeight = targetWidth / displayAspect;
-            }
-        } else {
-            targetWidth = finalWidth;
-            targetHeight = finalHeight;
-        }
-        var ratio = this.pixelRatio;
-        var containerWidth = targetWidth;
-        var containerHeight = targetHeight;
-        targetWidth = Math.round(targetWidth * ratio);
-        targetHeight = Math.round(targetHeight * ratio);
-        if (targetWidth < 1 || targetHeight < 1) {
-            if (this.offscreenMode) {
-                targetWidth = targetHeight = containerWidth = containerHeight = 1;
-            } else {
-                throw new Error("Invalid container size " + targetWidth + "x" + targetHeight + ", see " + HELP_LINK["Invalid container size"] + ".");
-            }
-        }
-        return [
-            containerWidth,
-            containerHeight,
-            targetWidth,
-            targetHeight
-        ];
+    _proto.createVertexBuffer = function createVertexBuffer(data, options) {
+        throw new Error("The active rendering backend does not provide vertex buffers.");
+    };
+    _proto.createDynamicVertexBuffer = function createDynamicVertexBuffer(data, options) {
+        return this.createVertexBuffer(data, options);
+    };
+    _proto.createIndexBuffer = function createIndexBuffer(indices, options) {
+        throw new Error("The active rendering backend does not provide index buffers.");
+    };
+    _proto.updateDynamicVertexBuffer = function updateDynamicVertexBuffer(vertexBuffer, data, byteOffset, byteLength) {
+        throw new Error("The active rendering backend cannot update vertex buffers.");
+    };
+    _proto.updateDynamicIndexBuffer = function updateDynamicIndexBuffer(indexBuffer, indices, byteOffset) {
+        throw new Error("The active rendering backend cannot update index buffers.");
+    };
+    /** @hide */ _proto.releaseBuffer = function releaseBuffer(buffer) {
+        buffer.references--;
+        return buffer.references === 0;
+    };
+    /** @hide */ _proto.bindBuffers = function bindBuffers(vertexBuffers, indexBuffer, effect) {
+        throw new Error("The active rendering backend cannot bind geometry buffers.");
     };
     _proto.addTexture = function addTexture(tex) {
         if (this.disposed) {
@@ -41310,6 +42385,18 @@ var DEFAULT_FPS = 60;
         }
         removeItem(this.geometries, geo);
     };
+    /** @internal */ _proto.addParticleSystem = function addParticleSystem(particleSystem) {
+        if (this.disposed) {
+            return;
+        }
+        addItem(this.particleSystems, particleSystem);
+    };
+    /** @internal */ _proto.removeParticleSystem = function removeParticleSystem(particleSystem) {
+        if (this.disposed) {
+            return;
+        }
+        removeItem(this.particleSystems, particleSystem);
+    };
     _proto.addMesh = function addMesh(mesh) {
         if (this.disposed) {
             return;
@@ -41462,7 +42549,7 @@ var DEFAULT_FPS = 60;
     /**
    * 销毁所有缓存的资源
    */ _proto.dispose = function dispose() {
-        var _this_ticker, _this_eventSystem, _this_assetService;
+        var _this_ticker, _this_eventSystem, _this_assetService, _this__graphics;
         if (this.disposed) {
             return;
         }
@@ -41487,7 +42574,7 @@ var DEFAULT_FPS = 60;
         (_this_ticker = this.ticker) == null ? void 0 : _this_ticker.stop();
         (_this_eventSystem = this.eventSystem) == null ? void 0 : _this_eventSystem.dispose();
         (_this_assetService = this.assetService) == null ? void 0 : _this_assetService.dispose();
-        this.graphics.dispose();
+        (_this__graphics = this._graphics) == null ? void 0 : _this__graphics.dispose();
         this.renderPasses.forEach(function(pass) {
             return pass.dispose();
         });
@@ -41515,8 +42602,69 @@ var DEFAULT_FPS = 60;
         this.meshes = [];
         this.renderPasses = [];
         this.compositions = [];
+        this.particleSystems = [];
+    };
+    _proto.getTargetSize = function getTargetSize(parentEle) {
+        if (parentEle === undefined || parentEle === null) {
+            throw new Error("Container is not an HTMLElement, see " + HELP_LINK["Container is not an HTMLElement"] + ".");
+        }
+        var displayAspect = this.displayAspect;
+        // 小程序环境没有 getComputedStyle
+        var computedStyle = window.getComputedStyle == null ? void 0 : window.getComputedStyle.call(window, parentEle);
+        var targetWidth;
+        var targetHeight;
+        var finalWidth = 0;
+        var finalHeight = 0;
+        if (computedStyle) {
+            finalWidth = parseInt(computedStyle.width, 10);
+            finalHeight = parseInt(computedStyle.height, 10);
+        } else {
+            finalWidth = parentEle.clientWidth;
+            finalHeight = parentEle.clientHeight;
+        }
+        if (displayAspect) {
+            var parentAspect = finalWidth / finalHeight;
+            if (parentAspect > displayAspect) {
+                targetHeight = finalHeight * this.displayScale;
+                targetWidth = targetHeight * displayAspect;
+            } else {
+                targetWidth = finalWidth * this.displayScale;
+                targetHeight = targetWidth / displayAspect;
+            }
+        } else {
+            targetWidth = finalWidth;
+            targetHeight = finalHeight;
+        }
+        var ratio = this.pixelRatio;
+        var containerWidth = targetWidth;
+        var containerHeight = targetHeight;
+        targetWidth = Math.round(targetWidth * ratio);
+        targetHeight = Math.round(targetHeight * ratio);
+        if (targetWidth < 1 || targetHeight < 1) {
+            if (this.offscreenMode) {
+                targetWidth = targetHeight = containerWidth = containerHeight = 1;
+            } else {
+                throw new Error("Invalid container size " + targetWidth + "x" + targetHeight + ", see " + HELP_LINK["Invalid container size"] + ".");
+            }
+        }
+        return [
+            containerWidth,
+            containerHeight,
+            targetWidth,
+            targetHeight
+        ];
     };
     _create_class(Engine, [
+        {
+            key: "graphics",
+            get: function get() {
+                if (this._graphics) {
+                    return this._graphics;
+                }
+                this._graphics = new Graphics(this);
+                return this._graphics;
+            }
+        },
         {
             key: "disposed",
             get: function get() {
@@ -41679,9 +42827,7 @@ var PassTextureCache = /*#__PURE__*/ function() {
     };
     SceneLoader.createComposition = function createComposition(scene, engine, options) {
         if (options === void 0) options = {};
-        var composition = new Composition(engine, _extends({}, options, {
-            event: engine.eventSystem
-        }), scene);
+        var composition = new Composition(engine, _extends({}, options), scene);
         // TODO 目前编辑器会每帧调用 loadScene, 在这编译会导致闪帧，待编辑器渲染逻辑优化后移除。
         if (engine.env !== PLAYER_OPTIONS_ENV_EDITOR) {
             engine.assetService.createShaderVariant();
@@ -41734,7 +42880,7 @@ var PrecompositionManager = /*#__PURE__*/ function() {
         rootItem.instantiatePreComposition(compositionData);
         var _options_autoplay;
         rootItem.getComponent(exports.CompositionComponent).playOnStart = (_options_autoplay = options.autoplay) != null ? _options_autoplay : true;
-        rootItem.getComponent(exports.CompositionComponent).endBehavior = 0;
+        rootItem.getComponent(exports.CompositionComponent).endBehavior = rootItem.endBehavior;
         composition.addItem(rootItem);
         return rootItem;
     };
@@ -41746,7 +42892,7 @@ registerPlugin("text", TextLoader);
 registerPlugin("sprite", SpriteLoader);
 registerPlugin("particle", ParticleLoader);
 registerPlugin("interact", InteractLoader);
-var version$1 = "2.10.0-alpha.1";
+var version$1 = "2.10.0-alpha.2";
 logger.info("Core version: " + version$1 + ".");
 
 var _obj;
@@ -42357,275 +43503,61 @@ function _possible_constructor_return(self, call) {
     return _assert_this_initialized(self);
 }
 
-var seed = 1;
-/**
- * THREE 中的 geometry 的抽象实现类
- */ var ThreeGeometry = /*#__PURE__*/ function(Geometry) {
-    _inherits(ThreeGeometry, Geometry);
-    function ThreeGeometry(engine, props) {
-        var _this;
-        _this = Geometry.call(this, engine) || this;
-        /**
-   * 记录顶点属性信息用于缓存
-   */ _this.attributes = {};
-        _this.destroyed = false;
-        _this.attributesName = [];
-        if (!props) {
-            return _possible_constructor_return(_this);
-        }
-        var _props_drawStart = props.drawStart, drawStart = _props_drawStart === void 0 ? 0 : _props_drawStart, drawCount = props.drawCount, indices = props.indices, mode = props.mode, _props_name = props.name, name = _props_name === void 0 ? "effectsGeometry:" + seed++ : _props_name;
-        _this.name = name;
-        _this.mode = mode != null ? mode : glContext.TRIANGLES;
-        var attributesName = [];
-        var attributes = {};
-        var geometry = new THREE__namespace.BufferGeometry();
-        Object.keys(props.attributes).forEach(function(name) {
-            var attr = props.attributes[name];
-            if (!("dataSource" in attr)) {
-                _this.setAttributeType(name, attr, geometry, attributes, props.maxVertex);
-            } else {
-                // 使用AttributeWithType构造的attribute
-                var dataSource = attr.dataSource;
-                if (dataSource) {
-                    if (attributes[dataSource] === undefined) {
-                        _this.setAttributeType(dataSource, attr, geometry, attributes, props.maxVertex);
-                    }
-                    var size = attr.size, offset = attr.offset, normalize = attr.normalize;
-                    var dataSourceAttribute = attributes[dataSource];
-                    var buffer = dataSourceAttribute.buffer;
-                    var dataLength = dataSourceAttribute.dataLength;
-                    var attribute = new THREE__namespace.InterleavedBufferAttribute(buffer, size, (offset != null ? offset : 0) / dataLength, normalize);
-                    geometry.setAttribute(name, attribute);
-                    attributes[name] = {
-                        buffer: buffer,
-                        attribute: attribute,
-                        type: dataSourceAttribute.type,
-                        dataLength: dataLength
-                    };
-                }
+var geometryCache = new WeakMap();
+function getThreeGeometry(source) {
+    source.flush();
+    var cache = geometryCache.get(source);
+    var attributeNames = source.getAttributeNames();
+    var indexBuffer = source.getIndexBuffer();
+    var instanced = source.instanceCount > 0;
+    if (!cache || !isCacheValid(source, cache, attributeNames, indexBuffer, instanced)) {
+        cache == null ? void 0 : cache.resource.dispose();
+        var geometry = instanced ? new THREE__namespace.InstancedBufferGeometry() : new THREE__namespace.BufferGeometry();
+        var vertexBuffers = {};
+        geometry.name = source.name;
+        attributeNames.forEach(function(name) {
+            var vertexBuffer = source.getVertexBuffer(name);
+            var dataBuffer = vertexBuffer == null ? void 0 : vertexBuffer.getBuffer();
+            var nativeBuffer = dataBuffer == null ? void 0 : dataBuffer.resource;
+            if (!vertexBuffer || !_instanceof1(nativeBuffer, THREE__namespace.InterleavedBuffer)) {
+                return;
             }
-            attributesName.push(name);
+            vertexBuffers[name] = vertexBuffer;
+            geometry.setAttribute(name, new THREE__namespace.InterleavedBufferAttribute(nativeBuffer, vertexBuffer.getSize(), vertexBuffer.byteOffset / nativeBuffer.array.BYTES_PER_ELEMENT, vertexBuffer.normalized));
         });
-        if (indices && indices.data) {
-            geometry.setIndex(new THREE__namespace.BufferAttribute(indices.data, 1));
-        }
-        _this.geometry = geometry;
-        _this.attributes = attributes;
-        _this.attributesName = attributesName;
-        _this.drawStart = drawStart;
-        _this.drawCount = drawCount != null ? drawCount : 0;
-        return _this;
-    }
-    var _proto = ThreeGeometry.prototype;
-    /**
-   * 获取 attribute 数据
-   *
-   * @param name - attribute 名称
-   * @returns 返回 attribute 数据，如果为空返回 undefined
-   */ _proto.getAttributeData = function getAttributeData(name) {
-        if (this.attributes[name] == undefined) {
-            return;
-        }
-        return this.attributes[name].buffer.array;
-    };
-    /**
-   * 设置 attribute 数据
-   *
-   * @param name - attribute 名称
-   * @param data - attribute 数据
-   * @returns
-   */ _proto.setAttributeData = function setAttributeData(name, data) {
-        if (this.attributes[name] == undefined) {
-            return;
-        }
-        var attributeBuffer = this.attributes[name].buffer;
-        if (data.length > attributeBuffer.array.length) {
-            var buffer = new THREE__namespace.InterleavedBuffer(data, attributeBuffer.stride);
-            attributeBuffer = this.attributes[name].attribute.data = buffer;
-            this.attributes[name].buffer = buffer;
-            this.geometry.setAttribute(name, this.attributes[name].attribute);
-        } else {
-            attributeBuffer.set(data, 0);
-            attributeBuffer.updateRange.count = data.length;
-            attributeBuffer.updateRange.offset = 0;
-        }
-        this.geometry.attributes[name].needsUpdate = true;
-    };
-    /**
-   * 设置可变的 attribute 数据
-   *
-   * @param name - attribute 名称
-   * @param dataOffset - 数据偏移
-   * @param data - 数据内容
-   * @returns
-   */ _proto.setAttributeSubData = function setAttributeSubData(name, dataOffset, data) {
-        if (this.attributes[name] == undefined) {
-            return;
-        }
-        var attributeBuffer = this.attributes[name].buffer;
-        attributeBuffer.set(data, dataOffset);
-        this.geometry.attributes[name].needsUpdate = true;
-    };
-    /**
-   * 获取 attribute 数据步长
-   *
-   * @param name - attribute名称
-   * @returns 返回步长值
-   */ _proto.getAttributeStride = function getAttributeStride(name) {
-        var attribute = this.attributes[name];
-        return attribute.buffer.stride * BYTES_TYPE_MAP[attribute.type];
-    };
-    /**
-   * 获取用到的所有 attribute 名称
-   * @returns 返回名称数组
-   */ _proto.getAttributeNames = function getAttributeNames() {
-        return this.attributesName;
-    };
-    /**
-   * 获取 index attribute 数据
-   * @returns 返回数据，如果为空返回 undefined
-   */ _proto.getIndexData = function getIndexData() {
-        var index = this.geometry.getIndex();
-        return index === null ? undefined : index.array;
-    };
-    /**
-   * 设置 index attribute 数据
-   *
-   * @param data - index 数据
-   */ _proto.setIndexData = function setIndexData(data) {
-        if (data) {
-            this.geometry.setIndex(new THREE__namespace.BufferAttribute(data, 1));
-            this.geometry.index.needsUpdate = true;
-        }
-    };
-    /**
-   * 设置偏移 index 数据
-   *
-   * @param offset - 数据偏移量
-   * @param data - 数据内容
-   */ _proto.setIndexSubData = function setIndexSubData(offset, data) {
-        var index = this.geometry.getIndex();
-        if (index !== null) {
-            var start = offset;
-            var length = offset + data.length;
-            var array = index.count;
-            if (array < length) {
-                // @ts-expect-error safe to use
-                var newData = new data.constructor(end);
-                newData.set(index.array);
-                index.array = newData;
-            }
-            //@ts-expect-error
-            index.array.set(data, start);
-            this.geometry.index.needsUpdate = true;
-        }
-    };
-    /**
-   * 设置绘制偏移
-   *
-   * @param start - 绘制偏移
-   */ _proto.setDrawStart = function setDrawStart(start) {
-        this.drawStart = start;
-    };
-    /**
-   * 获取绘制偏移
-   *
-   * @returns 返回绘制移
-   */ _proto.getDrawStart = function getDrawStart() {
-        return this.drawStart;
-    };
-    /**
-   * 设置绘制数量
-   *
-   * @param count - 绘制数量
-   */ _proto.setDrawCount = function setDrawCount(count) {
-        this.drawCount = count;
-    };
-    /**
-   * 获取绘制数量
-   *
-   * @returns 返回绘制数量
-   */ _proto.getDrawCount = function getDrawCount() {
-        return this.drawCount;
-    };
-    /**
-   * 获取蒙皮数据
-   *
-   * @returns 返回蒙皮数据
-   */ _proto.getSkinProps = function getSkinProps() {
-        return {};
-    };
-    /**
-   * 销毁方法
-   *
-   * @returns
-   */ _proto.dispose = function dispose() {
-        if (this.destroyed) {
-            return;
-        }
-        this.geometry.dispose();
-        this.destroyed = true;
-        Geometry.prototype.dispose.call(this);
-    };
-    _proto.setAttributeType = function setAttributeType(name, attr, geometry, attributes, maxCount) {
-        var _attr_stride = attr.stride, stride = _attr_stride === void 0 ? 0 : _attr_stride, size = attr.size, offset = attr.offset, normalize = attr.normalize, _attr_type = attr.type, type = _attr_type === void 0 ? glContext.FLOAT : _attr_type;
-        var data = attr.data;
-        if (type && !data) {
-            data = generateEmptyTypedArray(type);
-        }
-        if (!data) {
-            return;
-        }
-        var dataLength = _instanceof1(data, Float32Array) ? Float32Array.BYTES_PER_ELEMENT : Uint16Array.BYTES_PER_ELEMENT;
-        var threeStride = stride / dataLength;
-        maxCount = (maxCount != null ? maxCount : 0) * threeStride;
-        var count = maxCount || size * dataLength;
-        if (count) {
-            // 如果传入了data且data.length不为0 使用传入的data 否则根据length新建数组
-            if (data.length === 0) {
-                data = _instanceof1(data, Float32Array) ? new Float32Array(count) : new Uint16Array(count);
-            }
-        }
-        var buffer = new THREE__namespace.InterleavedBuffer(data, threeStride);
-        var attribute = new THREE__namespace.InterleavedBufferAttribute(buffer, size, (offset != null ? offset : 0) / dataLength, normalize);
-        geometry.setAttribute(name, attribute);
-        attributes[name] = {
-            buffer: buffer,
-            attribute: attribute,
-            type: type,
-            dataLength: dataLength
+        var indexDataBuffer = indexBuffer;
+        var nativeIndex = indexDataBuffer == null ? void 0 : indexDataBuffer.resource;
+        if (_instanceof1(nativeIndex, THREE__namespace.BufferAttribute)) {
+            geometry.setIndex(nativeIndex);
+        }
+        cache = {
+            vertexBuffers: vertexBuffers,
+            indexBuffer: indexBuffer,
+            instanced: instanced,
+            resource: geometry
         };
-    };
-    _create_class(ThreeGeometry, [
-        {
-            key: "drawCount",
-            get: /**
-   * 获取绘制数量
-   */ function get() {
-                return this.geometry.drawRange.count;
-            },
-            set: /**
-   * 设置绘制数量
-   */ function set(val) {
-                this.geometry.drawRange.count = val;
-            }
-        },
-        {
-            key: "drawStart",
-            get: /**
-   * 获取绘制起点
-   */ function get() {
-                return this.geometry.drawRange.start;
-            },
-            set: /**
-   * 设置绘制起点
-   */ function set(val) {
-                this.geometry.drawRange.start = val;
-            }
-        }
-    ]);
-    return ThreeGeometry;
-}(Geometry);
+        geometryCache.set(source, cache);
+    }
+    if (_instanceof1(cache.resource, THREE__namespace.InstancedBufferGeometry)) {
+        cache.resource.instanceCount = source.instanceCount;
+    }
+    var drawStart = source.getIndexBuffer() ? source.getDrawStart() / getBytesPerElement(source.getIndexType()) : source.getDrawStart();
+    cache.resource.setDrawRange(drawStart, source.getDrawCount());
+    return cache.resource;
+}
+function isCacheValid(source, cache, attributeNames, indexBuffer, instanced) {
+    if (cache.indexBuffer !== indexBuffer || cache.instanced !== instanced || Object.keys(cache.vertexBuffers).length !== attributeNames.length) {
+        return false;
+    }
+    return attributeNames.every(function(name) {
+        return cache.vertexBuffers[name] === source.getVertexBuffer(name);
+    });
+}
+function disposeThreeGeometry(source) {
+    var cache = geometryCache.get(source);
+    cache == null ? void 0 : cache.resource.dispose();
+    geometryCache.delete(source);
+}
 
 /**
  * mesh 抽象类的 THREE 实现
@@ -42640,10 +43572,11 @@ var seed = 1;
         _this = Mesh.call(this, engine, props) || this;
         _this.geometry = geometry;
         _this.material = material;
+        var nativeGeometry = getThreeGeometry(geometry);
         if (geometry.mode === glContext.LINES) {
-            _this.mesh = new THREE__namespace.LineSegments(geometry.geometry, material.material);
+            _this.mesh = new THREE__namespace.LineSegments(nativeGeometry, material.material);
         } else {
-            _this.mesh = new THREE__namespace.Mesh(geometry.geometry, material.material);
+            _this.mesh = new THREE__namespace.Mesh(nativeGeometry, material.material);
         }
         // 在抽象Mesh设置priority时，THREE 的 Mesh 还未创建
         _this.priority = priority;
@@ -42695,6 +43628,7 @@ var seed = 1;
         if (!this.getVisible()) {
             return;
         }
+        this.mesh.geometry = getThreeGeometry(this.geometry);
         this.material.setMatrix("effects_ObjectToWorld", this.worldMatrix);
         this.material.use(renderer, renderer.renderingData.currentFrame.globalUniforms);
     };
@@ -42943,6 +43877,27 @@ var ThreeRenderer = /*#__PURE__*/ function(Renderer) {
     return ThreeRenderer;
 }(Renderer);
 
+/**
+ * 保存渲染后端中的缓冲区资源。
+ */ var ThreeDataBuffer = /*#__PURE__*/ function(DataBuffer) {
+    _inherits(ThreeDataBuffer, DataBuffer);
+    function ThreeDataBuffer(resource) {
+        var _this;
+        _this = DataBuffer.call(this) || this;
+        _this.resource = resource;
+        return _this;
+    }
+    _create_class(ThreeDataBuffer, [
+        {
+            key: "underlyingResource",
+            get: function get() {
+                return this.resource;
+            }
+        }
+    ]);
+    return ThreeDataBuffer;
+}(DataBuffer);
+
 /**
  * 挂载着合成需要的全局对象等
  */ var ThreeEngine = /*#__PURE__*/ function(Engine) {
@@ -42961,8 +43916,116 @@ var ThreeRenderer = /*#__PURE__*/ function(Renderer) {
         this.threeGroup = threeGroup;
         this.composition = composition;
     };
+    _proto.createVertexBuffer = function createVertexBuffer(data, options) {
+        var typedData = toTypedArray(data, options.type);
+        var stride = options.byteStride > 0 ? options.byteStride / typedData.BYTES_PER_ELEMENT : 1;
+        var resource = options.instanceDivisor > 0 ? new THREE__namespace.InstancedInterleavedBuffer(typedData, stride, options.instanceDivisor) : new THREE__namespace.InterleavedBuffer(typedData, stride);
+        return createDataBuffer(resource, typedData.byteLength);
+    };
+    _proto.createDynamicVertexBuffer = function createDynamicVertexBuffer(data, options) {
+        return this.createVertexBuffer(data, options);
+    };
+    _proto.createIndexBuffer = function createIndexBuffer(indices) {
+        var data = normalizeIndexData(indices);
+        var buffer = createDataBuffer(new THREE__namespace.BufferAttribute(data, 1), data.byteLength);
+        buffer.is32Bits = _instanceof1(data, Uint32Array);
+        return buffer;
+    };
+    _proto.updateDynamicVertexBuffer = function updateDynamicVertexBuffer(vertexBuffer, data, byteOffset, byteLength) {
+        if (byteOffset === void 0) byteOffset = 0;
+        var view = toTypedArray(data, exports.BufferDataType.Float);
+        if (byteLength !== undefined && byteLength < view.byteLength) {
+            view = new Uint8Array(view.buffer, view.byteOffset, byteLength);
+        }
+        var resource = vertexBuffer.resource;
+        if (!resource) {
+            return;
+        }
+        if (byteOffset < 0 || byteOffset + view.byteLength > vertexBuffer.capacity) {
+            throw new RangeError("Buffer update is out of range.");
+        }
+        var target = resource.array;
+        var elementOffset = byteOffset / target.BYTES_PER_ELEMENT;
+        if (!Number.isInteger(elementOffset)) {
+            throw new RangeError("Buffer update is not aligned.");
+        }
+        target.set(view, elementOffset);
+        resource.updateRange.offset = elementOffset;
+        resource.updateRange.count = view.length;
+        resource.needsUpdate = true;
+    };
+    _proto.updateDynamicIndexBuffer = function updateDynamicIndexBuffer(indexBuffer, indices, byteOffset) {
+        if (byteOffset === void 0) byteOffset = 0;
+        var data = indexBuffer.is32Bits ? _instanceof1(indices, Uint32Array) ? indices : new Uint32Array(indices) : _instanceof1(indices, Uint16Array) ? indices : new Uint16Array(indices);
+        var resource = indexBuffer.resource;
+        if (!resource) {
+            return;
+        }
+        if (byteOffset < 0 || byteOffset + data.byteLength > indexBuffer.capacity) {
+            throw new RangeError("Buffer update is out of range.");
+        }
+        var target = resource.array;
+        var elementOffset = byteOffset / target.BYTES_PER_ELEMENT;
+        if (!Number.isInteger(elementOffset)) {
+            throw new RangeError("Buffer update is not aligned.");
+        }
+        target.set(data, elementOffset);
+        resource.updateRange.offset = elementOffset;
+        resource.updateRange.count = data.length;
+        resource.needsUpdate = true;
+    };
+    /** @hide */ _proto.releaseBuffer = function releaseBuffer(buffer) {
+        buffer.references--;
+        if (buffer.references !== 0) {
+            return false;
+        }
+        buffer.resource = undefined;
+        buffer.capacity = 0;
+        return true;
+    };
+    _proto.removeGeometry = function removeGeometry(geometry) {
+        disposeThreeGeometry(geometry);
+        Engine.prototype.removeGeometry.call(this, geometry);
+    };
     return ThreeEngine;
 }(Engine);
+function toTypedArray(data, type) {
+    if (typeof data === "number") {
+        return createTypedArray(type, data / getBytesPerElement(type));
+    }
+    if (Array.isArray(data)) {
+        var result = createTypedArray(type, data.length);
+        result.set(data);
+        return result;
+    }
+    if (_instanceof1(data, ArrayBuffer)) {
+        var length = data.byteLength / getBytesPerElement(type);
+        var result1 = createTypedArray(type, length);
+        new Uint8Array(result1.buffer).set(new Uint8Array(data));
+        return result1;
+    }
+    if (_instanceof1(data, DataView)) {
+        return new Uint8Array(data.buffer, data.byteOffset, data.byteLength);
+    }
+    return data;
+}
+function normalizeIndexData(indices) {
+    if (_instanceof1(indices, Uint16Array) || _instanceof1(indices, Uint32Array)) {
+        return indices;
+    }
+    for(var i = 0; i < indices.length; i++){
+        if (indices[i] >= 65535) {
+            return new Uint32Array(indices);
+        }
+    }
+    return new Uint16Array(indices);
+}
+function createDataBuffer(resource, capacity) {
+    var buffer = new ThreeDataBuffer(resource);
+    buffer.capacity = capacity;
+    buffer.references = 1;
+    return buffer;
+}
 
 /**
  *
@@ -43174,10 +44237,11 @@ exports.ThreeSpriteComponent = /*#__PURE__*/ function(SpriteComponent) {
     _proto.fromData = function fromData(data) {
         SpriteComponent.prototype.fromData.call(this, data);
         if (!this.threeMesh) {
+            var nativeGeometry = getThreeGeometry(this.geometry);
             if (this.geometry.mode === glContext.LINES) {
-                this.threeMesh = new THREE__namespace.LineSegments(this.geometry.geometry, this.material.material);
+                this.threeMesh = new THREE__namespace.LineSegments(nativeGeometry, this.material.material);
             } else {
-                this.threeMesh = new THREE__namespace.Mesh(this.geometry.geometry, this.material.material);
+                this.threeMesh = new THREE__namespace.Mesh(nativeGeometry, this.material.material);
             }
         }
     };
@@ -43189,6 +44253,7 @@ exports.ThreeSpriteComponent = /*#__PURE__*/ function(SpriteComponent) {
         if (!this.isActiveAndEnabled) {
             return;
         }
+        this.threeMesh.geometry = getThreeGeometry(this.geometry);
         this.material.setVector2("_Size", this.transform.size);
         this.material.setMatrix("effects_ObjectToWorld", this.transform.getWorldMatrix());
         this.material.use(renderer, renderer.renderingData.currentFrame.globalUniforms);
@@ -43310,14 +44375,6 @@ applyMixins(exports.ThreeTextComponent, [
  */ Material.create = function(engine, props) {
     return new ThreeMaterial(engine, props);
 };
-/**
- * geometry 创建方法
- *
- * @param options - geometry 创建参数
- * @returns THREE 中的抽象 geometry 对象
- */ Geometry.create = function(engine, options) {
-    return new ThreeGeometry(engine, options);
-};
 /**
  * mesh 创建方法
  *
@@ -43326,7 +44383,7 @@ applyMixins(exports.ThreeTextComponent, [
  */ Mesh.create = function(engine, props) {
     return new ThreeMesh(engine, props);
 };
-var version = "2.10.0-alpha.1";
+var version = "2.10.0-alpha.2";
 logger.info("THREEJS plugin version: " + version + ".");
 
 exports.ATLAS_SIZE = ATLAS_SIZE;
@@ -43355,6 +44412,7 @@ exports.BezierQuat = BezierQuat;
 exports.BlendNode = BlendNode;
 exports.BoolValueNode = BoolValueNode;
 exports.BoundingBoxInfo = BoundingBoxInfo;
+exports.Buffer = Buffer;
 exports.CONSTANT_MAP_BLEND = CONSTANT_MAP_BLEND;
 exports.CONSTANT_MAP_DEPTH = CONSTANT_MAP_DEPTH;
 exports.CONSTANT_MAP_STENCIL_FUNC = CONSTANT_MAP_STENCIL_FUNC;
@@ -43384,6 +44442,7 @@ exports.ControlParameterFloatNode = ControlParameterFloatNode;
 exports.ControlParameterTriggerNode = ControlParameterTriggerNode;
 exports.DEFAULT_FONTS = DEFAULT_FONTS;
 exports.DEFAULT_FPS = DEFAULT_FPS;
+exports.DataBuffer = DataBuffer;
 exports.Database = Database;
 exports.Deferred = Deferred;
 exports.Downloader = Downloader;
@@ -43529,6 +44588,7 @@ exports.Vector3Curve = Vector3Curve;
 exports.Vector3PropertyMixerPlayable = Vector3PropertyMixerPlayable;
 exports.Vector4Curve = Vector4Curve;
 exports.Vector4PropertyMixerPlayable = Vector4PropertyMixerPlayable;
+exports.VertexBuffer = VertexBuffer;
 exports.addByOrder = addByOrder;
 exports.addItem = addItem;
 exports.addItemWithOrder = addItemWithOrder;
@@ -43551,6 +44611,7 @@ exports.combineImageTemplate = combineImageTemplate;
 exports.createGLContext = createGLContext;
 exports.createKeyFrameMeta = createKeyFrameMeta;
 exports.createShape = createShape;
+exports.createTypedArray = createTypedArray;
 exports.createValueGetter = createValueGetter;
 exports.curveEps = curveEps;
 exports.decimalEqual = decimalEqual;
@@ -43571,10 +44632,13 @@ exports.generateGUID = generateGUID;
 exports.generateHalfFloatTexture = generateHalfFloatTexture;
 exports.generateWhiteTexture = generateWhiteTexture;
 exports.getBackgroundImage = getBackgroundImage;
+exports.getBytesPerElement = getBytesPerElement;
 exports.getClass = getClass;
 exports.getColorFromGradientStops = getColorFromGradientStops;
 exports.getConfig = getConfig;
 exports.getControlPoints = getControlPoints;
+exports.getDataByteLength = getDataByteLength;
+exports.getDataType = getDataType;
 exports.getDefaultTextureFactory = getDefaultTextureFactory;
 exports.getGeometryByShape = getGeometryByShape;
 exports.getGeometryTriangles = getGeometryTriangles;
@@ -43664,6 +44728,7 @@ exports.spec = index$1;
 exports.textureLoaderRegistry = textureLoaderRegistry;
 exports.thresholdFrag = thresholdFrag;
 exports.throwDestroyedError = throwDestroyedError;
+exports.toBufferView = toBufferView;
 exports.trailVert = trailVert;
 exports.translatePoint = translatePoint;
 exports.trianglesFromRect = trianglesFromRect;