@galacean/effects-core 2.3.0-alpha.0 → 2.3.0-alpha.1

package/dist/components/base-render-component.d.ts

@@ -6,6 +6,7 @@ import type { GeometryDrawMode, Renderer } from '../render';
 import { Geometry } from '../render';
 import type { Engine } from '../engine';
 import type { BoundingBoxTriangle, HitTestTriangleParams } from '../plugins';
+import type { MaterialProps } from '../material';
 import { Material } from '../material';
 import type { GeometryFromShape } from '../shape';
 /**
@@ -102,6 +103,7 @@ export declare class BaseRenderComponent extends RendererComponent {
         atlasOffset: number[];
     };
     protected createGeometry(mode: GeometryDrawMode): Geometry;
+    protected getMaterialProps(renderInfo: ItemRenderInfo, count: number): MaterialProps;
     protected createMaterial(renderInfo: ItemRenderInfo, count: number): Material;
     getTextures(): Texture[];
     /**

package/dist/components/shape-component.d.ts

@@ -1,6 +1,91 @@
 import * as spec from '@galacean/effects-specification';
 import type { Engine } from '../engine';
 import { MeshComponent } from './mesh-component';
+interface ShapeAttribute {
+    /**
+     * 矢量图形类型
+     */
+    type: spec.ShapePrimitiveType;
+    /**
+     * 填充属性
+     */
+    fill?: spec.ShapeFillParam;
+}
+/**
+ * 椭圆组件参数
+ */
+export interface EllipseAttribute extends ShapeAttribute {
+    type: spec.ShapePrimitiveType.Ellipse;
+    /**
+     * x 轴半径
+     * -- TODO 后续完善类型
+     * -- TODO 可以看一下用xRadius/yRadius 还是 width/height
+     */
+    xRadius: number;
+    /**
+     * y 轴半径
+     */
+    yRadius: number;
+}
+/**
+ * 矩形参数
+ */
+export interface RectangleAttribute extends ShapeAttribute {
+    /**
+     * 宽度
+     */
+    width: number;
+    /**
+     * 高度
+     */
+    height: number;
+    /**
+     * 角点元素
+     */
+    roundness: number;
+}
+/**
+ * 星形参数
+ */
+export interface StarAttribute extends ShapeAttribute {
+    /**
+     * 顶点数 - 内外顶点同数
+     */
+    pointCount: number;
+    /**
+     * 内径
+     */
+    innerRadius: number;
+    /**
+     * 外径
+     */
+    outerRadius: number;
+    /**
+     * 内径点圆度
+     */
+    innerRoundness: number;
+    /**
+     * 外径点圆度
+     */
+    outerRoundness: number;
+}
+/**
+ * 多边形参数
+ */
+export interface PolygonAttribute extends ShapeAttribute {
+    /**
+     * 顶点数
+     */
+    pointCount: number;
+    /**
+     * 外切圆半径
+     */
+    radius: number;
+    /**
+     * 角点圆度
+     */
+    roundness: number;
+}
 /**
  * 图形组件
  * @since 2.1.0
@@ -9,12 +94,12 @@ export declare class ShapeComponent extends MeshComponent {
     isStroke: boolean;
     private graphicsPath;
     private curveValues;
-    private data;
     private shapeDirty;
     private strokeAttributes;
+    private shapeAttribute;
     private vert;
     private frag;
-    get path(): spec.CustomShapeData;
+    get shape(): ShapeAttribute;
     /**
      *
      * @param engine
@@ -27,3 +112,4 @@ export declare class ShapeComponent extends MeshComponent {
     private setFillColor;
     fromData(data: spec.ShapeComponentData): void;
 }
+export {};

package/dist/index.js

@@ -3,7 +3,7 @@
  * Description: Galacean Effects runtime core for the web
  * Author: Ant Group CO., Ltd.
  * Contributors: 燃然,飂兮,十弦,云垣,茂安,意绮
- * Version: v2.3.0-alpha.0
+ * Version: v2.3.0-alpha.1
  */
 
 'use strict';
