Test_Project_Cocos/CocosCreator-Shader-Effect-Demo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

初步发光

Browse Source
This commit is contained in:
caizhitao 2019-12-19 15:45:29 +08:00
parent eee15dd6f0
commit 7f02ee1eb0
5 changed files with 42 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
assets/effects/outter-glow.effect
View File

@ -75,24 +75,40 @@ CCProgram fs %{
// 特别地，必须是 vec4 先于 float 声明 // 特别地，必须是 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个方向偏移后，得到一个类放大效果，然后取放大后的图像的透明度，即可得到一个放大后的区域，可以很方便填充（描边）颜色
// 取当前点上、下、左、右、上左、上右、下左、下右共计8个方向，距离为 outlineSize 的8个点，求他们的透明度之和 // 取当前点上、下、左、右、上左、上右、下左、下右共计8个方向，距离为 outlineSize 的8个点，求他们的透明度之和
// 由此可以得到当前点是否属于图像往八个方向做偏移后得到的放大图区域，并且能得到该点最终透明度值 // 由此可以得到当前点是否属于图像往八个方向做偏移后得到的放大图区域，并且能得到该点最终透明度值
// 最终对应的为图像偏移/放大后的背景区域 // 最终对应的为图像偏移/放大后的背景区域
float getBgAlpha() { float getBgAlpha() {
vec4 color_up = texture(texture, v_uv0 + vec2(0, outlineSize)); vec4 color_cur = texture(texture, v_uv0);
vec4 color_down = texture(texture, v_uv0 - vec2(0, outlineSize)); float alpha = step(0.000000001, color_cur.a);
vec4 color_left = texture(texture, v_uv0 - vec2(outlineSize, 0)); if (alpha > 0.000000001) {
vec4 color_right = texture(texture, v_uv0 + vec2(outlineSize, 0)); return 1.0;
vec4 color_up_left = texture(texture, v_uv0 + vec2(outlineSize, -outlineSize)); } else {
vec4 color_up_right = texture(texture, v_uv0 + vec2(outlineSize, outlineSize)); float total = 0.0;
vec4 color_down_left = texture(texture, v_uv0 + vec2(-outlineSize, -outlineSize)); for (float i = 0.0; i <= 1.0; i += 0.01) {
vec4 color_down_right = texture(texture, v_uv0 + vec2(-outlineSize, outlineSize)); total += getAlpha(outlineSize * i);
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; total *= 0.01;
return clamp(total, 0.0, 1.0); return clamp(total, 0.0, 1.0);
}
} }
#endif #endif
void main () { void main () {
@ -128,6 +144,7 @@ CCProgram fs %{
// 即最终颜色如下： // 即最终颜色如下：
// color_src * GL_SRC_ALPHA + color_dest * GL_ONE_MINUS_SRC_ALPHA // 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_src * color_src.a + color_dest * (1.0 - color_src.a);
// gl_FragColor = color_dest;
#endif #endif
} }
}% }%

4
assets/effects/outter-glow.effect.meta
View File

@ -5,11 +5,11 @@
{ {
"glsl1": { "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", "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": { "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", "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"
} }
} }
], ],

2
assets/materials/outter-glow.mtl
View File

@ -20,6 +20,6 @@
"z": 0, "z": 0,
"w": 1 "w": 1
}, },
"outlineSize": 0.01 "outlineSize": 0.1
} }
} }

10
assets/scenes/OutterGlowEffectScene.fire
View File

@ -991,7 +991,7 @@
}, },
"_contentSize": { "_contentSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 585.3299999999999, "width": 195,
"height": 0 "height": 0
}, },
"_anchorPoint": { "_anchorPoint": {
@ -1065,7 +1065,7 @@
"__type__": "TypedArray", "__type__": "TypedArray",
"ctor": "Float64Array", "ctor": "Float64Array",
"array": [ "array": [
-195.16499999999996, 0,
0, 0,
0, 0,
0, 0,
@ -1130,7 +1130,7 @@
"__id__": 21 "__id__": 21
}, },
"_children": [], "_children": [],
"_active": true, "_active": false,
"_components": [ "_components": [
{ {
"__id__": 25 "__id__": 25
@ -1224,7 +1224,7 @@
"_enabled": true, "_enabled": true,
"_layoutSize": { "_layoutSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 585.3299999999999, "width": 195,
"height": 0 "height": 0
}, },
"_resize": 1, "_resize": 1,
@ -1258,7 +1258,7 @@
"alignMode": 1, "alignMode": 1,
"_target": null, "_target": null,
"_alignFlags": 8, "_alignFlags": 8,
"_left": 0.15, "_left": 0.35329687499999995,
"_right": 0, "_right": 0,
"_top": 0, "_top": 0,
"_bottom": 0, "_bottom": 0,

13
settings/project.json
View File

@ -8,27 +8,26 @@
"group-list": [ "group-list": [
"default" "default"
], ],
"start-scene": "2d2f792f-a40c-49bb-a189-ed176a246e49",
"design-resolution-width": 960, "design-resolution-width": 960,
"design-resolution-height": 640, "design-resolution-height": 640,
"fit-width": false, "fit-width": false,
"fit-height": true, "fit-height": true,
"use-project-simulator-setting": false, "use-project-simulator-setting": false,
"simulator-orientation": false, "simulator-orientation": false,
"use-customize-simulator": false, "use-customize-simulator": true,
"simulator-resolution": { "simulator-resolution": {
"width": 960, "height": 640,
"height": 640 "width": 960
}, },
"last-module-event-record-time": 1575989336079, "last-module-event-record-time": 1575989336079,
"assets-sort-type": "name", "assets-sort-type": "name",
"facebook": { "facebook": {
"enable": false,
"appID": "", "appID": "",
"live": { "audience": {
"enable": false "enable": false
}, },
"audience": { "enable": false,
"live": {
"enable": false "enable": false
} }
} }