[g-webgl] Path 填充部分透明度问题

[xiaoiver]

可以看出填充部分并没有正确应用 opacity：

Blend 相关参数设置的其实是正确的：

BLEND: true
BLEND_COLOR: 0, 0, 0, 0
BLEND_DST_ALPHA: ONE
BLEND_DST_RGB: ONE_MINUS_SRC_ALPHA
BLEND_EQUATION_ALPHA: FUNC_ADD
BLEND_EQUATION_RGB: FUNC_ADD
BLEND_SRC_ALPHA: ZERO
BLEND_SRC_RGB: SRC_ALPHA

在绘制 Path、Polygon 时，填充和描边是分开绘制的，前者通过 earcut 三角化，后者使用 Polyline 绘制。

问题出在绘制顺序上，从下图可以看出几个图形的绘制顺序为：

No.1 Fill
No.2 Fill
No.3 Fill
No.4 Fill
No.1 Stroke
No.2 Stroke
...

加入渲染队列的 RenderInst 会使用 sortKey 排序，例如按照不透明和透明。问题出在不能用 Program ID 排序，虽然能减少 Program 切换（上图中 useProgram 一次绘制四个图形），但会影响正确的顺序：

renderInst.sortKey = makeSortKeyOpaque(RendererLayer.OPAQUE, program.id);

正常效果：

参考资料：

• http://www.jiazhengblog.com/blog/2017/01/04/2989/
• https://learnopengl.com/Advanced-OpenGL/Blending