shader 溶解效果

assets/Scene/Dissolve_color.meta

@@ -0,0 +1,7 @@
+{
+  "ver": "1.0.1",
+  "uuid": "9ac455c6-8cbe-4f0c-9cad-762448ba9a98",
+  "isSubpackage": false,
+  "subpackageName": "",
+  "subMetas": {}
+}

assets/Scene/Dissolve_color/Dissolve_color.fire.meta

@@ -0,0 +1,7 @@
+{
+  "ver": "1.2.6",
+  "uuid": "22cbd783-dfc9-4daa-bd69-2ef24d6b787b",
+  "asyncLoadAssets": false,
+  "autoReleaseAssets": false,
+  "subMetas": {}
+}

assets/Scene/Dissolve_color/Dissolve_color.ts

@@ -0,0 +1,38 @@
+const { ccclass, property } = cc._decorator;
+
+@ccclass
+export default class Dissolve_color extends cc.Component {
+  @property(cc.Label)
+  tip: cc.Label = null;
+  materialList: cc.Material[] = [];
+  fadePct: number = 0; // 溶解百分比
+  activeFlag: boolean = false; // 溶解进行中
+  symbol: number = 1; // 色彩叠加的正负
+  speed: number = 0.5; // 色彩叠加的速度
+
+  start() {
+    this.materialList.push(
+      this.node.getChildByName('ghost').getComponent(cc.Sprite).getMaterial(0),
+      this.node.getChildByName('man').getComponent(cc.Sprite).getMaterial(0)
+    );
+  }
+
+  toggle() {
+    if (this.activeFlag) return;
+    this.activeFlag = true;
+  }
+
+  update(dt) {
+    if (!this.activeFlag) return;
+    this.materialList.forEach((material) => material.setProperty('fade_pct', this.fadePct));
+
+    if (this.fadePct >= 0 && this.fadePct <= 1) {
+      this.fadePct += this.symbol * dt * this.speed;
+      this.tip.string = "溶解程度 " + this.fadePct.toFixed(1);
+    } else {
+      this.fadePct = this.fadePct > 1 ? 1 : 0;
+      this.symbol = -this.symbol;
+      this.activeFlag = false;
+    }
+  }
+}

assets/Scene/Dissolve_color/Dissolve_color.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.5",
+  "uuid": "184abf81-21e5-424c-bbdd-f051fa07e877",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}

assets/Scene/Dissolve_color/Texture.meta

@@ -0,0 +1,7 @@
+{
+  "ver": "1.0.1",
+  "uuid": "b30bb05b-8aa6-491f-bbcf-66092cfa0534",
+  "isSubpackage": false,
+  "subpackageName": "",
+  "subMetas": {}
+}

assets/Scene/Dissolve_color/Texture/ghost.png.meta

@@ -0,0 +1,36 @@
+{
+  "ver": "2.3.4",
+  "uuid": "32148d04-fd60-44fe-a08c-d8b34fd2c8cb",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "premultiplyAlpha": false,
+  "genMipmaps": false,
+  "packable": true,
+  "width": 115,
+  "height": 192,
+  "platformSettings": {},
+  "subMetas": {
+    "ghost": {
+      "ver": "1.0.4",
+      "uuid": "218c096b-8d5f-4f9f-b4e8-d27fda083dba",
+      "rawTextureUuid": "32148d04-fd60-44fe-a08c-d8b34fd2c8cb",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": 7,
+      "offsetY": 0,
+      "trimX": 14,
+      "trimY": 1,
+      "width": 101,
+      "height": 190,
+      "rawWidth": 115,
+      "rawHeight": 192,
+      "borderTop": 0,
+      "borderBottom": 0,
+      "borderLeft": 0,
+      "borderRight": 0,
+      "subMetas": {}
+    }
+  }
+}

assets/Scene/Dissolve_color/Texture/man.png.meta

@@ -0,0 +1,36 @@
+{
+  "ver": "2.3.4",
+  "uuid": "7c6bb59a-7592-48e1-8d5c-6b19fcd2ea48",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "premultiplyAlpha": false,
+  "genMipmaps": false,
+  "packable": true,
+  "width": 570,
+  "height": 640,
+  "platformSettings": {},
+  "subMetas": {
+    "man": {
+      "ver": "1.0.4",
+      "uuid": "f04700ab-da53-4639-98a2-d8eefffe7c15",
+      "rawTextureUuid": "7c6bb59a-7592-48e1-8d5c-6b19fcd2ea48",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": -1,
+      "offsetY": -24,
+      "trimX": 120,
+      "trimY": 88,
+      "width": 328,
+      "height": 512,
+      "rawWidth": 570,
+      "rawHeight": 640,
+      "borderTop": 0,
+      "borderBottom": 0,
+      "borderLeft": 0,
+      "borderRight": 0,
+      "subMetas": {}
+    }
+  }
+}

