分享更高效的 creator 裁圆角头像 shader( 2019.10.22 升级至 2.2.0)

先上效果图, gif 只能播一遍是什么鬼

2019.9.19 新增抗锯齿

#2.1.2 & 2.2.0 demo
https://github.com/yanjifa/shaderDemo.git

#1.10 及以下片元着色器代码

#ifdef GL_ES
precision mediump float;
#endif

varying vec4 v_fragmentColor;
varying vec2 v_texCoord;

uniform float u_edge;

void main()
{
    float edge = u_edge;
    vec4 color = texture2D(CC_Texture0, v_texCoord);
    vec2 uv = v_texCoord - vec2(0.5, 0.5);
    float rx = abs(uv.x) - (0.5 - edge);
    float ry = abs(uv.y) - (0.5 - edge);
    float mx = step(0.5 - edge, abs(uv.x));
    float my = step(0.5 - edge, abs(uv.y));
    float radius = length(vec2(rx, ry));
    float a = 1.0 - mx * my * step(edge, radius) * smoothstep(0., edge * 0.02, radius - edge);
    gl_FragColor = vec4(color.rgb, color.a * a);
}

上个2.1.2 下的性能对比,满屏 176 个头像, 在 chrome 下测试
#使用 mask

共 880 drawcall, 一个 头像 5 个 drawcall, Renderer 5.07 ms

#使用材质

可以合批只有一个 drawcall, Renderer 0.34 ms

这是在pc 上进行的测试, 手机上差距可能更大一些,使用材质还是有优势的, 更重要的是材质支持圆角

51赞

先给你一个赞,然后再看代码~!

点赞~

你很棒棒哦

必须给赞,能否请教下怎么用代码直接对spriteFrame使用该shader?

有 2.1.2 版本的 demo,还是说你想要 1.10或更低版本的 demo?

mark

mark

你的文件有点问题

mark

mark

mark,大佬牛逼

原来是这样,手机似乎还能循环播

有2.1.10的demo么,新手,学习(抄)一下。

good~~~

Mark

天秀啊

应该和 2.1.2 差不多吧


新手,大佬帮忙看看?

mark