初步实现描边

assets/effects/sprite-example.effect

@@ -48,7 +48,7 @@ CCProgram vs %{
   // 顶点坐标
   in vec3 a_position;
 
-  // 顶点颜色
+  // 顶点颜色，实际为对应节点的颜色
   in vec4 a_color;
 
   // out 用在函数的参数中，表示该参数是输出参数，值是会改变的
@@ -120,6 +120,7 @@ CCProgram fs %{
       #endif
     #endif
 
+    // 纹理颜色 和 节点颜色进行混合得出最终颜色
     o *= v_color;
 
     // 这个方法来自 alpha-test 头文件

assets/effects/sprite-outline.effect

@@ -65,9 +65,8 @@ CCProgram fs %{
   uniform sampler2D texture;
   #endif
 
-
-
   #if SHOW_OUT_LINE
+
   uniform Outline {
     // 描边颜色 
     vec4 outlineColor;
@@ -75,9 +74,11 @@ CCProgram fs %{
     float outlineSize;
     // 特别地，必须是 vec4 先于 float 声明
   };
-  #endif
 
   // 获取背面颜色
+  // 取当前点上、下、左、右、上左、上右、下左、下右共计8个方向，距离为 outlineSize 的8个点，求他们的透明度之和
+  // 由此可以得到当前点是否属于图像往八个方向做偏移后得到的放大图区域，并且能得到该点最终透明度值
+  // 最终对应的为图像偏移/放大后的背景区域
   float getBackArea() {
     vec4 color_up = texture(texture, v_uv0 + vec2(0, outlineSize)); 
     vec4 color_down = texture(texture, v_uv0 - vec2(0, outlineSize)); 
@@ -91,6 +92,8 @@ CCProgram fs %{
     return clamp(total, 0.0, 1.0);
   }
 
+  #endif
+
   void main () {
     vec4 o = vec4(1, 1, 1, 1);
 
@@ -107,8 +110,17 @@ CCProgram fs %{
 
     gl_FragColor = o;
 
-    // 正常的rgb + 正常的透明区域 * 背面颜色 * 描边颜色
+    #if SHOW_OUT_LINE
-    // gl_FragColor = vec4(o.rgb + (1.0 - o.a) * outlineColor.rgb * getBackArea(), 1.0);
+      // 给放大后的区域填我们的背景颜色（实际为描边颜色）
-    // gl_FragColor = vec4(o.rgb + outlineColor.rgb * getBackArea(), 1.0);
+      gl_FragColor = outlineColor * getBackArea();
+
+      // 然后在这个区域上，叠加上我们原来图像
+      gl_FragColor = o + (1.0 - o.a) * gl_FragColor;
+
+      // gl_FragColor = o +（1.0 - o.a) * outlineColor * getBackArea();
+
+      // 原来的实现
+      // gl_FragColor = vec4(o.rgb + (1.0 - o.a) * outlineColor.rgb * getBackArea(), 1.0);
+    #endif
   }
 }%

assets/effects/sprite-outline.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 SHOW_OUT_LINE\nuniform float outlineSize;\n\n#endif\n\nfloat getBackArea() {\n  vec4 color_up = texture2D(texture, v_uv0 + vec2(0, outlineSize)); \n  vec4 color_down = texture2D(texture, v_uv0 - vec2(0, outlineSize)); \n  vec4 color_left = texture2D(texture, v_uv0 - vec2(outlineSize, 0)); \n  vec4 color_right = texture2D(texture, v_uv0 + vec2(outlineSize, 0)); \n  vec4 color_up_left = texture2D(texture, v_uv0 + vec2(outlineSize, -outlineSize)); \n  vec4 color_up_right = texture2D(texture, v_uv0 + vec2(outlineSize, outlineSize)); \n  vec4 color_down_left = texture2D(texture, v_uv0 + vec2(-outlineSize, -outlineSize)); \n  vec4 color_down_right = texture2D(texture, v_uv0 + vec2(-outlineSize, outlineSize)); \n  float total = color_right.a + color_left.a + color_down.a + color_up.a + color_up_left.a + color_up_right.a + color_down_left.a + color_down_right.a; \n  return clamp(total, 0.0, 1.0);\n}\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  gl_FragColor = o;\n\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 SHOW_OUT_LINE\n\nuniform vec4 outlineColor;\nuniform float outlineSize;\n\nfloat getBackArea() {\n  vec4 color_up = texture2D(texture, v_uv0 + vec2(0, outlineSize)); \n  vec4 color_down = texture2D(texture, v_uv0 - vec2(0, outlineSize)); \n  vec4 color_left = texture2D(texture, v_uv0 - vec2(outlineSize, 0)); \n  vec4 color_right = texture2D(texture, v_uv0 + vec2(outlineSize, 0)); \n  vec4 color_up_left = texture2D(texture, v_uv0 + vec2(outlineSize, -outlineSize)); \n  vec4 color_up_right = texture2D(texture, v_uv0 + vec2(outlineSize, outlineSize)); \n  vec4 color_down_left = texture2D(texture, v_uv0 + vec2(-outlineSize, -outlineSize)); \n  vec4 color_down_right = texture2D(texture, v_uv0 + vec2(-outlineSize, outlineSize)); \n  float total = color_right.a + color_left.a + color_down.a + color_up.a + color_up_left.a + color_up_right.a + color_down_left.a + color_down_right.a; \n  return clamp(total, 0.0, 1.0);\n}\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  gl_FragColor = o;\n\n  #if SHOW_OUT_LINE\n\n    gl_FragColor = outlineColor * getBackArea();\n\n    gl_FragColor = o + (1.0 - o.a) * gl_FragColor;\n\n  #endif\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 SHOW_OUT_LINE\nuniform Outline {\n\n  vec4 outlineColor;\n\n  float outlineSize;\n\n};\n#endif\n\nfloat getBackArea() {\n  vec4 color_up = texture(texture, v_uv0 + vec2(0, outlineSize)); \n  vec4 color_down = texture(texture, v_uv0 - vec2(0, outlineSize)); \n  vec4 color_left = texture(texture, v_uv0 - vec2(outlineSize, 0)); \n  vec4 color_right = texture(texture, v_uv0 + vec2(outlineSize, 0)); \n  vec4 color_up_left = texture(texture, v_uv0 + vec2(outlineSize, -outlineSize)); \n  vec4 color_up_right = texture(texture, v_uv0 + vec2(outlineSize, outlineSize)); \n  vec4 color_down_left = texture(texture, v_uv0 + vec2(-outlineSize, -outlineSize)); \n  vec4 color_down_right = texture(texture, v_uv0 + vec2(-outlineSize, outlineSize)); \n  float total = color_right.a + color_left.a + color_down.a + color_up.a + color_up_left.a + color_up_right.a + color_down_left.a + color_down_right.a; \n  return clamp(total, 0.0, 1.0);\n}\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  gl_FragColor = o;\n\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 SHOW_OUT_LINE\n\nuniform Outline {\n\n  vec4 outlineColor;\n\n  float outlineSize;\n\n};\n\nfloat getBackArea() {\n  vec4 color_up = texture(texture, v_uv0 + vec2(0, outlineSize)); \n  vec4 color_down = texture(texture, v_uv0 - vec2(0, outlineSize)); \n  vec4 color_left = texture(texture, v_uv0 - vec2(outlineSize, 0)); \n  vec4 color_right = texture(texture, v_uv0 + vec2(outlineSize, 0)); \n  vec4 color_up_left = texture(texture, v_uv0 + vec2(outlineSize, -outlineSize)); \n  vec4 color_up_right = texture(texture, v_uv0 + vec2(outlineSize, outlineSize)); \n  vec4 color_down_left = texture(texture, v_uv0 + vec2(-outlineSize, -outlineSize)); \n  vec4 color_down_right = texture(texture, v_uv0 + vec2(-outlineSize, outlineSize)); \n  float total = color_right.a + color_left.a + color_down.a + color_up.a + color_up_left.a + color_up_right.a + color_down_left.a + color_down_right.a; \n  return clamp(total, 0.0, 1.0);\n}\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  gl_FragColor = o;\n\n  #if SHOW_OUT_LINE\n\n    gl_FragColor = outlineColor * getBackArea();\n\n    gl_FragColor = o + (1.0 - o.a) * gl_FragColor;\n\n  #endif\n}\n"
       }
     }
   ],

assets/materials/sprite-outline.mtl

@@ -8,6 +8,7 @@
   },
   "_defines": {
     "USE_TEXTURE": true,
+    "USE_ALPHA_TEST": false,
     "SHOW_OUT_LINE": true
   },
   "_props": {
@@ -15,10 +16,10 @@
     "outlineColor": {
       "__type__": "cc.Vec4",
       "x": 1,
-      "y": 1,
+      "y": 0,
       "z": 0,
       "w": 1
     },
-    "outlineSize": 0.01
+    "outlineSize": 0.02
   }
 }

