@galacean/effects-threejs 2.3.0-beta.3 → 2.3.1

package/dist/index.mjs

@@ -3,7 +3,7 @@
  * Description: Galacean Effects runtime threejs plugin for the web
  * Author: Ant Group CO., Ltd.
  * Contributors: 燃然,飂兮,十弦,云垣,茂安,意绮
- * Version: v2.3.0-beta.3
+ * Version: v2.3.1
  */
 
 import * as THREE from 'three';
@@ -928,10 +928,10 @@ var PluginSystem = /*#__PURE__*/ function() {
             });
         })();
     };
-    _proto.precompile = function precompile(compositions, renderer, options) {
+    _proto.precompile = function precompile(compositions, renderer) {
         for(var _iterator = _create_for_of_iterator_helper_loose(this.plugins), _step; !(_step = _iterator()).done;){
             var plugin = _step.value;
-            plugin.precompile(compositions, renderer, options);
+            plugin.precompile(compositions, renderer);
         }
     };
     _proto.loadResources = function loadResources(scene, options) {
@@ -1006,7 +1006,7 @@ function getPluginUsageInfo(name) {
    * 在加载到 JSON 后，就可以进行提前编译
    * @param json
    * @param player
-   */ _proto.precompile = function precompile(compositions, renderer, options) {};
+   */ _proto.precompile = function precompile(compositions, renderer) {};
     _proto.onCompositionConstructed = function onCompositionConstructed(composition, scene) {};
     _proto.onCompositionItemLifeBegin = function onCompositionItemLifeBegin(composition, item) {};
     _proto.onCompositionItemLifeEnd = function onCompositionItemLifeEnd(composition, item) {};
@@ -16325,7 +16325,6 @@ var ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
         _this.hasFill = false;
         _this.shapeDirty = true;
         _this.graphicsPath = new GraphicsPath();
-        _this.curveValues = [];
         _this.vert = "\nprecision highp float;\n\nattribute vec3 aPos;//x y\n\nuniform mat4 effects_MatrixVP;\nuniform mat4 effects_MatrixInvV;\nuniform mat4 effects_ObjectToWorld;\n\nvoid main() {\n  vec4 pos = vec4(aPos.xyz, 1.0);\n  gl_Position = effects_MatrixVP * effects_ObjectToWorld * pos;\n}\n";
         _this.frag = "\nprecision highp float;\n\nuniform vec4 _Color;\n\nvoid main() {\n  vec4 color = _Color;\n  color.rgb *= color.a;\n  gl_FragColor = color;\n}\n";
         if (!_this.geometry) {
@@ -16507,31 +16506,25 @@ var ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
                     var easingOuts = customShapeAtribute.easingOuts;
                     for(var _iterator = _create_for_of_iterator_helper_loose(customShapeAtribute.shapes), _step; !(_step = _iterator()).done;){
                         var shape = _step.value;
-                        this.curveValues = [];
                         var indices = shape.indexes;
+                        var startPoint = points[indices[0].point];
+                        this.graphicsPath.moveTo(startPoint.x, startPoint.y);
                         for(var i = 1; i < indices.length; i++){
                             var pointIndex = indices[i];
                             var lastPointIndex = indices[i - 1];
-                            this.curveValues.push({
-                                point: points[pointIndex.point],
-                                controlPoint1: easingOuts[lastPointIndex.easingOut],
-                                controlPoint2: easingIns[pointIndex.easingIn]
-                            });
-                        }
-                        // Push the last curve
-                        this.curveValues.push({
-                            point: points[indices[0].point],
-                            controlPoint1: easingOuts[indices[indices.length - 1].easingOut],
-                            controlPoint2: easingIns[indices[0].easingIn]
-                        });
-                        this.graphicsPath.moveTo(this.curveValues[this.curveValues.length - 1].point.x, this.curveValues[this.curveValues.length - 1].point.y);
-                        for(var _iterator1 = _create_for_of_iterator_helper_loose(this.curveValues), _step1; !(_step1 = _iterator1()).done;){
-                            var curveValue = _step1.value;
-                            var point = curveValue.point;
-                            var control1 = curveValue.controlPoint1;
-                            var control2 = curveValue.controlPoint2;
-                            this.graphicsPath.bezierCurveTo(control1.x, control1.y, control2.x, control2.y, point.x, point.y, 1);
+                            var point = points[pointIndex.point];
+                            var lastPoint = points[lastPointIndex.point];
+                            var control1 = easingOuts[lastPointIndex.easingOut];
+                            var control2 = easingIns[pointIndex.easingIn];
+                            this.graphicsPath.bezierCurveTo(control1.x + lastPoint.x, control1.y + lastPoint.y, control2.x + point.x, control2.y + point.y, point.x, point.y, 1);
                         }
+                        var pointIndex1 = indices[0];
+                        var lastPointIndex1 = indices[indices.length - 1];
+                        var point1 = points[pointIndex1.point];
+                        var lastPoint1 = points[lastPointIndex1.point];
+                        var control11 = easingOuts[lastPointIndex1.easingOut];
+                        var control21 = easingIns[pointIndex1.easingIn];
+                        this.graphicsPath.bezierCurveTo(control11.x + lastPoint1.x, control11.y + lastPoint1.y, control21.x + point1.x, control21.y + point1.y, point1.x, point1.y, 1);
                         if (shape.close) {
                             this.graphicsPath.closePath();
                         }
@@ -26652,14 +26645,36 @@ function getStandardInteractContent(ui) {
                     // @ts-expect-error
                     customShapeComponent.fill = customShapeComponent.shapes[0].fill;
                 }
+                // easingIn 和 easingOut 绝对坐标转相对坐标
+                var easingInFlag = new Array(customShapeComponent.easingIns.length);
+                var easingOutFlag = new Array(customShapeComponent.easingOuts.length).fill(false);
+                for(var _iterator1 = _create_for_of_iterator_helper_loose(customShapeComponent.shapes), _step1; !(_step1 = _iterator1()).done;){
+                    var shape = _step1.value;
+                    for(var _iterator2 = _create_for_of_iterator_helper_loose(shape.indexes), _step2; !(_step2 = _iterator2()).done;){
+                        var index = _step2.value;
+                        var point = customShapeComponent.points[index.point];
+                        var easingIn = customShapeComponent.easingIns[index.easingIn];
+                        var easingOut = customShapeComponent.easingOuts[index.easingOut];
+                        if (!easingInFlag[index.easingIn]) {
+                            easingIn.x -= point.x;
+                            easingIn.y -= point.y;
+                            easingInFlag[index.easingIn] = true;
+                        }
+                        if (!easingOutFlag[index.easingOut]) {
+                            easingOut.x -= point.x;
+                            easingOut.y -= point.y;
+                            easingOutFlag[index.easingOut] = true;
+                        }
+                    }
+                }
             }
         }
     }
     // Composition id 转 guid
     var compositionId = json.compositionId;
     var compositionIdToGUIDMap = {};
-    for(var _iterator1 = _create_for_of_iterator_helper_loose(json.compositions), _step1; !(_step1 = _iterator1()).done;){
-        var composition = _step1.value;
+    for(var _iterator3 = _create_for_of_iterator_helper_loose(json.compositions), _step3; !(_step3 = _iterator3()).done;){
+        var composition = _step3.value;
         var guid = generateGUID();
         compositionIdToGUIDMap[composition.id] = guid;
         if (composition.id === compositionId) {
@@ -26668,8 +26683,8 @@ function getStandardInteractContent(ui) {
         composition.id = guid;
     }
     // 预合成元素 refId 同步改为生成的合成 guid
-    for(var _iterator2 = _create_for_of_iterator_helper_loose(json.items), _step2; !(_step2 = _iterator2()).done;){
-        var item = _step2.value;
+    for(var _iterator4 = _create_for_of_iterator_helper_loose(json.items), _step4; !(_step4 = _iterator4()).done;){
+        var item = _step4.value;
         if (item.content) {
             var compositionOptions = item.content.options;
             if (compositionOptions && compositionOptions.refId !== undefined) {
@@ -27523,8 +27538,10 @@ function getStandardJSON(json) {
             json = version30Migration(version21Migration(json));
         }
         // 3.x 版本格式转换
-        if (mainVersion < 4 || mainVersion === 4 && minorVersion < 2) {
-            json = version31Migration(json);
+        if (mainVersion < 4) {
+            if (mainVersion === 3 && minorVersion < 2) {
+                json = version31Migration(json);
+            }
         }
         return json;
     }
@@ -32077,7 +32094,7 @@ registerPlugin("sprite", SpriteLoader, VFXItem);
 registerPlugin("particle", ParticleLoader, VFXItem);
 registerPlugin("cal", CalculateLoader, VFXItem);
 registerPlugin("interact", InteractLoader, VFXItem);
-var version$1 = "2.3.0-beta.3";
+var version$1 = "2.3.1";
 logger.info("Core version: " + version$1 + ".");
 
 var _obj;
@@ -33337,6 +33354,7 @@ var ThreeRenderer = /*#__PURE__*/ function(Renderer) {
         _this.baseCompositionIndex = 0;
         var width = options.width, height = options.height, camera = options.camera;
         _this.renderer = new ThreeRenderer(context);
+        _this.assetService = new AssetService(_this.renderer.engine);
         _this.width = width;
         _this.height = height;
         _this.camera = camera;
@@ -33346,63 +33364,109 @@ var ThreeRenderer = /*#__PURE__*/ function(Renderer) {
     _proto.loadScene = function loadScene(scene, options) {
         var _this = this;
         return _async_to_generator(function() {
-            var composition, baseOrder;
+            var last, scenes, compositions, _options_autoplay, autoplay, baseOrder, _scenes, i, compositionNames, firstFrameTime, _iterator, _step, composition;
             return __generator(this, function(_state) {
                 switch(_state.label){
                     case 0:
+                        assertExist(_this.renderer, "Renderer is not exist, maybe the Player has been disabled or in gl 'debug-disable' mode.");
+                        last = performance.now();
+                        scenes = [];
+                        compositions = [];
+                        autoplay = (_options_autoplay = options == null ? void 0 : options.autoplay) != null ? _options_autoplay : true;
                         baseOrder = _this.baseCompositionIndex;
-                        if (!isArray(scene)) return [
-                            3,
-                            2
-                        ];
-                        _this.baseCompositionIndex += scene.length;
+                        if (isArray(scene)) {
+                            (_scenes = scenes).push.apply(_scenes, [].concat(scene));
+                        } else {
+                            scenes.push(scene);
+                        }
                         return [
                             4,
-                            Promise.all(scene.map(/*#__PURE__*/ _async_to_generator(function(scn, index) {
-                                var res;
+                            Promise.all(scenes.map(/*#__PURE__*/ _async_to_generator(function(url, index) {
+                                var _this_assetService_assembleSceneLoadOptions, source, opts, assetManager, _$scene, composition;
                                 return __generator(this, function(_state) {
                                     switch(_state.label){
                                         case 0:
+                                            _this_assetService_assembleSceneLoadOptions = _this.assetService.assembleSceneLoadOptions(url, _extends({
+                                                autoplay: autoplay
+                                            }, options)), source = _this_assetService_assembleSceneLoadOptions.source, opts = _this_assetService_assembleSceneLoadOptions.options;
+                                            assetManager = new AssetManager(opts);
                                             return [
                                                 4,
-                                                _this.createComposition(scn, options)
+                                                assetManager.loadScene(source, _this.renderer, {
+                                                    env: _this.env
+                                                })
                                             ];
                                         case 1:
-                                            res = _state.sent();
-                                            res.setIndex(baseOrder + index);
+                                            _$scene = _state.sent();
+                                            _this.assetService.prepareAssets(_$scene, assetManager.getAssets());
+                                            _this.assetService.updateTextVariables(_$scene, assetManager.options.variables);
+                                            _this.assetService.initializeTexture(_$scene);
+                                            _$scene.pluginSystem.precompile(_$scene.jsonScene.compositions, _this.renderer);
+                                            composition = _this.createComposition(_$scene, opts);
+                                            _this.baseCompositionIndex += 1;
+                                            composition.setIndex(baseOrder + index);
+                                            compositions[index] = composition;
                                             return [
-                                                2,
-                                                res
+                                                2
                                             ];
                                     }
                                 });
                             })))
                         ];
                     case 1:
-                        composition = _state.sent();
-                        return [
-                            3,
-                            4
-                        ];
-                    case 2:
-                        _this.baseCompositionIndex += 1;
-                        return [
-                            4,
-                            _this.createComposition(scene, options)
-                        ];
-                    case 3:
-                        composition = _state.sent();
-                        composition.setIndex(baseOrder);
-                        _state.label = 4;
-                    case 4:
+                        _state.sent();
+                        for(i = 0; i < compositions.length; i++){
+                            if (autoplay) {
+                                compositions[i].play();
+                            } else {
+                                compositions[i].pause();
+                            }
+                        }
+                        compositionNames = compositions.map(function(composition) {
+                            return composition.name;
+                        });
+                        firstFrameTime = performance.now() - last;
+                        for(_iterator = _create_for_of_iterator_helper_loose(compositions); !(_step = _iterator()).done;){
+                            composition = _step.value;
+                            composition.statistic.firstFrameTime = firstFrameTime;
+                        }
+                        logger.info("First frame [" + compositionNames + "]: " + firstFrameTime.toFixed(4) + "ms.");
                         return [
                             2,
-                            composition
+                            isArray(scene) ? compositions : compositions[0]
                         ];
                 }
             });
         })();
     };
+    _proto.createComposition = function createComposition(scene, options) {
+        var _this = this;
+        if (options === void 0) options = {};
+        var composition = new ThreeComposition(_extends({}, options, {
+            width: this.width,
+            height: this.height,
+            renderer: this.renderer,
+            handleItemMessage: function(message) {
+                _this.dispatchEvent({
+                    type: "message",
+                    message: message
+                });
+            }
+        }), scene);
+        composition.on("end", function() {
+            _this.dispatchEvent({
+                type: "end",
+                composition: composition
+            });
+        });
+        this.renderer.engine.setOptions({
+            threeCamera: this.camera,
+            threeGroup: this,
+            composition: composition
+        });
+        this.compositions.push(composition);
+        return composition;
+    };
     _proto.pause = function pause() {
         this.dispatchEvent({
             type: "pause"
@@ -33416,99 +33480,6 @@ var ThreeRenderer = /*#__PURE__*/ function(Renderer) {
             composition.resume();
         });
     };
-    _proto.createComposition = function createComposition(url, options) {
-        if (options === void 0) options = {};
-        var _this = this;
-        return _async_to_generator(function() {
-            var last, opts, source, scene, engine, i, composition, firstFrameTime;
-            return __generator(this, function(_state) {
-                switch(_state.label){
-                    case 0:
-                        last = performance.now();
-                        opts = _extends({
-                            autoplay: true
-                        }, options);
-                        source = url;
-                        if (Scene.isURL(url)) {
-                            if (!Scene.isJSONObject(url)) {
-                                source = url.url;
-                            }
-                            if (Scene.isWithOptions(url)) {
-                                opts = _extends({}, opts, url.options || {});
-                            }
-                        }
-                        if (_this.assetManager) {
-                            _this.assetManager.updateOptions(opts);
-                        } else {
-                            _this.assetManager = new AssetManager(opts);
-                        }
-                        return [
-                            4,
-                            _this.assetManager.loadScene(source, _this.renderer, {
-                                env: _this.env
-                            })
-                        ];
-                    case 1:
-                        scene = _state.sent();
-                        engine = _this.renderer.engine;
-                        // TODO 多 json 之间目前不共用资源，如果后续需要多 json 共用，这边缓存机制需要额外处理
-                        engine.clearResources();
-                        engine.addPackageDatas(scene);
-                        for(i = 0; i < scene.textureOptions.length; i++){
-                            scene.textureOptions[i] = engine.assetLoader.loadGUID(scene.textureOptions[i].id);
-                            scene.textureOptions[i].initialize();
-                        }
-                        if (!engine.database) return [
-                            3,
-                            3
-                        ];
-                        return [
-                            4,
-                            engine.createVFXItems(scene)
-                        ];
-                    case 2:
-                        _state.sent();
-                        _state.label = 3;
-                    case 3:
-                        composition = new ThreeComposition(_extends({}, opts, {
-                            width: _this.width,
-                            height: _this.height,
-                            renderer: _this.renderer,
-                            handleItemMessage: function(message) {
-                                _this.dispatchEvent({
-                                    type: "message",
-                                    message: message
-                                });
-                            }
-                        }), scene);
-                        composition.on("end", function() {
-                            _this.dispatchEvent({
-                                type: "end",
-                                composition: composition
-                            });
-                        });
-                        _this.renderer.engine.setOptions({
-                            threeCamera: _this.camera,
-                            threeGroup: _this,
-                            composition: composition
-                        });
-                        if (opts.autoplay) {
-                            composition.play();
-                        } else {
-                            composition.pause();
-                        }
-                        firstFrameTime = performance.now() - last + composition.statistic.loadTime;
-                        composition.statistic.firstFrameTime = firstFrameTime;
-                        logger.info("First frame: [" + composition.name + "]" + firstFrameTime.toFixed(4) + "ms.");
-                        _this.compositions.push(composition);
-                        return [
-                            2,
-                            composition
-                        ];
-                }
-            });
-        })();
-    };
     /**
    *
    * @param delta
@@ -33723,7 +33694,7 @@ setMaxSpriteMeshItemCount(8);
  */ Mesh.create = function(engine, props) {
     return new ThreeMesh(engine, props);
 };
-var version = "2.3.0-beta.3";
+var version = "2.3.1";
 logger.info("THREEJS plugin version: " + version + ".");
 
 export { AbstractPlugin, ActivationPlayable, ActivationPlayableAsset, ActivationTrack, AnimationClip, AnimationClipPlayable, Asset, AssetLoader, AssetManager, AssetService, BYTES_TYPE_MAP, BaseRenderComponent, Behaviour, BezierCurve, BezierCurvePath, BezierCurveQuat, BinaryAsset, COMPRESSED_TEXTURE, CONSTANT_MAP_BLEND, CONSTANT_MAP_DEPTH, CONSTANT_MAP_STENCIL_FUNC, CONSTANT_MAP_STENCIL_OP, COPY_FRAGMENT_SHADER, COPY_MESH_SHADER_ID, COPY_VERTEX_SHADER, CalculateLoader, Camera, CameraController, CameraVFXItemLoader, ColorCurve, ColorPropertyPlayableAsset, ColorPropertyTrack, Component, Composition, CompositionComponent, CompositionSourceManager, DEFAULT_FONTS, DEFAULT_FPS, Database, DestroyOptions, Downloader, EFFECTS_COPY_MESH_NAME, EVENT_TYPE_CLICK, EVENT_TYPE_TOUCH_END, EVENT_TYPE_TOUCH_MOVE, EVENT_TYPE_TOUCH_START, EffectComponent, EffectsObject, EffectsPackage, Engine, EventEmitter, EventSystem, Fake3DAnimationMode, Fake3DComponent, FilterMode, Float16ArrayWrapper, FloatPropertyPlayableAsset, FloatPropertyTrack, Framebuffer, GLSLVersion, GPUCapability, Geometry, GlobalUniforms, GradientValue, HELP_LINK, HitTestType, InteractComponent, InteractLoader, InteractMesh, Item, KTXTexture, LineSegments, LinearValue, Material, MaterialDataBlock, MaterialRenderType, MaterialTrack, Mesh, MeshCollider, ObjectBindingTrack, OrderType, PLAYER_OPTIONS_ENV_EDITOR, POST_PROCESS_SETTINGS, ParticleBehaviourPlayable, ParticleBehaviourPlayableAsset, ParticleLoader, ParticleMesh, ParticleSystem, ParticleSystemRenderer, ParticleTrack, PassTextureCache, PathSegments, PluginSystem, PostProcessVolume, PropertyTrack, RENDER_PASS_NAME_PREFIX, RENDER_PREFER_LOOKUP_TEXTURE, RUNTIME_ENV, RandomSetValue, RandomValue, RandomVectorValue, RenderFrame, RenderPass, RenderPassAttachmentStorageType, RenderPassDestroyAttachmentType, RenderPassPriorityNormal, RenderPassPriorityPostprocess, RenderPassPriorityPrepare, RenderTargetHandle, RenderTextureFormat, Renderbuffer, Renderer, RendererComponent, RuntimeClip, SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_0, SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_SIZE_0, SEMANTIC_PRE_COLOR_ATTACHMENT_0, SEMANTIC_PRE_COLOR_ATTACHMENT_SIZE_0, SPRITE_VERTEX_STRIDE, Scene, SemanticMap, SerializationHelper, Shader, ShaderCompileResultStatus, ShaderFactory, ShaderType, ShaderVariant, ShapeComponent, SpriteColorPlayableAsset, SpriteColorTrack, SpriteComponent, SpriteLoader, StaticValue, SubCompositionPlayableAsset, SubCompositionTrack, TEMPLATE_USE_OFFSCREEN_CANVAS, TEXTURE_UNIFORM_MAP, TextComponent, TextComponentBase, TextLayout, TextLoader, TextStyle, Texture, TextureFactory, TextureLoadAction, TextureSourceType, TextureStoreAction, ThreeComposition, ThreeDisplayObject, ThreeEngine, ThreeMaterial, ThreeSpriteComponent, ThreeTextComponent, ThreeTexture, Ticker, TimelineAsset, TimelineClip, TimelinePlayable, TrackAsset, TrackSortWrapper, TrackType, Transform, TransformAnimationPlayable, TransformPlayableAsset, TransformTrack, VFXItem, ValueGetter, Vector2Curve, Vector2PropertyPlayableAsset, Vector2PropertyTrack, Vector4Curve, Vector4PropertyPlayableAsset, Vector4PropertyTrack, addByOrder, addItem, addItemWithOrder, applyMixins, assertExist, asserts, base64ToFile, blend, calculateTranslation, canvasPool, colorGradingFrag, colorStopsFromGradient, colorToArr$1 as colorToArr, combineImageTemplate, createCopyShader, createGLContext, createKeyFrameMeta, createShape, createValueGetter, decimalEqual, defaultPlugins, deserializeMipmapTexture, earcut, effectsClass, effectsClassStore, enlargeBuffer, ensureFixedNumber, ensureVec3, findPreviousRenderPass, gaussianDown_frag as gaussianDownFrag, gaussianDownHFrag, gaussianDownVFrag, gaussianUpFrag, generateEmptyTypedArray, generateGUID, generateHalfFloatTexture, generateTransparentTexture, generateWhiteTexture, getBackgroundImage, getColorFromGradientStops, getConfig, getDefaultTextureFactory, getGeometryByShape, getGeometryTriangles, getImageItemRenderInfo, getKTXTextureOptions, getKeyFrameMetaByRawValue, getMergedStore, getParticleMeshShader, getPixelRatio, getPreMultiAlpha, getStandardComposition, getStandardImage, getStandardItem, getStandardJSON, getTextureSize, glContext, glType2VertexFormatType, gpuTimer, imageDataFromColor, imageDataFromGradient, initErrors, initGLContext, integrate, interpolateColor, isAlipayMiniApp, isAndroid, isArray, isCanvas, isFunction, isIOS, isIOSByUA, isMiniProgram, isObject, isSimulatorCellPhone, isString, isUniformStruct, isUniformStructArray, isValidFontFamily, isWebGL2, isWechatMiniApp, itemFrag, itemFrameFrag, itemVert, loadAVIFOptional, loadBinary, loadBlob, loadImage, loadMedia, loadVideo, loadWebPOptional, logger, index as math, maxSpriteMeshItemCount, modifyMaxKeyframeShader, nearestPowerOfTwo, noop, normalizeColor, numberToFix, parsePercent$1 as parsePercent, particleFrag, particleOriginTranslateMap$1 as particleOriginTranslateMap, particleUniformTypeMap, particleVert, passRenderLevel, pluginLoaderMap, randomInRange, registerPlugin, removeItem, rotateVec2, screenMeshVert, serialize, setBlendMode, setConfig, setDefaultTextureFactory, setMaskMode, setMaxSpriteMeshItemCount, setRayFromCamera, setSideMode, setSpriteMeshMaxItemCountByGPU, setUniformValue, sortByOrder, index$1 as spec, spriteMeshShaderFromFilter, spriteMeshShaderFromRenderInfo, spriteMeshShaderIdFromRenderInfo, thresholdFrag, throwDestroyedError, trailVert, translatePoint, trianglesFromRect, unregisterPlugin, valIfUndefined, value, valueDefine, vecFill, vecMulCombine, version, vertexFormatType2GLType };