@@ -10186,7 +10186,7 @@ var integrate = "float calculateMovement(float t,vec2 p1,vec2 p2,vec2 p3,vec2 p4
 
 var itemVert = "precision highp float;attribute vec2 atlasOffset;attribute vec3 aPos;varying vec2 vTexCoord;varying vec3 vParams;varying vec4 vColor;uniform vec2 _Size;uniform vec3 _Scale;uniform vec4 _Color;uniform vec4 _TexParams;uniform vec4 _TexOffset;uniform mat4 effects_MatrixVP;uniform mat4 effects_ObjectToWorld;uniform mat4 effects_MatrixV;\n#ifdef ENV_EDITOR\nuniform vec4 uEditorTransform;\n#endif\nvoid main(){vec4 texParams=_TexParams;vTexCoord=vec2(atlasOffset.xy*_TexOffset.zw+_TexOffset.xy);vColor=_Color;vParams=vec3(0.0,texParams.y,texParams.x);if(texParams.z==1.0){vec4 pos=vec4(aPos.xy*_Size,aPos.z,1.0);gl_Position=effects_MatrixVP*effects_ObjectToWorld*pos;}else{mat4 view=effects_MatrixV;vec3 camRight=vec3(view[0][0],view[1][0],view[2][0]);vec3 camUp=vec3(view[0][1],view[1][1],view[2][1]);vec3 worldPosition=vec3(effects_ObjectToWorld*vec4(0.0,0.0,0.0,1.0));vec3 vertexPosition=worldPosition+camRight*aPos.x*_Size.x*_Scale.x+camUp*aPos.y*_Size.y*_Scale.y;gl_Position=effects_MatrixVP*vec4(vertexPosition,1.0);}\n#ifdef ENV_EDITOR\ngl_Position=vec4(gl_Position.xy*uEditorTransform.xy+uEditorTransform.zw*gl_Position.w,gl_Position.zw);\n#endif\n}";
 
