Draw a simple dotted line or dashed line in OpenGL GLES20 android using fragment shader and GL_LINE_STRIP

Question

I went through different sources and seen that we could draw a dotted line using a fragment shader. Because I am new to OpenGL I couldn\'t able to understand.

Can an

Answer 1

Line stipple is not supported in OpenGL ES.

If you use OpenGL ES 1.00, then you can use the approach which is presented in the answers to OpenGL ES - Dashed Lines.
You have to create a 1 dimensional texture (2 dimensional Nx1 texture), and wrap the texture on the lines. The texture has a stipple pattern encoded in its alpha channel. The space between the dashes is discarded by the Alpha test.

If you use OpenGL ES 2.00 or higher (OpenGL ES 3.x), then you can't use the alpha test, because it is deprecated. You have to use a fragment shader and to skip fragments by the discard keyword.

Create a texture with a red color channel only. The stipple pattern is encoded in the red color channel, but the code is very similar to that one from OpenGL ES - Dashed Lines, beside the fact that you have to use GL10.GL_RED for the internal texture format (instead of 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);

When you draw the lines, the you have to use a shader program, that discard the fragments dependent on the red color channel of the texture. A very simple GLSL ES 1.00 shader (for OpenGL ES 3.00) may look as follows:

Vertex shader:

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

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

Fragment shader:

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);
}

Ensure that the texture coordinates which are associated to the vertices are aligned to integral values when you draw the line, that causes the the lines start and end with a dash:

e.g. a quad with bottom left of (-0.5 -0.5) and to right of (0.5, 0.5) and the texture coordinates in range [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

Since the wrap function is GL_REPEAT and the texture coordinates are in range [0, 5], 5 repetitions of the stipple pattern are wrapped to each edge of the quad.

---

_{Instead of using a texture, you can also generate the stippling in the fragment shader. See the solutions for desktop OpenGL cor profile:
glLineStipple deprecated in OpenGL 3.1
Dashed line in OpenGL3?}