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 2020-06-23 17:01:23 +08:00
parent eb0023a3c4
commit cc8c3b8bed
4 changed files with 26 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
assets/effects/sprite-glow-inner-v2.effect
View File

@ -102,6 +102,9 @@ CCProgram fs %{
uniform sampler2D texture; uniform sampler2D texture;
#endif #endif
// 定义向周边搜索的圈数
#define range 5.0
#if SHOW_INNER_GLOW #if SHOW_INNER_GLOW
uniform glow { uniform glow {
@ -144,52 +147,6 @@ CCProgram fs %{
return texture(texture, v_uv0); return texture(texture, v_uv0);
} }
/**
* 获取指定角度方向，距离为xxx的像素的透明度
*
* @param angle 角度 [0.0, 360.0]
* @param dist 距离 [0.0, 1.0]
*
* @return alpha [0.0, 1.0]
*/
float getColorAlpha(float angle, float dist) {
// 角度转弧度，公式为：弧度 = 角度 * (pi / 180)
// float radian = angle * 0.01745329252; // 这个浮点数是 pi / 180
float radian = radians(angle);
float width = dist;
float height = width / (spriteWidth / spriteHeight);
float dist_fixed = sqrt(pow(width, 2.0) + pow(height, 2.0));
vec4 color = getTextureColor(texture, v_uv0 + vec2(dist_fixed * cos(radian), dist_fixed * sin(radian)));
// vec4 color = getTextureColor(texture, v_uv0 + vec2(dist * cos(radian), dist * sin(radian)));
return color.a;
}
/**
* 获取指定距离的周边像素的透明度平均值
*
* @param dist 距离 [0.0, 1.0]
*
* @return average alpha [0.0, 1.0]
*/
float getAverageAlpha(float dist) {
float totalAlpha = 0.0;
// 以30度为一个单位，那么「周边一圈」就由0到360度中共计12个点的组成
totalAlpha += getColorAlpha(0.0, dist);
totalAlpha += getColorAlpha(30.0, dist);
totalAlpha += getColorAlpha(60.0, dist);
totalAlpha += getColorAlpha(90.0, dist);
totalAlpha += getColorAlpha(120.0, dist);
totalAlpha += getColorAlpha(150.0, dist);
totalAlpha += getColorAlpha(180.0, dist);
totalAlpha += getColorAlpha(210.0, dist);
totalAlpha += getColorAlpha(240.0, dist);
totalAlpha += getColorAlpha(270.0, dist);
totalAlpha += getColorAlpha(300.0, dist);
totalAlpha += getColorAlpha(330.0, dist);
return totalAlpha * 0.0833; // 1 / 12 = 0.08333
}
/** /**
* 获取发光的透明度 * 获取发光的透明度
*/ */
@ -208,20 +165,19 @@ CCProgram fs %{
return srcColor.a; return srcColor.a;
} }
// 将传入的指定距离，平均分成10圈，求出每一圈的平均透明度， // 每一圈的对应的步长
// 然后求和取平均值，那么就可以得到该点的平均透明度 float per_step_x = (1.0 / spriteWidth) * (glowColorSize * spriteWidth / range);
float per_step_y = (1.0 / spriteHeight) * (glowColorSize * spriteHeight / range);
// 取样周边一定范围透明度
float totalAlpha = 0.0; float totalAlpha = 0.0;
totalAlpha += getAverageAlpha(glowColorSize * 0.1); for (float x = -range; x <= range; x++) {
totalAlpha += getAverageAlpha(glowColorSize * 0.2); for (float y = -range; y <= range; y++) {
totalAlpha += getAverageAlpha(glowColorSize * 0.3); totalAlpha += getTextureColor(texture, v_uv0 + vec2(x * per_step_x, y * per_step_y)).a;
totalAlpha += getAverageAlpha(glowColorSize * 0.4); }
totalAlpha += getAverageAlpha(glowColorSize * 0.5); }
totalAlpha += getAverageAlpha(glowColorSize * 0.6); totalAlpha /= (range + range + 1.0) * (range + range + 1.0);
totalAlpha += getAverageAlpha(glowColorSize * 0.7); return totalAlpha;
totalAlpha += getAverageAlpha(glowColorSize * 0.8);
totalAlpha += getAverageAlpha(glowColorSize * 0.9);
totalAlpha += getAverageAlpha(glowColorSize * 1.0);
return totalAlpha * 0.1;
} }
#endif #endif