assets/Scene/Dissolve_color/Texture/single_color.png.meta

@@ -0,0 +1,36 @@
+{
+  "ver": "2.3.4",
+  "uuid": "ff5737ae-78d9-472c-8223-3f96d686720c",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "premultiplyAlpha": false,
+  "genMipmaps": false,
+  "packable": true,
+  "width": 2,
+  "height": 2,
+  "platformSettings": {},
+  "subMetas": {
+    "single_color": {
+      "ver": "1.0.4",
+      "uuid": "f356aba1-884e-4022-abc4-c90c2a285f56",
+      "rawTextureUuid": "ff5737ae-78d9-472c-8223-3f96d686720c",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": 0,
+      "offsetY": 0,
+      "trimX": 0,
+      "trimY": 0,
+      "width": 2,
+      "height": 2,
+      "rawWidth": 2,
+      "rawHeight": 2,
+      "borderTop": 0,
+      "borderBottom": 0,
+      "borderLeft": 0,
+      "borderRight": 0,
+      "subMetas": {}
+    }
+  }
+}

assets/Scene/Dissolve_color/dissolve_color.effect

@@ -0,0 +1,86 @@
+// 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 }
+        fade_pct: { value: 1.0 }
+}%
+
+
+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;
+
+  #include <alpha-test>
+
+  #if USE_TEXTURE
+  in vec2 v_uv0;
+  uniform sampler2D texture;
+  uniform ARGS {
+		float fade_pct;
+	};
+  #endif
+
+  void main () {
+    vec4 color = vec4(1, 1, 1, 1);
+
+    #if USE_TEXTURE
+    color *= texture(texture, v_uv0);
+      #if CC_USE_ALPHA_ATLAS_TEXTURE
+      color.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;
+      #endif
+    #endif
+
+    // 当颜色小于溶解的程度，则直接抛弃
+		if(color.b < fade_pct) discard;
+    if(color.b < fade_pct + 0.1) {
+      // 对溶解的边缘做处理，变色或者改透明度等等
+			color = color * vec4(0.92, 0.8, 0.95, color.a);
+		}
+
+    gl_FragColor = color;
+  }
+}%

assets/Scene/Dissolve_color/dissolve_color.effect.meta

@@ -0,0 +1,17 @@
+{
+  "ver": "1.0.25",
+  "uuid": "8f11426c-8971-4082-b9b9-56ab5fb4bc9a",
+  "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;\n#if USE_ALPHA_TEST\n#endif\n#if USE_TEXTURE\nvarying vec2 v_uv0;\nuniform sampler2D texture;\nuniform float fade_pct;\n#endif\nvoid main () {\n  vec4 color = vec4(1, 1, 1, 1);\n  #if USE_TEXTURE\n  color *= texture2D(texture, v_uv0);\n    #if CC_USE_ALPHA_ATLAS_TEXTURE\n    color.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;\n    #endif\n  #endif\n  if(color.b < fade_pct) discard;\n  if(color.b < fade_pct + 0.1) {\n    color = color * vec4(0.92, 0.8, 0.95, color.a);\n  }\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;\n#if USE_ALPHA_TEST\n  uniform ALPHA_TEST {\n    float alphaThreshold;\n  };\n#endif\n#if USE_TEXTURE\nin vec2 v_uv0;\nuniform sampler2D texture;\nuniform ARGS {\n  float fade_pct;\n};\n#endif\nvoid main () {\n  vec4 color = vec4(1, 1, 1, 1);\n  #if USE_TEXTURE\n  color *= texture(texture, v_uv0);\n    #if CC_USE_ALPHA_ATLAS_TEXTURE\n    color.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;\n    #endif\n  #endif\n  if(color.b < fade_pct) discard;\n  if(color.b < fade_pct + 0.1) {\n    color = color * vec4(0.92, 0.8, 0.95, color.a);\n  }\n  gl_FragColor = color;\n}"
+      }
+    }
+  ],
+  "subMetas": {}
+}

