[g-webgl] SDF 绘制的 Rect 边缘模糊

[xiaoiver]

[xiaoiver]

使用 SDF 实现圆角矩形，可以应用 instanced array 绘制效率最高：
https://www.shadertoy.com/view/Nlc3zf

唯一限制是 radius 得保持一致，否则需要降级到目前 Path 的实现，即每个 Rect 对应一条 draw call，性能较差。

[xiaoiver]

考虑宽高比和描边宽度：

vec2 r = (v_Radius - (omitStroke ? 0.0 : u_StrokeWidth)) / v_Radius.y;
float wh = v_Radius.x / v_Radius.y; // 宽高比

outer_df = sdRoundedBox(v_Data.xy, vec2(wh, 1.0), 0.0);
inner_df = sdRoundedBox(v_Data.xy, r, 0.0);

目前的效果会清晰很多：

[xiaoiver]

还有一个需要解决的问题是，Rect 的宽高是支持负数的，此时需要按照 Y / X 轴翻转。