assets/scenes/MainScene.fire

@@ -78,16 +78,19 @@
         "__id__": 8
       },
       {
-        "__id__": 11
+        "__id__": 10
+      },
+      {
+        "__id__": 12
       }
     ],
     "_active": true,
     "_components": [
       {
-        "__id__": 13
+        "__id__": 14
       },
       {
-        "__id__": 14
+        "__id__": 15
       }
     ],
     "_prefab": null,
@@ -177,7 +180,7 @@
       "array": [
         0,
         0,
-        394.90758412570403,
+        351.60631393648214,
         0,
         0,
         0,
@@ -372,9 +375,6 @@
     "_components": [
       {
         "__id__": 9
-      },
-      {
-        "__id__": 10
       }
     ],
     "_prefab": null,
@@ -457,16 +457,6 @@
     "_atlas": null,
     "_id": "c5wu68mipC4qBjTD+u0rFa"
   },
-  {
-    "__type__": "93154zKEUxNspOL91D2hv6b",
-    "_name": "",
-    "_objFlags": 0,
-    "node": {
-      "__id__": 8
-    },
-    "_enabled": true,
-    "_id": "4aQ0ah9X1FT4GFrlS5JCi9"
-  },
   {
     "__type__": "cc.Node",
     "_name": "HelloLabel",
@@ -478,7 +468,7 @@
     "_active": true,
     "_components": [
       {
-        "__id__": 12
+        "__id__": 11
       }
     ],
     "_prefab": null,
@@ -534,7 +524,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 11
+      "__id__": 10
     },
     "_enabled": true,
     "_materials": [
@@ -559,6 +549,100 @@
     "_N$cacheMode": 0,
     "_id": "9fH5zrVThO/I9ly3o3xhIT"
   },
