From 7f02ee1eb00db542c231ed3ca0ebb2972d0114e3 Mon Sep 17 00:00:00 2001 From: caizhitao Date: Thu, 19 Dec 2019 15:45:29 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=9D=E6=AD=A5=E5=8F=91=E5=85=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/effects/outter-glow.effect | 39 +++++++++++++++++------- assets/effects/outter-glow.effect.meta | 4 +-- assets/materials/outter-glow.mtl | 2 +- assets/scenes/OutterGlowEffectScene.fire | 10 +++--- settings/project.json | 13 ++++---- 5 files changed, 42 insertions(+), 26 deletions(-) diff --git a/assets/effects/outter-glow.effect b/assets/effects/outter-glow.effect index a4eeaad..aaa0e69 100644 --- a/assets/effects/outter-glow.effect +++ b/assets/effects/outter-glow.effect @@ -75,24 +75,40 @@ CCProgram fs %{ // 特别地，必须是 vec4 先于 float 声明 }; + float getAlpha(float size) { + vec4 color_up = texture(texture, v_uv0 + vec2(0, size)); + vec4 color_down = texture(texture, v_uv0 - vec2(0, size)); + vec4 color_left = texture(texture, v_uv0 - vec2(size, 0)); + vec4 color_right = texture(texture, v_uv0 + vec2(size, 0)); + vec4 color_up_left = texture(texture, v_uv0 + vec2(size, -size)); + vec4 color_up_right = texture(texture, v_uv0 + vec2(size, size)); + vec4 color_down_left = texture(texture, v_uv0 + vec2(-size, -size)); + vec4 color_down_right = texture(texture, v_uv0 + vec2(-size, size)); + 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; + return step(0.000000001, total); + } + // 将图像往8个方向偏移后，得到一个类放大效果，然后取放大后的图像的透明度，即可得到一个放大后的区域，可以很方便填充（描边）颜色 // 取当前点上、下、左、右、上左、上右、下左、下右共计8个方向，距离为 outlineSize 的8个点，求他们的透明度之和 // 由此可以得到当前点是否属于图像往八个方向做偏移后得到的放大图区域，并且能得到该点最终透明度值 // 最终对应的为图像偏移/放大后的背景区域 float getBgAlpha() { - vec4 color_up = texture(texture, v_uv0 + vec2(0, outlineSize)); - vec4 color_down = texture(texture, v_uv0 - vec2(0, outlineSize)); - vec4 color_left = texture(texture, v_uv0 - vec2(outlineSize, 0)); - vec4 color_right = texture(texture, v_uv0 + vec2(outlineSize, 0)); - vec4 color_up_left = texture(texture, v_uv0 + vec2(outlineSize, -outlineSize)); - vec4 color_up_right = texture(texture, v_uv0 + vec2(outlineSize, outlineSize)); - vec4 color_down_left = texture(texture, v_uv0 + vec2(-outlineSize, -outlineSize)); - vec4 color_down_right = texture(texture, v_uv0 + vec2(-outlineSize, outlineSize)); - 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; - total *= 0.125; - return clamp(total, 0.0, 1.0); + vec4 color_cur = texture(texture, v_uv0); + float alpha = step(0.000000001, color_cur.a); + if (alpha > 0.000000001) { + return 1.0; + } else { + float total = 0.0; + for (float i = 0.0; i <= 1.0; i += 0.01) { + total += getAlpha(outlineSize * i); + } + total *= 0.01; + return clamp(total, 0.0, 1.0); + } } + + #endif void main () { @@ -128,6 +144,7 @@ CCProgram fs %{ // 即最终颜色如下： // color_src * GL_SRC_ALPHA + color_dest * GL_ONE_MINUS_SRC_ALPHA gl_FragColor = color_src * color_src.a + color_dest * (1.0 - color_src.a); + // gl_FragColor = color_dest; #endif } }% diff --git a/assets/effects/outter-glow.effect.meta b/assets/effects/outter-glow.effect.meta index 9107921..6201736 100644 --- a/assets/effects/outter-glow.effect.meta +++ b/assets/effects/outter-glow.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\n\nuniform vec4 outlineColor;\nuniform float outlineSize;\n\nfloat getBgAlpha() {\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 total *= 0.125;\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 vec4 color_dest = outlineColor * getBgAlpha();\n\n vec4 color_src = o;\n\n gl_FragColor = color_src * color_src.a + color_dest * (1.0 - color_src.a);\n #endif\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 getAlpha(float size) {\n vec4 color_up = texture2D(texture, v_uv0 + vec2(0, size)); \n vec4 color_down = texture2D(texture, v_uv0 - vec2(0, size)); \n vec4 color_left = texture2D(texture, v_uv0 - vec2(size, 0)); \n vec4 color_right = texture2D(texture, v_uv0 + vec2(size, 0)); \n vec4 color_up_left = texture2D(texture, v_uv0 + vec2(size, -size)); \n vec4 color_up_right = texture2D(texture, v_uv0 + vec2(size, size)); \n vec4 color_down_left = texture2D(texture, v_uv0 + vec2(-size, -size)); \n vec4 color_down_right = texture2D(texture, v_uv0 + vec2(-size, size)); \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 step(0.000000001, total);\n}\n\nfloat getBgAlpha() {\n vec4 color_cur = texture2D(texture, v_uv0);\n float alpha = step(0.000000001, color_cur.a);\n if (alpha > 0.000000001) {\n return 1.0;\n } else {\n float total = 0.0;\n for (float i = 0.0; i <= 1.0; i += 0.01) {\n total += getAlpha(outlineSize * i);\n }\n total *= 0.01;\n return clamp(total, 0.0, 1.0);\n }\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 vec4 color_dest = outlineColor * getBgAlpha();\n\n vec4 color_src = o;\n\n gl_FragColor = color_src * color_src.a + color_dest * (1.0 - color_src.a);\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\n\nuniform Outline {\n\n vec4 outlineColor;\n\n float outlineSize;\n\n};\n\nfloat getBgAlpha() {\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 total *= 0.125;\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 vec4 color_dest = outlineColor * getBgAlpha();\n\n vec4 color_src = o;\n\n gl_FragColor = color_src * color_src.a + color_dest * (1.0 - color_src.a);\n #endif\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 getAlpha(float size) {\n vec4 color_up = texture(texture, v_uv0 + vec2(0, size)); \n vec4 color_down = texture(texture, v_uv0 - vec2(0, size)); \n vec4 color_left = texture(texture, v_uv0 - vec2(size, 0)); \n vec4 color_right = texture(texture, v_uv0 + vec2(size, 0)); \n vec4 color_up_left = texture(texture, v_uv0 + vec2(size, -size)); \n vec4 color_up_right = texture(texture, v_uv0 + vec2(size, size)); \n vec4 color_down_left = texture(texture, v_uv0 + vec2(-size, -size)); \n vec4 color_down_right = texture(texture, v_uv0 + vec2(-size, size)); \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 step(0.000000001, total);\n}\n\nfloat getBgAlpha() {\n vec4 color_cur = texture(texture, v_uv0);\n float alpha = step(0.000000001, color_cur.a);\n if (alpha > 0.000000001) {\n return 1.0;\n } else {\n float total = 0.0;\n for (float i = 0.0; i <= 1.0; i += 0.01) {\n total += getAlpha(outlineSize * i);\n }\n total *= 0.01;\n return clamp(total, 0.0, 1.0);\n }\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 vec4 color_dest = outlineColor * getBgAlpha();\n\n vec4 color_src = o;\n\n gl_FragColor = color_src * color_src.a + color_dest * (1.0 - color_src.a);\n\n #endif\n}\n" } } ], diff --git a/assets/materials/outter-glow.mtl b/assets/materials/outter-glow.mtl index d224faa..732106d 100644 --- a/assets/materials/outter-glow.mtl +++ b/assets/materials/outter-glow.mtl @@ -20,6 +20,6 @@ "z": 0, "w": 1 }, - "outlineSize": 0.01 + "outlineSize": 0.1 } } \ No newline at end of file diff --git a/assets/scenes/OutterGlowEffectScene.fire b/assets/scenes/OutterGlowEffectScene.fire index aea1189..eead55f 100755 --- a/assets/scenes/OutterGlowEffectScene.fire +++ b/assets/scenes/OutterGlowEffectScene.fire @@ -991,7 +991,7 @@ }, "_contentSize": { "__type__": "cc.Size", - "width": 585.3299999999999, + "width": 195, "height": 0 }, "_anchorPoint": { @@ -1065,7 +1065,7 @@ "__type__": "TypedArray", "ctor": "Float64Array", "array": [ - -195.16499999999996, + 0, 0, 0, 0, @@ -1130,7 +1130,7 @@ "__id__": 21 }, "_children": [], - "_active": true, + "_active": false, "_components": [ { "__id__": 25 @@ -1224,7 +1224,7 @@ "_enabled": true, "_layoutSize": { "__type__": "cc.Size", - "width": 585.3299999999999, + "width": 195, "height": 0 }, "_resize": 1, @@ -1258,7 +1258,7 @@ "alignMode": 1, "_target": null, "_alignFlags": 8, - "_left": 0.15, + "_left": 0.35329687499999995, "_right": 0, "_top": 0, "_bottom": 0, diff --git a/settings/project.json b/settings/project.json index 65a0f90..8641067 100755 --- a/settings/project.json +++ b/settings/project.json @@ -8,27 +8,26 @@ "group-list": [ "default" ], - "start-scene": "2d2f792f-a40c-49bb-a189-ed176a246e49", "design-resolution-width": 960, "design-resolution-height": 640, "fit-width": false, "fit-height": true, "use-project-simulator-setting": false, "simulator-orientation": false, - "use-customize-simulator": false, + "use-customize-simulator": true, "simulator-resolution": { - "width": 960, - "height": 640 + "height": 640, + "width": 960 }, "last-module-event-record-time": 1575989336079, "assets-sort-type": "name", "facebook": { - "enable": false, "appID": "", - "live": { + "audience": { "enable": false }, - "audience": { + "enable": false, + "live": { "enable": false } }