feat: 🎸 渐变过渡的相册

一个借助shader渐变的相册demo

assets/Scene/Circle_avatar/circle_avatar.effect.meta

@@ -5,11 +5,11 @@
     {
       "glsl1": {
         "vert": "\nprecision highp float;\nuniform mediump mat4 cc_matViewProj;\nuniform mat4 cc_matWorld;\nattribute vec3 a_position;\nattribute vec4 a_color;\nvarying vec4 v_color;\n#if USE_TEXTURE\nattribute vec2 a_uv0;\nvarying vec2 v_uv0;\n#endif\nvoid main () {\n  vec4 pos = vec4(a_position, 1);\n  #if CC_USE_MODEL\n  pos = cc_matViewProj * cc_matWorld * pos;\n  #else\n  pos = cc_matViewProj * pos;\n  #endif\n  #if USE_TEXTURE\n  v_uv0 = a_uv0;\n  #endif\n  v_color = a_color;\n  gl_Position = pos;\n}",
-        "frag": "\nprecision highp float;\n#if USE_ALPHA_TEST\n#endif\nvarying vec4 v_color;\n#if USE_TEXTURE\nvarying vec2 v_uv0;\nuniform sampler2D texture;\n#endif\nuniform float radius;\nuniform float blur;\nuniform vec2 center;\nuniform float wh_ratio;\nvoid main () {\n  vec4 o = vec4(1, 1, 1, 1);\n  o *= texture2D(texture, v_uv0);\n  o *= v_color;\n  float circle = radius * radius;\n  float rx = center.x * wh_ratio;\n  float ry = center.y;\n  float dis = (v_uv0.x * wh_ratio - rx) * (v_uv0.x * wh_ratio - rx) + (v_uv0.y  - ry) * (v_uv0.y - ry);\n  o.a = smoothstep(circle, circle - blur, dis);\n  gl_FragColor = o;\n}"
+        "frag": "\nprecision highp float;\n#if USE_ALPHA_TEST\n#endif\nvarying vec4 v_color;\n#if USE_TEXTURE\nvarying vec2 v_uv0;\nuniform sampler2D texture;\n#endif\nuniform float radius;\nuniform float blur;\nuniform vec2 center;\nuniform float wh_ratio;\nvoid main () {\n  vec4 o = vec4(1, 1, 1, 1);\n  o *= texture2D(texture, v_uv0);\n  o *= v_color;\n  float circle = radius * radius;\n  float rx = center.x * wh_ratio;\n  float ry = center.y;\n  float dis = (v_uv0.x * wh_ratio - rx) * (v_uv0.x * wh_ratio - rx) + (v_uv0.y  - ry) * (v_uv0.y - ry);\n  o.a = smoothstep(circle, circle - blur, dis) * o.a;\n  gl_FragColor = o;\n}"
       },
       "glsl3": {
         "vert": "\nprecision highp float;\nuniform CCGlobal {\n  highp   vec4 cc_time;\n  mediump vec4 cc_screenSize;\n  mediump vec4 cc_screenScale;\n  mediump vec4 cc_nativeSize;\n  highp   mat4 cc_matView;\n  mediump mat4 cc_matViewInv;\n  mediump mat4 cc_matProj;\n  mediump mat4 cc_matProjInv;\n  mediump mat4 cc_matViewProj;\n  mediump mat4 cc_matViewProjInv;\n  mediump vec4 cc_cameraPos;\n};\nuniform CCLocal {\n  mat4 cc_matWorld;\n  mat4 cc_matWorldIT;\n};\nin vec3 a_position;\nin vec4 a_color;\nout vec4 v_color;\n#if USE_TEXTURE\nin vec2 a_uv0;\nout vec2 v_uv0;\n#endif\nvoid main () {\n  vec4 pos = vec4(a_position, 1);\n  #if CC_USE_MODEL\n  pos = cc_matViewProj * cc_matWorld * pos;\n  #else\n  pos = cc_matViewProj * pos;\n  #endif\n  #if USE_TEXTURE\n  v_uv0 = a_uv0;\n  #endif\n  v_color = a_color;\n  gl_Position = pos;\n}",
-        "frag": "\nprecision highp float;\n#if USE_ALPHA_TEST\n  uniform ALPHA_TEST {\n    float alphaThreshold;\n  };\n#endif\nin vec4 v_color;\n#if USE_TEXTURE\nin vec2 v_uv0;\nuniform sampler2D texture;\n#endif\nuniform ARGS{\n  float radius;\n  float blur;\n  vec2 center;\n  float wh_ratio;\n};\nvoid main () {\n  vec4 o = vec4(1, 1, 1, 1);\n  o *= texture(texture, v_uv0);\n  o *= v_color;\n  float circle = radius * radius;\n  float rx = center.x * wh_ratio;\n  float ry = center.y;\n  float dis = (v_uv0.x * wh_ratio - rx) * (v_uv0.x * wh_ratio - rx) + (v_uv0.y  - ry) * (v_uv0.y - ry);\n  o.a = smoothstep(circle, circle - blur, dis);\n  gl_FragColor = o;\n}"
+        "frag": "\nprecision highp float;\n#if USE_ALPHA_TEST\n  uniform ALPHA_TEST {\n    float alphaThreshold;\n  };\n#endif\nin vec4 v_color;\n#if USE_TEXTURE\nin vec2 v_uv0;\nuniform sampler2D texture;\n#endif\nuniform ARGS{\n  float radius;\n  float blur;\n  vec2 center;\n  float wh_ratio;\n};\nvoid main () {\n  vec4 o = vec4(1, 1, 1, 1);\n  o *= texture(texture, v_uv0);\n  o *= v_color;\n  float circle = radius * radius;\n  float rx = center.x * wh_ratio;\n  float ry = center.y;\n  float dis = (v_uv0.x * wh_ratio - rx) * (v_uv0.x * wh_ratio - rx) + (v_uv0.y  - ry) * (v_uv0.y - ry);\n  o.a = smoothstep(circle, circle - blur, dis) * o.a;\n  gl_FragColor = o;\n}"
       }
     }
   ],

