From 83aeff8ac5c5bdb84acf3e01071f8c76e289ff06 Mon Sep 17 00:00:00 2001 From: caizhitao Date: Mon, 22 Jun 2020 18:42:11 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=9B=E5=BB=BA=E5=86=85=E5=8F=91=E5=85=89?= =?UTF-8?q?=E7=89=88=E6=9C=AC2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/effects/sprite-glow-inner-v2.effect | 258 ++++++++++++++++++ .../effects/sprite-glow-inner-v2.effect.meta | 17 ++ assets/materials/sprite-glow-inner-v2.mtl | 18 ++ .../materials/sprite-glow-inner-v2.mtl.meta | 6 + assets/scenes/GlowInnerEffectScene.fire | 10 +- 5 files changed, 303 insertions(+), 6 deletions(-) create mode 100644 assets/effects/sprite-glow-inner-v2.effect create mode 100644 assets/effects/sprite-glow-inner-v2.effect.meta create mode 100644 assets/materials/sprite-glow-inner-v2.mtl create mode 100644 assets/materials/sprite-glow-inner-v2.mtl.meta diff --git a/assets/effects/sprite-glow-inner-v2.effect b/assets/effects/sprite-glow-inner-v2.effect new file mode 100644 index 0000000..cc12637 --- /dev/null +++ b/assets/effects/sprite-glow-inner-v2.effect @@ -0,0 +1,258 @@ +// 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 } + alphaThreshold: { value: 0.5 } + # 自定义参数 + # 发光颜色 + glowColor: { + value: [1.0, 1.0, 0.0, 1.0], + editor: { + type: color, + tooltip: "发光颜色" + } + } + # 发光宽度 + glowColorSize: { + value: 0.2, + editor: { + tooltip: "发光宽度", + range: [0.0, 1.0], + } + } + # 发光透明度阈值 + # 只有超过这个透明度的点才会发光 + # 一般用于解决图像边缘存在渐变透明的时，决定超过这个透明度阈值的边缘点才点发光，具体可以操作一下 + glowThreshold: { + value: 0.1, + editor: { + tooltip: "发光阈值", + range: [0.0, 1.0] + } + } +}% + + +CCProgram vs %{ + precision highp float; + + #include + #include + + 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; + + #include + + in vec4 v_color; + + #if USE_TEXTURE + in vec2 v_uv0; + uniform sampler2D texture; + #endif + + #if SHOW_INNER_GLOW + + uniform glow { + // 发光颜色 + vec4 glowColor; + // 发光范围 + float glowColorSize; + // 发光阈值 + float glowThreshold; + // 特别地，必须是 vec4 先于 float 声明 + }; + + /** + * 获取纹理uv颜色 + * + * 主要实现：超出边界的统一返回 vec4(0.0, 0.0, 0.0, 0.0) + * + * 在 Cocos Creator 2.2.1 的编辑器中，超出边界的uv并不是返回 vec4(0.0, 0.0, 0.0, 0.0)，实际返回为 + * + * * 超出左边界的uv，返回 v_uv0.x = 0 的颜色 + * * 超出右边界的uv，返回 v_uv0.x = 1 的颜色 + * * 超出上边界的uv，返回 v_uv0.y = 1 的颜色 + * * 超出下边界的uv，返回 v_uv0.y = 0 的颜色 + * + * 和实际在浏览器上显示（超出边界即为透明）的有区别，为了统一，这里适配一下，这样子，在编辑器上预览的效果就能和实际浏览器的保持一致 + */ + vec4 getTextureColor(sampler2D texture, vec2 v_uv0) { + if (v_uv0.x > 1.0 || v_uv0.x < 0.0 || v_uv0.y > 1.0 || v_uv0.y < 0.0) { + return vec4(0.0, 0.0, 0.0, 0.0); + } + 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); + 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 + } + + /** + * 获取发光的透明度 + */ + float getGlowAlpha() { + // 如果发光宽度为0，直接返回0.0透明度，减少计算量 + if (glowColorSize == 0.0) { + return 0.0; + } + + // 因为我们是要做内发光，所以如果点本来是透明的或者接近透明的 + // 那么就意味着这个点是图像外的透明点或者图像内透明点（如空洞）之类的 + // 内发光的话，这些透明点我们不用处理，让它保持原样，否则就是会有内描边或者一点扩边的效果 + // 同时也是提前直接结束，减少计算量 + vec4 srcColor = getTextureColor(texture, v_uv0); + if (srcColor.a <= glowThreshold) { + return srcColor.a; + } + + // 将传入的指定距离，平均分成10圈，求出每一圈的平均透明度， + // 然后求和取平均值，那么就可以得到该点的平均透明度 + float totalAlpha = 0.0; + totalAlpha += getAverageAlpha(glowColorSize * 0.1); + totalAlpha += getAverageAlpha(glowColorSize * 0.2); + totalAlpha += getAverageAlpha(glowColorSize * 0.3); + totalAlpha += getAverageAlpha(glowColorSize * 0.4); + totalAlpha += getAverageAlpha(glowColorSize * 0.5); + totalAlpha += getAverageAlpha(glowColorSize * 0.6); + totalAlpha += getAverageAlpha(glowColorSize * 0.7); + totalAlpha += getAverageAlpha(glowColorSize * 0.8); + totalAlpha += getAverageAlpha(glowColorSize * 0.9); + totalAlpha += getAverageAlpha(glowColorSize * 1.0); + return totalAlpha * 0.1; + } + + #endif + + void main () { + vec4 o = vec4(1, 1, 1, 1); + + #if USE_TEXTURE + o *= texture(texture, v_uv0); + #if CC_USE_ALPHA_ATLAS_TEXTURE + o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r; + #endif + #endif + + o *= v_color; + + ALPHA_TEST(o); + + gl_FragColor = o; + + #if SHOW_INNER_GLOW + // 目标颜色（图像） + vec4 color_dest = o; + + // 获取发光透明度 + // 此时我们得到的是内部透明度为1，靠近边缘的为接近0的透明度，其他位置为0的透明度 + float alpha = getGlowAlpha(); + + // 而内发光是从边缘开始的，那么什么算是边缘呢？ + // 如果图像边缘有大量渐变，那么如果我们取大于 0.0 点就算是图像内的话，那么可能边缘会出现锯齿 + // 因此为了确定边缘，引入了发光阈值，我们只需要比较一下发光阈值就可以，大于发光阈值的点都是（图像内）发光点 + if (alpha > glowThreshold) { + + // 内发光是从边缘发光的，是需要内部透明度为0，靠近边缘的接近1的透明度 + // 因此我们需要翻转一下透明度 + alpha = 1.0 - alpha; + + // 给点调料，让靠近边缘的更加亮 + alpha = -1.0 * (alpha - 1.0) * (alpha - 1.0) * (alpha - 1.0) * (alpha - 1.0) + 1.0; + } + // 源颜色（内发光） + vec4 color_src = glowColor * alpha; + + // 按照这个顺序，源颜色就是内发光颜色，目标颜色就是图案颜色色 + // 所以命名就是 color_src, color_dest + + // 按照混合颜色规则 http://docs.cocos.com/creator/manual/zh/advanced-topics/ui-auto-batch.html#blend-%E6%A8%A1%E5%BC%8F + // 要在图案上方，叠加一个内发光，将两者颜色混合起来，那么最终选择的混合模式如下： + // + // （内发光）color_src: GL_SRC_ALPHA + // （原图像）color_dest: GL_ONE + // + // 即最终颜色如下： + // color_src * GL_SRC_ALPHA + color_dest * GL_ONE + + gl_FragColor = color_src * color_src.a + color_dest; + #endif + } +}% diff --git a/assets/effects/sprite-glow-inner-v2.effect.meta b/assets/effects/sprite-glow-inner-v2.effect.meta new file mode 100644 index 0000000..bd6790a --- /dev/null +++ b/assets/effects/sprite-glow-inner-v2.effect.meta @@ -0,0 +1,17 @@ +{ + "ver": "1.0.25", + "uuid": "c49fbec9-7e8c-4114-a058-354eebd04446", + "compiledShaders": [ + { + "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}", + "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 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 vec4 color = getTextureColor(texture, v_uv0 + vec2(dist * cos(radian), dist * 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}" + }, + "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}", + "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 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 vec4 color = getTextureColor(texture, v_uv0 + vec2(dist * cos(radian), dist * 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}" + } + } + ], + "subMetas": {} +} \ No newline at end of file diff --git a/assets/materials/sprite-glow-inner-v2.mtl b/assets/materials/sprite-glow-inner-v2.mtl new file mode 100644 index 0000000..525a6bd --- /dev/null +++ b/assets/materials/sprite-glow-inner-v2.mtl @@ -0,0 +1,18 @@ +{ + "__type__": "cc.Material", + "_name": "New Material", + "_objFlags": 0, + "_native": "", + "_effectAsset": { + "__uuid__": "c49fbec9-7e8c-4114-a058-354eebd04446" + }, + "_techniqueIndex": 0, + "_techniqueData": { + "0": { + "defines": { + "USE_TEXTURE": true, + "SHOW_INNER_GLOW": true + } + } + } +} \ No newline at end of file diff --git a/assets/materials/sprite-glow-inner-v2.mtl.meta b/assets/materials/sprite-glow-inner-v2.mtl.meta new file mode 100644 index 0000000..c7cf582 --- /dev/null +++ b/assets/materials/sprite-glow-inner-v2.mtl.meta @@ -0,0 +1,6 @@ +{ + "ver": "1.0.3", + "uuid": "ed801db5-01ea-4505-b505-e661a3f1bb07", + "dataAsSubAsset": null, + "subMetas": {} +} \ No newline at end of file diff --git a/assets/scenes/GlowInnerEffectScene.fire b/assets/scenes/GlowInnerEffectScene.fire index 557f40e..3de5a16 100755 --- a/assets/scenes/GlowInnerEffectScene.fire +++ b/assets/scenes/GlowInnerEffectScene.fire @@ -174,7 +174,7 @@ "array": [ 0, 0, - 324.7595264191645, + 399.23771114462625, 0, 0, 0, @@ -5145,7 +5145,6 @@ }, "_resize": 1, "_N$layoutType": 2, - "_N$padding": 0, "_N$cellSize": { "__type__": "cc.Size", "width": 40, @@ -5310,7 +5309,7 @@ "_enabled": true, "_materials": [ { - "__uuid__": "647e873f-e0ed-4ce7-84cb-9e4d4f8a211f" + "__uuid__": "ed801db5-01ea-4505-b505-e661a3f1bb07" } ], "_srcBlendFactor": 770, @@ -5404,7 +5403,7 @@ "_enabled": true, "_materials": [ { - "__uuid__": "647e873f-e0ed-4ce7-84cb-9e4d4f8a211f" + "__uuid__": "ed801db5-01ea-4505-b505-e661a3f1bb07" } ], "_srcBlendFactor": 770, @@ -5498,7 +5497,7 @@ "_enabled": true, "_materials": [ { - "__uuid__": "647e873f-e0ed-4ce7-84cb-9e4d4f8a211f" + "__uuid__": "ed801db5-01ea-4505-b505-e661a3f1bb07" } ], "_useOriginalSize": false, @@ -5564,7 +5563,6 @@ }, "_resize": 1, "_N$layoutType": 2, - "_N$padding": 0, "_N$cellSize": { "__type__": "cc.Size", "width": 40,