@galacean/engine-spine 4.2.0 → 4.2.1

package/dist/main.js

@@ -4,33 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var engine = require('@galacean/engine');
 
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
-    try {
-        var info = gen[key](arg);
-        var value = info.value;
-    } catch (error) {
-        reject(error);
-        return;
-    }
-    if (info.done) resolve(value);
-    else Promise.resolve(value).then(_next, _throw);
-}
-function _async_to_generator(fn) {
-    return function() {
-        var self = this, args = arguments;
-        return new Promise(function(resolve, reject) {
-            var gen = fn.apply(self, args);
-            function _next(value) {
-                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
-            }
-            function _throw(err) {
-                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
-            }
-            _next(undefined);
-        });
-    };
-}
-
 function _set_prototype_of(o, p) {
     _set_prototype_of = Object.setPrototypeOf || function setPrototypeOf(o, p) {
         o.__proto__ = p;
@@ -70,97 +43,6 @@ function __decorate(decorators, target, key, desc) {
     else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
-function __generator(thisArg, body) {
-    var _ = {
-        label: 0,
-        sent: function sent() {
-            if (t[0] & 1) throw t[1];
-            return t[1];
-        },
-        trys: [],
-        ops: []
-    }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() {
-        return this;
-    }), g;
-    function verb(n) {
-        return function(v) {
-            return step([
-                n,
-                v
-            ]);
-        };
-    }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while(g && (g = 0, op[0] && (_ = 0)), _)try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [
-                op[0] & 2,
-                t.value
-            ];
-            switch(op[0]){
-                case 0:
-                case 1:
-                    t = op;
-                    break;
-                case 4:
-                    _.label++;
-                    return {
-                        value: op[1],
-                        done: false
-                    };
-                case 5:
-                    _.label++;
-                    y = op[1];
-                    op = [
-                        0
-                    ];
-                    continue;
-                case 7:
-                    op = _.ops.pop();
-                    _.trys.pop();
-                    continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
-                        _ = 0;
-                        continue;
-                    }
-                    if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
-                        _.label = op[1];
-                        break;
-                    }
-                    if (op[0] === 6 && _.label < t[1]) {
-                        _.label = t[1];
-                        t = op;
-                        break;
-                    }
-                    if (t && _.label < t[2]) {
-                        _.label = t[2];
-                        _.ops.push(op);
-                        break;
-                    }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop();
-                    continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) {
-            op = [
-                6,
-                e
-            ];
-            y = 0;
-        } finally{
-            f = t = 0;
-        }
-        if (op[0] & 5) throw op[1];
-        return {
-            value: op[0] ? op[1] : void 0,
-            done: true
-        };
-    }
-}
 typeof SuppressedError === "function" ? SuppressedError : function _SuppressedError(error, suppressed, message) {
     var e = new Error(message);
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
@@ -10590,198 +10472,33 @@ function getValue(map, property, defaultValue) {
     }
 })();
 
