老化效果加入程度变量

assets/effects/sprite-old-photo.effect

@@ -18,6 +18,14 @@ CCEffect %{
       properties:
         texture: { value: white }
         alphaThreshold: { value: 0.5 }
+        # 老化程度
+        oldLevel: {
+          value: 1.0,
+          inspector: {
+            tooltip: "老化程度",
+            range: [0.0, 1.0]
+          }
+        }
 }%
 
 
@@ -69,6 +77,18 @@ CCProgram fs %{
   #endif
 
   #if USE_OLD_PHOTO
+  uniform OldPhoto {
+    // 老化程度
+    float oldLevel;
+  }
+
+  /**
+   * 获取老化颜色
+   * 
+   * @param color 原始颜色 
+   *
+   * @return 老化后的颜色
+   */
   vec4 getOldPhotoColor(vec4 color) {
     float r = 0.393 * color.r + 0.769 * color.g + 0.189 * color.b; 
     float g = 0.349 * color.r + 0.686 * color.g + 0.168 * color.b; 
@@ -92,7 +112,10 @@ CCProgram fs %{
     ALPHA_TEST(o);
 
     #if USE_OLD_PHOTO
-    o = getOldPhotoColor(o);
+    vec4 srcColor = o;
+    vec4 oldColor = getOldPhotoColor(srcColor);
+
+    o = srcColor + (oldColor - srcColor) * oldLevel;
     #endif
     gl_FragColor = o;
   }

assets/effects/sprite-old-photo.effect.meta

@@ -5,11 +5,11 @@
     {
       "glsl1": {
         "vert": "\nprecision highp float;\nuniform mat4 cc_matViewProj;\nuniform mat4 cc_matWorld;\n\nattribute vec3 a_position;\nattribute vec4 a_color;\nvarying vec4 v_color;\n\n#if USE_TEXTURE\nattribute vec2 a_uv0;\nvarying vec2 v_uv0;\n#endif\n\nvoid main () {\n  vec4 pos = vec4(a_position, 1);\n\n  #if CC_USE_MODEL\n  pos = cc_matViewProj * cc_matWorld * pos;\n  #else\n  pos = cc_matViewProj * pos;\n  #endif\n\n  #if USE_TEXTURE\n  v_uv0 = a_uv0;\n  #endif\n\n  v_color = a_color;\n\n  gl_Position = pos;\n}\n",
-        "frag": "\nprecision highp float;\n\n#if USE_ALPHA_TEST\n  \n  uniform float alphaThreshold;\n#endif\n\nvoid ALPHA_TEST (in vec4 color) {\n  #if USE_ALPHA_TEST\n      if (color.a < alphaThreshold) discard;\n  #endif\n}\n\nvoid ALPHA_TEST (in float alpha) {\n  #if USE_ALPHA_TEST\n      if (alpha < alphaThreshold) discard;\n  #endif\n}\n\nvarying vec4 v_color;\n\n#if USE_TEXTURE\nvarying vec2 v_uv0;\nuniform sampler2D texture;\n#endif\n\n#if USE_OLD_PHOTO\nvec4 getOldPhotoColor(vec4 color) {\n  float r = 0.393 * color.r + 0.769 * color.g + 0.189 * color.b; \n  float g = 0.349 * color.r + 0.686 * color.g + 0.168 * color.b; \n  float b = 0.272 * color.r + 0.534 * color.g + 0.131 * color.b;\n  return vec4(r, g, b, color.a);\n}\n#endif\n\nvoid main () {\n  vec4 o = vec4(1, 1, 1, 1);\n\n  #if USE_TEXTURE\n  o *= texture2D(texture, v_uv0);\n    #if CC_USE_ALPHA_ATLAS_TEXTURE\n    o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;\n    #endif\n  #endif\n\n  o *= v_color;\n\n  ALPHA_TEST(o);\n\n  #if USE_OLD_PHOTO\n  o = getOldPhotoColor(o);\n  #endif\n  gl_FragColor = o;\n}\n"
+        "frag": "\nprecision highp float;\n\n#if USE_ALPHA_TEST\n  \n  uniform float alphaThreshold;\n#endif\n\nvoid ALPHA_TEST (in vec4 color) {\n  #if USE_ALPHA_TEST\n      if (color.a < alphaThreshold) discard;\n  #endif\n}\n\nvoid ALPHA_TEST (in float alpha) {\n  #if USE_ALPHA_TEST\n      if (alpha < alphaThreshold) discard;\n  #endif\n}\n\nvarying vec4 v_color;\n\n#if USE_TEXTURE\nvarying vec2 v_uv0;\nuniform sampler2D texture;\n#endif\n\n#if USE_OLD_PHOTO\nuniform float oldLevel;\n/**\n * 获取老化颜色\n * \n * @param color 原始颜色 \n *\n * @return 老化后的颜色\n */\nvec4 getOldPhotoColor(vec4 color) {\n  float r = 0.393 * color.r + 0.769 * color.g + 0.189 * color.b; \n  float g = 0.349 * color.r + 0.686 * color.g + 0.168 * color.b; \n  float b = 0.272 * color.r + 0.534 * color.g + 0.131 * color.b;\n  return vec4(r, g, b, color.a);\n}\n#endif\n\nvoid main () {\n  vec4 o = vec4(1, 1, 1, 1);\n\n  #if USE_TEXTURE\n  o *= texture2D(texture, v_uv0);\n    #if CC_USE_ALPHA_ATLAS_TEXTURE\n    o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;\n    #endif\n  #endif\n\n  o *= v_color;\n\n  ALPHA_TEST(o);\n\n  #if USE_OLD_PHOTO\n  vec4 srcColor = o;\n  vec4 oldColor = getOldPhotoColor(srcColor);\n\n  o = srcColor + (oldColor - srcColor) * oldLevel;\n  #endif\n  gl_FragColor = o;\n}\n"
       },
       "glsl3": {
         "vert": "\nprecision highp float;\nuniform CCGlobal {\n  vec4 cc_time;\n\n  vec4 cc_screenSize;\n\n  vec4 cc_screenScale;\n\n  vec4 cc_nativeSize;\n\n  mat4 cc_matView;\n  mat4 cc_matViewInv;\n  mat4 cc_matProj;\n  mat4 cc_matProjInv;\n  mat4 cc_matViewProj;\n  mat4 cc_matViewProjInv;\n  vec4 cc_cameraPos;\n\n  vec4 cc_exposure;\n\n  vec4 cc_mainLitDir;\n\n  vec4 cc_mainLitColor;\n\n  vec4 cc_ambientSky;\n  vec4 cc_ambientGround;\n};\nuniform CCLocal {\n  mat4 cc_matWorld;\n  mat4 cc_matWorldIT;\n};\n\nin vec3 a_position;\nin vec4 a_color;\nout vec4 v_color;\n\n#if USE_TEXTURE\nin vec2 a_uv0;\nout vec2 v_uv0;\n#endif\n\nvoid main () {\n  vec4 pos = vec4(a_position, 1);\n\n  #if CC_USE_MODEL\n  pos = cc_matViewProj * cc_matWorld * pos;\n  #else\n  pos = cc_matViewProj * pos;\n  #endif\n\n  #if USE_TEXTURE\n  v_uv0 = a_uv0;\n  #endif\n\n  v_color = a_color;\n\n  gl_Position = pos;\n}\n",
-        "frag": "\nprecision highp float;\n\n#if USE_ALPHA_TEST\n  \n  uniform ALPHA_TEST {\n    float alphaThreshold;\n  }\n#endif\n\nvoid ALPHA_TEST (in vec4 color) {\n  #if USE_ALPHA_TEST\n      if (color.a < alphaThreshold) discard;\n  #endif\n}\n\nvoid ALPHA_TEST (in float alpha) {\n  #if USE_ALPHA_TEST\n      if (alpha < alphaThreshold) discard;\n  #endif\n}\n\nin vec4 v_color;\n\n#if USE_TEXTURE\nin vec2 v_uv0;\nuniform sampler2D texture;\n#endif\n\n#if USE_OLD_PHOTO\nvec4 getOldPhotoColor(vec4 color) {\n  float r = 0.393 * color.r + 0.769 * color.g + 0.189 * color.b; \n  float g = 0.349 * color.r + 0.686 * color.g + 0.168 * color.b; \n  float b = 0.272 * color.r + 0.534 * color.g + 0.131 * color.b;\n  return vec4(r, g, b, color.a);\n}\n#endif\n\nvoid main () {\n  vec4 o = vec4(1, 1, 1, 1);\n\n  #if USE_TEXTURE\n  o *= texture(texture, v_uv0);\n    #if CC_USE_ALPHA_ATLAS_TEXTURE\n    o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;\n    #endif\n  #endif\n\n  o *= v_color;\n\n  ALPHA_TEST(o);\n\n  #if USE_OLD_PHOTO\n  o = getOldPhotoColor(o);\n  #endif\n  gl_FragColor = o;\n}\n"
+        "frag": "\nprecision highp float;\n\n#if USE_ALPHA_TEST\n  \n  uniform ALPHA_TEST {\n    float alphaThreshold;\n  }\n#endif\n\nvoid ALPHA_TEST (in vec4 color) {\n  #if USE_ALPHA_TEST\n      if (color.a < alphaThreshold) discard;\n  #endif\n}\n\nvoid ALPHA_TEST (in float alpha) {\n  #if USE_ALPHA_TEST\n      if (alpha < alphaThreshold) discard;\n  #endif\n}\n\nin vec4 v_color;\n\n#if USE_TEXTURE\nin vec2 v_uv0;\nuniform sampler2D texture;\n#endif\n\n#if USE_OLD_PHOTO\nuniform OldPhoto {\n\n  float oldLevel;\n}\n\n/**\n * 获取老化颜色\n * \n * @param color 原始颜色 \n *\n * @return 老化后的颜色\n */\nvec4 getOldPhotoColor(vec4 color) {\n  float r = 0.393 * color.r + 0.769 * color.g + 0.189 * color.b; \n  float g = 0.349 * color.r + 0.686 * color.g + 0.168 * color.b; \n  float b = 0.272 * color.r + 0.534 * color.g + 0.131 * color.b;\n  return vec4(r, g, b, color.a);\n}\n#endif\n\nvoid main () {\n  vec4 o = vec4(1, 1, 1, 1);\n\n  #if USE_TEXTURE\n  o *= texture(texture, v_uv0);\n    #if CC_USE_ALPHA_ATLAS_TEXTURE\n    o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;\n    #endif\n  #endif\n\n  o *= v_color;\n\n  ALPHA_TEST(o);\n\n  #if USE_OLD_PHOTO\n  vec4 srcColor = o;\n  vec4 oldColor = getOldPhotoColor(srcColor);\n\n  o = srcColor + (oldColor - srcColor) * oldLevel;\n  #endif\n  gl_FragColor = o;\n}\n"
       }
     }
   ],

assets/scenes/OldPhotoEffectScene.fire.meta

@@ -1,6 +1,6 @@
 {
   "ver": "1.2.5",
-  "uuid": "81b3041d-fc19-409b-a0d5-9e5996eb4595",
+  "uuid": "7f52e736-cdaf-44df-bd73-e2120e59267b",
   "asyncLoadAssets": false,
   "autoReleaseAssets": false,
   "subMetas": {}

assets/scripts/OldPhotoEffectScene.ts

@@ -0,0 +1,59 @@
+const { ccclass, property } = cc._decorator;
+
+@ccclass
+export default class OldPhotoEffectScene extends cc.Component {
+    private _oldLevelSlider: cc.Slider = null;
+    private _oldLevelSliderLabel: cc.Label = null;
+
+    private _examplesParentNode: cc.Node = null;
+
+    onLoad() {
+        this._oldLevelSlider = cc.find("Canvas/Content/Sliders/OldLevelSlider/Slider").getComponent(cc.Slider);
+        this._oldLevelSliderLabel = cc.find("Canvas/Content/Sliders/OldLevelSlider/ValueLabel").getComponent(cc.Label);
+
+        this._examplesParentNode = cc.find("Canvas/Content/Examples");
+    }
+
+    onEnable() {
+        this._oldLevelSlider.node.on("slide", this._onSliderChanged, this);
+    }
+
+    onDisable() {
+        this._oldLevelSlider.node.off("slide", this._onSliderChanged, this);
+    }
+
+    start() {
+        this._onSliderChanged();
+    }
+
+    private _onSliderChanged() {
+        this._oldLevelSliderLabel.string = `${this._oldLevelSlider.progress.toFixed(2)}`;
+
+        // 更新材质
+        this._updateRenderComponentMaterial({
+            oldLevel: this._oldLevelSlider.progress
+        });
+    }
+
+    /**
+     * 更新渲染组件的材质
+     *
+     * 1. 获取材质
+     * 2. 给材质的 unitform 变量赋值
+     * 3. 重新将材质赋值回去
+     */
+    private _updateRenderComponentMaterial(param: {
+        /**
+         * 老化程度 [0.0, 1.0] ，1.0 表示完全老化
+         */
+        oldLevel: number;
+    }) {
+        this._examplesParentNode.children.forEach(childNode => {
+            childNode.getComponents(cc.RenderComponent).forEach(renderComponent => {
+                let material: cc.Material = renderComponent.getMaterial(0);
+                material.setProperty("oldLevel", param.oldLevel);
+                renderComponent.setMaterial(0, material);
+            });
+        });
+    }
+}

assets/scripts/OldPhotoEffectScene.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.5",
+  "uuid": "1e14f8ce-f223-4250-abe0-2a0cc6c22ecf",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}