assets/Scene/Home/Home.ts

@@ -19,7 +19,8 @@ enum sceneList {
   'Screen_vibrating' = '震屏效果+动画恢复第一帧',
   'Joystick' = '遥控杆',
   'Filter' = '颜色滤镜',
-  'Mosaic' = '马赛克/像素风（shader）'
+  'Mosaic' = '马赛克/像素风（shader）',
+  'Photo_gallery' = '渐变过渡的相册（shader）'
 }
 
 @ccclass

assets/Scene/Photo_gallery.meta

@@ -0,0 +1,7 @@
+{
+  "ver": "1.0.1",
+  "uuid": "3f7ef956-c957-4e12-951a-97f6c5a11393",
+  "isSubpackage": false,
+  "subpackageName": "",
+  "subMetas": {}
+}

assets/Scene/Photo_gallery/Photo_gallery.fire.meta

@@ -0,0 +1,7 @@
+{
+  "ver": "1.2.6",
+  "uuid": "96343569-0f12-4ed5-8ba0-596a8ffde78c",
+  "asyncLoadAssets": false,
+  "autoReleaseAssets": false,
+  "subMetas": {}
+}

assets/Scene/Photo_gallery/Photo_gallery.ts

@@ -0,0 +1,42 @@
+const { ccclass, property } = cc._decorator;
+
+@ccclass
+export default class Scene_transition extends cc.Component {
+  @property([cc.Node])
+  switchNodeList: cc.Node[] = [];
+  fadeRadius: number = 0.1;
+
+  onLoad() {
+    this.switchNodeList.forEach((node, idx) => {
+      node.zIndex = this.switchNodeList.length - idx;
+    })
+  }
+
+  isTransforming: boolean = false;
+  bgTramsform() {
+    if (this.isTransforming) return;
+    this.isTransforming = true;
+
+    let time = 0.0;
+    let node = this.switchNodeList[0];
+    let material = node.getComponent(cc.Sprite).getMaterial(0);
+    material.setProperty('u_fade_radius', this.fadeRadius);
+    material.setProperty('u_time', time);
+    material.define('USE_TRAMSFORM', true, 0, true);
+
+    let timer = setInterval(() => {
+      time += 0.03;
+      material.setProperty('u_time', time);
+      if (time > 1.0 + this.fadeRadius) {
+        this.switchNodeList.shift();
+        this.switchNodeList.push(node);
+        this.switchNodeList.forEach((node, idx) => {
+          node.zIndex = this.switchNodeList.length - idx;
+        })
+        material.define('USE_TRAMSFORM', false, 0, true);
+        this.isTransforming = false;
+        timer && clearInterval(timer);
+      }
+    }, 30);
+  }
+}

assets/Scene/Photo_gallery/Photo_gallery.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.5",
+  "uuid": "26442228-fb1a-4e55-82e3-6432b4130955",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}

