android - 使用 OpenGLES 绘制圆形描边

Question

我想画一个这样的描边圆:

我试过使用普通的顶点着色器和 fragment 着色器，比如 google samples , 顶点坐标为 364 点:

vertices = new float[364 * 3];
vertices[0] = 0;
vertices[1] = 0;
vertices[2] = 0;

for (int i =1; i <364; i++){
    vertices[(i * 3)+ 0] = (float) (0.5 * Math.cos((3.14/180) * (float)i ));
    vertices[(i * 3)+ 1] = (float) (0.5 * Math.sin((3.14/180) * (float)i ));
    vertices[(i * 3)+ 2] = 0;
}

然后绘制:

int COORDS_PER_VERTEX = 3;
int vertexCount = 364 * 3 / COORDS_PER_VERTEX;
int vertexStride = COORDS_PER_VERTEX * 4; // 4 bytes per vertex
GLES20.glVertexAttribPointer(mPositionHandle, COORDS_PER_VERTEX, GLES20.GL_FLOAT, false, vertexStride, vertexBuffer);

GLES20.glDrawArrays(GLES20.GL_LINE_LOOP, 1, vertexCount - 1);

但是结果不如预期，我的圈子里少了4个。

我怎样才能像上面的例子那样画一个描边圆？

Answer 1

问题在于 glLineWidth 的实现方式。根据spec :

Non-antialiased line segments of width other than one are rasterized by off-setting them in the minor direction (for an x-major line, the minor direction is y, and for a y-major line, the minor direction is x) and replicating fragments in the minor direction (see figure 3.3).

这 4 个缺失的部分对应于您的圆线从 x-major 变为 y-major 的位置。如果你仔细观察，你会发现你的圆圈也随着接近 x-major 和 y-major 之间的切换而变细。

可能您最好的选择是放弃线条绘制并使用三角形 strip 来渲染实心带。即来自 this webpage 的“三角线”示例这也提出了一些更高级的解决方案。