OpenGL ES for Android 绘制线

老孟Flutter

发布于 2020-09-11 15:57:47

96410

代码可运行

文章被收录于专栏：FlutterFlutter

运行总次数：0

代码可运行

老

孟

一个

有态度

的程序员

永远缅怀，曼巴精神

下面将会完成绘制一条线，线的颜色由应用程序确定，顶点shader代码如下：

attribute vec4 vPosition;

void main() {
    gl_Position = vPosition;
}

vPosition是顶点，由应用程序传入。

片段shader代码如下：

precision mediump float;
uniform vec4 u_color;
void main()
{
    gl_FragColor = u_color;
}

u_color 表示线的颜色，由应用程序传入。

创建program：

fun createProgram() {
            var vertexCode =
                AssetsUtils.readAssetsTxt(
                    context = context,
                    filePath = "glsl/line_vs.glsl"
                )
            var fragmentCode =
                AssetsUtils.readAssetsTxt(
                    context = context,
                    filePath = "glsl/line_fs.glsl"
                )
            mProgramHandle = GLTools.createAndLinkProgram(vertexCode, fragmentCode)
        }

line_vs.glsl和line_fs.glsl分别表示顶点shader和片段shader的文件，存放于assets/glsl目录下，readAssetsTxt为读取assets目录下文件的公用方法。

获取参数句柄：

vPositionLoc = GLES20.glGetAttribLocation(mProgramHandle, "vPosition")
uColorLoc = GLES20.glGetUniformLocation(mProgramHandle, "u_color")

初始化线的顶点数据，代码如下：

val vertexBuffer = GLTools.array2Buffer(
            floatArrayOf(
                -0.5F, 0.5F, 0F,
                0.5F, 0.5F, 0F,
                0.5F, -0.5F, 0F,
                -0.5F, -0.5F, 0F
            )
        )

初始化线的颜色数据，代码如下：

val colorBuffer = GLTools.array2Buffer(
            floatArrayOf(
                //r,g,b,a
                1F, 0F, 0F, 1F
            )
        )

绘制：

override fun onDrawFrame(gl: GL10?) {
            GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT)
            GLES20.glUseProgram(mProgramHandle)

            vertexBuffer.position(0)
            GLES20.glEnableVertexAttribArray(vPositionLoc)
            GLES20.glVertexAttribPointer(vPositionLoc, 3, GLES20.GL_FLOAT, false, 0, vertexBuffer)

            GLES20.glUniform4fv(uColorLoc, 1, colorBuffer)

            GLES20.glDrawArrays(GLES20.GL_LINES, 0, 4)
        }

设置顶点数据和颜色数据，GLES20.GL_LINES表示绘制线。

线的绘制有3种方式：

GL_LINES：俩俩组成一条直线，比如上面的4个点分别编号为1，2，3，4，1和2组成一条直线，3和4组成一条直线，如果点点个数为奇数，那么最后一个点将会抛弃。
GL_LINE_STRIP：还是上面的4个点，1和2，2和3，3和4各组成一条直线。
GL_LINE_LOOP：和GL_LINE_STRIP相比多了一个最后一个点和第一个点的连线。

效果图如下：