assets/Scene/Photo_gallery/Texture.meta

@@ -0,0 +1,7 @@
+{
+  "ver": "1.0.1",
+  "uuid": "e8ed3b15-d6c2-4c35-be4f-6495c46dbe42",
+  "isSubpackage": false,
+  "subpackageName": "",
+  "subMetas": {}
+}

assets/Scene/Photo_gallery/Texture/bg1.jpg.meta

@@ -0,0 +1,36 @@
+{
+  "ver": "2.3.4",
+  "uuid": "ee9b221f-8ed3-4418-8cbf-b987bbb772ca",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "premultiplyAlpha": false,
+  "genMipmaps": false,
+  "packable": false,
+  "width": 1024,
+  "height": 445,
+  "platformSettings": {},
+  "subMetas": {
+    "bg1": {
+      "ver": "1.0.4",
+      "uuid": "d61bb924-4a50-4487-90ce-e35d82c2e7a9",
+      "rawTextureUuid": "ee9b221f-8ed3-4418-8cbf-b987bbb772ca",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": 0,
+      "offsetY": 0,
+      "trimX": 0,
+      "trimY": 0,
+      "width": 1024,
+      "height": 445,
+      "rawWidth": 1024,
+      "rawHeight": 445,
+      "borderTop": 0,
+      "borderBottom": 0,
+      "borderLeft": 0,
+      "borderRight": 0,
+      "subMetas": {}
+    }
+  }
+}

assets/Scene/Photo_gallery/Texture/bg2.jpg.meta

@@ -0,0 +1,36 @@
+{
+  "ver": "2.3.4",
+  "uuid": "19c794aa-df1e-41ca-95f1-6cb3e1697ae4",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "premultiplyAlpha": false,
+  "genMipmaps": false,
+  "packable": false,
+  "width": 1335,
+  "height": 864,
+  "platformSettings": {},
+  "subMetas": {
+    "bg2": {
+      "ver": "1.0.4",
+      "uuid": "897869c8-2252-4cdc-8590-a4cd75951029",
+      "rawTextureUuid": "19c794aa-df1e-41ca-95f1-6cb3e1697ae4",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": 0,
+      "offsetY": 0,
+      "trimX": 0,
+      "trimY": 0,
+      "width": 1335,
+      "height": 864,
+      "rawWidth": 1335,
+      "rawHeight": 864,
+      "borderTop": 0,
+      "borderBottom": 0,
+      "borderLeft": 0,
+      "borderRight": 0,
+      "subMetas": {}
+    }
+  }
+}

assets/Scene/Photo_gallery/Texture/bg3.jpg.meta

@@ -0,0 +1,36 @@
+{
+  "ver": "2.3.4",
+  "uuid": "574b895a-3021-49b2-8e07-0c6f94fa77a1",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "premultiplyAlpha": false,
+  "genMipmaps": false,
+  "packable": true,
+  "width": 1024,
+  "height": 445,
+  "platformSettings": {},
+  "subMetas": {
+    "bg3": {
+      "ver": "1.0.4",
+      "uuid": "1d7fee62-0711-4d91-97a8-e6126253d95e",
+      "rawTextureUuid": "574b895a-3021-49b2-8e07-0c6f94fa77a1",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": 0,
+      "offsetY": 0,
+      "trimX": 0,
+      "trimY": 0,
+      "width": 1024,
+      "height": 445,
+      "rawWidth": 1024,
+      "rawHeight": 445,
+      "borderTop": 0,
+      "borderBottom": 0,
+      "borderLeft": 0,
+      "borderRight": 0,
+      "subMetas": {}
+    }
+  }
+}

assets/Scene/Photo_gallery/Texture/bg4.jpg.meta

@@ -0,0 +1,36 @@
+{
+  "ver": "2.3.4",
+  "uuid": "2737adaa-2eba-48cf-ab02-0ebdbac933d6",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "premultiplyAlpha": false,
+  "genMipmaps": false,
+  "packable": true,
+  "width": 800,
+  "height": 445,
+  "platformSettings": {},
+  "subMetas": {
+    "bg4": {
+      "ver": "1.0.4",
+      "uuid": "a4b26052-bda2-4bec-ba05-adf268ff62f3",
+      "rawTextureUuid": "2737adaa-2eba-48cf-ab02-0ebdbac933d6",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": 0,
+      "offsetY": 0,
+      "trimX": 0,
+      "trimY": 0,
+      "width": 800,
+      "height": 445,
+      "rawWidth": 800,
+      "rawHeight": 445,
+      "borderTop": 0,
+      "borderBottom": 0,
+      "borderLeft": 0,
+      "borderRight": 0,
+      "subMetas": {}
+    }
+  }
+}