-var itemFrag = "precision highp float;varying vec4 vColor;varying vec2 vTexCoord;varying vec3 vParams;uniform sampler2D _MainTex;vec4 blendColor(vec4 color,vec4 vc,float mode){vec4 ret=color*vc;float alpha=ret.a;if(mode==1.){ret.rgb*=alpha;}else if(mode==2.){ret.rgb*=alpha;ret.a=dot(ret.rgb,vec3(0.33333333));}else if(mode==3.){alpha=color.r*alpha;ret=vec4(vc.rgb*alpha,alpha);}return ret;}void main(){vec4 color=vec4(0.);vec4 texColor=texture2D(_MainTex,vTexCoord.xy);color=blendColor(texColor,vColor,floor(0.5+vParams.y));\n#ifdef ALPHA_CLIP\nif(vParams.z==0.&&color.a<0.04){discard;}\n#endif\ncolor.a=clamp(color.a,0.0,1.0);gl_FragColor=color;}";
+var itemFrag = "precision highp float;varying vec4 vColor;varying vec2 vTexCoord;varying vec3 vParams;uniform sampler2D _MainTex;vec4 blendColor(vec4 color,vec4 vc,float mode){vec4 ret=color*vc;float alpha=ret.a;if(mode==1.){ret.rgb*=alpha;}else if(mode==2.){ret.rgb*=alpha;ret.a=dot(ret.rgb,vec3(0.33333333));}else if(mode==3.){alpha=color.r*alpha;ret=vec4(vc.rgb*alpha,alpha);}return ret;}void main(){vec4 color=vec4(0.);\n#ifdef TRANSPARENT_VIDEO\nvec2 uv_rgb=vec2(vTexCoord.x*0.5000,vTexCoord.y);vec2 uv_alpha=vec2(vTexCoord.x*0.5000+0.5000,vTexCoord.y);vec3 rgb=texture2D(_MainTex,uv_rgb).rgb;float alpha=texture2D(_MainTex,uv_alpha).r;vec4 texColor=vec4(rgb/alpha,alpha);\n#else\nvec4 texColor=texture2D(_MainTex,vTexCoord.xy);\n#endif\ncolor=blendColor(texColor,vColor,floor(0.5+vParams.y));\n#ifdef ALPHA_CLIP\nif(vParams.z==0.&&color.a<0.04){discard;}\n#endif\ncolor.a=clamp(color.a,0.0,1.0);gl_FragColor=color;}";
 
 var particleFrag = "#version 100\nprecision mediump float;vec4 blendColor(vec4 color,vec4 vc,float mode){vec4 ret=color*vc;float alpha=ret.a;if(mode==1.){ret.rgb*=alpha;}else if(mode==2.){ret.rgb*=alpha;ret.a=dot(ret.rgb,vec3(0.33333333));}else if(mode==3.){alpha=color.r*alpha;ret=vec4(vc.rgb*alpha,alpha);}return ret;}\n#define PATICLE_SHADER 1\nvarying float vLife;varying vec2 vTexCoord;varying vec4 vColor;uniform vec3 emissionColor;uniform float emissionIntensity;uniform sampler2D uMaskTex;uniform vec4 uColorParams;uniform vec2 uTexOffset;\n#ifdef COLOR_OVER_LIFETIME\nuniform sampler2D uColorOverLifetime;\n#endif\n#ifdef USE_SPRITE\nvarying vec4 vTexCoordBlend;\n#endif\nvarying float vSeed;\n#ifdef PREVIEW_BORDER\nuniform vec4 uPreviewColor;\n#endif\n#ifdef USE_SPRITE\nvec4 getTextureColor(sampler2D tex,vec2 texCoord){if(vTexCoordBlend.w>0.){return mix(texture2D(tex,texCoord),texture2D(tex,vTexCoordBlend.xy+texCoord),vTexCoordBlend.z);}return texture2D(tex,texCoord);}\n#else\n#define getTextureColor texture2D\n#endif\n#ifndef WEBGL2\n#define round(a) floor(0.5+a)\n#endif\n#ifdef PREVIEW_BORDER\nvoid main(){gl_FragColor=uPreviewColor;}\n#else\nvoid main(){vec4 color=vec4(1.0);vec4 tempColor=vColor;vec2 texOffset=uTexOffset;if(vLife<0.){discard;}if(uColorParams.x>0.0){color=getTextureColor(uMaskTex,vTexCoord);}\n#ifdef COLOR_OVER_LIFETIME\n#ifndef ENABLE_VERTEX_TEXTURE\ntempColor*=texture2D(uColorOverLifetime,vec2(vLife,0.));\n#endif\n#endif\ncolor=blendColor(color,tempColor,round(uColorParams.y));if(color.a<=0.01&&uColorParams.w>0.){float _at=texture2D(uMaskTex,vTexCoord+texOffset).a+texture2D(uMaskTex,vTexCoord+texOffset*-1.).a;if(_at<=0.02){discard;}}vec3 emission=emissionColor*pow(2.0,emissionIntensity);color=vec4(pow(pow(color.rgb,vec3(2.2))+emission,vec3(1.0/2.2)),color.a);gl_FragColor=color;}\n#endif\n";
 
@@ -13568,11 +13568,14 @@ var ColorCurve = /*#__PURE__*/ function(ValueGetter) {
             maxVertex: 4
         });
     };