-function createSkeletonData(textureAtlas, skeletonTextData, skeletonFileType) {
-    var atlasLoader = new AtlasAttachmentLoader(textureAtlas);
-    if (skeletonFileType === 'json') {
-        return new SkeletonJson(atlasLoader).readSkeletonData(skeletonTextData);
-    } else {
-        return new SkeletonBinary(atlasLoader).readSkeletonData(new Uint8Array(skeletonTextData));
-    }
-}
-function loadTexturesByPath(imagePaths, imageExtensions, engine) {
-    return _loadTexturesByPath.apply(this, arguments);
-}
-function _loadTexturesByPath() {
-    _loadTexturesByPath = _async_to_generator(function(imagePaths, imageExtensions, engine$1) {
-        var textures, texturePromises, error;
-        return __generator(this, function(_state) {
-            switch(_state.label){
-                case 0:
-                    texturePromises = imagePaths.map(function(imagePath, index) {
-                        var ext = imageExtensions[index];
-                        var imageLoaderType = engine.AssetType.Texture2D;
-                        if (ext === 'ktx') {
-                            imageLoaderType = engine.AssetType.KTX;
-                        } else if (ext === 'ktx2') {
-                            imageLoaderType = engine.AssetType.KTX2;
-                        }
-                        return loadTexture(imagePath, engine$1, imageLoaderType);
-                    });
-                    _state.label = 1;
-                case 1:
-                    _state.trys.push([
-                        1,
-                        3,
-                        ,
-                        4
-                    ]);
-                    return [
-                        4,
-                        Promise.all(texturePromises)
-                    ];
-                case 2:
-                    textures = _state.sent();
-                    return [
-                        3,
-                        4
-                    ];
-                case 3:
-                    error = _state.sent();
-                    throw error;
-                case 4:
-                    return [
-                        2,
-                        textures
-                    ];
-            }
-        });
-    });
-    return _loadTexturesByPath.apply(this, arguments);
-}
-function loadTextureAtlas(atlasPath, engine) {
-    return _loadTextureAtlas.apply(this, arguments);
-}
-function _loadTextureAtlas() {
-    _loadTextureAtlas = _async_to_generator(function(atlasPath, engine$1) {
-        var baseUrl, atlasText, textures, err, textureAtlas, loadTexturePromises, _iterator, _step, page, textureUrl, err1;
-        return __generator(this, function(_state) {
-            switch(_state.label){
-                case 0:
-                    baseUrl = getBaseUrl(atlasPath);
-                    _state.label = 1;
-                case 1:
-                    _state.trys.push([
-                        1,
-                        3,
-                        ,
-                        4
-                    ]);
-                    return [
-                        4,
-                        engine.request(atlasPath, {
-                            type: "text"
-                        })
-                    ];
-                case 2:
-                    atlasText = _state.sent();
-                    return [
-                        3,
-                        4
-                    ];
-                case 3:
-                    err = _state.sent();
-                    throw new Error("Spine Atlas: " + atlasPath + " load error: " + err);
-                case 4:
-                    textureAtlas = new TextureAtlas(atlasText);
-                    loadTexturePromises = [];
-                    for(_iterator = _create_for_of_iterator_helper_loose(textureAtlas.pages); !(_step = _iterator()).done;){
-                        page = _step.value;
-                        textureUrl = baseUrl + page.name;
-                        loadTexturePromises.push(loadTexture(textureUrl, engine$1));
-                    }
-                    _state.label = 5;
-                case 5:
-                    _state.trys.push([
-                        5,
-                        7,
-                        ,
-                        8
-                    ]);
-                    return [
-                        4,
-                        Promise.all(loadTexturePromises)
-                    ];
-                case 6:
-                    textures = _state.sent();
-                    return [
-                        3,
-                        8
-                    ];
-                case 7:
-                    err1 = _state.sent();
-                    throw new Error("Spine Texture: load error: " + err1);
-                case 8:
-                    textureAtlas = createTextureAtlas(atlasText, textures);
-                    return [
-                        2,
-                        textureAtlas
-                    ];
-            }
-        });
-    });
-    return _loadTextureAtlas.apply(this, arguments);
-}
-function createTextureAtlas(atlasText, textures) {
-    var textureAtlas = new TextureAtlas(atlasText);
-    textureAtlas.pages.forEach(function(page, index) {
-        var engineTexture = textures.find(function(item) {
-            return item.name === page.name;
-        }) || textures[index];
-        var texture = createAdaptiveTexture(engineTexture);
-        page.setTexture(texture);
-    });
-    return textureAtlas;
-}
-function loadTexture(url, engine$1, imageLoaderType) {
-    if (imageLoaderType === void 0) imageLoaderType = engine.AssetType.Texture2D;
-    return engine$1.resourceManager.load({
-        url: url,
-        type: imageLoaderType
-    });
-}
-function createAdaptiveTexture(texture) {
-    return new AdaptiveTexture(new Image(), texture);
-}
-function getBaseUrl(url) {
-    var isLocalPath = !/^(http|https|ftp):\/\/.*/i.test(url);
-    if (isLocalPath) {
-        var lastSlashIndex = url.lastIndexOf('/');
-        if (lastSlashIndex === -1) {
-            return '';
-        }
-        return url.substring(0, lastSlashIndex + 1);
-    } else {
-        var parsedUrl = new URL(url);
-        var basePath = parsedUrl.origin + parsedUrl.pathname;
-        return basePath.endsWith('/') ? basePath : basePath.substring(0, basePath.lastIndexOf('/') + 1);
-    }
-}
-var AdaptiveTexture = /*#__PURE__*/ function(Texture) {
-    _inherits(AdaptiveTexture, Texture);
-    function AdaptiveTexture(image, texture) {
+/**
+ * @internal
+ */ var SpineTexture = /*#__PURE__*/ function(Texture) {
+    _inherits(SpineTexture, Texture);
+    function SpineTexture(image) {
         var _this;
         _this = Texture.call(this, image) || this;
-        _this.texture = texture;
-        _this.texture.generateMipmaps();
+        image.generateMipmaps();
         return _this;
     }
-    var _proto = AdaptiveTexture.prototype;
+    var _proto = SpineTexture.prototype;
     // rewrite getImage function, return galacean texture2D, then attachment can get size of texture
     _proto.getImage = function getImage() {
-        return this.texture;
+        return this._image;
     };
     _proto.setFilters = function setFilters(minFilter, magFilter) {
         if (minFilter === exports.TextureFilter.Nearest) {
-            this.texture.filterMode = engine.TextureFilterMode.Point;
+            this._image.filterMode = engine.TextureFilterMode.Point;
         } else if (magFilter === exports.TextureFilter.MipMapLinearLinear) {
-            this.texture.filterMode = engine.TextureFilterMode.Trilinear;
+            this._image.filterMode = engine.TextureFilterMode.Trilinear;
         } else {
-            this.texture.filterMode = engine.TextureFilterMode.Bilinear;
+            this._image.filterMode = engine.TextureFilterMode.Bilinear;
         }
     };
     _proto.setWraps = function setWraps(uWrap, vWrap) {
-        this.texture.wrapModeU = this._convertWrapMode(uWrap);
-        this.texture.wrapModeV = this._convertWrapMode(vWrap);
+        this._image.wrapModeU = this._convertWrapMode(uWrap);
+        this._image.wrapModeV = this._convertWrapMode(vWrap);
     };
     _proto.dispose = function dispose() {};
     _proto._convertWrapMode = function _convertWrapMode(wrap) {
@@ -10796,63 +10513,110 @@ var AdaptiveTexture = /*#__PURE__*/ function(Texture) {
                 throw new Error("Unsupported texture wrap mode.");
         }
     };
-    return AdaptiveTexture;
+    return SpineTexture;
 }(Texture);
 
-var ReturnablePool = /*#__PURE__*/ function() {
-    function ReturnablePool(type, initializeCount) {
-        if (initializeCount === void 0) initializeCount = 1;
-        this._type = type;
-        this._lastElementIndex = initializeCount - 1;
-        var elements = this._elements = new Array(initializeCount);
-        for(var i = 0; i < initializeCount; ++i){
-            elements[i] = new type();
-        }
-    }
-    var _proto = ReturnablePool.prototype;
-    _proto.get = function get() {
-        if (this._lastElementIndex < 0) {
-            return new this._type();
-        }
-        return this._elements[this._lastElementIndex--];
+/**
+ * @internal
+ */ var LoaderUtils = /*#__PURE__*/ function() {
+    function LoaderUtils() {}
+    LoaderUtils.createSkeletonData = function createSkeletonData(skeletonRawData, textureAtlas, skeletonDataScale) {
+        var atlasLoader = new AtlasAttachmentLoader(textureAtlas);
+        if (typeof skeletonRawData === "string") {
+            var skeletonJson = new SkeletonJson(atlasLoader);
+            skeletonJson.scale = skeletonDataScale;
+            return skeletonJson.readSkeletonData(skeletonRawData);
+        } else {
+            var skeletonBinary = new SkeletonBinary(atlasLoader);
+            skeletonBinary.scale = skeletonDataScale;
+            return skeletonBinary.readSkeletonData(new Uint8Array(skeletonRawData));
+        }
+    };
+    LoaderUtils.createTextureAtlas = function createTextureAtlas(atlasText, textures) {
+        var textureAtlas = new TextureAtlas(atlasText);
+        textureAtlas.pages.forEach(function(page, index) {
+            var engineTexture = textures.find(function(item) {
+                return item.name === page.name;
+            }) || textures[index];
+            var texture = new SpineTexture(engineTexture);
+            page.setTexture(texture);
+        });
+        return textureAtlas;
     };
-    _proto.return = function _return(element) {
-        this._elements[++this._lastElementIndex] = element;
+    LoaderUtils.loadTexturesByPaths = function loadTexturesByPaths(imagePaths, imageExtensions, engine$1, reject) {
+        var resourceManager = engine$1.resourceManager;
+        // @ts-ignore
+        var virtualPathResourceMap = resourceManager._virtualPathResourceMap;
+        var texturePromises = imagePaths.map(function(imagePath, index) {
+            var ext = imageExtensions[index];
+            var imageLoaderType = engine.AssetType.Texture2D;
+            var virtualElement = virtualPathResourceMap[imagePath];
+            if (virtualElement) {
+                imageLoaderType = virtualElement.type;
+            } else if (ext === "ktx") {
+                imageLoaderType = engine.AssetType.KTX;
+            } else if (ext === "ktx2") {
+                imageLoaderType = engine.AssetType.KTX2;
+            }
+            return resourceManager.load({
+                url: imagePath,
+                type: imageLoaderType
+            });
+        });
+        return Promise.all(texturePromises).catch(function(error) {
+            reject(error);
+            return [];
+        });
     };
-    return ReturnablePool;
-}();
-
-var ClearablePool = /*#__PURE__*/ function() {
-    function ClearablePool(type) {
-        this._usedElementCount = 0;
-        this._type = type;
-        this._elements = [];
-    }
-    var _proto = ClearablePool.prototype;
-    _proto.get = function get() {
-        var _this = this, usedElementCount = _this._usedElementCount, elements = _this._elements;
-        this._usedElementCount++;
-        if (elements.length === usedElementCount) {
-            var element = new this._type();
-            elements.push(element);
-            return element;
+    LoaderUtils.loadTextureAtlas = function loadTextureAtlas(atlasPath, engine$1, reject) {
+        var baseUrl = LoaderUtils.getBaseUrl(atlasPath);
+        var resourceManager = engine$1.resourceManager;
+        var atlasText;
+        return resourceManager// @ts-ignore
+        ._request(atlasPath, {
+            type: "text"
+        }).then(function(text) {
+            atlasText = text;
+            var textureAtlas = new TextureAtlas(atlasText);
+            var loadTexturePromises = textureAtlas.pages.map(function(page) {
+                var textureUrl = baseUrl + page.name;
+                return resourceManager.load({
+                    url: textureUrl,
+                    type: engine.AssetType.Texture2D
+                });
+            });
+            return Promise.all(loadTexturePromises).then(function(textures) {
+                return LoaderUtils.createTextureAtlas(atlasText, textures);
+            });
+        }).catch(function(err) {
+            reject(new Error("Spine Atlas: " + atlasPath + " load error: " + err));
+            return null;
+        });
+    };
+    LoaderUtils.getBaseUrl = function getBaseUrl(url) {
+        var isLocalPath = !/^(http|https|ftp):\/\/.*/i.test(url);
+        if (isLocalPath) {
+            var lastSlashIndex = url.lastIndexOf("/");
+            if (lastSlashIndex === -1) {
+                return "";
+            }
+            return url.substring(0, lastSlashIndex + 1);
         } else {
-            return elements[usedElementCount];
+            var parsedUrl = new URL(url);
+            var basePath = parsedUrl.origin + parsedUrl.pathname;
+            return basePath.endsWith("/") ? basePath : basePath.substring(0, basePath.lastIndexOf("/") + 1);
         }
     };
-    _proto.clear = function clear() {
-        this._usedElementCount = 0;
-    };
-    return ClearablePool;
+    return LoaderUtils;
 }();
 
 var SourceAlpha = engine.BlendFactor.SourceAlpha, One = engine.BlendFactor.One, DestinationColor = engine.BlendFactor.DestinationColor, Zero = engine.BlendFactor.Zero, OneMinusSourceColor = engine.BlendFactor.OneMinusSourceColor, OneMinusSourceAlpha = engine.BlendFactor.OneMinusSourceAlpha;
 var Add = engine.BlendOperation.Add;
-function setBlendMode(material, blendMode) {
+function setBlendMode(material, blendMode, premultipliedAlpha) {
     var target = material.renderState.blendState.targetBlendState;
     switch(blendMode){
         case exports.BlendMode.Additive:
-            target.sourceColorBlendFactor = SourceAlpha;
+            target.sourceColorBlendFactor = premultipliedAlpha ? One : SourceAlpha;
             target.destinationColorBlendFactor = One;
             target.sourceAlphaBlendFactor = One;
             target.destinationAlphaBlendFactor = One;
@@ -10873,7 +10637,7 @@ function setBlendMode(material, blendMode) {
             target.colorBlendOperation = target.alphaBlendOperation = Add;
             break;
         default:
-            target.sourceColorBlendFactor = SourceAlpha;
+            target.sourceColorBlendFactor = premultipliedAlpha ? One : SourceAlpha;
             target.destinationColorBlendFactor = OneMinusSourceAlpha;
             target.sourceAlphaBlendFactor = One;
             target.destinationAlphaBlendFactor = OneMinusSourceAlpha;
@@ -10895,71 +10659,101 @@ function getBlendMode(material) {
     return exports.BlendMode.Normal;
 }
 
+var ClearablePool = /*#__PURE__*/ function() {
+    function ClearablePool(type) {
+        this._usedElementCount = 0;
+        this._type = type;
+        this._elements = [];
+    }
+    var _proto = ClearablePool.prototype;
+    _proto.get = function get() {
+        var _this = this, usedElementCount = _this._usedElementCount, elements = _this._elements;
+        this._usedElementCount++;
+        if (elements.length === usedElementCount) {
+            var element = new this._type();
+            elements.push(element);
+            return element;
+        } else {
+            return elements[usedElementCount];
+        }
+    };
+    _proto.clear = function clear() {
+        this._usedElementCount = 0;
+    };
+    return ClearablePool;
+}();
+
+var ReturnablePool = /*#__PURE__*/ function() {
+    function ReturnablePool(type, initializeCount) {
+        if (initializeCount === void 0) initializeCount = 1;
+        this._type = type;
+        this._lastElementIndex = initializeCount - 1;
+        var elements = this._elements = new Array(initializeCount);
+        for(var i = 0; i < initializeCount; ++i){
+            elements[i] = new type();
+        }
+    }
+    var _proto = ReturnablePool.prototype;
+    _proto.get = function get() {
+        if (this._lastElementIndex < 0) {
+            return new this._type();
+        }
+        return this._elements[this._lastElementIndex--];
+    };
+    _proto.return = function _return(element) {
+        this._elements[++this._lastElementIndex] = element;
+    };
+    return ReturnablePool;
+}();
+
 var SubRenderItem = function SubRenderItem() {
 };
-var maxBoundsValue = Infinity;
-var minBoundsValue = -Infinity;
-var SpineGenerator = /*#__PURE__*/ function() {
+/**
+ * @internal
+ */ var SpineGenerator = /*#__PURE__*/ function() {
     function SpineGenerator() {
-        this._clipper = new SkeletonClipping();
-        this._subRenderItems = [];
         this._separateSlots = new Map();
+        this._subRenderItems = [];
+        this._clipper = new SkeletonClipping();
         this._separateSlotTextureMap = new Map();
     }
     var _proto = SpineGenerator.prototype;
-    _proto.getMaxVertexCount = function getMaxVertexCount(skeletonData) {
-        var uniqueAttachments = new Set();
-        var skins = skeletonData.skins;
-        var skinLen = skins.length;
-        for(var i = 0; i < skinLen; i++){
-            var skin = skins[i];
-            this._collectUniqueAttachments(skin, uniqueAttachments);
-        }
-        return this._calculateTotalVertexCount(uniqueAttachments);
-    };
     _proto.buildPrimitive = function buildPrimitive(skeleton, renderer) {
-        var _renderer_setting = renderer.setting, _renderer_setting_useClipping = _renderer_setting.useClipping, useClipping = _renderer_setting_useClipping === void 0 ? true : _renderer_setting_useClipping, _renderer_setting_zSpacing = _renderer_setting.zSpacing, zSpacing = _renderer_setting_zSpacing === void 0 ? 0.01 : _renderer_setting_zSpacing;
+        var _indices = renderer._indices, _vertices = renderer._vertices, _localBounds = renderer._localBounds, _vertexCount = renderer._vertexCount, _subPrimitives = renderer._subPrimitives, engine = renderer.engine, zSpacing = renderer.zSpacing, premultipliedAlpha = renderer.premultipliedAlpha;
+        _localBounds.min.set(Infinity, Infinity, Infinity);
+        _localBounds.max.set(-Infinity, -Infinity, -Infinity);
         var _this = this, _clipper = _this._clipper, _separateSlots = _this._separateSlots, _subRenderItems = _this._subRenderItems, _separateSlotTextureMap = _this._separateSlotTextureMap;
-        var bounds = SpineGenerator.bounds;
-        bounds.min.set(maxBoundsValue, maxBoundsValue, maxBoundsValue);
-        bounds.max.set(minBoundsValue, minBoundsValue, minBoundsValue);
-        var verticesLength = 0;
-        var indicesLength = 0;
-        var drawOrder = skeleton.drawOrder;
-        var maxSlotCount = drawOrder.length;
-        var engine = renderer.engine, _indices = renderer._indices, _vertices = renderer._vertices, _subPrimitives = renderer._subPrimitives;
-        var tempVerts = SpineGenerator.tempVerts, tempTexture = SpineGenerator.tempTexture, tempBlendMode = SpineGenerator.tempBlendMode, subRenderItemPool = SpineGenerator.subRenderItemPool, subPrimitivePool = SpineGenerator.subPrimitivePool;
+        var tempVerts = SpineGenerator.tempVerts, subRenderItemPool = SpineGenerator.subRenderItemPool, subPrimitivePool = SpineGenerator.subPrimitivePool, VERTEX_SIZE = SpineGenerator.VERTEX_SIZE;
         _subRenderItems.length = 0;
         subRenderItemPool.clear();
-        var vertices = renderer._vertices;
         var triangles;
         var uvs;
-        // 记录当前
+        var verticesLength = 0;
+        var indicesLength = 0;
         var start = 0;
         var count = 0;
         var blend = exports.BlendMode.Normal;
         var texture = null;
+        var tempBlendMode = null;
+        var tempTexture = null;
         var primitiveIndex = 0;
-        SpineGenerator.tempBlendMode = null;
-        SpineGenerator.tempTexture = null;
-        for(var slotIndex = 0; slotIndex < maxSlotCount; ++slotIndex){
+        var drawOrder = skeleton.drawOrder;
+        for(var slotIndex = 0, n = drawOrder.length; slotIndex < n; ++slotIndex){
             var slot = drawOrder[slotIndex];
             if (!slot.bone.active) {
                 _clipper.clipEndWithSlot(slot);
                 continue;
             }
             var attachment = slot.getAttachment();
-            var attachmentColor = null;
-            var z = zSpacing * slotIndex;
-            var numFloats = 0;
-            var isClipping = _clipper.isClipping();
-            var vertexSize = isClipping ? 2 : SpineGenerator.VERTEX_SIZE;
             if (!attachment) {
-                if (useClipping) {
-                    _clipper.clipEndWithSlot(slot);
-                }
+                _clipper.clipEndWithSlot(slot);
                 continue;
             }
+            var z = zSpacing * slotIndex;
+            var isClipping = _clipper.isClipping();
+            var numFloats = 0;
+            var attachmentColor = null;
+            var vertexSize = isClipping ? 2 : VERTEX_SIZE;
             switch(attachment.constructor){
                 case RegionAttachment:
                     var regionAttachment = attachment;
@@ -10974,7 +10768,7 @@ var SpineGenerator = /*#__PURE__*/ function() {
                     var meshAttachment = attachment;
                     attachmentColor = meshAttachment.color;
                     numFloats = (meshAttachment.worldVerticesLength >> 1) * vertexSize;
-                    if (numFloats > vertices.length) {
+                    if (numFloats > _vertices.length) {
                         SpineGenerator.tempVerts = new Array(numFloats);
                     }
                     meshAttachment.computeWorldVertices(slot, 0, meshAttachment.worldVerticesLength, tempVerts, 0, vertexSize);
@@ -10983,15 +10777,11 @@ var SpineGenerator = /*#__PURE__*/ function() {
                     texture = meshAttachment.region.texture;
                     break;
                 case ClippingAttachment:
-                    if (useClipping) {
-                        var clip = attachment;
-                        _clipper.clipStart(slot, clip);
-                    }
+                    var clip = attachment;
+                    _clipper.clipStart(slot, clip);
                     continue;
                 default:
-                    if (useClipping) {
-                        _clipper.clipEndWithSlot(slot);
-                    }
+                    _clipper.clipEndWithSlot(slot);
                     continue;
             }
             if (texture != null) {
@@ -11002,26 +10792,32 @@ var SpineGenerator = /*#__PURE__*/ function() {
                 var _$skeleton = slot.bone.skeleton;
                 var skeletonColor = _$skeleton.color;
                 var slotColor = slot.color;
-                var alpha = skeletonColor.a * slotColor.a * attachmentColor.a;
-                var color = SpineGenerator.tempColor;
-                var dark = SpineGenerator.tempDark;
-                color.set(skeletonColor.r * slotColor.r * attachmentColor.r, skeletonColor.g * slotColor.g * attachmentColor.g, skeletonColor.b * slotColor.b * attachmentColor.b, alpha);
+                var finalColor = SpineGenerator.tempColor;
+                var finalAlpha = skeletonColor.a * slotColor.a * attachmentColor.a;
+                finalColor.r = skeletonColor.r * slotColor.r * attachmentColor.r;
+                finalColor.g = skeletonColor.g * slotColor.g * attachmentColor.g;
+                finalColor.b = skeletonColor.b * slotColor.b * attachmentColor.b;
+                finalColor.a = finalAlpha;
+                if (premultipliedAlpha) {
+                    finalColor.r *= finalAlpha;
+                    finalColor.g *= finalAlpha;
+                    finalColor.b *= finalAlpha;
+                }
                 if (isClipping) {
-                    _clipper.clipTriangles(tempVerts, triangles, triangles.length, uvs, color, dark, false);
+                    _clipper.clipTriangles(tempVerts, triangles, triangles.length, uvs, finalColor, SpineGenerator.tempDark, false);
                     finalVertices = _clipper.clippedVertices;
                     finalVerticesLength = finalVertices.length;
                     finalIndices = _clipper.clippedTriangles;
                     finalIndicesLength = finalIndices.length;
                 } else {
-                    var verts = tempVerts;
-                    var r = color.r, g = color.g, b = color.b, a = color.a;
-                    for(var v = 2, u = 0, n = numFloats; v < n; v += vertexSize, u += 2){
-                        verts[v] = r;
-                        verts[v + 1] = g;
-                        verts[v + 2] = b;
-                        verts[v + 3] = a;
-                        verts[v + 4] = uvs[u];
-                        verts[v + 5] = uvs[u + 1];
+                    var r = finalColor.r, g = finalColor.g, b = finalColor.b, a = finalColor.a;
+                    for(var v = 2, u = 0, n1 = numFloats; v < n1; v += vertexSize, u += 2){
+                        tempVerts[v] = r;
+                        tempVerts[v + 1] = g;
+                        tempVerts[v + 2] = b;
+                        tempVerts[v + 3] = a;
+                        tempVerts[v + 4] = uvs[u];
+                        tempVerts[v + 5] = uvs[u + 1];
                     }
                     finalVertices = tempVerts;
                     finalVerticesLength = numFloats;
@@ -11033,48 +10829,37 @@ var SpineGenerator = /*#__PURE__*/ function() {
                     continue;
                 }
                 var indexStart = verticesLength / SpineGenerator.VERTEX_STRIDE;
-                var vertices1 = _vertices;
                 var i = verticesLength;
                 var j = 0;
                 for(; j < finalVerticesLength;){
                     var x = finalVertices[j++];
                     var y = finalVertices[j++];
-                    vertices1[i++] = x;
-                    vertices1[i++] = y;
-                    vertices1[i++] = z;
-                    vertices1[i++] = finalVertices[j++];
-                    vertices1[i++] = finalVertices[j++];
-                    vertices1[i++] = finalVertices[j++];
-                    vertices1[i++] = finalVertices[j++];
-                    vertices1[i++] = finalVertices[j++];
-                    vertices1[i++] = finalVertices[j++];
-                    this._expandByPoint(x, y, z);
+                    _vertices[i++] = x;
+                    _vertices[i++] = y;
+                    _vertices[i++] = z;
+                    _vertices[i++] = finalVertices[j++];
+                    _vertices[i++] = finalVertices[j++];
+                    _vertices[i++] = finalVertices[j++];
+                    _vertices[i++] = finalVertices[j++];
+                    _vertices[i++] = finalVertices[j++];
+                    _vertices[i++] = finalVertices[j++];
+                    this._expandBounds(x, y, z, _localBounds);
                 }
                 verticesLength = i;
-                var indicesArray = _indices;
                 for(i = indicesLength, j = 0; j < finalIndicesLength; i++, j++){
-                    indicesArray[i] = finalIndices[j] + indexStart;
+                    _indices[i] = finalIndices[j] + indexStart;
                 }
                 indicesLength += finalIndicesLength;
                 var slotData = slot.data;
                 var slotName = slotData.name;
-                blend = slotData.blendMode;
-                var blendModeChanged = tempBlendMode !== null && tempBlendMode !== slotData.blendMode;
                 var textureChanged = tempTexture !== null && tempTexture !== texture;
                 var slotNeedSeparate = _separateSlots.get(slotName);
+                blend = slotData.blendMode;
+                var blendModeChanged = tempBlendMode !== null && tempBlendMode !== blend;
                 if (slotNeedSeparate || blendModeChanged || textureChanged) {
                     // Finish accumulated count first
                     if (count > 0) {
-                        var origin = _subPrimitives[primitiveIndex];
-                        origin && primitiveIndex++;
-                        var subPrimitive = origin || subPrimitivePool.get();
-                        subPrimitive.start = start;
-                        subPrimitive.count = count;
-                        var renderItem = subRenderItemPool.get();
-                        renderItem.subPrimitive = subPrimitive;
-                        renderItem.texture = tempTexture;
-                        renderItem.blendMode = tempBlendMode;
-                        _subRenderItems.push(renderItem);
+                        primitiveIndex = this._createRenderItem(_subPrimitives, primitiveIndex, start, count, tempTexture, tempBlendMode);
                         start += count;
                         count = 0;
                     }
@@ -11082,22 +10867,12 @@ var SpineGenerator = /*#__PURE__*/ function() {
                         // If separatedTexture exist, set texture params
                         var separateTexture = _separateSlotTextureMap.get(slotName);
                         if (separateTexture) {
-                            var oldTexture = texture.texture;
+                            var oldTexture = texture.getImage();
                             separateTexture.filterMode = oldTexture.filterMode;
                             separateTexture.wrapModeU = oldTexture.wrapModeU;
                             separateTexture.wrapModeV = oldTexture.wrapModeV;
                         }
-                        var origin1 = _subPrimitives[primitiveIndex];
-                        origin1 && primitiveIndex++;
-                        var subPrimitive1 = origin1 || subPrimitivePool.get();
-                        subPrimitive1.start = start;
-                        subPrimitive1.count = finalIndicesLength;
-                        var renderItem1 = subRenderItemPool.get();
-                        renderItem1.blendMode = blend;
-                        renderItem1.subPrimitive = subPrimitive1;
-                        renderItem1.texture = texture;
-                        renderItem1.slotName = slotName;
-                        _subRenderItems.push(renderItem1);
+                        primitiveIndex = this._createRenderItem(_subPrimitives, primitiveIndex, start, finalIndicesLength, texture, blend, slotName);
                         start += finalIndicesLength;
                         count = 0;
                     } else {
@@ -11113,44 +10888,36 @@ var SpineGenerator = /*#__PURE__*/ function() {
         } // slot traverse end
         // add reset sub primitive
         if (count > 0) {
-            var origin2 = _subPrimitives[primitiveIndex];
-            origin2 && primitiveIndex++;
-            var subPrimitive2 = origin2 || subPrimitivePool.get();
-            subPrimitive2.start = start;
-            subPrimitive2.count = count;
-            var renderItem2 = subRenderItemPool.get();
-            renderItem2.blendMode = blend;
-            renderItem2.subPrimitive = subPrimitive2;
-            renderItem2.texture = texture;
-            _subRenderItems.push(renderItem2);
+            primitiveIndex = this._createRenderItem(_subPrimitives, primitiveIndex, start, count, texture, blend);
             count = 0;
         }
         _clipper.clipEnd();
         var lastLen = _subPrimitives.length;
         var curLen = _subRenderItems.length;
-        if (curLen < lastLen) {
-            for(var i1 = curLen; i1 < lastLen; i1++){
-                var item = _subPrimitives[i1];
-                subPrimitivePool.return(item);
-            }
+        for(var i1 = curLen; i1 < lastLen; i1++){
+            var item = _subPrimitives[i1];
+            subPrimitivePool.return(item);
         }
         renderer._clearSubPrimitives();
+        var materialCache = SpineAnimationRenderer._materialCache;
         for(var i2 = 0, l = curLen; i2 < l; ++i2){
             var item1 = _subRenderItems[i2];
             var slotName1 = item1.slotName, blendMode = item1.blendMode, texture1 = item1.texture;
             renderer._addSubPrimitive(item1.subPrimitive);
-            var subTexture = texture1.texture;
-            if (_separateSlotTextureMap.has(slotName1)) {
-                subTexture = _separateSlotTextureMap.get(slotName1);
-            }
-            var key = subTexture.instanceId + "_" + blendMode;
-            var material = SpineAnimationRenderer._materialCache.get(key);
+            var subTexture = _separateSlotTextureMap.get(slotName1) || texture1.getImage();
+            var key = subTexture.instanceId + "_" + blendMode + "_" + premultipliedAlpha;
+            var material = materialCache.get(key);
             if (!material) {
-                material = this._createMaterialForTexture(subTexture, engine, blendMode);
-                SpineAnimationRenderer._materialCache.set(key, material);
+                material = this._createMaterialForTexture(subTexture, engine, blendMode, premultipliedAlpha);
+                materialCache.set(key, material);
             }
             renderer.setMaterial(i2, material);
         }
+        if (indicesLength > _vertexCount) {
+            renderer._createAndBindBuffer(indicesLength);
+            this.buildPrimitive(skeleton, renderer);
+            return;
+        }
         renderer._vertexBuffer.setData(_vertices);
         renderer._indexBuffer.setData(_indices);
     };
@@ -11160,49 +10927,41 @@ var SpineGenerator = /*#__PURE__*/ function() {
     _proto.addSeparateSlotTexture = function addSeparateSlotTexture(slotName, texture) {
         this._separateSlotTextureMap.set(slotName, texture);
     };
-    _proto._createMaterialForTexture = function _createMaterialForTexture(texture, engine, blendMode) {
+    _proto._createMaterialForTexture = function _createMaterialForTexture(texture, engine, blendMode, premultipliedAlpha) {
         var material = SpineAnimationRenderer._getDefaultMaterial(engine);
         material.shaderData.setTexture("material_SpineTexture", texture);
-        setBlendMode(material, blendMode);
+        setBlendMode(material, blendMode, premultipliedAlpha);
         return material;
     };
-    _proto._expandByPoint = function _expandByPoint(x, y, z) {
-        var _SpineGenerator_bounds = SpineGenerator.bounds, min = _SpineGenerator_bounds.min, max = _SpineGenerator_bounds.max;
-        var newMinX = Math.min(min.x, x);
-        var newMinY = Math.min(min.y, y);
-        var newMinZ = Math.min(min.z, z);
-        var newMaxX = Math.max(max.x, x);
-        var newMaxY = Math.max(max.y, y);
-        var newMaxZ = Math.max(max.z, z);
-        min.set(newMinX, newMinY, newMinZ);
-        max.set(newMaxX, newMaxY, newMaxZ);
-    };
-    _proto._collectUniqueAttachments = function _collectUniqueAttachments(skin, uniqueAttachments) {
-        var attachments = skin.attachments;
-        for(var i = 0, n = attachments.length; i < n; i++){
-            var slotAttachment = attachments[i];
-            for(var key in slotAttachment){
-                var attachment = slotAttachment[key];
-                if (attachment && !uniqueAttachments.has(attachment)) {
-                    uniqueAttachments.add(attachment);
-                }
-            }
-        }
-    };
-    _proto._calculateTotalVertexCount = function _calculateTotalVertexCount(uniqueAttachments) {
-        var totalVertexCount = 0;
-        var QUAD_TRIANGLE_LENGTH = SpineGenerator.QUAD_TRIANGLES.length;
-        uniqueAttachments.forEach(function(attachment) {
-            if (_instanceof1(attachment, RegionAttachment)) {
-                totalVertexCount += QUAD_TRIANGLE_LENGTH;
-            } else if (_instanceof1(attachment, MeshAttachment)) {
-                totalVertexCount += attachment.triangles.length;
-            }
-        });
-        return totalVertexCount;
+    _proto._createRenderItem = function _createRenderItem(subPrimitives, primitiveIndex, start, count, texture, blend, slotName) {
+        var subPrimitivePool = SpineGenerator.subPrimitivePool, subRenderItemPool = SpineGenerator.subRenderItemPool;
+        var origin = subPrimitives[primitiveIndex];
+        if (origin) {
+            primitiveIndex++;
+        }
+        var subPrimitive = origin || subPrimitivePool.get();
+        subPrimitive.start = start;
+        subPrimitive.count = count;
+        var renderItem = subRenderItemPool.get();
+        renderItem.blendMode = blend;
+        renderItem.subPrimitive = subPrimitive;
+        renderItem.texture = texture;
+        renderItem.slotName = slotName;
+        this._subRenderItems.push(renderItem);
+        return primitiveIndex;
+    };
+    _proto._expandBounds = function _expandBounds(x, y, z, localBounds) {
+        var min = localBounds.min, max = localBounds.max;
+        min.set(Math.min(min.x, x), Math.min(min.y, y), Math.min(min.z, z));
+        max.set(Math.max(max.x, x), Math.max(max.y, y), Math.max(max.z, z));
     };
     return SpineGenerator;
 }();
+SpineGenerator.VERTEX_SIZE = 8;
+SpineGenerator.VERTEX_STRIDE = 9;
+SpineGenerator.tempDark = new Color();
+SpineGenerator.tempColor = new Color();
+SpineGenerator.tempVerts = new Array(8);
 SpineGenerator.QUAD_TRIANGLES = [
     0,
     1,
@@ -11211,18 +10970,8 @@ SpineGenerator.QUAD_TRIANGLES = [
     3,
     0
 ];
-SpineGenerator.VERTEX_SIZE = 8 // 2 2 4 position without z, uv, color
-;
-SpineGenerator.VERTEX_STRIDE = 9 // 3 2 4 position with z, uv, color
-;
-SpineGenerator.tempDark = new Color();
-SpineGenerator.tempColor = new Color();
-SpineGenerator.tempVerts = new Array(8);
-SpineGenerator.tempBlendMode = null;
-SpineGenerator.tempTexture = null;
 SpineGenerator.subPrimitivePool = new ReturnablePool(engine.SubPrimitive);
 SpineGenerator.subRenderItemPool = new ClearablePool(SubRenderItem);
-SpineGenerator.bounds = new engine.BoundingBox(new engine.Vector3(maxBoundsValue, maxBoundsValue, maxBoundsValue), new engine.Vector3(minBoundsValue, minBoundsValue, minBoundsValue));
 
 var SpineMaterial = /*#__PURE__*/ function(Material) {
     _inherits(SpineMaterial, Material);
@@ -11233,7 +10982,7 @@ var SpineMaterial = /*#__PURE__*/ function(Material) {
         var renderState = _this.renderState;
         var target = renderState.blendState.targetBlendState;
         target.enabled = true;
-        setBlendMode(_this, exports.BlendMode.Normal);
+        setBlendMode(_this, exports.BlendMode.Normal, false);
         renderState.depthState.writeEnabled = false;
         renderState.rasterState.cullMode = engine.CullMode.Off;
         renderState.renderQueueType = engine.RenderQueueType.Transparent;
@@ -11250,11 +10999,17 @@ SpineMaterial._spineFS = "\n    uniform sampler2D material_SpineTexture;\n\n
     _inherits(SpineAnimationRenderer, Renderer);
     function SpineAnimationRenderer(entity) {
         var _this;
-        _this = Renderer.call(this, entity) || this, /** Render setting for spine rendering. */ _this.setting = new SpineRenderSetting(), /**
+        _this = Renderer.call(this, entity) || this, /**
+   * The spacing between z layers in world units.
+   */ _this.zSpacing = 0.001, /**
+   * Whether to use premultiplied alpha mode for rendering.
+   * When enabled, vertex color values are multiplied by the alpha channel.
+   * @remarks
+ If this option is enabled, the Spine editor must export textures with "Premultiply Alpha" checked.
+   */ _this.premultipliedAlpha = false, /**
    * Default state for spine animation.
-   * Contains the default animation name to be played, whether this animation should loop,
-   * the default skin name, and the default scale of the skeleton.
-   */ _this.defaultState = new DefaultState(), /** @internal */ _this._subPrimitives = [], /** @internal */ _this._needResizeBuffer = false, /** @internal */ _this._vertexCount = 0;
+   * Contains the default animation name to be played, whether this animation should loop, the default skin name.
+   */ _this.defaultConfig = new SpineAnimationDefaultConfig(), /** @internal */ _this._subPrimitives = [], /** @internal */ _this._vertices = new Float32Array(), /** @internal */ _this._indices = new Uint16Array(), /** @internal */ _this._needResizeBuffer = false, /** @internal */ _this._vertexCount = 0, /** @internal */ _this._localBounds = new engine.BoundingBox(new engine.Vector3(Infinity, Infinity, Infinity), new engine.Vector3(-Infinity, -Infinity, -Infinity));
         var primitive = new engine.Primitive(_this._engine);
         _this._primitive = primitive;
         primitive.addVertexElement(SpineAnimationRenderer._positionVertexElement);
@@ -11264,49 +11019,28 @@ SpineMaterial._spineFS = "\n    uniform sampler2D material_SpineTexture;\n\n
     }
     var _proto = SpineAnimationRenderer.prototype;
     /**
-   * Separate slot by slot name. This will add a new sub primitive, and new materials.
-   */ _proto.addSeparateSlot = function addSeparateSlot(slotName) {
-        if (!this._skeleton) {
-            console.error("Skeleton not found!");
-        }
-        var slot = this._skeleton.findSlot(slotName);
-        if (slot) {
-            SpineAnimationRenderer._spineGenerator.addSeparateSlot(slotName);
-        } else {
-            console.warn("Slot: " + slotName + " not find.");
-        }
-    };
-    /**
    * @internal
    */ // @ts-ignore
     _proto._onEnable = function _onEnable() {
-        this._initializeDefaultState();
+        this._applyDefaultConfig();
     };
     /**
    * @internal
    */ _proto.update = function update(delta) {
-        var _this = this, _state = _this._state, _skeleton = _this._skeleton;
-        if (_state && _skeleton) {
-            _state.update(delta);
-            _state.apply(_skeleton);
-            _skeleton.update(delta);
-            _skeleton.updateWorldTransform(exports.Physics.update);
-            SpineAnimationRenderer._spineGenerator.buildPrimitive(this._skeleton, this);
-            if (this._isContainDirtyFlag(4)) {
-                this._onWorldVolumeChanged();
-                this._setDirtyFlagFalse(4);
-            }
-            if (this._isContainDirtyFlag(2)) {
-                this._calculateGeneratorBounds(this.bounds);
-            }
-        }
+        var _this = this, state = _this._state, skeleton = _this._skeleton;
+        if (!state || !skeleton) return;
+        state.update(delta);
+        state.apply(skeleton);
+        skeleton.update(delta);
+        skeleton.updateWorldTransform(exports.Physics.update);
+        SpineAnimationRenderer._spineGenerator.buildPrimitive(this._skeleton, this);
+        this._dirtyUpdateFlag |= 1;
     };
     /**
    * @internal
    */ // @ts-ignore
     _proto._render = function _render(context) {
-        var _this = this, _primitive = _this._primitive, _subPrimitives = _this._subPrimitives;
-        var _this1 = this, materials = _this1._materials, engine = _this1._engine;
+        var _this = this, _primitive = _this._primitive, _subPrimitives = _this._subPrimitives, materials = _this._materials, engine = _this._engine;
         // @ts-ignore
         var renderElement = engine._renderElementPool.get();
         // @ts-ignore
@@ -11334,46 +11068,49 @@ SpineMaterial._spineFS = "\n    uniform sampler2D material_SpineTexture;\n\n
    * @internal
    */ // @ts-ignore
     _proto._updateBounds = function _updateBounds(worldBounds) {
-        this._calculateGeneratorBounds(worldBounds);
+        engine.BoundingBox.transform(this._localBounds, this.entity.transform.worldMatrix, worldBounds);
+    };
+    /**
+   * @internal
+   */ _proto._setSkeleton = function _setSkeleton(skeleton) {
+        this._skeleton = skeleton;
     };
     /**
    * @internal
-   */ _proto._calculateGeneratorBounds = function _calculateGeneratorBounds(worldBounds) {
-        var bounds = SpineGenerator.bounds;
-        engine.BoundingBox.transform(bounds, this.entity.transform.worldMatrix, worldBounds);
+   */ _proto._setState = function _setState(state) {
+        this._state = state;
     };
     /**
    * @internal
    */ // @ts-ignore
     _proto._cloneTo = function _cloneTo(target) {
-        target.resource = this._resource;
+        var skeletonData = this._skeleton.data;
+        var animationStateData = new AnimationStateData(skeletonData);
+        var skeleton = new Skeleton(skeletonData);
+        var state = new AnimationState(animationStateData);
+        target._setSkeleton(skeleton);
+        target._setState(state);
     };
     /**
    * @internal
    */ _proto._onDestroy = function _onDestroy() {
-        var _this = this, _primitive = _this._primitive, _subPrimitives = _this._subPrimitives, _resource = _this._resource;
-        _subPrimitives.length = 0;
-        if (_primitive) {
-            _primitive.destroy();
-        }
-        if (_resource) {
-            this._addResourceReferCount(_resource, -1);
-        }
         this._clearMaterialCache();
+        this._subPrimitives.length = 0;
+        this._primitive && this._primitive.destroy();
         this._primitive = null;
         this._resource = null;
         this._skeleton = null;
         this._state = null;
-        this.setting = null;
         Renderer.prototype._onDestroy.call(this);
     };
     /**
    * @internal
-   */ _proto._createBuffer = function _createBuffer(vertexCount) {
+   */ _proto._createAndBindBuffer = function _createAndBindBuffer(vertexCount) {
         var _this = this, _engine = _this._engine, _primitive = _this._primitive;
+        this._vertexCount = vertexCount;
         this._vertices = new Float32Array(vertexCount * SpineGenerator.VERTEX_STRIDE);
         this._indices = new Uint16Array(vertexCount);
-        var vertexStride = SpineGenerator.VERTEX_STRIDE * 4; // position + color + uv * Float32 byteLen
+        var vertexStride = SpineGenerator.VERTEX_STRIDE * 4;
         var vertexBuffer = new engine.Buffer(_engine, engine.BufferBindFlag.VertexBuffer, this._vertices, engine.BufferUsage.Dynamic);
         var indexBuffer = new engine.Buffer(_engine, engine.BufferBindFlag.IndexBuffer, this._indices, engine.BufferUsage.Dynamic);
         this._indexBuffer = indexBuffer;
@@ -11393,44 +11130,22 @@ SpineMaterial._spineFS = "\n    uniform sampler2D material_SpineTexture;\n\n
    */ _proto._clearSubPrimitives = function _clearSubPrimitives() {
         this._subPrimitives.length = 0;
     };
-    /**
-   * @internal
-   */ _proto._isContainDirtyFlag = function _isContainDirtyFlag(type) {
-        return (this._dirtyUpdateFlag & type) != 0;
-    };
-    /**
-   * @internal
-   */ _proto._setDirtyFlagFalse = function _setDirtyFlagFalse(type) {
-        this._dirtyUpdateFlag &= ~type;
-    };
-    /**
-   * @internal
-   */ _proto._onWorldVolumeChanged = function _onWorldVolumeChanged() {
-        this._dirtyUpdateFlag |= 1;
-    };
-    _proto._onAnimationStart = function _onAnimationStart() {
-        this._dirtyUpdateFlag |= 2;
-    };
-    _proto._onAnimationComplete = function _onAnimationComplete(entry) {
-        if (!entry.loop) {
-            this._setDirtyFlagFalse(2);
-        }
-    };
     _proto._clearMaterialCache = function _clearMaterialCache() {
-        this._materials.forEach(function(item) {
-            var texture = item.shaderData.getTexture('material_SpineTexture');
-            var blendMode = getBlendMode(item);
+        var materialCache = SpineAnimationRenderer._materialCache;
+        var _this = this, materials = _this._materials;
+        for(var i = 0, len = materials.length; i < len; i += 1){
+            var material = materials[i];
+            var texture = material.shaderData.getTexture("material_SpineTexture");
+            var blendMode = getBlendMode(material);
             var key = texture.instanceId + "_" + blendMode;
-            SpineAnimationRenderer._materialCache.delete(key);
-        });
+            materialCache.delete(key);
+        }
     };
-    _proto._initializeDefaultState = function _initializeDefaultState() {
+    _proto._applyDefaultConfig = function _applyDefaultConfig() {
         var _this = this, skeleton = _this.skeleton, state = _this.state;
         if (skeleton && state) {
-            var _this_defaultState = this.defaultState, animationName = _this_defaultState.animationName, skinName = _this_defaultState.skinName, loop = _this_defaultState.loop, scale = _this_defaultState.scale;
-            skeleton.scaleX = scale;
-            skeleton.scaleY = scale;
-            if (skinName !== 'default') {
+            var _this_defaultConfig = this.defaultConfig, animationName = _this_defaultConfig.animationName, skinName = _this_defaultConfig.skinName, loop = _this_defaultConfig.loop;
+            if (skinName !== "default") {
                 skeleton.setSkinByName(skinName);
                 skeleton.setToSetupPose();
             }
@@ -11455,51 +11170,11 @@ SpineMaterial._spineFS = "\n    uniform sampler2D material_SpineTexture;\n\n
         return defaultMaterial.clone();
     };
     _create_class(SpineAnimationRenderer, [
-        {
-            key: "resource",
-            get: /**
-   * Spine resource of current spine animation.This property allows you to switch between different animations at runtime.
-   */ function get() {
-                return this._resource;
-            },
-            set: function set(value) {
-                var _this = this;
-                if (!value) {
-                    this._state = null;
-                    this._skeleton = null;
-                    this._resource = null;
-                    return;
-                }
-                this._resource = value;
-                // @ts-ignore
-                this._addResourceReferCount(value, 1);
-                var skeletonData = value.skeletonData;
-                this._skeleton = new Skeleton(skeletonData);
-                var animationData = SpineAnimationRenderer._animationDataCache.get(skeletonData);
-                if (!animationData) {
-                    animationData = new AnimationStateData(skeletonData);
-                    SpineAnimationRenderer._animationDataCache.set(skeletonData, animationData);
-                }
-                this._state = new AnimationState(animationData);
-                var maxCount = SpineAnimationRenderer._spineGenerator.getMaxVertexCount(skeletonData);
-                this._createBuffer(maxCount);
-                this._initializeDefaultState();
-                this._dirtyUpdateFlag |= 4;
-                this._state.addListener({
-                    start: function() {
-                        _this._onAnimationStart();
-                    },
-                    complete: function(entry) {
-                        _this._onAnimationComplete(entry);
-                    }
-                });
-            }
-        },
         {
             key: "state",
             get: /**
-   * Provides access to `AnimationState` which controls animation playback on a skeleton. 
-   * You can use its API to manage, blend, and transition between multiple simultaneous animations effectively.
+   * The Spine.AnimationState object of this SpineAnimationRenderer.
+   * Manage, blend, and transition between multiple simultaneous animations effectively.
    */ function get() {
                 return this._state;
             }
@@ -11507,28 +11182,59 @@ SpineMaterial._spineFS = "\n    uniform sampler2D material_SpineTexture;\n\n
         {
             key: "skeleton",
             get: /**
-   * Provides access to `Skeleton`, which defines the structure of a Spine model.
-   * Through its API, users can manipulate bone positions, rotations, scaling 
+   * The Spine.Skeleton object of this SpineAnimationRenderer.
+   * Manipulate bone positions, rotations, scaling
    * and change spine attachment to customize character appearances dynamically during runtime.
    */ function get() {
                 return this._skeleton;
             }
+        },
+        {
+            key: "resource",
+            get: /**
+   * * @deprecated This property is deprecated and will be removed in future releases.
+   * Spine resource of current spine animation.
+   */ function get() {
+                return this._resource;
+            },
+            set: /**
+   * * @deprecated This property is deprecated and will be removed in future releases.
+   * Sets the Spine resource for the current animation. This property allows switching to a different `SpineResource`.
+   *
+   * @param value - The new `SpineResource` to be used for the current animation
+   */ function set(value) {
+                if (!value) {
+                    this._state = null;
+                    this._skeleton = null;
+                    this._resource = null;
+                    return;
+                }
+                this._resource = value;
+                var skeletonData = value.skeletonData, stateData = value.stateData;
+                var skeleton = new Skeleton(skeletonData);
+                var state = new AnimationState(stateData);
+                this._setSkeleton(skeleton);
+                this._setState(state);
+                this._applyDefaultConfig();
+            }
         }
     ]);
     return SpineAnimationRenderer;
 }(engine.Renderer);
 SpineAnimationRenderer._spineGenerator = new SpineGenerator();
-SpineAnimationRenderer._positionVertexElement = new engine.VertexElement('POSITION', 0, engine.VertexElementFormat.Vector3, 0);
-SpineAnimationRenderer._colorVertexElement = new engine.VertexElement('COLOR_0', 12, engine.VertexElementFormat.Vector4, 0);
-SpineAnimationRenderer._uvVertexElement = new engine.VertexElement('TEXCOORD_0', 28, engine.VertexElementFormat.Vector2, 0);
+SpineAnimationRenderer._positionVertexElement = new engine.VertexElement("POSITION", 0, engine.VertexElementFormat.Vector3, 0);
+SpineAnimationRenderer._colorVertexElement = new engine.VertexElement("COLOR_0", 12, engine.VertexElementFormat.Vector4, 0);
+SpineAnimationRenderer._uvVertexElement = new engine.VertexElement("TEXCOORD_0", 28, engine.VertexElementFormat.Vector2, 0);
 /** @internal */ SpineAnimationRenderer._materialCache = new Map();
-/** @internal */ SpineAnimationRenderer._animationDataCache = new Map();
 __decorate([
-    engine.deepClone
-], SpineAnimationRenderer.prototype, "setting", void 0);
+    engine.assignmentClone
+], SpineAnimationRenderer.prototype, "zSpacing", void 0);
+__decorate([
+    engine.assignmentClone
+], SpineAnimationRenderer.prototype, "premultipliedAlpha", void 0);
 __decorate([
     engine.deepClone
-], SpineAnimationRenderer.prototype, "defaultState", void 0);
+], SpineAnimationRenderer.prototype, "defaultConfig", void 0);
 __decorate([
     engine.ignoreClone
 ], SpineAnimationRenderer.prototype, "_primitive", void 0);
@@ -11556,151 +11262,126 @@ __decorate([
 __decorate([
     engine.ignoreClone
 ], SpineAnimationRenderer.prototype, "_resource", void 0);
+__decorate([
+    engine.ignoreClone
+], SpineAnimationRenderer.prototype, "_localBounds", void 0);
 __decorate([
     engine.ignoreClone
 ], SpineAnimationRenderer.prototype, "_skeleton", void 0);
 __decorate([
     engine.ignoreClone
 ], SpineAnimationRenderer.prototype, "_state", void 0);
-/**
- * Render setting for spine rendering.
- */ var SpineRenderSetting = function SpineRenderSetting(/**
-     * The spacing between z layers @defaultValue `0.01`
-     */ zSpacing, /**
-     * Whether to use clipping @defaultValue `true`
-     */ useClipping) {
-    if (zSpacing === void 0) zSpacing = 0.01;
-    if (useClipping === void 0) useClipping = true;
-    this.zSpacing = zSpacing;
-    this.useClipping = useClipping;
-};
 /**
  * Default state for spine animation.
  * Contains the default animation name to be played, whether this animation should loop,
  * the default skin name, and the default scale of the skeleton.
- */ var DefaultState = function DefaultState(/**
-     * The default scale of the animation @defaultValue `1`
-     */ scale, /**
+ */ var SpineAnimationDefaultConfig = function SpineAnimationDefaultConfig(/**
      * Whether the default animation should loop @defaultValue `true. The default animation should loop`
      */ loop, /**
      * The name of the default animation @defaultValue `null. Do not play any animation by default`
      */ animationName, /**
      * The name of the default skin @defaultValue `default`
      */ skinName) {
-    if (scale === void 0) scale = 1;
     if (loop === void 0) loop = true;
     if (animationName === void 0) animationName = null;
     if (skinName === void 0) skinName = "default";
-    this.scale = scale;
     this.loop = loop;
     this.animationName = animationName;
     this.skinName = skinName;
 };
 
-var SkeletonDataResource = /*#__PURE__*/ function(ReferResource) {
-    _inherits(SkeletonDataResource, ReferResource);
-    function SkeletonDataResource(engine, skeletonData) {
+/**
+ * Represents a resource that manages Spine animation data, textures, and entity templates for the Galacean engine.
+ *
+ */ var SpineResource = /*#__PURE__*/ function(ReferResource) {
+    _inherits(SpineResource, ReferResource);
+    function SpineResource(engine, skeletonData, url) {
         var _this;
-        _this = ReferResource.call(this, engine) || this, _this.textures = [];
+        _this = ReferResource.call(this, engine) || this, _this._texturesInSpineAtlas = [];
+        _this.url = url;
         _this._skeletonData = skeletonData;
+        _this._stateData = new AnimationStateData(skeletonData);
         _this._associationTextureInSkeletonData(skeletonData);
+        _this._createTemplate();
         return _this;
     }
-    var _proto = SkeletonDataResource.prototype;
+    var _proto = SpineResource.prototype;
+    /**
+   * Creates and returns a new instance of the spine entity template.
+   * @returns A instance of the spine entity template
+   */ _proto.instantiate = function instantiate() {
+        return this._template.clone();
+    };
     _proto._onDestroy = function _onDestroy() {
         ReferResource.prototype._onDestroy.call(this);
-        var _this = this, textures = _this.textures, _skeletonData = _this._skeletonData;
-        textures && this._disassociationSuperResource(textures);
-        this._clearAttachmentTextures(_skeletonData);
-        SpineAnimationRenderer._animationDataCache.delete(_skeletonData);
+        this._disassociationSuperResource();
         this._skeletonData = null;
-    };
-    _proto._disassociationSuperResource = function _disassociationSuperResource(resources) {
-        for(var i = 0, n = resources.length; i < n; i++){
-            // @ts-ignore
-            resources[i]._disassociationSuperResource(this);
-        }
+        this._stateData = null;
+    };
+    _proto._createTemplate = function _createTemplate() {
+        var name = this._extractFileName(this.url);
+        var spineEntity = new engine.Entity(this.engine, name);
+        var spineAnimationRenderer = spineEntity.addComponent(SpineAnimationRenderer);
+        var skeleton = new Skeleton(this._skeletonData);
+        var state = new AnimationState(this._stateData);
+        spineAnimationRenderer._setSkeleton(skeleton);
+        spineAnimationRenderer._setState(state);
+        // @ts-ignore
+        spineEntity._markAsTemplate(this);
+        this._template = spineEntity;
     };
     _proto._associationTextureInSkeletonData = function _associationTextureInSkeletonData(skeletonData) {
-        var _this = this;
-        var skins = skeletonData.skins;
-        skins.forEach(function(skin) {
-            var attachments = skin.attachments;
-            attachments.forEach(function(attachmentMap) {
+        var skins = skeletonData.skins, slots = skeletonData.slots;
+        var textures = this._texturesInSpineAtlas;
+        for(var i = 0, n = skins.length; i < n; i++){
+            for(var j = 0, m = slots.length; j < m; j++){
                 var _attachment_region;
-                var attachment = Object.values(attachmentMap)[0];
-                // @ts-ignore
+                var slot = slots[j];
+                var attachment = skins[i].getAttachment(slot.index, slot.name);
                 var texture = attachment == null ? void 0 : (_attachment_region = attachment.region) == null ? void 0 : _attachment_region.texture.texture;
-                if (texture && !_this.textures.find(function(item) {
-                    return item.instanceId === texture.instanceId;
-                })) {
-                    _this.textures.push(texture);
-                    texture._associationSuperResource(_this);
+                if (texture) {
+                    if (!textures.includes(texture)) {
+                        textures.push(texture);
+                        // @ts-ignore
+                        texture._associationSuperResource(this);
+                    }
                 }
-            });
-        });
+            }
+        }
     };
-    _proto._clearAttachmentTextures = function _clearAttachmentTextures(skeletonData) {
-        var skins = skeletonData.skins;
-        skins.forEach(function(skin) {
-            var attachments = skin.attachments;
-            attachments.forEach(function(attachmentMap) {
-                var _attachment_region;
-                var attachment = Object.values(attachmentMap)[0];
-                // @ts-ignore
-                if (attachment == null ? void 0 : (_attachment_region = attachment.region) == null ? void 0 : _attachment_region.texture) {
-                    // @ts-ignore
-                    attachment.region.texture.texture = null;
-                }
-            });
-        });
+    _proto._disassociationSuperResource = function _disassociationSuperResource() {
+        var textures = this._texturesInSpineAtlas;
+        for(var i = 0, n = textures.length; i < n; i++){
+            // @ts-ignore
+            textures[i]._disassociationSuperResource(this);
+        }
+    };
+    _proto._extractFileName = function _extractFileName(url) {
+        if (!url) return "Spine Entity";
+        var match = url.match(/\/([^\/]+?)(\.[^\/]*)?$/);
+        return match ? match[1] : "Spine Entity";
     };
-    _create_class(SkeletonDataResource, [
+    _create_class(SpineResource, [
         {
             key: "skeletonData",
-            get: function get() {
+            get: /**
+   * The skeleton data associated with this Spine resource.
+   */ function get() {
                 return this._skeletonData;
             }
+        },
+        {
+            key: "stateData",
+            get: /**
+   * The animation state data associated with this Spine resource.
+   */ function get() {
+                return this._stateData;
+            }
         }
     ]);
-    return SkeletonDataResource;
+    return SpineResource;
 }(engine.ReferResource);
 
-var BufferReader = /*#__PURE__*/ function() {
-    function BufferReader(data, byteOffset, byteLength) {
-        if (byteOffset === void 0) byteOffset = 0;
-        this.data = data;
-        this._dataView = new DataView(data.buffer, data.byteOffset + byteOffset, byteLength != null ? byteLength : data.byteLength - byteOffset);
-        this._position = 0;
-    }
-    var _proto = BufferReader.prototype;
-    _proto.nextUint16 = function nextUint16() {
-        var value = this._dataView.getUint16(this._position, true);
-        this._position += 2;
-        return value;
-    };
-    _proto.nextStr = function nextStr() {
-        var strByteLength = this.nextUint16();
-        var uint8Array = new Uint8Array(this.data.buffer, this._position + this._dataView.byteOffset, strByteLength);
-        this._position += strByteLength;
-        return this.decodeText(uint8Array);
-    };
-    _proto.nextImageData = function nextImageData() {
-        return new Uint8Array(this.data.buffer, this.data.byteOffset + this._position);
-    };
-    _proto.decodeText = function decodeText(array) {
-        if (typeof TextDecoder !== "undefined") {
-            return new TextDecoder().decode(array);
-        }
-        var s = "";
-        for(var i = 0, il = array.length; i < il; i++){
-            s += String.fromCharCode(array[i]);
-        }
-        return decodeURIComponent(encodeURIComponent(s));
-    };
-    return BufferReader;
-}();
-
 var SpineLoader = /*#__PURE__*/ function(Loader) {
     _inherits(SpineLoader, Loader);
     function SpineLoader() {
@@ -11709,352 +11390,249 @@ var SpineLoader = /*#__PURE__*/ function(Loader) {
     var _proto = SpineLoader.prototype;
     _proto.load = function load(item, resourceManager) {
         var _this = this;
-        return new engine.AssetPromise(/*#__PURE__*/ _async_to_generator(function(resolve) {
-            var resource, buffer, reader, header;
-            return __generator(this, function(_state) {
-                switch(_state.label){
-                    case 0:
-                        if (!item.urls) return [
-                            3,
-                            2
-                        ];
-                        return [
-                            4,
-                            _this._handleOriginAsset(item, resourceManager)
-                        ];
-                    case 1:
-                        resource = _state.sent();
-                        return [
-                            3,
-                            7
-                        ];
-                    case 2:
-                        return [
-                            4,
-                            resourceManager._request(item.url, {
-                                type: 'arraybuffer'
-                            })
-                        ];
-                    case 3:
-                        buffer = _state.sent();
-                        reader = new BufferReader(new Uint8Array(buffer));
-                        header = reader.nextStr();
-                        if (!header.startsWith('spine')) return [
-                            3,
-                            5
-                        ];
-                        return [
-                            4,
-                            _this._handleEditorAsset(buffer, reader, header, resourceManager)
-                        ];
-                    case 4:
-                        resource = _state.sent();
-                        return [
-                            3,
-                            7
-                        ];
-                    case 5:
-                        return [
-                            4,
-                            _this._handleOriginAsset(item, resourceManager, buffer)
-                        ];
-                    case 6:
-                        resource = _state.sent();
-                        _state.label = 7;
-                    case 7:
-                        resolve(resource);
-                        return [
-                            2
-                        ];
-                }
-            });
-        }));
-    };
-    _proto._handleEditorAsset = function _handleEditorAsset(buffer, reader, header, resourceManager) {
-        return _async_to_generator(function() {
-            var skeletonRawData, atlasRefId, type, engine, decoder, text, _JSON_parse, data, atlas, textureAtlas, skeletonData;
-            return __generator(this, function(_state) {
-                switch(_state.label){
-                    case 0:
-                        type = header.startsWith('spine:skel') ? 'skel' : 'json';
-                        engine = resourceManager.engine;
-                        if (type === 'skel') {
-                            atlasRefId = reader.nextStr();
-                            skeletonRawData = reader.nextImageData().buffer;
-                        } else {
-                            decoder = new TextDecoder('utf-8');
-                            text = decoder.decode(new Uint8Array(buffer));
-                            _JSON_parse = JSON.parse(text), data = _JSON_parse.data, atlas = _JSON_parse.atlas;
-                            atlasRefId = atlas.refId;
-                            skeletonRawData = data;
-                        }
-                        return [
-                            4,
-                            resourceManager.getResourceByRef({
-                                refId: atlasRefId
-                            })
-                        ];
-                    case 1:
-                        textureAtlas = _state.sent();
-                        skeletonData = createSkeletonData(textureAtlas, skeletonRawData, type);
-                        return [
-                            2,
-                            new SkeletonDataResource(engine, skeletonData)
-                        ];
+        return new engine.AssetPromise(function(resolve, reject) {
+            var spineLoadContext = {
+                fileName: "",
+                skeletonRawData: "",
+                spineAssetPath: {
+                    atlasPath: null,
+                    skeletonPath: null,
+                    extraPaths: []
                 }
-            });
-        })();
-    };
-    _proto._handleOriginAsset = function _handleOriginAsset(item, resourceManager, buffer) {
-        var _this = this;
-        return _async_to_generator(function() {
-            var fileExtensions, spineAssetBundle, engine, fileExtension, skeletonPath, atlasPath, textureAtlas, _this__determineSkeletonDataType, data, type, skeletonData, i, url, extension, skeletonPath1, atlasPath1, imagePaths, skeletonExtension, imageExtensions, skeletonPromise, type1, loadQueue, textureAtlas1, skeletonTextData, atlasText, textures, ref, ref1, skeletonData1;
-            return __generator(this, function(_state) {
-                switch(_state.label){
-                    case 0:
-                        fileExtensions = (item.params || {}).fileExtensions;
-                        spineAssetBundle = {
-                            skeletonPath: '',
-                            skeletonExtension: '',
-                            atlasPath: '',
-                            imagePaths: [],
-                            imageExtensions: []
-                        };
-                        engine = resourceManager.engine;
-                        if (!buffer) return [
-                            3,
-                            2
-                        ];
-                        fileExtension = SpineLoader.verifyFileExtensions(fileExtensions, false);
-                        SpineLoader.deriveAndAssignSpineAsset(item.url, fileExtension, spineAssetBundle);
-                        skeletonPath = spineAssetBundle.skeletonPath, atlasPath = spineAssetBundle.atlasPath;
-                        if (!skeletonPath || !atlasPath) {
-                            throw new Error('Failed to load spine assets. Please check the file path and ensure the file extension is included.');
-                        }
-                        return [
-                            4,
-                            loadTextureAtlas(atlasPath, engine)
-                        ];
-                    case 1:
-                        textureAtlas = _state.sent();
-                        _this__determineSkeletonDataType = _this._determineSkeletonDataType(buffer), data = _this__determineSkeletonDataType.data, type = _this__determineSkeletonDataType.type;
-                        skeletonData = createSkeletonData(textureAtlas, data, type);
-                        return [
-                            2,
-                            new SkeletonDataResource(engine, skeletonData)
-                        ];
-                    case 2:
-                        fileExtensions = SpineLoader.verifyFileExtensions(fileExtensions, true);
-                        for(i = 0; i < item.urls.length; i += 1){
-                            url = item.urls[i];
-                            extension = fileExtensions && fileExtensions[i] || null;
-                            SpineLoader.parseAndAssignSpineAsset(url, extension, spineAssetBundle);
-                        }
-                        skeletonPath1 = spineAssetBundle.skeletonPath, atlasPath1 = spineAssetBundle.atlasPath, imagePaths = spineAssetBundle.imagePaths, skeletonExtension = spineAssetBundle.skeletonExtension, imageExtensions = spineAssetBundle.imageExtensions;
-                        if (!skeletonPath1 || !atlasPath1) {
-                            throw new Error('Failed to load spine assets. Please check the file path and ensure the file extension is included.');
-                        }
-                        // @ts-ignore
-                        skeletonPromise = skeletonExtension === 'json' ? resourceManager._request(skeletonPath1, {
-                            type: 'text'
-                        }) : resourceManager._request(skeletonPath1, {
-                            type: 'arraybuffer'
-                        });
-                        type1 = skeletonExtension === 'json' ? 'json' : 'skel';
-                        loadQueue = [
-                            skeletonPromise
-                        ];
-                        if (!(imagePaths.length > 0)) return [
-                            3,
-                            4
-                        ];
-                        loadQueue = loadQueue.concat([
-                            // @ts-ignore
-                            resourceManager._request(atlasPath1, {
-                                type: 'text'
-                            }),
-                            loadTexturesByPath(imagePaths, imageExtensions, engine)
-                        ]);
-                        return [
-                            4,
-                            Promise.all(loadQueue)
-                        ];
-                    case 3:
-                        ref = _state.sent(), skeletonTextData = ref[0], atlasText = ref[1], textures = ref[2];
-                        textureAtlas1 = createTextureAtlas(atlasText, textures);
-                        return [
-                            3,
-                            6
-                        ];
-                    case 4:
-                        loadQueue.push(loadTextureAtlas(atlasPath1, engine));
-                        return [
-                            4,
-                            Promise.all(loadQueue)
-                        ];
-                    case 5:
-                        ref1 = _state.sent(), skeletonTextData = ref1[0], textureAtlas1 = ref1[1];
-                        _state.label = 6;
-                    case 6:
-                        skeletonData1 = createSkeletonData(textureAtlas1, skeletonTextData, type1);
-                        return [
-                            2,
-                            new SkeletonDataResource(engine, skeletonData1)
-                        ];
-                    case 7:
-                        return [
-                            2
-                        ];
+            };
+            var spineAssetPath = spineLoadContext.spineAssetPath;
+            if (!item.urls) {
+                SpineLoader._assignAssetPathsFromUrl(item.url, spineAssetPath, resourceManager);
+            } else {
+                var urls = item.urls;
+                for(var i = 0, len = urls.length; i < len; i += 1){
+                    var url = urls[i];
+                    SpineLoader._groupAssetsByExtension(url, spineAssetPath);
                 }
-            });
-        })();
+            }
+            var skeletonPath = spineAssetPath.skeletonPath, atlasPath = spineAssetPath.atlasPath;
+            if (!skeletonPath || !atlasPath) {
+                reject(new Error("Failed to load spine assets. Please check the file path and ensure the file extension is included."));
+                return;
+            }
+            resourceManager// @ts-ignore
+            ._request(skeletonPath, {
+                type: "arraybuffer"
+            }).then(function(skeletonRawData) {
+                spineLoadContext.skeletonRawData = skeletonRawData;
+                var skeletonString = SpineLoader._decoder.decode(skeletonRawData);
+                if (skeletonString.startsWith("{")) {
+                    spineLoadContext.skeletonRawData = skeletonString;
+                }
+                return _this._loadAndCreateSpineResource(spineLoadContext, resourceManager);
+            }).then(resolve).catch(reject);
+        });
     };
-    _proto._determineSkeletonDataType = function _determineSkeletonDataType(buffer) {
-        var skeletonTextData;
-        var type;
-        try {
-            var decoder = new TextDecoder('utf-8');
-            var jsonString = decoder.decode(buffer);
-            JSON.parse(jsonString);
-            skeletonTextData = jsonString;
-            type = 'json';
-        } catch (error) {
-            skeletonTextData = buffer;
-            type = 'skel';
-        }
-        return {
-            data: skeletonTextData,
-            type: type
-        };
+    _proto._loadAndCreateSpineResource = function _loadAndCreateSpineResource(spineLoadContext, resourceManager) {
+        var engine = resourceManager.engine;
+        var skeletonRawData = spineLoadContext.skeletonRawData, spineAssetPath = spineLoadContext.spineAssetPath;
+        var skeletonPath = spineAssetPath.skeletonPath, atlasPath = spineAssetPath.atlasPath, extraPaths = spineAssetPath.extraPaths;
+        var atlasLoadPromise = extraPaths.length === 0 ? resourceManager.load({
+            url: atlasPath,
+            type: "SpineAtlas"
+        }) : resourceManager.load({
+            urls: [
+                atlasPath
+            ].concat(extraPaths),
+            type: "SpineAtlas"
+        });
+        return atlasLoadPromise.then(function(textureAtlas) {
+            var skeletonData = LoaderUtils.createSkeletonData(skeletonRawData, textureAtlas, 0.01);
+            return new SpineResource(engine, skeletonData, skeletonPath);
+        });
     };
-    SpineLoader.parseAndAssignSpineAsset = function parseAndAssignSpineAsset(url, fileExtension, bundle) {
-        var imageExtensions = SpineLoader.imageExtensions, skeletonExtensions = SpineLoader.skeletonExtensions;
-        var ext = SpineLoader.getUrlExtension(url, fileExtension);
+    SpineLoader._groupAssetsByExtension = function _groupAssetsByExtension(url, assetPath) {
+        var ext = SpineLoader._getUrlExtension(url);
         if (!ext) return;
-        if (skeletonExtensions.includes(ext)) {
-            bundle.skeletonPath = url;
-            bundle.skeletonExtension = ext;
-        }
-        if (ext === 'atlas') {
-            bundle.atlasPath = url;
-        }
-        if (imageExtensions.includes(ext)) {
-            bundle.imagePaths.push(url);
-            bundle.imageExtensions.push(ext);
+        if ([
+            "skel",
+            "json",
+            "bin"
+        ].includes(ext)) {
+            assetPath.skeletonPath = url;
+        } else if (ext === "atlas") {
+            assetPath.atlasPath = url;
+        } else {
+            assetPath.extraPaths.push(url);
         }
     };
-    SpineLoader.deriveAndAssignSpineAsset = function deriveAndAssignSpineAsset(url, fileExtension, bundle) {
-        var ext = SpineLoader.getUrlExtension(url, fileExtension);
+    SpineLoader._assignAssetPathsFromUrl = function _assignAssetPathsFromUrl(url, assetPath, resourceManager) {
+        var _resourceManager__virtualPathResourceMap_url, _resourceManager__virtualPathResourceMap;
+        var ext = SpineLoader._getUrlExtension(url);
         if (!ext) return;
-        bundle.skeletonPath = url;
-        bundle.skeletonExtension = ext;
-        var extensionPattern = /(\.(json|bin|skel))$/;
-        var baseUrl;
-        if (extensionPattern.test(url)) {
-            baseUrl = url.replace(extensionPattern, '');
-        }
-        if (baseUrl) {
-            var atlasUrl = baseUrl + '.atlas';
-            bundle.atlasPath = atlasUrl;
-        }
-    };
-    SpineLoader.verifyFileExtensions = function verifyFileExtensions(fileExtensions, expectArray) {
-        if (!fileExtensions) return null;
-        if (expectArray && !Array.isArray(fileExtensions)) {
-            console.error('Expect fileExtensions to be an array.');
-            return [];
-        } else if (!expectArray && typeof fileExtensions !== 'string') {
-            console.error('Expect fileExtensions to be a string.');
-            return null;
+        assetPath.skeletonPath = url;
+        // @ts-ignore
+        var skeletonDependency = resourceManager == null ? void 0 : (_resourceManager__virtualPathResourceMap = resourceManager._virtualPathResourceMap) == null ? void 0 : (_resourceManager__virtualPathResourceMap_url = _resourceManager__virtualPathResourceMap[url]) == null ? void 0 : _resourceManager__virtualPathResourceMap_url.dependentAssetMap;
+        if (skeletonDependency) {
+            assetPath.atlasPath = skeletonDependency.atlas;
+        } else {
+            var extensionPattern = /\.(json|bin|skel)$/;
+            var baseUrl;
+            if (extensionPattern.test(url)) {
+                baseUrl = url.replace(extensionPattern, "");
+            }
+            if (baseUrl) {
+                var atlasUrl = baseUrl + ".atlas";
+                assetPath.atlasPath = atlasUrl;
+            }
         }
-        return fileExtensions;
     };
-    SpineLoader.getUrlExtension = function getUrlExtension(url, fileExtension) {
-        if (fileExtension) {
-            return fileExtension;
-        }
-        var regex = /\/([^\/?#]+)\.([a-zA-Z0-9]+)(\?|#|$)|\?[^#]*\.([a-zA-Z0-9]+)(\?|#|$)/;
+    SpineLoader._getUrlExtension = function _getUrlExtension(url) {
+        var regex = /\.(\w+)(\?|$)/;
         var match = url.match(regex);
-        if (match) {
-            return match[2] || match[4];
-        }
-        return null;
+        return match ? match[1] : null;
     };
     return SpineLoader;
 }(engine.Loader);
-SpineLoader.imageExtensions = [
-    "png",
-    "jpg",
-    "webp",
-    "jpeg",
-    "ktx",
-    "ktx2"
-];
-SpineLoader.skeletonExtensions = [
-    "skel",
-    "json",
-    "bin"
-];
+SpineLoader._decoder = new TextDecoder("utf-8");
 SpineLoader = __decorate([
-    engine.resourceLoader("spine", [
+    engine.resourceLoader("Spine", [
         "json",
         "bin",
         "skel"
     ])
 ], SpineLoader);
+var DeprecatedSpineLoader = /*#__PURE__*/ function(SpineLoader) {
+    _inherits(DeprecatedSpineLoader, SpineLoader);
+    function DeprecatedSpineLoader() {
+        return SpineLoader.apply(this, arguments) || this;
+    }
+    return DeprecatedSpineLoader;
+}(SpineLoader);
+DeprecatedSpineLoader = __decorate([
+    engine.resourceLoader("spine", [
+        "json",
+        "bin",
+        "skel"
+    ])
+], DeprecatedSpineLoader);
 
-var EditorSpineAtlasLoader = /*#__PURE__*/ function(Loader) {
-    _inherits(EditorSpineAtlasLoader, Loader);
-    function EditorSpineAtlasLoader() {
+var SpineAtlasLoader = /*#__PURE__*/ function(Loader) {
+    _inherits(SpineAtlasLoader, Loader);
+    function SpineAtlasLoader() {
         return Loader.apply(this, arguments) || this;
     }
-    var _proto = EditorSpineAtlasLoader.prototype;
+    var _proto = SpineAtlasLoader.prototype;
     _proto.load = function load(item, resourceManager) {
-        return new engine.AssetPromise(/*#__PURE__*/ _async_to_generator(function(resolve) {
-            var text, _JSON_parse, atlasText, textureRefs, promises, textures, textureAtlas;
-            return __generator(this, function(_state) {
-                switch(_state.label){
-                    case 0:
-                        return [
-                            4,
-                            resourceManager._request(item.url, {
-                                type: "text"
-                            })
-                        ];
-                    case 1:
-                        text = _state.sent();
-                        _JSON_parse = JSON.parse(text), atlasText = _JSON_parse.data, textureRefs = _JSON_parse.textures;
+        return new engine.AssetPromise(function(resolve, reject) {
+            var engine = resourceManager.engine;
+            var spineAtlasAsset = {
+                atlasPath: "",
+                imagePaths: [],
+                imageExtensions: []
+            };
+            if (!item.urls) {
+                SpineAtlasLoader._assignAssetPathsFromUrl(item.url, spineAtlasAsset, resourceManager);
+            } else {
+                var urls = item.urls;
+                for(var i = 0, len = urls.length; i < len; i += 1){
+                    var url = urls[i];
+                    SpineAtlasLoader._groupAssetsByExtension(url, spineAtlasAsset, resourceManager);
+                }
+            }
+            var atlasPath = spineAtlasAsset.atlasPath;
+            if (!atlasPath) {
+                reject(new Error("Failed to load spine atlas. Please check the file path and ensure the file extension is included."));
+                return;
+            }
+            var imagePaths = spineAtlasAsset.imagePaths;
+            if (imagePaths.length === 0) {
+                var atlasPath1 = item.url;
+                LoaderUtils.loadTextureAtlas(atlasPath1, engine, reject).then(function(textureAtlas) {
+                    resolve(textureAtlas);
+                }).catch(function(err) {
+                    reject(err);
+                });
+            } else {
+                var atlasPath2 = spineAtlasAsset.atlasPath, imagePaths1 = spineAtlasAsset.imagePaths, imageExtensions = spineAtlasAsset.imageExtensions;
+                if (imagePaths1.length > 0) {
+                    Promise.all([
                         // @ts-ignore
-                        promises = textureRefs.map(function(refItem) {
-                            return resourceManager.getResourceByRef({
-                                refId: refItem.refId
-                            });
-                        });
-                        return [
-                            4,
-                            Promise.all(promises)
-                        ];
-                    case 2:
-                        textures = _state.sent();
-                        textureAtlas = createTextureAtlas(atlasText, textures);
+                        resourceManager._request(atlasPath2, {
+                            type: "text"
+                        }),
+                        LoaderUtils.loadTexturesByPaths(imagePaths1, imageExtensions, engine, reject)
+                    ]).then(function(param) {
+                        var atlasText = param[0], textures = param[1];
+                        var textureAtlas = LoaderUtils.createTextureAtlas(atlasText, textures);
+                        resolve(textureAtlas);
+                    }).catch(function(err) {
+                        reject(err);
+                    });
+                } else {
+                    LoaderUtils.loadTextureAtlas(atlasPath2, engine, reject).then(function(textureAtlas) {
                         resolve(textureAtlas);
-                        return [
-                            2
-                        ];
+                    }).catch(function(err) {
+                        reject(err);
+                    });
                 }
-            });
-        }));
+            }
+        });
+    };
+    SpineAtlasLoader._groupAssetsByExtension = function _groupAssetsByExtension(url, assetPath, resourceManager) {
+        var ext = SpineLoader._getUrlExtension(url);
+        if (!ext) return;
+        if (ext === "atlas") {
+            assetPath.atlasPath = url;
+        }
+        if ([
+            "png",
+            "jpg",
+            "webp",
+            "jpeg",
+            "ktx",
+            "ktx2"
+        ].includes(ext)) {
+            assetPath.imagePaths.push(url);
+        }
+    };
+    SpineAtlasLoader._assignAssetPathsFromUrl = function _assignAssetPathsFromUrl(url, assetPath, resourceManager) {
+        var ext = SpineLoader._getUrlExtension(url);
+        if (ext === "atlas") {
+            var _resourceManager__virtualPathResourceMap_url, _resourceManager__virtualPathResourceMap;
+            assetPath.atlasPath = url;
+            // @ts-ignore
+            var atlasDependency = resourceManager == null ? void 0 : (_resourceManager__virtualPathResourceMap = resourceManager._virtualPathResourceMap) == null ? void 0 : (_resourceManager__virtualPathResourceMap_url = _resourceManager__virtualPathResourceMap[url]) == null ? void 0 : _resourceManager__virtualPathResourceMap_url.dependentAssetMap;
+            if (atlasDependency) {
+                for(var key in atlasDependency){
+                    var imageVirtualPath = atlasDependency[key];
+                    assetPath.imagePaths.push(imageVirtualPath);
+                }
+            }
+        }
     };
-    return EditorSpineAtlasLoader;
+    return SpineAtlasLoader;
 }(engine.Loader);
-EditorSpineAtlasLoader = __decorate([
-    engine.resourceLoader("EditorSpineAtlas", [
+SpineAtlasLoader = __decorate([
+    engine.resourceLoader("SpineAtlas", [
         "atlas"
     ])
-], EditorSpineAtlasLoader);
+], SpineAtlasLoader);
+
+var LoaderObject = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    SpineResource: SpineResource,
+    LoaderUtils: LoaderUtils
+});
 
-var version = "4.2.0";
-engine.Loader.registerClass("SpineAnimationRenderer", SpineAnimationRenderer);
+var RendererObject = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    SpineAnimationRenderer: SpineAnimationRenderer,
+    SpineMaterial: SpineMaterial
+});
+
+for(var key in RendererObject){
+    engine.Loader.registerClass(key, RendererObject[key]);
+}
+for(var key1 in LoaderObject){
+    engine.Loader.registerClass(key1, LoaderObject[key1]);
+}
+var version = "4.2.1";
 console.log("Galacean spine version: " + version);
 
 exports.AlphaTimeline = AlphaTimeline;
@@ -12096,6 +11674,7 @@ exports.IkConstraintTimeline = IkConstraintTimeline;
 exports.InheritTimeline = InheritTimeline;
 exports.IntSet = IntSet;
 exports.Interpolation = Interpolation;
+exports.LoaderUtils = LoaderUtils;
 exports.MathUtils = MathUtils;
 exports.MeshAttachment = MeshAttachment;
 exports.PathAttachment = PathAttachment;
@@ -12137,13 +11716,14 @@ exports.SkeletonBinary = SkeletonBinary;
 exports.SkeletonBounds = SkeletonBounds;
 exports.SkeletonClipping = SkeletonClipping;
 exports.SkeletonData = SkeletonData;
-exports.SkeletonDataResource = SkeletonDataResource;
 exports.SkeletonJson = SkeletonJson;
 exports.Skin = Skin;
 exports.SkinEntry = SkinEntry;
 exports.Slot = Slot;
 exports.SlotData = SlotData;
 exports.SpineAnimationRenderer = SpineAnimationRenderer;
+exports.SpineMaterial = SpineMaterial;
+exports.SpineResource = SpineResource;
 exports.StringSet = StringSet;
 exports.Texture = Texture;
 exports.TextureAtlas = TextureAtlas;
@@ -12164,6 +11744,5 @@ exports.Utils = Utils;
 exports.Vector2 = Vector2;
 exports.VertexAttachment = VertexAttachment;
 exports.WindowedMean = WindowedMean;
-exports.createTextureAtlas = createTextureAtlas;
 exports.version = version;
 //# sourceMappingURL=main.js.map