@galacean/effects 1.1.3 → 1.1.4

package/dist/index.mjs

@@ -3,7 +3,7 @@
  * Description: Galacean Effects runtime player for the web
  * Author: Ant Group CO., Ltd.
  * Contributors: 燃然,飂兮,十弦,云垣,茂安,意绮
- * Version: v1.1.3
+ * Version: v1.1.4
  */
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -14729,6 +14729,9 @@ var VFXItem = /** @class */ (function () {
     VFXItem.isTree = function (item) {
         return item.type === ItemType$1.tree;
     };
+    VFXItem.isCamera = function (item) {
+        return item.type === ItemType$1.camera;
+    };
     VFXItem.isExtraCamera = function (item) {
         return item.id === 'extra-camera' && item.name === 'extra-camera';
     };
@@ -14929,10 +14932,11 @@ var VFXItem = /** @class */ (function () {
                         }
                         else if (this.endBehavior === END_BEHAVIOR_DESTROY$1) {
                             this._contentVisible = false;
+                            shouldUpdate = true;
+                            dt = 0;
                             // 预合成配置 reusable 且销毁时， 需要隐藏其中的元素
                             if (this.type === ItemType$1.composition) {
                                 this.handleVisibleChanged(false);
-                                this.onItemUpdate(0, lifetime);
                             }
                         }
                         lifetime = Math.min(lifetime, 1);
@@ -15516,10 +15520,6 @@ var CameraVFXItem = /** @class */ (function (_super) {
         (_a = this.controller) === null || _a === void 0 ? void 0 : _a.update(lifetime);
         this.updateCamera();
     };
-    // override onEnd () {
-    //   this.controller?.update(1);
-    //   this.updateCamera();
-    // }
     CameraVFXItem.prototype.updateCamera = function () {
         if (this.controller && this.composition) {
             var camera = this.composition.camera;
@@ -23564,7 +23564,7 @@ var ParticleSystem = /** @class */ (function () {
         configurable: true
     });
     ParticleSystem.prototype.updateEmitterTransform = function (time) {
-        var parentTransform = this.parentTransform;
+        var parentTransform = this.transform.parentTransform;
         var _a = this.basicTransform, path = _a.path, position = _a.position;
         var selfPos = position.clone();
         if (path) {
@@ -23574,9 +23574,9 @@ var ParticleSystem = /** @class */ (function () {
         this.transform.setPosition(selfPos.x, selfPos.y, selfPos.z);
         if (this.options.particleFollowParent && parentTransform) {
             var tempMatrix = parentTransform.getWorldMatrix();
-            this.particleMesh.mesh.worldMatrix = tempMatrix.clone();
+            this.particleMesh.mesh.worldMatrix = tempMatrix;
             if (this.trailMesh) {
-                this.trailMesh.mesh.worldMatrix = tempMatrix.clone();
+                this.trailMesh.mesh.worldMatrix = tempMatrix;
             }
         }
     };
@@ -23595,8 +23595,8 @@ var ParticleSystem = /** @class */ (function () {
         link.pushNode(linkContent);
         this.particleMesh.setPoint(point, pointIndex);
         this.clearPointTrail(pointIndex);
-        if (this.parentTransform && this.trailMesh) {
-            this.trailMesh.setPointStartPos(pointIndex, this.parentTransform.position.clone());
+        if (this.trailMesh) {
+            this.trailMesh.setPointStartPos(pointIndex, this.transform.parentTransform.position.clone());
         }
     };
     ParticleSystem.prototype.setVisible = function (visible) {
@@ -23634,7 +23634,8 @@ var ParticleSystem = /** @class */ (function () {
         }
     };
     ParticleSystem.prototype.setParentTransform = function (transform) {
-        this.parentTransform = transform;
+        // this.transform.parentTransform = transform;
+        // this.parentTransform = transform;
     };
     ParticleSystem.prototype.getTextures = function () {
         var e_1, _a, e_2, _b;
@@ -23927,8 +23928,8 @@ var ParticleSystem = /** @class */ (function () {
         if (trails.sizeAffectsLifetime) {
             lifetime *= size[0];
         }
-        if (trails.parentAffectsPosition && this.parentTransform) {
-            position.add(this.parentTransform.position);
+        if (trails.parentAffectsPosition && this.transform.parentTransform) {
+            position.add(this.transform.parentTransform.position);
             var pos = this.trailMesh.getPointStartPos(pointIndex);
             if (pos) {
                 position.subtract(pos);
@@ -24168,12 +24169,11 @@ var ParticleVFXItem = /** @class */ (function (_super) {
     ParticleVFXItem.prototype.onItemUpdate = function (dt, lifetime) {
         var _a;
         if (this.content) {
-            var hide = !this.contentVisible;
+            var hide = !this.visible;
             var parentItem = this.parentId && ((_a = this.composition) === null || _a === void 0 ? void 0 : _a.getItemByID(this.parentId));
             if (!hide && parentItem) {
                 var parentData = parentItem.getRenderData();
                 if (parentData) {
-                    this.content.setParentTransform(parentData.transform);
                     if (!parentData.visible) {
                         hide = false;
                     }
@@ -29176,7 +29176,6 @@ var CompositionSourceManager = /** @class */ (function () {
         }
         var cachedTextures = textureOptions.map(function (option) { return option && (option instanceof Texture ? option : Texture.create(engine, option)); });
         // 缓存创建的Texture对象
-        // @ts-expect-error
         scene.textureOptions = cachedTextures;
         cachedTextures === null || cachedTextures === void 0 ? void 0 : cachedTextures.forEach(function (tex) { return tex === null || tex === void 0 ? void 0 : tex.initialize(); });
         try {
@@ -29406,24 +29405,24 @@ var AssetManager = /** @class */ (function () {
         this.timeout = timeout;
     };
     /**
-     * 场景创建
-     * 通过 json 创建出场景对象，并进行提前编译等工作
+     * 场景创建，通过 json 创建出场景对象，并进行提前编译等工作
      * @param url - json 的 URL 链接或者 json 对象
      * @param renderer - renderer 对象，用于获取管理、编译 shader 及 GPU 上下文的参数
      * @param options - 扩展参数
      * @returns
      */
     AssetManager.prototype.loadScene = function (url, renderer, options) {
-        var _a, _b;
+        var _a, _b, _c;
         return __awaiter(this, void 0, void 0, function () {
-            var rawJSON, timeLabel, startTime, timeInfos, gpuInstance, asyncShaderCompile, loadTimer, cancelLoading, waitPromise, hookTimeInfo, loadResourcePromise;
+            var rawJSON, timeLabel, startTime, timeInfos, gpuInstance, asyncShaderCompile, compressedTexture, loadTimer, cancelLoading, waitPromise, hookTimeInfo, loadResourcePromise;
             var _this = this;
-            return __generator(this, function (_c) {
+            return __generator(this, function (_d) {
                 timeLabel = "Load asset: ".concat(isString(url) ? url : this.id);
                 startTime = performance.now();
                 timeInfos = [];
                 gpuInstance = renderer === null || renderer === void 0 ? void 0 : renderer.engine.gpuCapability;
                 asyncShaderCompile = (_b = (_a = gpuInstance === null || gpuInstance === void 0 ? void 0 : gpuInstance.detail) === null || _a === void 0 ? void 0 : _a.asyncShaderCompile) !== null && _b !== void 0 ? _b : false;
+                compressedTexture = (_c = gpuInstance === null || gpuInstance === void 0 ? void 0 : gpuInstance.detail.compressedTexture) !== null && _c !== void 0 ? _c : 0;
                 cancelLoading = false;
                 waitPromise = new Promise(function (resolve, reject) {
                     return loadTimer = window.setTimeout(function () {
@@ -29448,10 +29447,10 @@ var AssetManager = /** @class */ (function () {
                     });
                 }); };
                 loadResourcePromise = function () { return __awaiter(_this, void 0, void 0, function () {
-                    var _a, usedImages, jsonScene, _b, bins, images, compositions, fonts, _c, loadedBins, loadedImages, loadedTextures, scene, totalTime;
+                    var scene, rawImages, images_1, i, _a, i, _b, usedImages_1, jsonScene_1, pluginSystem_1, _c, bins_1, images_2, compositions_1, fonts_1, _d, loadedBins_1, loadedImages_1, loadedTextures, totalTime;
                     var _this = this;
-                    return __generator(this, function (_d) {
-                        switch (_d.label) {
+                    return __generator(this, function (_e) {
+                        switch (_e.label) {
                             case 0:
                                 if (!isObject(url)) return [3 /*break*/, 1];
                                 // TODO: 原 JSONLoader contructor 判断是否兼容
@@ -29464,42 +29463,66 @@ var AssetManager = /** @class */ (function () {
                                 this.baseUrl = url;
                                 return [4 /*yield*/, hookTimeInfo('loadJSON', function () { return _this.loadJSON(url); })];
                             case 2:
-                                rawJSON = _d.sent();
-                                _d.label = 3;
-                            case 3: return [4 /*yield*/, hookTimeInfo('processJSON', function () { return _this.processJSON(rawJSON); })];
+                                rawJSON = _e.sent();
+                                _e.label = 3;
+                            case 3:
+                                if (!isScene(rawJSON)) return [3 /*break*/, 6];
+                                // 已经加载过的 可能需要更新数据模板
+                                scene = __assign$1({}, rawJSON);
+                                if (!(this.options && this.options.variables && Object.keys(this.options.variables).length !== 0)) return [3 /*break*/, 5];
+                                rawImages = rawJSON.jsonScene.images;
+                                images_1 = scene.images;
+                                for (i = 0; i < rawImages.length; i++) {
+                                    // 仅重新加载数据模板对应的图片
+                                    if (images_1[i] instanceof HTMLCanvasElement) {
+                                        images_1[i] = rawImages[i];
+                                    }
+                                }
+                                _a = scene;
+                                return [4 /*yield*/, hookTimeInfo('processImages', function () { return _this.processImages(images_1, scene.usedImages, compressedTexture); })];
                             case 4:
-                                _a = _d.sent(), usedImages = _a.usedImages, jsonScene = _a.jsonScene;
-                                _b = jsonScene.bins, bins = _b === void 0 ? [] : _b, images = jsonScene.images, compositions = jsonScene.compositions, fonts = jsonScene.fonts;
+                                _a.images = _e.sent();
+                                // 更新 TextureOptions 中的 image 指向
+                                for (i = 0; i < scene.images.length; i++) {
+                                    scene.textureOptions[i].image = scene.images[i];
+                                }
+                                _e.label = 5;
+                            case 5: return [3 /*break*/, 12];
+                            case 6: return [4 /*yield*/, hookTimeInfo('processJSON', function () { return _this.processJSON(rawJSON); })];
+                            case 7:
+                                _b = _e.sent(), usedImages_1 = _b.usedImages, jsonScene_1 = _b.jsonScene, pluginSystem_1 = _b.pluginSystem;
+                                _c = jsonScene_1.bins, bins_1 = _c === void 0 ? [] : _c, images_2 = jsonScene_1.images, compositions_1 = jsonScene_1.compositions, fonts_1 = jsonScene_1.fonts;
                                 return [4 /*yield*/, Promise.all([
-                                        hookTimeInfo('processBins', function () { return _this.processBins(bins); }),
-                                        hookTimeInfo('processImages', function () { var _a; return _this.processImages(images, usedImages, (_a = gpuInstance === null || gpuInstance === void 0 ? void 0 : gpuInstance.detail.compressedTexture) !== null && _a !== void 0 ? _a : 0); }),
-                                        hookTimeInfo("".concat(asyncShaderCompile ? 'async' : 'sync', " compile"), function () { return _this.precompile(compositions, renderer, options); }),
+                                        hookTimeInfo('processBins', function () { return _this.processBins(bins_1); }),
+                                        hookTimeInfo('processImages', function () { return _this.processImages(images_2, usedImages_1, compressedTexture); }),
+                                        hookTimeInfo("".concat(asyncShaderCompile ? 'async' : 'sync', " compile"), function () { return _this.precompile(compositions_1, pluginSystem_1, renderer, options); }),
                                     ])];
-                            case 5:
-                                _c = __read$3.apply(void 0, [_d.sent(), 2]), loadedBins = _c[0], loadedImages = _c[1];
-                                return [4 /*yield*/, hookTimeInfo('processFontURL', function () { return _this.processFontURL(fonts); })];
-                            case 6:
-                                _d.sent();
-                                return [4 /*yield*/, hookTimeInfo('processTextures', function () { return _this.processTextures(loadedImages, loadedBins, jsonScene); })];
-                            case 7:
-                                loadedTextures = _d.sent();
+                            case 8:
+                                _d = __read$3.apply(void 0, [_e.sent(), 2]), loadedBins_1 = _d[0], loadedImages_1 = _d[1];
+                                return [4 /*yield*/, hookTimeInfo('processFontURL', function () { return _this.processFontURL(fonts_1); })];
+                            case 9:
+                                _e.sent();
+                                return [4 /*yield*/, hookTimeInfo('processTextures', function () { return _this.processTextures(loadedImages_1, loadedBins_1, jsonScene_1); })];
+                            case 10:
+                                loadedTextures = _e.sent();
                                 scene = {
-                                    jsonScene: jsonScene,
-                                    images: loadedImages,
-                                    textureOptions: loadedTextures,
-                                    bins: loadedBins,
-                                    storage: {},
-                                    pluginSystem: this.pluginSystem,
-                                    renderLevel: this.options.renderLevel,
-                                    totalTime: 0,
-                                    startTime: 0,
                                     url: url,
+                                    renderLevel: this.options.renderLevel,
+                                    storage: {},
+                                    pluginSystem: pluginSystem_1,
+                                    jsonScene: jsonScene_1,
+                                    usedImages: usedImages_1,
+                                    images: loadedImages_1,
+                                    textureOptions: loadedTextures,
+                                    bins: loadedBins_1,
                                 };
                                 // 触发插件系统 pluginSystem 的回调 prepareResource
-                                return [4 /*yield*/, hookTimeInfo('processPlugins', function () { return _this.pluginSystem.loadResources(scene, _this.options); })];
-                            case 8:
+                                return [4 /*yield*/, hookTimeInfo('processPlugins', function () { return pluginSystem_1.loadResources(scene, _this.options); })];
+                            case 11:
                                 // 触发插件系统 pluginSystem 的回调 prepareResource
-                                _d.sent();
+                                _e.sent();
+                                _e.label = 12;
+                            case 12:
                                 totalTime = performance.now() - startTime;
                                 console.info({
                                     content: "".concat(timeLabel, ": ").concat(totalTime.toFixed(4), "ms, ").concat(timeInfos.join(' ')),
@@ -29516,7 +29539,7 @@ var AssetManager = /** @class */ (function () {
             });
         });
     };
-    AssetManager.prototype.precompile = function (compositions, renderer, options) {
+    AssetManager.prototype.precompile = function (compositions, pluginSystem, renderer, options) {
         return __awaiter(this, void 0, void 0, function () {
             var shaderLibrary;
             return __generator(this, function (_a) {
@@ -29526,7 +29549,7 @@ var AssetManager = /** @class */ (function () {
                             return [2 /*return*/];
                         }
                         shaderLibrary = renderer === null || renderer === void 0 ? void 0 : renderer.getShaderLibrary();
-                        return [4 /*yield*/, this.pluginSystem.precompile(compositions, renderer, options)];
+                        return [4 /*yield*/, (pluginSystem === null || pluginSystem === void 0 ? void 0 : pluginSystem.precompile(compositions, renderer, options))];
                     case 1:
                         _a.sent();
                         return [4 /*yield*/, new Promise(function (resolve) {
@@ -29543,7 +29566,7 @@ var AssetManager = /** @class */ (function () {
     };
     AssetManager.prototype.processJSON = function (json) {
         return __awaiter(this, void 0, void 0, function () {
-            var jsonScene, _a, plugins, sceneCompositions, imgUsage, images, renderLevel, usedImages;
+            var jsonScene, _a, plugins, sceneCompositions, imgUsage, images, pluginSystem, renderLevel, usedImages;
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
@@ -29557,8 +29580,8 @@ var AssetManager = /** @class */ (function () {
                             }
                         });
                         _a = jsonScene.plugins, plugins = _a === void 0 ? [] : _a, sceneCompositions = jsonScene.compositions, imgUsage = jsonScene.imgUsage, images = jsonScene.images;
-                        this.pluginSystem = new PluginSystem(plugins);
-                        return [4 /*yield*/, this.pluginSystem.processRawJSON(jsonScene, this.options)];
+                        pluginSystem = new PluginSystem(plugins);
+                        return [4 /*yield*/, pluginSystem.processRawJSON(jsonScene, this.options)];
                     case 1:
                         _b.sent();
                         renderLevel = this.options.renderLevel;
@@ -29575,6 +29598,7 @@ var AssetManager = /** @class */ (function () {
                         return [2 /*return*/, {
                                 usedImages: usedImages,
                                 jsonScene: jsonScene,
+                                pluginSystem: pluginSystem,
                             }];
                 }
             });
@@ -29958,7 +29982,8 @@ var CompVFXItem = /** @class */ (function (_super) {
                 }
                 else {
                     item = createVFXItem(this.itemProps[i], this.composition);
-                    item.transform.parentTransform = this.transform;
+                    // 相机不跟随合成移动
+                    item.transform.parentTransform = VFXItem.isCamera(item) ? new Transform() : this.transform;
                 }
                 if (VFXItem.isExtraCamera(item)) {
                     this.extraCamera = item;
@@ -30144,7 +30169,7 @@ var CompVFXItem = /** @class */ (function (_super) {
             if (!parentItem) {
                 itemNode.parentId = undefined;
                 item.parent = undefined;
-                item.transform.parentTransform = this.transform;
+                item.transform.parentTransform = VFXItem.isExtraCamera(item) ? new Transform() : this.transform;
             }
             else {
                 var parentNode = this.itemCacheMap.get(parentItem.id);
@@ -35779,7 +35804,7 @@ var Player = /** @class */ (function () {
     Player.prototype.createComposition = function (url, options) {
         if (options === void 0) { options = {}; }
         return __awaiter(this, void 0, void 0, function () {
-            var renderer, last, opts, scene, source, composition, firstFrameTime;
+            var renderer, last, opts, source, scene, composition, firstFrameTime;
             var _this = this;
             return __generator(this, function (_a) {
                 switch (_a.label) {
@@ -35800,14 +35825,9 @@ var Player = /** @class */ (function () {
                         else {
                             this.assetManager = new AssetManager(opts);
                         }
-                        if (!isScene(source)) return [3 /*break*/, 1];
-                        scene = source;
-                        return [3 /*break*/, 3];
-                    case 1: return [4 /*yield*/, this.assetManager.loadScene(source, this.renderer, { env: this.env })];
-                    case 2:
+                        return [4 /*yield*/, this.assetManager.loadScene(source, this.renderer, { env: this.env })];
+                    case 1:
                         scene = _a.sent();
-                        _a.label = 3;
-                    case 3:
                         composition = new Composition(__assign$1(__assign$1({}, opts), { renderer: renderer, width: renderer.getWidth(), height: renderer.getHeight(), event: this.event, handlePlayerPause: this.handlePlayerPause, handleMessageItem: this.handleMessageItem }), scene);
                         if (this.ticker) {
                             if (composition.renderLevel === RenderLevel$1.B) {
@@ -35819,7 +35839,7 @@ var Player = /** @class */ (function () {
                                     resolve(null);
                                 });
                             })];
-                    case 4:
+                    case 2:
                         _a.sent();
                         if (opts.autoplay) {
                             this.autoPlaying = true;
@@ -35977,38 +35997,29 @@ var Player = /** @class */ (function () {
         var _this = this;
         var _a, _b, _c;
         dt = Math.min(dt, 33) * this.speed;
-        var removed = false;
         var comps = this.compositions;
         var skipRender = false;
         comps.sort(function (a, b) { return a.getIndex() - b.getIndex(); });
-        comps.forEach(function (composition, i) {
+        this.compositions = [];
+        for (var i = 0; i < comps.length; i++) {
+            var composition = comps[i];
             if (composition.textureOffloaded) {
                 skipRender = true;
                 console.error({
                     content: "Composition ".concat(composition.name, " texture offloaded, skip render."),
                     type: LOG_TYPE,
                 });
+                this.compositions.push(composition);
+                continue;
             }
-            if (composition.isDestroyed) {
-                delete comps[i];
-                removed = true;
-                return;
-            }
-            if (composition.renderer) {
+            if (!composition.isDestroyed && composition.renderer) {
                 composition.update(dt);
             }
-            if (composition.isDestroyed) {
-                delete comps[i];
-                removed = true;
-                return;
+            if (!composition.isDestroyed) {
+                this.compositions.push(composition);
             }
-        });
-        if (removed) {
-            comps = comps.filter(function (comp) { return comp; });
-            comps.map(function (comp, index) { return comp.setIndex(index); });
-            this.compositions = comps;
         }
-        this.baseCompositionIndex = comps.length;
+        this.baseCompositionIndex = this.compositions.length;
         if (skipRender) {
             (_a = this.handleRenderError) === null || _a === void 0 ? void 0 : _a.call(this, new Error('play when texture offloaded'));
             return (_b = this.ticker) === null || _b === void 0 ? void 0 : _b.pause();
@@ -36018,7 +36029,7 @@ var Player = /** @class */ (function () {
             var gl = this.renderer.context.gl;
             var time = (level === 2 && this.reportGPUTime) ? gpuTimer(gl) : undefined;
             time === null || time === void 0 ? void 0 : time.begin();
-            if (this.compositions.length || forceRender) {
+            if (this.compositions.length || this.compositions.length < comps.length || forceRender) {
                 this.renderer.setFrameBuffer(null);
                 this.renderer.clear({
                     stencilAction: TextureLoadAction.clear,
@@ -36364,9 +36375,9 @@ Renderer.create = function (canvas, framework, renderOptions) {
 Engine.create = function (gl) {
     return new GLEngine(gl);
 };
-var version = "1.1.3";
+var version = "1.1.4";
 console.info({
-    content: '[Galacean Effects Player] version: ' + "1.1.3",
+    content: '[Galacean Effects Player] version: ' + "1.1.4",
     type: LOG_TYPE,
 });