使用片段着色器和 GL_LINE_STRIP 在 OpenGL GLES20 android 中绘制简单的虚线或虚线

Question

我查看了不同的来源，发现我们可以使用片段着色器绘制虚线。因为我是 OpenGL 新手，所以我无法理解。

谁能分享一些在Android中使用片段着色器和GL_LINE_STRIP绘制虚线或虚线的代码示例。

参考资料：

• Dashed line in OpenGL3?
• Dotted back edges of object

Answer 1

OpenGL ES 不支持点画线。

如果您使用 OpenGL ES 1.00，那么您可以使用OpenGL ES - Dashed Lines 的答案中提供的方法。
您必须创建一个 1 维纹理（2 维 Nx1 纹理），并将纹理包裹在线条上。纹理在其 Alpha 通道中具有编码的点画图案。破折号之间的空格被Alpha test 丢弃。

如果您使用 OpenGL ES 2.00 或更高版本 (OpenGL ES 3.x)，则不能使用 alpha 测试，因为它已被弃用。您必须使用片段着色器并通过 discard 关键字跳过片段。

创建仅具有红色通道的纹理。点画图案在红色通道中编码，但代码与OpenGL ES - Dashed Lines中的代码非常相似，除了您必须使用GL10.GL_RED作为内部纹理格式（而不是GL10.GL_ALPHA）：

byte arr[] = new byte[] { 255, 0, 0, 255 };
ByteBuffer textureBuffer = ByteBuffer.wrap(arr);

gl.glGenTextures(1, texture_id_, stippleTexObj);
gl.glBindTexture(GLES20.GL_TEXTURE_2D, stippleTexObj);
gl.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_NEAREST);
gl.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_NEAREST);
gl.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_REPEAT);
gl.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_REPEAT);
gl.glTexImage2D(GLES20.GL_TEXTURE_2D, 0, GLES20.GL_RED, 4, 1, 0,
                GLES20.GL_RED, GLES20.GL_UNSIGNED_BYTE, textureBuffer);

当您绘制线条时，您必须使用着色器程序，该程序会丢弃依赖于纹理的红色通道的片段。一个非常简单的 GLSL ES 1.00 着色器（用于 OpenGL ES 3.00）可能如下所示：

顶点着色器：

attribute vec2  inPos;
attribute float inU;
varying   float vU;

void main()
{
    outU        = inU;
    gl_Position = vec4( inPos.xy, 0.0, 1.0 );
}

片段着色器：

precision mediump float;

varying float     vU;
uniform sampler2D u_stippleTexture;

void main()
{
    float stipple = texture2D(u_stippleTexture, vec2(vU, 0.0)).r;
    if (stipple < 0.5)
        discard;
    gl_FragColor = vec4(1.0);
}

确保在绘制线条时与顶点关联的纹理坐标与整数值对齐，这会导致线条以破折号开始和结束：

例如一个四边形，左下角为 (-0.5 -0.5)，右下角为 (0.5, 0.5)，纹理坐标在 [0, 5] 范围内：

 x     y       u   
-0.5f -0.5f    0.0f
 0.5f -0.5f    5.0f
 0.5f  0.5f    0.0f
-0.5f  0.5f    5.0f

由于 wrap 函数是 GL_REPEAT 并且纹理坐标在 [0, 5] 范围内，因此 5 次重复的点画图案被包裹到四边形的每个边缘。

---

除了使用纹理，您还可以在片段着色器中生成点画。查看桌面 OpenGL cor profile 的解决方案：
glLineStipple deprecated in OpenGL 3.1
Dashed line in OpenGL3?