assets/Scene/Photo_gallery/Texture/bg5.jpg.meta

@@ -0,0 +1,36 @@
+{
+  "ver": "2.3.4",
+  "uuid": "a7d2fa64-184c-4a57-b5f7-0bc703fcb9b8",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "premultiplyAlpha": false,
+  "genMipmaps": false,
+  "packable": true,
+  "width": 800,
+  "height": 445,
+  "platformSettings": {},
+  "subMetas": {
+    "bg5": {
+      "ver": "1.0.4",
+      "uuid": "18a56f47-1625-4ab1-a7e9-5754637c0d57",
+      "rawTextureUuid": "a7d2fa64-184c-4a57-b5f7-0bc703fcb9b8",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": 0,
+      "offsetY": 0,
+      "trimX": 0,
+      "trimY": 0,
+      "width": 800,
+      "height": 445,
+      "rawWidth": 800,
+      "rawHeight": 445,
+      "borderTop": 0,
+      "borderBottom": 0,
+      "borderLeft": 0,
+      "borderRight": 0,
+      "subMetas": {}
+    }
+  }
+}

assets/Scene/Photo_gallery/Texture/next.png.meta

@@ -0,0 +1,36 @@
+{
+  "ver": "2.3.4",
+  "uuid": "ef40a864-df76-464a-9525-358aab5d4919",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "premultiplyAlpha": false,
+  "genMipmaps": false,
+  "packable": true,
+  "width": 124,
+  "height": 48,
+  "platformSettings": {},
+  "subMetas": {
+    "next": {
+      "ver": "1.0.4",
+      "uuid": "1969f470-bc7b-4feb-9dbe-2aee4f26556a",
+      "rawTextureUuid": "ef40a864-df76-464a-9525-358aab5d4919",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": 0,
+      "offsetY": 0,
+      "trimX": 0,
+      "trimY": 0,
+      "width": 124,
+      "height": 48,
+      "rawWidth": 124,
+      "rawHeight": 48,
+      "borderTop": 0,
+      "borderBottom": 0,
+      "borderLeft": 0,
+      "borderRight": 0,
+      "subMetas": {}
+    }
+  }
+}

assets/Scene/Photo_gallery/pic_transform.effect

@@ -0,0 +1,80 @@
+// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
+
+CCEffect %{
+  techniques:
+  - passes:
+    - vert: vs
+      frag: fs
+      blendState:
+        targets:
+        - blend: true
+      rasterizerState:
+        cullMode: none
+      properties:
+        texture: { value: white }
+        u_time: { value: 1.0 }
+        u_fade_radius: { value: 0.2 }
+}%
+
+
+CCProgram vs %{
+  precision highp float;
+
+  #include <cc-global>
+  #include <cc-local>
+
+  in vec3 a_position;
+  in vec4 a_color;
+  out vec4 v_color;
+
+  #if USE_TEXTURE
+  in vec2 a_uv0;
+  out vec2 v_uv0;
+  #endif
+
+  void main () {
+    vec4 pos = vec4(a_position, 1);
+
+    #if CC_USE_MODEL
+    pos = cc_matViewProj * cc_matWorld * pos;
+    #else
+    pos = cc_matViewProj * pos;
+    #endif
+
+    #if USE_TEXTURE
+    v_uv0 = a_uv0;
+    #endif
+
+    v_color = a_color;
+
+    gl_Position = pos;
+  }
+}%
+
+
+CCProgram fs %{
+  precision highp float;
+  in vec4 v_color;
+
+  #if USE_TEXTURE
+  in vec2 v_uv0;
+  uniform sampler2D texture;
+  #endif
+
+  uniform ARGS {
+    float u_time;
+    float u_fade_radius;
+  };
+
+  void main () {
+    vec4 color = vec4(1, 1, 1, 1);
+    color *= texture(texture, v_uv0);
+    color *= v_color;
+
+    #if USE_TRAMSFORM
+      color.a = smoothstep(0.0, u_fade_radius, u_fade_radius + v_uv0.x - u_time);
+    #endif
+
+    gl_FragColor = color;
+  }
+}%

assets/Scene/Photo_gallery/pic_transform.effect.meta

