@galacean/effects-core 2.7.0-alpha.1 → 2.7.0-alpha.2

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

@@ -8,29 +8,28 @@ import type { Renderer } from '../render';
 import type { GradientValue } from '../math';
 import { RendererComponent } from './renderer-component';
 import type { Texture } from '../texture/texture';
-export declare enum FillType {
-    Solid = 0,
-    GradientLinear = 1,
-    GradientRadial = 2,
-    GradientAngular = 3,
-    Texture = 4
-}
 export interface SolidPaint {
-    type: FillType.Solid;
+    type: spec.FillType.Solid;
     color: Color;
 }
 export interface GradientPaint {
-    type: FillType.GradientLinear | FillType.GradientAngular | FillType.GradientRadial;
+    type: spec.FillType.GradientLinear | spec.FillType.GradientAngular | spec.FillType.GradientRadial;
     gradientStops: GradientValue;
     startPoint: Vector2;
     endPoint: Vector2;
 }
+export interface TextureTransform {
+    offset: Vector2;
+    rotation: number;
+    scale: Vector2;
+}
 export interface TexturePaint {
-    type: FillType.Texture;
+    type: spec.FillType.Texture;
     texture: Texture;
     scaleMode: TexturePaintScaleMode;
     scalingFactor: number;
     opacity: number;
+    textureTransform: TextureTransform;
 }
 export declare enum TexturePaintScaleMode {
     Fill = 0,
@@ -131,6 +130,9 @@ export declare class ShapeComponent extends RendererComponent implements Maskabl
     private graphicsPath;
     private fills;
     private strokeAttributes;
+    private strokeWidth;
+    private strokeCap;
+    private strokeJoin;
     private strokes;
     private shapeAttributes;
     /**
@@ -161,34 +163,4 @@ export declare class ShapeComponent extends RendererComponent implements Maskabl
     private createPaint;
     onApplyAnimationProperties(): void;
 }
-export type PaintData = SolidPaintData | GradientPaintData | TexturePaintData;
-export interface SolidPaintData {
-    type: FillType.Solid;
-    /**
-     * 填充颜色
-     */
-    color: spec.ColorData;
-}
-export interface GradientPaintData {
-    type: FillType.GradientLinear | FillType.GradientAngular | FillType.GradientRadial;
-    /**
-     * 渐变颜色
-     */
-    gradientStops: spec.GradientColor;
-    /**
-     * 渐变起点
-     */
-    startPoint: spec.Vector2Data;
-    /**
-     * 渐变终点
-     */
-    endPoint: spec.Vector2Data;
-}
-export interface TexturePaintData {
-    type: FillType.Texture;
-    texture: spec.DataPath;
-    scaleMode: TexturePaintScaleMode;
-    scalingFactor?: number;
-    opacity?: number;
-}
 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.7.0-alpha.1
+ * Version: v2.7.0-alpha.2
  */
 
 'use strict';
@@ -3734,20 +3734,21 @@ var BuiltinObjectGUID = {
     UnlitShader: "unlit000000000000000000000000000"
 };
 
-/**
- * 填充类型
- */ var FillType;
+var FillType;
 (function(FillType) {
-    /**
-     * 纯色
-     */ FillType[FillType["Solid"] = 0] = "Solid";
-    /**
-     * 线性渐变
-     */ FillType[FillType["LinearGradient"] = 1] = "LinearGradient";
-    /**
-     * 径向渐变
-     */ FillType[FillType["RadialGradient"] = 2] = "RadialGradient";
+    FillType[FillType["Solid"] = 0] = "Solid";
+    FillType[FillType["GradientLinear"] = 1] = "GradientLinear";
+    FillType[FillType["GradientRadial"] = 2] = "GradientRadial";
+    FillType[FillType["GradientAngular"] = 3] = "GradientAngular";
+    FillType[FillType["Texture"] = 4] = "Texture";
 })(FillType || (FillType = {}));
