马赛克/像素风shader

assets/Scene/Home/Home.ts

@@ -18,7 +18,8 @@ enum sceneList {
   'Change_clothes' = '换装',
   'Screen_vibrating' = '震屏效果+动画恢复第一帧',
   'Joystick' = '遥控杆',
-  'Filter' = '颜色滤镜'
+  'Filter' = '颜色滤镜',
+  'Mosaic' = '马赛克/像素风（shader）'
 }
 
 @ccclass

assets/Scene/Mosaic.meta

@@ -0,0 +1,7 @@
+{
+  "ver": "1.0.1",
+  "uuid": "bbd908a4-1464-41f7-a2dd-66115d27bc7a",
+  "isSubpackage": false,
+  "subpackageName": "",
+  "subMetas": {}
+}

assets/Scene/Mosaic/Mosaic.effect

@@ -0,0 +1,94 @@
+// 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 }
+        x_count: { value: 100.0 }
+        y_count: { value: 100.0 }
+}%
+
+
+CCProgram vs %{
+  precision highp float;
+
+  #include <cc-global>
+
+  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
+
+  #if USE_MASAIC
+  uniform ARGS{
+    float x_count;
+    float y_count;
+  };
+
+  vec2 getUvMapPos() {
+    float block_w = 1.0 / x_count;
+    float block_x_idx = floor(v_uv0.x / block_w);
+
+    float block_h = 1.0 / y_count;
+    float block_y_idx = floor(v_uv0.y / block_h);
+
+    return vec2(block_w * (block_x_idx + 0.5), block_h * (block_y_idx + 0.5));
+  }
+  #endif
+
+  void main () {
+    vec4 o = vec4(1, 1, 1, 1);
+    vec2 realPos = v_uv0;
+
+    #if USE_MASAIC
+      realPos = getUvMapPos();
+    #endif
+
+    o *= texture(texture, realPos);
+    o *= v_color;
+
+    gl_FragColor = o;
+  }
+}%

assets/Scene/Mosaic/Mosaic.effect.meta

@@ -0,0 +1,17 @@
+{
+  "ver": "1.0.25",
+  "uuid": "a94a99c8-625f-4aef-8960-e983d429d3a6",
+  "compiledShaders": [
+    {
+      "glsl1": {
+        "vert": "\nprecision highp float;\nuniform mediump mat4 cc_matViewProj;\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\n#if USE_MASAIC\nuniform float x_count;\nuniform float y_count;\nvec2 getUvMapPos() {\n  float block_w = 1.0 / x_count;\n  float block_x_idx = floor(v_uv0.x / block_w);\n  float block_h = 1.0 / y_count;\n  float block_y_idx = floor(v_uv0.y / block_h);\n  return vec2(block_w * (block_x_idx + 0.5), block_h * (block_y_idx + 0.5));\n}\n#endif\nvoid main () {\n  vec4 o = vec4(1, 1, 1, 1);\n  vec2 realPos = v_uv0;\n  #if USE_MASAIC\n    realPos = getUvMapPos();\n  #endif\n  o *= texture2D(texture, realPos);\n  o *= v_color;\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};\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\n#if USE_MASAIC\nuniform ARGS{\n  float x_count;\n  float y_count;\n};\nvec2 getUvMapPos() {\n  float block_w = 1.0 / x_count;\n  float block_x_idx = floor(v_uv0.x / block_w);\n  float block_h = 1.0 / y_count;\n  float block_y_idx = floor(v_uv0.y / block_h);\n  return vec2(block_w * (block_x_idx + 0.5), block_h * (block_y_idx + 0.5));\n}\n#endif\nvoid main () {\n  vec4 o = vec4(1, 1, 1, 1);\n  vec2 realPos = v_uv0;\n  #if USE_MASAIC\n    realPos = getUvMapPos();\n  #endif\n  o *= texture(texture, realPos);\n  o *= v_color;\n  gl_FragColor = o;\n}"
+      }
+    }
+  ],
+  "subMetas": {}
+}

assets/Scene/Mosaic/Mosaic.fire.meta

@@ -0,0 +1,7 @@
+{
+  "ver": "1.2.6",
+  "uuid": "9708c3cd-9189-4481-a85e-7200d9e89417",
+  "asyncLoadAssets": false,
+  "autoReleaseAssets": false,
+  "subMetas": {}
+}

assets/Scene/Mosaic/Mosaic.mtl

@@ -0,0 +1,22 @@
+{
+  "__type__": "cc.Material",
+  "_name": "Mosaic",
+  "_objFlags": 0,
+  "_native": "",
+  "_effectAsset": {
+    "__uuid__": "a94a99c8-625f-4aef-8960-e983d429d3a6"
+  },
+  "_techniqueIndex": 0,
+  "_techniqueData": {
+    "0": {
+      "props": {
+        "x_count": 100,
+        "y_count": 100
+      },
+      "defines": {
+        "USE_TEXTURE": true,
+        "USE_MASAIC": true
+      }
+    }
+  }
+}