4
assets/effects/sprite-glow-inner-v2.effect.meta
View File

@ -5,11 +5,11 @@
{ {
"glsl1": { "glsl1": {
"vert": "\nprecision highp float;\nuniform 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}", "vert": "\nprecision highp float;\nuniform 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 uniform float alphaThreshold;\n#endif\nvoid ALPHA_TEST (in vec4 color) {\n #if USE_ALPHA_TEST\n if (color.a < alphaThreshold) discard;\n #endif\n}\nvoid ALPHA_TEST (in float alpha) {\n #if USE_ALPHA_TEST\n if (alpha < alphaThreshold) discard;\n #endif\n}\nvarying vec4 v_color;\n#if USE_TEXTURE\nvarying vec2 v_uv0;\nuniform sampler2D texture;\n#endif\n#if SHOW_INNER_GLOW\nuniform vec4 glowColor;\nuniform float spriteWidth;\nuniform float spriteHeight;\nuniform float glowColorSize;\nuniform float glowThreshold;\nvec4 getTextureColor(sampler2D texture, vec2 v_uv0) {\n if (v_uv0.x > 1.0 || v_uv0.x < 0.0 || v_uv0.y > 1.0 || v_uv0.y < 0.0) {\n return vec4(0.0, 0.0, 0.0, 0.0);\n }\n return texture2D(texture, v_uv0);\n}\nfloat getColorAlpha(float angle, float dist) {\n float radian = radians(angle);\n float width = dist;\n float height = width / (spriteWidth / spriteHeight);\n float dist_fixed = sqrt(pow(width, 2.0) + pow(height, 2.0));\n vec4 color = getTextureColor(texture, v_uv0 + vec2(dist_fixed * cos(radian), dist_fixed * sin(radian)));\n return color.a;\n}\nfloat getAverageAlpha(float dist) {\n float totalAlpha = 0.0;\n totalAlpha += getColorAlpha(0.0, dist);\n totalAlpha += getColorAlpha(30.0, dist);\n totalAlpha += getColorAlpha(60.0, dist);\n totalAlpha += getColorAlpha(90.0, dist);\n totalAlpha += getColorAlpha(120.0, dist);\n totalAlpha += getColorAlpha(150.0, dist);\n totalAlpha += getColorAlpha(180.0, dist);\n totalAlpha += getColorAlpha(210.0, dist);\n totalAlpha += getColorAlpha(240.0, dist);\n totalAlpha += getColorAlpha(270.0, dist);\n totalAlpha += getColorAlpha(300.0, dist);\n totalAlpha += getColorAlpha(330.0, dist);\n return totalAlpha * 0.0833;\n}\nfloat getGlowAlpha() {\n if (glowColorSize == 0.0) {\n return 0.0;\n }\n vec4 srcColor = getTextureColor(texture, v_uv0);\n if (srcColor.a <= glowThreshold) {\n return srcColor.a;\n }\n float totalAlpha = 0.0;\n totalAlpha += getAverageAlpha(glowColorSize * 0.1);\n totalAlpha += getAverageAlpha(glowColorSize * 0.2);\n totalAlpha += getAverageAlpha(glowColorSize * 0.3);\n totalAlpha += getAverageAlpha(glowColorSize * 0.4);\n totalAlpha += getAverageAlpha(glowColorSize * 0.5);\n totalAlpha += getAverageAlpha(glowColorSize * 0.6);\n totalAlpha += getAverageAlpha(glowColorSize * 0.7);\n totalAlpha += getAverageAlpha(glowColorSize * 0.8);\n totalAlpha += getAverageAlpha(glowColorSize * 0.9);\n totalAlpha += getAverageAlpha(glowColorSize * 1.0);\n return totalAlpha * 0.1;\n}\n#endif\nvoid main () {\n vec4 o = vec4(1, 1, 1, 1);\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 o *= v_color;\n ALPHA_TEST(o);\n gl_FragColor = o;\n #if SHOW_INNER_GLOW\n vec4 color_dest = o;\n float alpha = getGlowAlpha();\n if (alpha > glowThreshold) {\n alpha = 1.0 - alpha;\n alpha = -1.0 * (alpha - 1.0) * (alpha - 1.0) * (alpha - 1.0) * (alpha - 1.0) + 1.0;\n }\n vec4 color_src = glowColor * alpha;\n gl_FragColor = color_src * color_src.a + color_dest;\n #endif\n}" "frag": "\nprecision highp float;\n#if USE_ALPHA_TEST\n uniform float alphaThreshold;\n#endif\nvoid ALPHA_TEST (in vec4 color) {\n #if USE_ALPHA_TEST\n if (color.a < alphaThreshold) discard;\n #endif\n}\nvoid ALPHA_TEST (in float alpha) {\n #if USE_ALPHA_TEST\n if (alpha < alphaThreshold) discard;\n #endif\n}\nvarying vec4 v_color;\n#if USE_TEXTURE\nvarying vec2 v_uv0;\nuniform sampler2D texture;\n#endif\n#if SHOW_INNER_GLOW\nuniform vec4 glowColor;\nuniform float spriteWidth;\nuniform float spriteHeight;\nuniform float glowColorSize;\nuniform float glowThreshold;\nvec4 getTextureColor(sampler2D texture, vec2 v_uv0) {\n if (v_uv0.x > 1.0 || v_uv0.x < 0.0 || v_uv0.y > 1.0 || v_uv0.y < 0.0) {\n return vec4(0.0, 0.0, 0.0, 0.0);\n }\n return texture2D(texture, v_uv0);\n}\nfloat getGlowAlpha() {\n if (glowColorSize == 0.0) {\n return 0.0;\n }\n vec4 srcColor = getTextureColor(texture, v_uv0);\n if (srcColor.a <= glowThreshold) {\n return srcColor.a;\n }\n float per_step_x = (1.0 / spriteWidth) * (glowColorSize * spriteWidth / 5.0);\n float per_step_y = (1.0 / spriteHeight) * (glowColorSize * spriteHeight / 5.0);\n float totalAlpha = 0.0;\n for (float x = -5.0; x <= 5.0; x++) {\n for (float y = -5.0; y <= 5.0; y++) {\n totalAlpha += getTextureColor(texture, v_uv0 + vec2(x * per_step_x, y * per_step_y)).a;\n }\n }\n totalAlpha /= (5.0 + 5.0 + 1.0) * (5.0 + 5.0 + 1.0);\n return totalAlpha;\n}\n#endif\nvoid main () {\n vec4 o = vec4(1, 1, 1, 1);\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 o *= v_color;\n ALPHA_TEST(o);\n gl_FragColor = o;\n #if SHOW_INNER_GLOW\n vec4 color_dest = o;\n float alpha = getGlowAlpha();\n if (alpha > glowThreshold) {\n alpha = 1.0 - alpha;\n alpha = -1.0 * (alpha - 1.0) * (alpha - 1.0) * (alpha - 1.0) * (alpha - 1.0) + 1.0;\n }\n vec4 color_src = glowColor * alpha;\n gl_FragColor = color_src * color_src.a + color_dest;\n #endif\n}"
}, },
"glsl3": { "glsl3": {
"vert": "\nprecision highp float;\nuniform CCGlobal {\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 vec4 cc_time;\n mediump vec4 cc_screenSize;\n mediump vec4 cc_screenScale;\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}", "vert": "\nprecision highp float;\nuniform CCGlobal {\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 vec4 cc_time;\n mediump vec4 cc_screenSize;\n mediump vec4 cc_screenScale;\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\nvoid ALPHA_TEST (in vec4 color) {\n #if USE_ALPHA_TEST\n if (color.a < alphaThreshold) discard;\n #endif\n}\nvoid ALPHA_TEST (in float alpha) {\n #if USE_ALPHA_TEST\n if (alpha < alphaThreshold) discard;\n #endif\n}\nin vec4 v_color;\n#if USE_TEXTURE\nin vec2 v_uv0;\nuniform sampler2D texture;\n#endif\n#if SHOW_INNER_GLOW\nuniform glow {\n vec4 glowColor;\n float spriteWidth;\n float spriteHeight;\n float glowColorSize;\n float glowThreshold;\n};\nvec4 getTextureColor(sampler2D texture, vec2 v_uv0) {\n if (v_uv0.x > 1.0 || v_uv0.x < 0.0 || v_uv0.y > 1.0 || v_uv0.y < 0.0) {\n return vec4(0.0, 0.0, 0.0, 0.0);\n }\n return texture(texture, v_uv0);\n}\nfloat getColorAlpha(float angle, float dist) {\n float radian = radians(angle);\n float width = dist;\n float height = width / (spriteWidth / spriteHeight);\n float dist_fixed = sqrt(pow(width, 2.0) + pow(height, 2.0));\n vec4 color = getTextureColor(texture, v_uv0 + vec2(dist_fixed * cos(radian), dist_fixed * sin(radian)));\n return color.a;\n}\nfloat getAverageAlpha(float dist) {\n float totalAlpha = 0.0;\n totalAlpha += getColorAlpha(0.0, dist);\n totalAlpha += getColorAlpha(30.0, dist);\n totalAlpha += getColorAlpha(60.0, dist);\n totalAlpha += getColorAlpha(90.0, dist);\n totalAlpha += getColorAlpha(120.0, dist);\n totalAlpha += getColorAlpha(150.0, dist);\n totalAlpha += getColorAlpha(180.0, dist);\n totalAlpha += getColorAlpha(210.0, dist);\n totalAlpha += getColorAlpha(240.0, dist);\n totalAlpha += getColorAlpha(270.0, dist);\n totalAlpha += getColorAlpha(300.0, dist);\n totalAlpha += getColorAlpha(330.0, dist);\n return totalAlpha * 0.0833;\n}\nfloat getGlowAlpha() {\n if (glowColorSize == 0.0) {\n return 0.0;\n }\n vec4 srcColor = getTextureColor(texture, v_uv0);\n if (srcColor.a <= glowThreshold) {\n return srcColor.a;\n }\n float totalAlpha = 0.0;\n totalAlpha += getAverageAlpha(glowColorSize * 0.1);\n totalAlpha += getAverageAlpha(glowColorSize * 0.2);\n totalAlpha += getAverageAlpha(glowColorSize * 0.3);\n totalAlpha += getAverageAlpha(glowColorSize * 0.4);\n totalAlpha += getAverageAlpha(glowColorSize * 0.5);\n totalAlpha += getAverageAlpha(glowColorSize * 0.6);\n totalAlpha += getAverageAlpha(glowColorSize * 0.7);\n totalAlpha += getAverageAlpha(glowColorSize * 0.8);\n totalAlpha += getAverageAlpha(glowColorSize * 0.9);\n totalAlpha += getAverageAlpha(glowColorSize * 1.0);\n return totalAlpha * 0.1;\n}\n#endif\nvoid main () {\n vec4 o = vec4(1, 1, 1, 1);\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 o *= v_color;\n ALPHA_TEST(o);\n gl_FragColor = o;\n #if SHOW_INNER_GLOW\n vec4 color_dest = o;\n float alpha = getGlowAlpha();\n if (alpha > glowThreshold) {\n alpha = 1.0 - alpha;\n alpha = -1.0 * (alpha - 1.0) * (alpha - 1.0) * (alpha - 1.0) * (alpha - 1.0) + 1.0;\n }\n vec4 color_src = glowColor * alpha;\n gl_FragColor = color_src * color_src.a + color_dest;\n #endif\n}" "frag": "\nprecision highp float;\n#if USE_ALPHA_TEST\n uniform ALPHA_TEST {\n float alphaThreshold;\n };\n#endif\nvoid ALPHA_TEST (in vec4 color) {\n #if USE_ALPHA_TEST\n if (color.a < alphaThreshold) discard;\n #endif\n}\nvoid ALPHA_TEST (in float alpha) {\n #if USE_ALPHA_TEST\n if (alpha < alphaThreshold) discard;\n #endif\n}\nin vec4 v_color;\n#if USE_TEXTURE\nin vec2 v_uv0;\nuniform sampler2D texture;\n#endif\n#if SHOW_INNER_GLOW\nuniform glow {\n vec4 glowColor;\n float spriteWidth;\n float spriteHeight;\n float glowColorSize;\n float glowThreshold;\n};\nvec4 getTextureColor(sampler2D texture, vec2 v_uv0) {\n if (v_uv0.x > 1.0 || v_uv0.x < 0.0 || v_uv0.y > 1.0 || v_uv0.y < 0.0) {\n return vec4(0.0, 0.0, 0.0, 0.0);\n }\n return texture(texture, v_uv0);\n}\nfloat getGlowAlpha() {\n if (glowColorSize == 0.0) {\n return 0.0;\n }\n vec4 srcColor = getTextureColor(texture, v_uv0);\n if (srcColor.a <= glowThreshold) {\n return srcColor.a;\n }\n float per_step_x = (1.0 / spriteWidth) * (glowColorSize * spriteWidth / 5.0);\n float per_step_y = (1.0 / spriteHeight) * (glowColorSize * spriteHeight / 5.0);\n float totalAlpha = 0.0;\n for (float x = -5.0; x <= 5.0; x++) {\n for (float y = -5.0; y <= 5.0; y++) {\n totalAlpha += getTextureColor(texture, v_uv0 + vec2(x * per_step_x, y * per_step_y)).a;\n }\n }\n totalAlpha /= (5.0 + 5.0 + 1.0) * (5.0 + 5.0 + 1.0);\n return totalAlpha;\n}\n#endif\nvoid main () {\n vec4 o = vec4(1, 1, 1, 1);\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 o *= v_color;\n ALPHA_TEST(o);\n gl_FragColor = o;\n #if SHOW_INNER_GLOW\n vec4 color_dest = o;\n float alpha = getGlowAlpha();\n if (alpha > glowThreshold) {\n alpha = 1.0 - alpha;\n alpha = -1.0 * (alpha - 1.0) * (alpha - 1.0) * (alpha - 1.0) * (alpha - 1.0) + 1.0;\n }\n vec4 color_src = glowColor * alpha;\n gl_FragColor = color_src * color_src.a + color_dest;\n #endif\n}"
} }
} }
], ],