-    _proto.createMaterial = function createMaterial(renderInfo, count) {
-        var side = renderInfo.side, occlusion = renderInfo.occlusion, blending = renderInfo.blending, maskMode = renderInfo.maskMode, mask = renderInfo.mask;
-        var materialProps = {
+    _proto.getMaterialProps = function getMaterialProps(renderInfo, count) {
+        return {
             shader: spriteMeshShaderFromRenderInfo(renderInfo, count, 1)
         };
+    };
+    _proto.createMaterial = function createMaterial(renderInfo, count) {
+        var side = renderInfo.side, occlusion = renderInfo.occlusion, blending = renderInfo.blending, maskMode = renderInfo.maskMode, mask = renderInfo.mask;
+        var materialProps = this.getMaterialProps(renderInfo, count);
         this.preMultiAlpha = getPreMultiAlpha(blending);
         var material = Material.create(this.engine, materialProps);
         var states = {
@@ -16441,6 +16444,13 @@ exports.ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
             join: "miter",
             miterLimit: 10
         };
+        _this.shapeAttribute = {
+            type: ShapePrimitiveType.Custom,
+            points: [],
+            easingIns: [],
+            easingOuts: [],
+            shapes: []
+        };
         return _this;
     }
     var _proto = ShapeComponent.prototype;
@@ -16449,7 +16459,7 @@ exports.ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
     };
     _proto.onUpdate = function onUpdate(dt) {
         if (this.shapeDirty) {
-            this.buildPath(this.data);
+            this.buildPath(this.shapeAttribute);
             this.buildGeometryFromPath(this.graphicsPath.shapePath);
             this.shapeDirty = false;
         }
@@ -16507,17 +16517,16 @@ exports.ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
         this.geometry.setIndexData(indexArray);
         this.geometry.setDrawCount(indices.length);
     };
-    _proto.buildPath = function buildPath(data) {
+    _proto.buildPath = function buildPath(shapeAttribute) {
         this.graphicsPath.clear();
-        var shapeData = data;
-        switch(shapeData.type){
+        switch(shapeAttribute.type){
             case ShapePrimitiveType.Custom:
                 {
-                    var customData = shapeData;
-                    var points = customData.points;
-                    var easingIns = customData.easingIns;
-                    var easingOuts = customData.easingOuts;
-                    for(var _iterator = _create_for_of_iterator_helper_loose(customData.shapes), _step; !(_step = _iterator()).done;){
+                    var customShapeAtribute = this.shapeAttribute;
+                    var points = customShapeAtribute.points;
+                    var easingIns = customShapeAtribute.easingIns;
+                    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 = [];
                         this.setFillColor(shape.fill);
@@ -16550,28 +16559,28 @@ exports.ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
                 }
             case ShapePrimitiveType.Ellipse:
                 {
-                    var ellipseData = shapeData;
+                    var ellipseData = shapeAttribute;
                     this.graphicsPath.ellipse(0, 0, ellipseData.xRadius, ellipseData.yRadius);
                     this.setFillColor(ellipseData.fill);
                     break;
                 }
             case ShapePrimitiveType.Rectangle:
                 {
-                    var rectangleData = shapeData;
+                    var rectangleData = shapeAttribute;
                     this.graphicsPath.rect(-rectangleData.width / 2, -rectangleData.height / 2, rectangleData.width, rectangleData.height);
                     this.setFillColor(rectangleData.fill);
                     break;
                 }
             case ShapePrimitiveType.Star:
                 {
-                    var starData = shapeData;
+                    var starData = shapeAttribute;
                     this.graphicsPath.polyStar(starData.pointCount, starData.outerRadius, starData.innerRadius, starData.outerRoundness, starData.innerRoundness, StarType.Star);
                     this.setFillColor(starData.fill);
                     break;
                 }
             case ShapePrimitiveType.Polygon:
                 {
-                    var polygonData = shapeData;
+                    var polygonData = shapeAttribute;
                     this.graphicsPath.polyStar(polygonData.pointCount, polygonData.radius, polygonData.radius, polygonData.roundness, polygonData.roundness, StarType.Polygon);
                     this.setFillColor(polygonData.fill);
                     break;
@@ -16586,13 +16595,93 @@ exports.ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
     };
     _proto.fromData = function fromData(data) {
         MeshComponent.prototype.fromData.call(this, data);
-        this.data = data;
         this.shapeDirty = true;
         var strokeParam = data.stroke;
         if (strokeParam) {
             this.isStroke = true;
             this.strokeAttributes.width = strokeParam.width;
         }
+        switch(data.type){
+            case ShapePrimitiveType.Custom:
+                {
+                    this.shapeAttribute = {
+                        type: ShapePrimitiveType.Custom,
+                        points: [],
+                        easingIns: [],
+                        easingOuts: [],
+                        shapes: []
+                    };
+                    var customShapeData = data;
+                    var customShapeAttribute = this.shapeAttribute;
+                    for(var _iterator = _create_for_of_iterator_helper_loose(customShapeData.points), _step; !(_step = _iterator()).done;){
+                        var point = _step.value;
+                        customShapeAttribute.points.push(new Vector2(point.x, point.y));
+                    }
+                    for(var _iterator1 = _create_for_of_iterator_helper_loose(customShapeData.easingIns), _step1; !(_step1 = _iterator1()).done;){
+                        var easingIn = _step1.value;
+                        customShapeAttribute.easingIns.push(new Vector2(easingIn.x, easingIn.y));
+                    }
+                    for(var _iterator2 = _create_for_of_iterator_helper_loose(customShapeData.easingOuts), _step2; !(_step2 = _iterator2()).done;){
+                        var easingOut = _step2.value;
+                        customShapeAttribute.easingOuts.push(new Vector2(easingOut.x, easingOut.y));
+                    }
+                    customShapeAttribute.shapes = customShapeData.shapes;
+                    break;
+                }
+            case ShapePrimitiveType.Ellipse:
+                {
+                    var ellipseData = data;
+                    var ellipseAttribute = {
+                        type: ShapePrimitiveType.Ellipse,
+                        xRadius: ellipseData.xRadius,
+                        yRadius: ellipseData.yRadius,
+                        fill: ellipseData.fill
+                    };
+                    this.shapeAttribute = ellipseAttribute;
+                    break;
+                }
+            case ShapePrimitiveType.Rectangle:
+                {
+                    var rectangleData = data;
+                    var rectangleAttribute = {
+                        type: ShapePrimitiveType.Rectangle,
+                        width: rectangleData.width,
+                        height: rectangleData.height,
+                        roundness: rectangleData.roundness,
+                        fill: rectangleData.fill
+                    };
+                    this.shapeAttribute = rectangleAttribute;
+                    break;
+                }
+            case ShapePrimitiveType.Star:
+                {
+                    var starData = data;
+                    var starAttribute = {
+                        type: ShapePrimitiveType.Star,
+                        pointCount: starData.pointCount,
+                        innerRadius: starData.innerRadius,
+                        outerRadius: starData.outerRadius,
+                        innerRoundness: starData.innerRoundness,
+                        outerRoundness: starData.outerRoundness,
+                        fill: starData.fill
+                    };
+                    this.shapeAttribute = starAttribute;
+                    break;
+                }
+            case ShapePrimitiveType.Polygon:
+                {
+                    var polygonData = data;
+                    var polygonAttribute = {
+                        type: ShapePrimitiveType.Polygon,
+                        pointCount: polygonData.pointCount,
+                        radius: polygonData.radius,
+                        roundness: polygonData.roundness,
+                        fill: polygonData.fill
+                    };
+                    this.shapeAttribute = polygonAttribute;
+                    break;
+                }
+        }
         var material = this.material;
         //@ts-expect-error // TODO 新版蒙版上线后重构
         material.stencilRef = data.renderer.mask !== undefined ? [
@@ -16604,10 +16693,10 @@ exports.ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
     };
     _create_class(ShapeComponent, [
         {
-            key: "path",
+            key: "shape",
             get: function get() {
                 this.shapeDirty = true;
-                return this.data;
+                return this.shapeAttribute;
             }
         }
     ]);
@@ -21012,19 +21101,17 @@ exports.ParticleSystem = /*#__PURE__*/ function(Component) {
             rotation: rotation,
             path: path
         };
-        var parentTransform = this.transform.parentTransform;
         var selfPos = position.clone();
         if (path) {
             selfPos.add(path.getValue(0));
         }
         this.transform.setPosition(selfPos.x, selfPos.y, selfPos.z);
-        if (this.options.particleFollowParent && parentTransform) {
-            var worldMatrix = parentTransform.getWorldMatrix();
+        if (this.options.particleFollowParent) {
+            var worldMatrix = this.transform.getWorldMatrix();
             this.renderer.updateWorldMatrix(worldMatrix);
         }
     };
     _proto.updateEmitterTransform = function updateEmitterTransform(time) {
-        var parentTransform = this.transform.parentTransform;
         var _this_basicTransform = this.basicTransform, path = _this_basicTransform.path, position = _this_basicTransform.position;
         var selfPos = position.clone();
         if (path) {
@@ -21032,8 +21119,8 @@ exports.ParticleSystem = /*#__PURE__*/ function(Component) {
             selfPos.add(path.getValue(time / duration));
         }
         this.transform.setPosition(selfPos.x, selfPos.y, selfPos.z);
-        if (this.options.particleFollowParent && parentTransform) {
-            var worldMatrix = parentTransform.getWorldMatrix();
+        if (this.options.particleFollowParent) {
+            var worldMatrix = this.transform.getWorldMatrix();
             this.renderer.updateWorldMatrix(worldMatrix);
         }
     };
@@ -21421,7 +21508,7 @@ exports.ParticleSystem = /*#__PURE__*/ function(Component) {
         var lifetime = this.lifetime;
         var shape = this.shape;
         var speed = options.startSpeed.getValue(lifetime);
-        var matrix4 = options.particleFollowParent ? this.transform.getMatrix() : this.transform.getWorldMatrix();
+        var matrix4 = options.particleFollowParent ? Matrix4.IDENTITY : this.transform.getWorldMatrix();
         var pointPosition = data.position;
         // 粒子的位置受发射器的位置影响，自身的旋转和缩放不受影响
         var position = matrix4.transformPoint(pointPosition, new Vector3());
@@ -24243,7 +24330,7 @@ var SerializationHelper = /*#__PURE__*/ function() {
         this.timelinePlayable.setTime(time);
         // The properties of the object may change dynamically,
         // so reset the track binding to avoid invalidation of the previously obtained binding object.
-        // this.resolveBindings();
+        this.resolveBindings();
         this.timelinePlayable.evaluate();
         this.graph.evaluate(dt);
     };
@@ -24482,7 +24569,10 @@ var Vector4PropertyMixerPlayable = /*#__PURE__*/ function(PropertyMixerPlayable)
     }
     var _proto = Vector4PropertyMixerPlayable.prototype;
     _proto.resetPropertyValue = function resetPropertyValue() {
-        this.propertyValue.setZero();
+        this.propertyValue.x = 0;
+        this.propertyValue.y = 0;
+        this.propertyValue.z = 0;
+        this.propertyValue.w = 0;
     };
     _proto.addWeightedValue = function addWeightedValue(curveValue, weight) {
         var result = this.propertyValue;
@@ -24500,7 +24590,8 @@ var Vector2PropertyMixerPlayable = /*#__PURE__*/ function(PropertyMixerPlayable)
     }
     var _proto = Vector2PropertyMixerPlayable.prototype;
     _proto.resetPropertyValue = function resetPropertyValue() {
-        this.propertyValue.setZero();
+        this.propertyValue.x = 0;
+        this.propertyValue.y = 0;
     };
     _proto.addWeightedValue = function addWeightedValue(curveValue, weight) {
         var result = this.propertyValue;
@@ -31987,7 +32078,7 @@ registerPlugin("sprite", SpriteLoader, exports.VFXItem, true);
 registerPlugin("particle", ParticleLoader, exports.VFXItem, true);
 registerPlugin("cal", CalculateLoader, exports.VFXItem, true);
 registerPlugin("interact", InteractLoader, exports.VFXItem, true);
-var version = "2.3.0-alpha.0";
+var version = "2.3.0-alpha.1";
 logger.info("Core version: " + version + ".");
 
 exports.AbstractPlugin = AbstractPlugin;