+  {
+    "__type__": "cc.Node",
+    "_name": "ball_00",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 2
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 13
+      }
+    ],
+    "_prefab": null,
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 60,
+      "height": 60
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_trs": {
+      "__type__": "TypedArray",
+      "ctor": "Float64Array",
+      "array": [
+        -243,
+        106,
+        0,
+        0,
+        0,
+        0,
+        1,
+        1,
+        1,
+        1
+      ]
+    },
+    "_eulerAngles": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_skewX": 0,
+    "_skewY": 0,
+    "_is3DNode": false,
+    "_groupIndex": 0,
+    "groupIndex": 0,
+    "_id": "7c8OSA1YJNqKRZUzDDNpTz"
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 12
+    },
+    "_enabled": true,
+    "_materials": [
+      {
+        "__uuid__": "daf44951-2c80-4778-b99f-52cfc78ab053"
+      }
+    ],
+    "_srcBlendFactor": 770,
+    "_dstBlendFactor": 771,
+    "_spriteFrame": {
+      "__uuid__": "d0b78623-4e79-4de1-b1d2-ea211bf4652c"
+    },
+    "_type": 0,
+    "_sizeMode": 1,
+    "_fillType": 0,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_atlas": null,
+    "_id": "07Kzm51XBOGJMcszXVW8uC"
+  },
   {
     "__type__": "cc.Canvas",
     "_name": "",
@@ -585,7 +669,7 @@
     },
     "_enabled": true,
     "label": {
-      "__id__": 12
+      "__id__": 11
     },
     "text": "hello",
     "_id": "aa8ulaDR9JcbRoT7r3pqZq"

assets/textures/ball_00.png.meta

@@ -1,6 +1,6 @@
 {
   "ver": "2.3.3",
-  "uuid": "268e9b44-3120-4787-87cb-eb9c00d9fbaf",
+  "uuid": "c996c862-3d09-4bc6-915d-e8a8e7226933",
   "type": "sprite",
   "wrapMode": "clamp",
   "filterMode": "bilinear",
@@ -9,10 +9,10 @@
   "packable": true,
   "platformSettings": {},
   "subMetas": {
-    "prestige_02": {
+    "ball_00": {
       "ver": "1.0.4",
-      "uuid": "24e1449a-64d2-4df5-bcf9-8ce55ecb6637",
+      "uuid": "d0b78623-4e79-4de1-b1d2-ea211bf4652c",
-      "rawTextureUuid": "268e9b44-3120-4787-87cb-eb9c00d9fbaf",
+      "rawTextureUuid": "c996c862-3d09-4bc6-915d-e8a8e7226933",
       "trimType": "auto",
       "trimThreshold": 1,
       "rotated": false,

assets/textures/prestige_01.png.meta

@@ -1,34 +0,0 @@
-{
-  "ver": "2.3.3",
-  "uuid": "9e216a31-1e40-4350-b20c-629287c96706",
-  "type": "sprite",
-  "wrapMode": "clamp",
-  "filterMode": "bilinear",
-  "premultiplyAlpha": false,
-  "genMipmaps": false,
-  "packable": true,
-  "platformSettings": {},
-  "subMetas": {
-    "prestige_01": {
-      "ver": "1.0.4",
-      "uuid": "89478038-ff44-410d-8044-8fb4dd82c1e8",
-      "rawTextureUuid": "9e216a31-1e40-4350-b20c-629287c96706",
-      "trimType": "auto",
-      "trimThreshold": 1,
-      "rotated": false,
-      "offsetX": -0.5,
-      "offsetY": 0.5,
-      "trimX": 0,
-      "trimY": 1,
-      "width": 59,
-      "height": 57,
-      "rawWidth": 60,
-      "rawHeight": 60,
-      "borderTop": 0,
-      "borderBottom": 0,
-      "borderLeft": 0,
-      "borderRight": 0,
-      "subMetas": {}
-    }
-  }
-}