论坛链接

先上效果图

shader.gif
shader.gif

#2.1.2 & 2.2.0 demo

https://github.com/yanjifa/shaderDemo.git

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#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

mask.jpg
mask.jpg

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

#使用材质

material.jpg
material.jpg

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

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