9
assets/materials/sprite-glow-inner-v2.mtl
View File

@ -14,14 +14,15 @@
"SHOW_INNER_GLOW": true "SHOW_INNER_GLOW": true
}, },
"props": { "props": {
"glowColorSize": 0.01, "glowColorSize": 0.1,
"glowColor": { "glowColor": {
"__type__": "cc.Color", "__type__": "cc.Color",
"r": 255, "r": 255,
"g": 0, "g": 255,
"b": 87, "b": 255,
"a": 255 "a": 255
} },
"glowThreshold": 0.1
} }
} }
} }

8
assets/scenes/GlowInnerEffectScene.fire
View File

@ -5210,7 +5210,7 @@
"_contentSize": { "_contentSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 384, "width": 384,
"height": 141.29999999999998 "height": 676.8
}, },
"_anchorPoint": { "_anchorPoint": {
"__type__": "cc.Vec2", "__type__": "cc.Vec2",
@ -5348,7 +5348,7 @@
"__id__": 114 "__id__": 114
}, },
"_children": [], "_children": [],
"_active": false, "_active": true,
"_components": [ "_components": [
{ {
"__id__": 118 "__id__": 118
@ -5442,7 +5442,7 @@
"__id__": 114 "__id__": 114
}, },
"_children": [], "_children": [],
"_active": false, "_active": true,
"_components": [ "_components": [
{ {
"__id__": 120 "__id__": 120
@ -5850,7 +5850,7 @@
"_layoutSize": { "_layoutSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 384, "width": 384,
"height": 141.29999999999998 "height": 676.8
}, },
"_resize": 1, "_resize": 1,
"_N$layoutType": 2, "_N$layoutType": 2,