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

MARK

秀秀秀

正常,能直接运行的,你可以自己把这个函数加到 creator.d.ts 里

这种方式和遮罩方式哪个性能更高点呢?

在 2.1.2 上测试,使用相同材质可以合批, 使用 shader 后 10 个头像也是 1 个 drawcall,
使用 mask 是一个头像 5 个 drawcall, 使用 shader 性能应该是更高的, 而且这个 shader 本身没有使用太复杂的函数, 也没有使用 if,性能会更好一些

我测试 在 1.10.3 下一个 mask 组件节点就 2 个 drawcall, 加上子节点头像, 就是 3 个 drawcall
使用 shader, 一个头像就一个 drawcall, 10 个头像能少 20 个 drawcall

请教大佬,手机能明显看出shader方式圆角矩形的四角锯齿,这个有方法解决吗?

mark一下

改成这样试试, demo 也更新了下, 看起来好了一点点

    float edge = u_edge;
    vec2 uv = v_uv0.xy - 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.1,chrome打开新demo,报
effect.js:71 builtin-sprite : Failed to set property u_edge, property not found.

用 2.1.2 写的,可能用了 2.1.1 没有的 api,你可以稍微改一下

可以看下我这个
https://github.com/Hansen-hjs/cocos-template/blob/TS/client/assets/Script/UI/TheRectMask.ts

你的 creator 版本是?

老哥 我用2.0.5的版本的,怎么操作. 没学过shader

求一个任意宽高比例的圆角裁剪Shader. 不只应用于正方形切圆角.

老兄用2.1.1运行发现调用的材质还是默认材质

我是用 2.1.2 写的 demo,2.1.1 我没试过,可能有地方不兼容吧

应该是不兼容编辑器里直接跳回默认了

creator 的shader api都是在哪查阅的呀