assets/Scene/Dissolve_color/dissolve_color.mtl

@@ -0,0 +1,20 @@
+{
+  "__type__": "cc.Material",
+  "_name": "dissolve_color",
+  "_objFlags": 0,
+  "_native": "",
+  "_effectAsset": {
+    "__uuid__": "8f11426c-8971-4082-b9b9-56ab5fb4bc9a"
+  },
+  "_techniqueIndex": 0,
+  "_techniqueData": {
+    "0": {
+      "defines": {
+        "USE_TEXTURE": true
+      },
+      "props": {
+        "fade_pct": 0
+      }
+    }
+  }
+}

assets/Scene/Dissolve_color/dissolve_color.mtl.meta

@@ -0,0 +1,6 @@
+{
+  "ver": "1.0.3",
+  "uuid": "fa6f370c-414d-468b-ad8b-7ac31ff369d5",
+  "dataAsSubAsset": null,
+  "subMetas": {}
+}

assets/Scene/Home/Home.ts

@@ -11,7 +11,8 @@ enum sceneList {
   'Typer' = '打字机效果',
   'Moving_ghost' = '移动残影效果',
   'Screen_vibrating' = '震屏效果+动画恢复第一帧',
-  'Bullet_Tracking' = '子弹跟踪效果'
+  'Bullet_Tracking' = '子弹跟踪效果',
+  'Dissolve_color' = 'shader 溶解效果',
 }
 
 @ccclass

doc/Dissolve_color/shader 溶解效果.md

@@ -0,0 +1,58 @@
+# 效果演示
+
+物体的淡入淡出是游戏当中很常见的一种状态切换效果，但是有时候我们希望`fade`切换的时候，物体能够能更有色彩层次感或者其他一些特殊的中间状态，这个时候就得自己去写着色器，这种区别于单纯的淡入和淡出的效果可以形象地叫做溶解。
+
+![demo](./resources/demo.gif)
+
+# 实现思路
+
+溶解效果的思路很简单，先获取到当前贴图的色彩，然后定义一个对照维度，大部分情况下就取rgb的某一色彩通道就可以了，比如异名demo中的色调偏蓝色调，异名的对比值就取rgb中的blue，然后动态去改变该维度的参考值，当纹理贴图的色块blue值小于该参考值的时候就去色。当参考值变为0的时候，我们的色彩也就完全溶解掉了。`effect`代码如下：
+
+```c++
+void main () {
+  vec4 color = vec4(1, 1, 1, 1);
+
+  #if USE_TEXTURE
+  color *= texture(texture, v_uv0);
+    #if CC_USE_ALPHA_ATLAS_TEXTURE
+    color.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;
+    #endif
+  #endif
+
+  // 当颜色小于溶解的程度，则直接抛弃
+  if(color.b < fade_pct) discard;
+  gl_FragColor = color;
+}
+
+```
+
+如果我们希望溶解更加有层次变化，我们还可以对溶解的边缘做一些处理，比如透明度改变，色彩改变等，这就需要代入我们自己的使用场景中，根据实际的需要去调整，比如异名的demo中，希望溶解的边缘有一些蓝色调的变化：
+
+```js
+if(color.b < fade_pct + 0.1) {
+  color = vec4(0.92, 0.8, 0.95, color.a);
+}
+```
+
+然后我们需要在`update`的时候去动态更新并设置`fade_pct`，以达到纹理的溶解效果动态变化：
+
+```js
+update(dt) {
+  this.fadePct += dt * this.speed;
+  this.material.setProperty('fade_pct', this.fadePct));
+}
+```
+
+以上就是溶解效果的核心思路，完整的代码请通过源码查看。通过demo我们可以看出，不同的贴图的溶解效果和我们的溶解条件是直接关联的，左侧的死神色彩单一，蓝色通道较窄，它的变化过程就比较集中而且快，同时用蓝色调处理溶解的边缘效果的过渡也比较融洽。右边的骑士，色彩比较丰富，用单一的蓝色通道当成溶解条件和过渡就相对来说比较生硬，我们需要视项目的实际情况动态调整。
+
+# 效果预览
+
+源码获取请点击**查看原文**，长按二维码查看效果👇
+
+![ewm](./resources/ewm.png)
+
+我是异名，你的阅读是我的动力
+
+
+
+