+var TexturePaintScaleMode;
+(function(TexturePaintScaleMode) {
+    TexturePaintScaleMode[TexturePaintScaleMode["Fill"] = 0] = "Fill";
+    TexturePaintScaleMode[TexturePaintScaleMode["Fit"] = 1] = "Fit";
+    TexturePaintScaleMode[TexturePaintScaleMode["Crop"] = 2] = "Crop";
+    TexturePaintScaleMode[TexturePaintScaleMode["Tile"] = 3] = "Tile";
+})(TexturePaintScaleMode || (TexturePaintScaleMode = {}));
 
 /**
  * 矢量图形类型
@@ -4017,6 +4018,7 @@ var index$1 = /*#__PURE__*/Object.freeze({
     get FontStyle () { return FontStyle; },
     BuiltinObjectGUID: BuiltinObjectGUID,
     get FillType () { return FillType; },
+    get TexturePaintScaleMode () { return TexturePaintScaleMode; },
     get ShapePrimitiveType () { return ShapePrimitiveType; },
     get LineCap () { return LineCap; },
     get LineJoin () { return LineJoin; },
@@ -16240,16 +16242,8 @@ var ColorCurve = /*#__PURE__*/ function(ValueGetter) {
 
 var vert = "precision highp float;attribute vec3 aPos;attribute vec2 aUV;varying vec2 uv0;uniform mat4 effects_MatrixVP;uniform mat4 effects_MatrixInvV;uniform mat4 effects_ObjectToWorld;void main(){vec4 pos=vec4(aPos.xyz,1.0);uv0=aUV;gl_Position=effects_MatrixVP*effects_ObjectToWorld*pos;}";
 
-var frag = "precision highp float;\n#define _MAX_STOPS 8\n#define PI 3.14159265359\nuniform vec4 _Color;uniform vec4 _Colors[_MAX_STOPS];uniform float _Stops[_MAX_STOPS];uniform int _StopsCount;uniform float _FillType;uniform vec2 _StartPoint;uniform vec2 _EndPoint;uniform sampler2D _ImageTex;uniform vec2 _ImageSize;uniform vec2 _DestSize;uniform int _ImageScaleMode;uniform mat3 _ImageTransform;uniform float _ImageScalingFactor;uniform float _ImageOpacity;varying vec2 uv0;vec4 smoothMix(vec4 a,vec4 b,float t){return mix(a,b,smoothstep(0.0,1.0,t));}float calculateAngleRatio(vec2 v1,vec2 v2){float angle=atan(v2.y,v2.x)-atan(v1.y,v1.x);if(angle<0.0)angle+=2.0*PI;return angle/(2.0*PI);}vec2 applyTransform(mat3 m,vec2 uv){vec3 p=m*vec3(uv,1.0);return p.xy;}void main(){vec4 finalColor=vec4(1.0);if(_FillType==0.0){finalColor=_Color;}else if(_FillType==1.0||_FillType==2.0||_FillType==3.0){float t=0.0;if(_FillType==1.0){vec2 gradientVector=_EndPoint-_StartPoint;vec2 pixelVector=uv0-_StartPoint;float denom=max(dot(gradientVector,gradientVector),1e-6);t=clamp(dot(pixelVector,gradientVector)/denom,0.0,1.0);}else if(_FillType==2.0){float maxRadius=max(distance(_EndPoint,_StartPoint),0.001);t=clamp(distance(uv0,_StartPoint)/maxRadius,0.0,1.0);}else{vec2 center=_StartPoint;vec2 referenceVector=_EndPoint-center;vec2 targetVector=uv0-center;if(length(targetVector)>0.001){t=calculateAngleRatio(referenceVector,targetVector);}}finalColor=_Colors[0];for(int i=1;i<_MAX_STOPS;i++){if(i>=_StopsCount)break;float prevStop=_Stops[i-1];float currStop=_Stops[i];if(t>=prevStop&&t<=currStop){float localT=(t-prevStop)/max(currStop-prevStop,1e-6);finalColor=smoothMix(_Colors[i-1],_Colors[i],localT);break;}}}else if(_FillType==4.0){vec2 uv=uv0;float rSrc=_ImageSize.x/max(_ImageSize.y,1.0);float rDst=_DestSize.x/max(_DestSize.y,1.0);bool maskOutside=false;if(_ImageScaleMode==0){vec2 scale=vec2(1.0);if(rDst>rSrc){scale=vec2(1.0,rSrc/rDst);}else{scale=vec2(rDst/rSrc,1.0);}uv=(uv-0.5)*scale+0.5;uv=clamp(uv,0.0,1.0);}else if(_ImageScaleMode==1){vec2 scale=vec2(1.0);if(rDst>rSrc){scale=vec2(rSrc/rDst,1.0);}else{scale=vec2(1.0,rSrc/rDst);}uv=(uv-0.5)*scale+0.5;maskOutside=true;}else if(_ImageScaleMode==2){uv=applyTransform(_ImageTransform,uv0);maskOutside=true;}else if(_ImageScaleMode==3){float aspectFix=rDst/max(rSrc,1e-6);vec2 uvTile=(uv0-0.5)*vec2(aspectFix,1.0)+0.5;float s=max(abs(_ImageScalingFactor),1e-6);uv=fract(uvTile*s);}vec4 img=texture2D(_ImageTex,uv);if(maskOutside){if(uv.x<0.0||uv.x>1.0||uv.y<0.0||uv.y>1.0){img.a=0.0;}}img.a*=_ImageOpacity;finalColor=img;}finalColor.rgb*=finalColor.a;gl_FragColor=finalColor;}";
+var frag = "precision highp float;\n#define _MAX_STOPS 8\n#define PI 3.14159265359\nuniform vec4 _Color;uniform vec4 _Colors[_MAX_STOPS];uniform float _Stops[_MAX_STOPS];uniform int _StopsCount;uniform float _FillType;uniform vec2 _StartPoint;uniform vec2 _EndPoint;uniform sampler2D _ImageTex;uniform vec2 _ImageSize;uniform vec2 _DestSize;uniform int _ImageScaleMode;uniform mat3 _TextureTransform;uniform float _ImageScalingFactor;uniform float _ImageOpacity;varying vec2 uv0;vec4 smoothMix(vec4 a,vec4 b,float t){return mix(a,b,smoothstep(0.0,1.0,t));}float calculateAngleRatio(vec2 v1,vec2 v2){float angle=atan(v2.y,v2.x)-atan(v1.y,v1.x);if(angle<0.0)angle+=2.0*PI;return angle/(2.0*PI);}vec2 applyTransform(mat3 m,vec2 uv){uv=uv-vec2(0.5,0.5);vec3 p=m*vec3(uv,1.0);p.xy=p.xy+vec2(0.5,0.5);return p.xy;}void main(){vec4 finalColor=vec4(1.0);if(_FillType==0.0){finalColor=_Color;}else if(_FillType==1.0||_FillType==2.0||_FillType==3.0){float t=0.0;if(_FillType==1.0){vec2 gradientVector=_EndPoint-_StartPoint;vec2 pixelVector=uv0-_StartPoint;float denom=max(dot(gradientVector,gradientVector),1e-6);t=clamp(dot(pixelVector,gradientVector)/denom,0.0,1.0);}else if(_FillType==2.0){float maxRadius=max(distance(_EndPoint,_StartPoint),0.001);t=clamp(distance(uv0,_StartPoint)/maxRadius,0.0,1.0);}else{vec2 center=_StartPoint;vec2 referenceVector=_EndPoint-center;vec2 targetVector=uv0-center;if(length(targetVector)>0.001){t=calculateAngleRatio(referenceVector,targetVector);}}finalColor=_Colors[0];for(int i=1;i<_MAX_STOPS;i++){if(i>=_StopsCount)break;float prevStop=_Stops[i-1];float currStop=_Stops[i];if(t>=prevStop&&t<=currStop){float localT=(t-prevStop)/max(currStop-prevStop,1e-6);finalColor=smoothMix(_Colors[i-1],_Colors[i],localT);break;}}}else if(_FillType==4.0){vec2 uv=uv0;float rSrc=_ImageSize.x/max(_ImageSize.y,1.0);float rDst=_DestSize.x/max(_DestSize.y,1.0);bool maskOutside=false;if(_ImageScaleMode==0){vec2 scale=vec2(1.0);if(rDst>rSrc){scale=vec2(1.0,rSrc/rDst);}else{scale=vec2(rDst/rSrc,1.0);}uv=(uv-0.5)*scale+0.5;uv=clamp(uv,0.0,1.0);}else if(_ImageScaleMode==1){vec2 scale=vec2(1.0);if(rDst>rSrc){scale=vec2(rSrc/rDst,1.0);}else{scale=vec2(1.0,rSrc/rDst);}uv=(uv-0.5)*scale+0.5;maskOutside=true;}else if(_ImageScaleMode==2){uv=applyTransform(_TextureTransform,uv0);maskOutside=true;}else if(_ImageScaleMode==3){float aspectFix=rDst/max(rSrc,1e-6);vec2 uvTile=(uv0-0.5)*vec2(aspectFix,1.0)+0.5;float s=max(abs(_ImageScalingFactor),1e-6);uv=fract(uvTile*s);}vec4 img=texture2D(_ImageTex,uv);if(maskOutside){if(uv.x<0.0||uv.x>1.0||uv.y<0.0||uv.y>1.0){img.a=0.0;}}img.a*=_ImageOpacity;finalColor=img;}finalColor.rgb*=finalColor.a;gl_FragColor=finalColor;}";
 
-exports.FillType = void 0;
-(function(FillType) {
-    FillType[FillType["Solid"] = 0] = "Solid";
-    FillType[FillType["GradientLinear"] = 1] = "GradientLinear";
-    FillType[FillType["GradientRadial"] = 2] = "GradientRadial";
-    FillType[FillType["GradientAngular"] = 3] = "GradientAngular";
-    FillType[FillType["Texture"] = 4] = "Texture";
-})(exports.FillType || (exports.FillType = {}));
 exports.TexturePaintScaleMode = void 0;
 (function(TexturePaintScaleMode) {
     TexturePaintScaleMode[TexturePaintScaleMode["Fill"] = 0] = "Fill";
@@ -16275,6 +16269,9 @@ exports.ShapeComponent = /*#__PURE__*/ function(RendererComponent) {
             join: LineJoin.Miter,
             miterLimit: 10
         };
+        _this.strokeWidth = 1;
+        _this.strokeCap = LineCap.Butt;
+        _this.strokeJoin = LineJoin.Miter;
         _this.strokes = [];
         /**
    * 用于点击测试的碰撞器
@@ -16308,12 +16305,12 @@ exports.ShapeComponent = /*#__PURE__*/ function(RendererComponent) {
         // Create Shape Attrributes
         //-------------------------------------------------------------------------
         var gradientStrokeFill = {
-            type: 0,
+            type: FillType.Solid,
             color: new Color(1, 1, 1, 1)
         };
         _this.strokes.push(gradientStrokeFill);
         var gradientLayerFill = {
-            type: 0,
+            type: FillType.Solid,
             color: new Color(1, 1, 1, 1)
         };
         _this.fills.push(gradientLayerFill);
@@ -16477,6 +16474,9 @@ exports.ShapeComponent = /*#__PURE__*/ function(RendererComponent) {
                 indices.length;
                 var vertOffset1 = vertices.length / 2;
                 var lineStyle = this.strokeAttributes;
+                lineStyle.cap = this.strokeCap;
+                lineStyle.join = this.strokeJoin;
+                lineStyle.width = this.strokeWidth;
                 var close = true;
                 if (this.shapeAttributes.type === ShapePrimitiveType.Custom) {
                     close = shape1.closePath;
@@ -16641,11 +16641,11 @@ exports.ShapeComponent = /*#__PURE__*/ function(RendererComponent) {
     };
     _proto.updatePaintMaterial = function updatePaintMaterial(material, paint) {
         material.setFloat("_FillType", paint.type);
-        if (paint.type === 0) {
+        if (paint.type === FillType.Solid) {
             material.color = paint.color;
-        } else if (paint.type === 1 || paint.type === 3 || paint.type === 2) {
+        } else if (paint.type === FillType.GradientLinear || paint.type === FillType.GradientAngular || paint.type === FillType.GradientRadial) {
             this.updateGradientMaterial(material, paint.gradientStops, paint.startPoint, paint.endPoint);
-        } else if (paint.type === 4) {
+        } else if (paint.type === FillType.Texture) {
             material.setInt("_ImageScaleMode", paint.scaleMode);
             material.setVector2("_ImageSize", new Vector2(paint.texture.getWidth(), paint.texture.getHeight()));
             var boundingBox = this.getBoundingBox();
@@ -16655,6 +16655,8 @@ exports.ShapeComponent = /*#__PURE__*/ function(RendererComponent) {
             material.setFloat("_ImageOpacity", paint.opacity);
             material.setFloat("_ImageScalingFactor", paint.scalingFactor);
             material.setTexture("_ImageTex", paint.texture);
+            var transform = paint.textureTransform;
+            material.setMatrix3("_TextureTransform", new Matrix3().scale(transform.scale.x, transform.scale.y).rotate(transform.rotation).translate(transform.offset.x, transform.offset.y).invert());
         }
     };
     _proto.updateGradientMaterial = function updateGradientMaterial(material, gradient, startPoint, endPoint) {
@@ -16690,17 +16692,12 @@ exports.ShapeComponent = /*#__PURE__*/ function(RendererComponent) {
             side: (_renderer_side = renderer.side) != null ? _renderer_side : SideMode.DOUBLE,
             mask: this.maskManager.getRefValue()
         };
-        var strokeAttributes = data.stroke;
-        if (strokeAttributes) {
-            this.strokeAttributes = {
-                width: strokeAttributes.width,
-                alignment: 0.5,
-                cap: strokeAttributes.cap,
-                join: strokeAttributes.join,
-                miterLimit: 10
-            };
-        }
-        //@ts-expect-error
+        var _data_strokeCap;
+        this.strokeCap = (_data_strokeCap = data.strokeCap) != null ? _data_strokeCap : LineCap.Butt;
+        var _data_strokeWidth;
+        this.strokeWidth = (_data_strokeWidth = data.strokeWidth) != null ? _data_strokeWidth : 1;
+        var _data_strokeJoin;
+        this.strokeJoin = (_data_strokeJoin = data.strokeJoin) != null ? _data_strokeJoin : LineJoin.Miter;
         for(var _iterator = _create_for_of_iterator_helper_loose(data.strokes), _step; !(_step = _iterator()).done;){
             var stroke = _step.value;
             var strokeParam = stroke;
@@ -16709,7 +16706,6 @@ exports.ShapeComponent = /*#__PURE__*/ function(RendererComponent) {
                 this.strokes[0] = this.createPaint(strokeParam);
             }
         }
-        //@ts-expect-error
         for(var _iterator1 = _create_for_of_iterator_helper_loose(data.fills), _step1; !(_step1 = _iterator1()).done;){
             var fill = _step1.value;
             var fillParam = fill;
@@ -16799,7 +16795,7 @@ exports.ShapeComponent = /*#__PURE__*/ function(RendererComponent) {
     _proto.createPaint = function createPaint(paintData) {
         var paint;
         switch(paintData.type){
-            case 0:
+            case FillType.Solid:
                 {
                     paint = {
                         type: paintData.type,
@@ -16807,9 +16803,9 @@ exports.ShapeComponent = /*#__PURE__*/ function(RendererComponent) {
                     };
                     break;
                 }
-            case 1:
-            case 3:
-            case 2:
+            case FillType.GradientLinear:
+            case FillType.GradientAngular:
+            case FillType.GradientRadial:
                 {
                     paint = {
                         type: paintData.type,
@@ -16819,15 +16815,32 @@ exports.ShapeComponent = /*#__PURE__*/ function(RendererComponent) {
                     };
                     break;
                 }
-            case 4:
+            case FillType.Texture:
                 {
+                    var _paintData_textureTransform;
+                    var textureTransform = _extends({
+                        offset: {
+                            x: 0,
+                            y: 0
+                        },
+                        rotation: 0,
+                        scale: {
+                            x: 1,
+                            y: 1
+                        }
+                    }, (_paintData_textureTransform = paintData.textureTransform) != null ? _paintData_textureTransform : {});
                     var _paintData_scalingFactor, _paintData_opacity;
                     paint = {
                         type: paintData.type,
                         texture: this.engine.findObject(paintData.texture),
                         scaleMode: paintData.scaleMode,
                         scalingFactor: (_paintData_scalingFactor = paintData.scalingFactor) != null ? _paintData_scalingFactor : 1,
-                        opacity: (_paintData_opacity = paintData.opacity) != null ? _paintData_opacity : 1
+                        opacity: (_paintData_opacity = paintData.opacity) != null ? _paintData_opacity : 1,
+                        textureTransform: {
+                            offset: new Vector2().copyFrom(textureTransform.offset),
+                            rotation: textureTransform.rotation,
+                            scale: new Vector2().copyFrom(textureTransform.scale)
+                        }
                     };
                     break;
                 }
@@ -30483,28 +30496,35 @@ function version34Migration(json) {
         }
         if (componentData1.dataType === DataType.ShapeComponent) {
             var shapeComponentData = componentData1;
-            //@ts-expect-error
             shapeComponentData.fills = [];
+            //@ts-expect-error
             if (shapeComponentData.fill) {
                 var solidPaintData = {
-                    type: exports.FillType.Solid,
+                    type: FillType.Solid,
+                    //@ts-expect-error
                     color: shapeComponentData.fill.color
                 };
-                //@ts-expect-error
                 shapeComponentData.fills.push(solidPaintData);
             }
-            delete shapeComponentData.fill;
             //@ts-expect-error
+            delete shapeComponentData.fill;
             shapeComponentData.strokes = [];
+            //@ts-expect-error
             if (shapeComponentData.stroke) {
                 var solidPaintData1 = {
-                    type: exports.FillType.Solid,
+                    type: FillType.Solid,
+                    //@ts-expect-error
                     color: shapeComponentData.stroke.color
                 };
-                //@ts-expect-error
                 shapeComponentData.strokes.push(solidPaintData1);
                 //@ts-expect-error
-                shapeComponentData.stroke.color = undefined;
+                shapeComponentData.strokeWidth = shapeComponentData.stroke.width;
+                //@ts-expect-error
+                shapeComponentData.strokeCap = shapeComponentData.stroke.cap;
+                //@ts-expect-error
+                shapeComponentData.strokeJoin = shapeComponentData.stroke.join;
+                //@ts-expect-error
+                delete shapeComponentData.stroke;
             }
         }
     }
@@ -31434,7 +31454,7 @@ function getStandardSpriteContent(sprite, transform) {
     return ret;
 }
 
-var version$1 = "2.7.0-alpha.1";
+var version$1 = "2.7.0-alpha.2";
 var v0 = /^(\d+)\.(\d+)\.(\d+)(-(\w+)\.\d+)?$/;
 var standardVersion = /^(\d+)\.(\d+)$/;
 var reverseParticle = false;
@@ -34707,7 +34727,7 @@ registerPlugin("sprite", SpriteLoader, exports.VFXItem);
 registerPlugin("particle", ParticleLoader, exports.VFXItem);
 registerPlugin("cal", CalculateLoader, exports.VFXItem);
 registerPlugin("interact", InteractLoader, exports.VFXItem);
-var version = "2.7.0-alpha.1";
+var version = "2.7.0-alpha.2";
 logger.info("Core version: " + version + ".");
 
 exports.AbstractPlugin = AbstractPlugin;