diff --git a/assets/effects/sprite-round-corner-crop-v2.effect b/assets/effects/sprite-round-corner-crop-v2.effect index fda8a63..cb6c1a3 100644 --- a/assets/effects/sprite-round-corner-crop-v2.effect +++ b/assets/effects/sprite-round-corner-crop-v2.effect @@ -156,13 +156,38 @@ CCProgram fs %{ // 判断点(rx, ry)是否在椭圆外部(应用椭圆公式) float isOutOfEllipse = step(1.0, pow(rx, 2.0) / pow(xRadius, 2.0) + pow(ry, 2.0) / pow(yRadius, 2.0)); + /////////////////////////////////////////////////////////////////////////////////////////// + // 抗锯齿 + // 1. 先计算当前点到椭圆中心的角度 + float angleInRadian = atan(ry / rx); + + // 2. 计算这个角度下,对于对应圆角(椭圆)上的点 + vec2 pointInEllipse = vec2(xRadius * cos(angleInRadian), yRadius * sin(angleInRadian)); + + // 3. 计算这个角度下,比当前圆角大一点椭圆上的点 + vec2 pointInBigEllipse = vec2((xRadius * 1.01) * cos(angleInRadian), (yRadius * 1.01)* sin(angleInRadian)); + + // 4. 计算最远点到当前椭圆的距离 + float maxDis = distance(pointInBigEllipse, pointInEllipse); + + // 5. 计算当前点到当前椭圆的距离 + float curDis = distance(vec2(rx, ry), pointInEllipse); + + // 6. 生成插值 + float smo = smoothstep(0.0, maxDis, curDis); + /////////////////////////////////////////////////////////////////////////////////////////// + // mx * my = 0 时,代表非椭圆角区域,alpha 值为1,代表完全采用原始纹理的透明度 // mx * my = 1 时,代表椭圆角所在矩形区域 // isOutOfEllipse: // 当点在椭圆外部时,此值为1,导致 alpha 最终值为0.0,即表示不显示椭圆外部的像素 // 当点在椭圆内部时,此值为0,导致 alpha 最终值为1.0,即表示显示椭圆内部的像素 - float alpha = 1.0 - mx * my * isOutOfEllipse; + // smo : 抗锯齿实现 + // float alpha = 1.0 - mx * my * isOutOfEllipse; + float alpha = 1.0 - mx * my * isOutOfEllipse * smo; + o = vec4(o.rgb, o.a * alpha); + #endif gl_FragColor = o; } diff --git a/assets/effects/sprite-round-corner-crop-v2.effect.meta b/assets/effects/sprite-round-corner-crop-v2.effect.meta index f03e655..6c0bfb1 100644 --- a/assets/effects/sprite-round-corner-crop-v2.effect.meta +++ b/assets/effects/sprite-round-corner-crop-v2.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 ENABLE_ROUNDCORNER\nuniform float xRadius;\nuniform float yRadius;\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 #if ENABLE_ROUNDCORNER\n\n float ellipseXRadius = clamp(0.0, 0.5, xRadius);\n float ellipseYRadius = clamp(0.0, 0.5, yRadius);\n\n vec2 uv = v_uv0.xy - vec2(0.5, 0.5);\n\n float rx = abs(uv.x) - (0.5 - ellipseXRadius);\n float ry = abs(uv.y) - (0.5 - ellipseYRadius);\n\n float mx = step(0.5 - ellipseXRadius, abs(uv.x));\n float my = step(0.5 - ellipseYRadius, abs(uv.y));\n\n float isOutOfEllipse = step(1.0, pow(rx, 2.0) / pow(xRadius, 2.0) + pow(ry, 2.0) / pow(yRadius, 2.0));\n\n float alpha = 1.0 - mx * my * isOutOfEllipse;\n o = vec4(o.rgb, o.a * alpha);\n #endif\n gl_FragColor = o;\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 ENABLE_ROUNDCORNER\nuniform float xRadius;\nuniform float yRadius;\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 #if ENABLE_ROUNDCORNER\n\n float ellipseXRadius = clamp(0.0, 0.5, xRadius);\n float ellipseYRadius = clamp(0.0, 0.5, yRadius);\n\n vec2 uv = v_uv0.xy - vec2(0.5, 0.5);\n\n float rx = abs(uv.x) - (0.5 - ellipseXRadius);\n float ry = abs(uv.y) - (0.5 - ellipseYRadius);\n\n float mx = step(0.5 - ellipseXRadius, abs(uv.x));\n float my = step(0.5 - ellipseYRadius, abs(uv.y));\n\n float isOutOfEllipse = step(1.0, pow(rx, 2.0) / pow(xRadius, 2.0) + pow(ry, 2.0) / pow(yRadius, 2.0));\n\n float angleInRadian = atan(ry / rx);\n\n vec2 pointInEllipse = vec2(xRadius * cos(angleInRadian), yRadius * sin(angleInRadian));\n\n vec2 pointInBigEllipse = vec2((xRadius * 1.01) * cos(angleInRadian), (yRadius * 1.01)* sin(angleInRadian));\n\n float maxDis = distance(pointInBigEllipse, pointInEllipse);\n\n float curDis = distance(vec2(rx, ry), pointInEllipse);\n\n float smo = smoothstep(0.0, maxDis, curDis);\n\n float alpha = 1.0 - mx * my * isOutOfEllipse * smo;\n\n o = vec4(o.rgb, o.a * alpha);\n\n #endif\n gl_FragColor = o;\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 ENABLE_ROUNDCORNER\nuniform RoundCorner {\n\n float xRadius;\n\n float yRadius;\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 #if ENABLE_ROUNDCORNER\n\n float ellipseXRadius = clamp(0.0, 0.5, xRadius);\n float ellipseYRadius = clamp(0.0, 0.5, yRadius);\n\n vec2 uv = v_uv0.xy - vec2(0.5, 0.5);\n\n float rx = abs(uv.x) - (0.5 - ellipseXRadius);\n float ry = abs(uv.y) - (0.5 - ellipseYRadius);\n\n float mx = step(0.5 - ellipseXRadius, abs(uv.x));\n float my = step(0.5 - ellipseYRadius, abs(uv.y));\n\n float isOutOfEllipse = step(1.0, pow(rx, 2.0) / pow(xRadius, 2.0) + pow(ry, 2.0) / pow(yRadius, 2.0));\n\n float alpha = 1.0 - mx * my * isOutOfEllipse;\n o = vec4(o.rgb, o.a * alpha);\n #endif\n gl_FragColor = o;\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 ENABLE_ROUNDCORNER\nuniform RoundCorner {\n\n float xRadius;\n\n float yRadius;\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 #if ENABLE_ROUNDCORNER\n\n float ellipseXRadius = clamp(0.0, 0.5, xRadius);\n float ellipseYRadius = clamp(0.0, 0.5, yRadius);\n\n vec2 uv = v_uv0.xy - vec2(0.5, 0.5);\n\n float rx = abs(uv.x) - (0.5 - ellipseXRadius);\n float ry = abs(uv.y) - (0.5 - ellipseYRadius);\n\n float mx = step(0.5 - ellipseXRadius, abs(uv.x));\n float my = step(0.5 - ellipseYRadius, abs(uv.y));\n\n float isOutOfEllipse = step(1.0, pow(rx, 2.0) / pow(xRadius, 2.0) + pow(ry, 2.0) / pow(yRadius, 2.0));\n\n float angleInRadian = atan(ry / rx);\n\n vec2 pointInEllipse = vec2(xRadius * cos(angleInRadian), yRadius * sin(angleInRadian));\n\n vec2 pointInBigEllipse = vec2((xRadius * 1.01) * cos(angleInRadian), (yRadius * 1.01)* sin(angleInRadian));\n\n float maxDis = distance(pointInBigEllipse, pointInEllipse);\n\n float curDis = distance(vec2(rx, ry), pointInEllipse);\n\n float smo = smoothstep(0.0, maxDis, curDis);\n\n float alpha = 1.0 - mx * my * isOutOfEllipse * smo;\n\n o = vec4(o.rgb, o.a * alpha);\n\n #endif\n gl_FragColor = o;\n}\n" } } ], diff --git a/assets/scenes/RoundCornerCropV2EffectScene.fire b/assets/scenes/RoundCornerCropV2EffectScene.fire index 117c819..8136358 100755 --- a/assets/scenes/RoundCornerCropV2EffectScene.fire +++ b/assets/scenes/RoundCornerCropV2EffectScene.fire @@ -925,7 +925,7 @@ "__type__": "TypedArray", "ctor": "Float64Array", "array": [ - 230.40000000000006, + 115.20000000000002, 0, 0, 0, @@ -1104,7 +1104,7 @@ "_N$handle": { "__id__": 20 }, - "_N$progress": 1, + "_N$progress": 0.5, "_id": "c2uNTLxCdF2oHJ+IS0EBLe" }, {