@@ -0,0 +1,17 @@
+{
+  "ver": "1.0.25",
+  "uuid": "51844cdd-b9a2-48ae-866a-e162d76c202c",
+  "compiledShaders": [
+    {
+      "glsl1": {
+        "vert": "\nprecision highp float;\nuniform mediump mat4 cc_matViewProj;\nuniform mat4 cc_matWorld;\nattribute vec3 a_position;\nattribute vec4 a_color;\nvarying vec4 v_color;\n#if USE_TEXTURE\nattribute vec2 a_uv0;\nvarying vec2 v_uv0;\n#endif\nvoid main () {\n  vec4 pos = vec4(a_position, 1);\n  #if CC_USE_MODEL\n  pos = cc_matViewProj * cc_matWorld * pos;\n  #else\n  pos = cc_matViewProj * pos;\n  #endif\n  #if USE_TEXTURE\n  v_uv0 = a_uv0;\n  #endif\n  v_color = a_color;\n  gl_Position = pos;\n}",
+        "frag": "\nprecision highp float;\nvarying vec4 v_color;\n#if USE_TEXTURE\nvarying vec2 v_uv0;\nuniform sampler2D texture;\n#endif\nuniform float u_time;\nuniform float u_fade_radius;\nvoid main () {\n  vec4 color = vec4(1, 1, 1, 1);\n  color *= texture2D(texture, v_uv0);\n  color *= v_color;\n  #if USE_TRAMSFORM\n    color.a = smoothstep(0.0, u_fade_radius, u_fade_radius + v_uv0.x - u_time);\n  #endif\n  gl_FragColor = color;\n}"
+      },
+      "glsl3": {
+        "vert": "\nprecision highp float;\nuniform CCGlobal {\n  highp   vec4 cc_time;\n  mediump vec4 cc_screenSize;\n  mediump vec4 cc_screenScale;\n  mediump vec4 cc_nativeSize;\n  highp   mat4 cc_matView;\n  mediump mat4 cc_matViewInv;\n  mediump mat4 cc_matProj;\n  mediump mat4 cc_matProjInv;\n  mediump mat4 cc_matViewProj;\n  mediump mat4 cc_matViewProjInv;\n  mediump vec4 cc_cameraPos;\n};\nuniform CCLocal {\n  mat4 cc_matWorld;\n  mat4 cc_matWorldIT;\n};\nin vec3 a_position;\nin vec4 a_color;\nout vec4 v_color;\n#if USE_TEXTURE\nin vec2 a_uv0;\nout vec2 v_uv0;\n#endif\nvoid main () {\n  vec4 pos = vec4(a_position, 1);\n  #if CC_USE_MODEL\n  pos = cc_matViewProj * cc_matWorld * pos;\n  #else\n  pos = cc_matViewProj * pos;\n  #endif\n  #if USE_TEXTURE\n  v_uv0 = a_uv0;\n  #endif\n  v_color = a_color;\n  gl_Position = pos;\n}",
+        "frag": "\nprecision highp float;\nin vec4 v_color;\n#if USE_TEXTURE\nin vec2 v_uv0;\nuniform sampler2D texture;\n#endif\nuniform ARGS {\n  float u_time;\n  float u_fade_radius;\n};\nvoid main () {\n  vec4 color = vec4(1, 1, 1, 1);\n  color *= texture(texture, v_uv0);\n  color *= v_color;\n  #if USE_TRAMSFORM\n    color.a = smoothstep(0.0, u_fade_radius, u_fade_radius + v_uv0.x - u_time);\n  #endif\n  gl_FragColor = color;\n}"
+      }
+    }
+  ],
+  "subMetas": {}
+}

assets/Scene/Photo_gallery/pic_transform.mtl

@@ -0,0 +1,18 @@
+{
+  "__type__": "cc.Material",
+  "_name": "Scene_transition",
+  "_objFlags": 0,
+  "_native": "",
+  "_effectAsset": {
+    "__uuid__": "51844cdd-b9a2-48ae-866a-e162d76c202c"
+  },
+  "_techniqueIndex": 0,
+  "_techniqueData": {
+    "0": {
+      "defines": {
+        "USE_TEXTURE": true,
+        "USE_TRAMSFORM": false
+      }
+    }
+  }
+}

assets/Scene/Photo_gallery/pic_transform.mtl.meta

@@ -0,0 +1,6 @@
+{
+  "ver": "1.0.3",
+  "uuid": "c19dcfd2-1514-4816-ae60-a2bd155220d6",
+  "dataAsSubAsset": null,
+  "subMetas": {}
+}