assets/Scene/Mosaic/Mosaic.mtl.meta

@@ -0,0 +1,6 @@
+{
+  "ver": "1.0.3",
+  "uuid": "67dbc9c2-8d9f-4267-b0ac-79eac5cd2077",
+  "dataAsSubAsset": null,
+  "subMetas": {}
+}

assets/Scene/Mosaic/Mosaic.ts

@@ -0,0 +1,18 @@
+const { ccclass, property } = cc._decorator;
+
+@ccclass
+export default class Mosaic extends cc.Component {
+  material: cc.Material = null;
+
+  onLoad() {
+    this.material = this.node.getChildByName('npc').getComponent(cc.Sprite).getMaterial(0);
+  }
+
+  setPixelCount(slide: cc.Slider, type: 'x' | 'y') {
+    this.material.setProperty(`${type}_count`, Math.floor(slide.progress * 100));
+  }
+
+  togglePixel(toggle: cc.Toggle) {
+    this.material.define('USE_MASAIC', toggle.isChecked, 0, true);
+  }
+}

assets/Scene/Mosaic/Mosaic.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.5",
+  "uuid": "e6cdac1f-801d-4348-a907-4687a8d9d1f2",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}

assets/Scene/Mosaic/Texture.meta

@@ -0,0 +1,7 @@
+{
+  "ver": "1.0.1",
+  "uuid": "bc34001f-7af6-4bb4-a663-2e1850c181c9",
+  "isSubpackage": false,
+  "subpackageName": "",
+  "subMetas": {}
+}

assets/Scene/Mosaic/Texture/bg.png.meta

@@ -0,0 +1,36 @@
+{
+  "ver": "2.3.4",
+  "uuid": "ab0995ce-a9ef-4247-a848-d4bd77db5258",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "premultiplyAlpha": false,
+  "genMipmaps": false,
+  "packable": true,
+  "width": 2,
+  "height": 2,
+  "platformSettings": {},
+  "subMetas": {
+    "bg": {
+      "ver": "1.0.4",
+      "uuid": "73a9939f-c882-4bdb-a6b4-7384bd4f32a3",
+      "rawTextureUuid": "ab0995ce-a9ef-4247-a848-d4bd77db5258",
+      "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/Mosaic/Texture/npc.png.meta

@@ -0,0 +1,36 @@
+{
+  "ver": "2.3.4",
+  "uuid": "ecdb72e0-ae6f-445f-9513-baac57e1469a",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "premultiplyAlpha": false,
+  "genMipmaps": false,
+  "packable": false,
+  "width": 512,
+  "height": 512,
+  "platformSettings": {},
+  "subMetas": {
+    "npc": {
+      "ver": "1.0.4",
+      "uuid": "8e6013be-9ce2-4cee-bebe-6d94b901ccfe",
+      "rawTextureUuid": "ecdb72e0-ae6f-445f-9513-baac57e1469a",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": -3.5,
+      "offsetY": -27,
+      "trimX": 72,
+      "trimY": 54,
+      "width": 361,
+      "height": 458,
+      "rawWidth": 512,
+      "rawHeight": 512,
+      "borderTop": 0,
+      "borderBottom": 0,
+      "borderLeft": 0,
+      "borderRight": 0,
+      "subMetas": {}
+    }
+  }
+}

doc/footer.md

@@ -1,6 +1,9 @@
 我是异名，你的阅读是我的动力，其他文章链接：
+- [水波扩散效果(shader)](https://mp.weixin.qq.com/s/e9WHuwaLKt8qov91D_JVwA)
+- [镜面光泽效果(shader)](https://mp.weixin.qq.com/s/zcUvkPuMJT_wA82jCsUXig)
 - [追光效果(shader)](https://mp.weixin.qq.com/s/YFvMAuMqageplRCp9YYgpQ)
 - [溶解效果(shader)](https://mp.weixin.qq.com/s/8uu3gyWWMt0gf32XAinl-g)
+- [颜色滤镜(shader)](https://mp.weixin.qq.com/s/qxzNOz97818wc9f5khwNyg)
 - [富文本打字机效果](https://mp.weixin.qq.com/s/WlVBzSgCNTNPD2bxXda-mg)
 - [子弹跟踪效果](https://mp.weixin.qq.com/s/2egrmJC1AgRXNWuGOIhbXg)
 - [微信小游戏超出4M之后](https://mp.weixin.qq.com/s/l8MDHMnVl8eVl8U6krBeDw)