OpenGL 矩形

作者: 暗影1 | 来源:发表于2019-02-20 10:41 被阅读7次

在前面的三角形的基础上绘制矩形就简单很多了,改下顶点坐标就可以绘制出来,这里有两种绘制方式。

第一种绘制方式

class RectangleRender : GLSurfaceView.Renderer {

    private val vao = IntArray(1)
    private val vbo = IntArray(1)
    private val ebo = IntArray(1)
    private var esShader = Shader()

    private var vertices = floatArrayOf(
        0.5f, 0.5f, 0.0f,   // 右上角
        0.5f, -0.5f, 0.0f,  // 右下角
        -0.5f, -0.5f, 0.0f, // 左下角
        -0.5f, 0.5f, 0.0f   // 左上角
    )

    private var indices = shortArrayOf(
        0, 1, 3, // 第一个三角形
        1, 2, 3  // 第二个三角形
    )

    override fun onSurfaceCreated(gl: GL10?, config: EGLConfig?) {
        GLES30.glClearColor(0.2f, 0.3f, 0.3f, 1.0f)

        //vao
        GLES30.glGenVertexArrays(1, vao, 0)
        GLES30.glBindVertexArray(vao[0])
        //vbo
        GLES30.glGenBuffers(1, vbo, 0)
        GLES30.glBindBuffer(GLES30.GL_ARRAY_BUFFER, vbo[0])
        val vertexBuffer = DataUtil.createByteBuffer(vertices)
        //复制数据到opengl
        GLES30.glBufferData(
            //顶点缓冲对象当前绑定到GL_ARRAY_BUFFER目标上
            GLES30.GL_ARRAY_BUFFER,
            //指定传输数据的大小(以字节为单位)
            vertices.size * DataUtil.sizeof(GLES30.GL_FLOAT),
            //发送的实际数据
            vertexBuffer,
            //GL_STATIC_DRAW :数据不会或几乎不会改变。
            //GL_DYNAMIC_DRAW:数据会被改变很多。
            //GL_STREAM_DRAW :数据每次绘制时都会改变
            GLES30.GL_STATIC_DRAW
        )
        //设置顶点数组指针
        GLES30.glVertexAttribPointer(
            //shader中 layout(location = 0)的值
            0,
            //顶点属性的大小。顶点属性是一个vec3,它由3个值组成,所以大小是3
            3,
            //数据的类型
            GLES30.GL_FLOAT,
            //GL_TRUE,数据被标准化,所有数据都会被映射到0(对于有符号型signed数据是-1)到1之间。我们把它设置为GL_FALSE
            false,
            //步长,它告诉我们在连续的顶点属性组之间的间隔 字节单位
            3 * DataUtil.sizeof(GLES30.GL_FLOAT),
            //数据偏移量 这里只有顶点 位置数据在数组的开头,所以这里是0
            0
        )
        GLES30.glEnableVertexAttribArray(0)
        //vbo end
        //vao end

        //ebo start
        GLES30.glGenBuffers(1, ebo, 0)
        GLES30.glBindBuffer(GLES30.GL_ELEMENT_ARRAY_BUFFER, ebo[0])
        val indexBuffer = DataUtil.createByteBuffer(indices)
        //复制数据到opengl
        GLES30.glBufferData(
            //顶点缓冲对象当前绑定到GL_ELEMENT_ARRAY_BUFFER目标上
            GLES30.GL_ELEMENT_ARRAY_BUFFER,
            //指定传输数据的大小(以字节为单位)
            indices.size * DataUtil.sizeof(GLES30.GL_SHORT),
            //发送的实际数据
            indexBuffer,
            //GL_STATIC_DRAW :数据不会或几乎不会改变。
            //GL_DYNAMIC_DRAW:数据会被改变很多。
            //GL_STREAM_DRAW :数据每次绘制时都会改变
            GLES30.GL_STATIC_DRAW
        )
        //ebo end

        //shader
        esShader.loadProgramFromAsset(MyApp.context, "triangle_vert.glsl", "triangle_frag.glsl")
    }

    override fun onSurfaceChanged(gl: GL10?, width: Int, height: Int) {
        GLES30.glViewport(0, 0, width, height)
    }

    override fun onDrawFrame(gl: GL10?) {
        GLES30.glClear(GLES30.GL_COLOR_BUFFER_BIT)
        esShader.use()
        GLES30.glBindVertexArray(vao[0])

        GLES30.glDrawElements(
            //图元的类型
            GLES30.GL_TRIANGLES,
            //定点个数
            6,
            //定点数据类型
            GLES30.GL_UNSIGNED_SHORT,
            //顶点偏移量
            0
        )

    }
}

这里跟绘制三角形有区别的地方是使用了索引来绘制,创建索引跟创建vbo是一样的。看代码里面的注释。
绘制时使用

GLES30.glDrawElements(
            //图元的类型
            GLES30.GL_TRIANGLES,
            //定点个数
            6,
            //定点数据类型
            GLES30.GL_UNSIGNED_SHORT,
            //顶点偏移量
            0
        )

这样可以节省顶点数据。

第二种绘制方式

这种就是定义6个顶点,绘制两个三角形

class RectangleRender2 : GLSurfaceView.Renderer {

    private val vao = IntArray(1)
    private val vbo = IntArray(1)
    private var esShader = Shader()

    private var vertices = floatArrayOf(
        -0.5f, 0.5f, 0.0f,
        -0.5f, -0.5f, 0.0f,
        0.5f, -0.5f, 0.0f,
        // second triangle
        -0.5f, 0.5f, 0.0f,
        0.5f, 0.5f, 0.0f,
        0.5f, -0.5f, 0.0f
    )

    override fun onSurfaceCreated(gl: GL10?, config: EGLConfig?) {
        GLES30.glClearColor(0.2f, 0.3f, 0.3f, 1.0f)

        //vao
        GLES30.glGenVertexArrays(1, vao, 0)
        GLES30.glBindVertexArray(vao[0])
        //vbo
        GLES30.glGenBuffers(1, vbo, 0)
        GLES30.glBindBuffer(GLES30.GL_ARRAY_BUFFER, vbo[0])
        val vertexBuffer = DataUtil.createByteBuffer(vertices)
        //复制数据到opengl
        GLES30.glBufferData(
            //顶点缓冲对象当前绑定到GL_ARRAY_BUFFER目标上
            GLES30.GL_ARRAY_BUFFER,
            //指定传输数据的大小(以字节为单位)
            vertices.size * DataUtil.sizeof(GLES30.GL_FLOAT),
            //发送的实际数据
            vertexBuffer,
            //GL_STATIC_DRAW :数据不会或几乎不会改变。
            //GL_DYNAMIC_DRAW:数据会被改变很多。
            //GL_STREAM_DRAW :数据每次绘制时都会改变
            GLES30.GL_STATIC_DRAW
        )
        //设置顶点数组指针
        GLES30.glVertexAttribPointer(
            //shader中 layout(location = 0)的值
            0,
            //顶点属性的大小。顶点属性是一个vec3,它由3个值组成,所以大小是3
            3,
            //数据的类型
            GLES30.GL_FLOAT,
            //GL_TRUE,数据被标准化,所有数据都会被映射到0(对于有符号型signed数据是-1)到1之间。我们把它设置为GL_FALSE
            false,
            //步长,它告诉我们在连续的顶点属性组之间的间隔 字节单位
            3 * DataUtil.sizeof(GLES30.GL_FLOAT),
            //数据偏移量 这里只有顶点 位置数据在数组的开头,所以这里是0
            0
        )
        GLES30.glEnableVertexAttribArray(0)
        //vbo end
        //vao end
        //shader
        esShader.loadProgramFromAsset(MyApp.context, "triangle_vert.glsl", "triangle_frag.glsl")
    }

    override fun onSurfaceChanged(gl: GL10?, width: Int, height: Int) {
        GLES30.glViewport(0, 0, width, height)
    }

    override fun onDrawFrame(gl: GL10?) {
        GLES30.glClear(GLES30.GL_COLOR_BUFFER_BIT)
        esShader.use()
        GLES30.glBindVertexArray(vao[0])

        GLES30.glDrawArrays(GLES30.GL_TRIANGLES, 0, 6)

    }
}

代码比较简单、也有注释,就这样了。

代码

相关文章

  • OpenGL 矩形

    在前面的三角形的基础上绘制矩形就简单很多了,改下顶点坐标就可以绘制出来,这里有两种绘制方式。 第一种绘制方式 这里...

  • OpenGL ES 绘制矩形

    系统梳理,重新出发。 坐标系 众所周知,iOS屏幕坐标系是左手坐标系:左上角为(0,0),向右向下为xy正方向;而...

  • OpenGL:世界球体(移动,公转,自转)

    OpenGL: 世界球体(移动,公转,自转) void SetupRC() 绘制地板 很多个矩形组成 绘制花托 v...

  • OpenGL--渲染流程

    OpenGL 着色器流程 上图的着色器渲染流程中,圆角矩形表示固定功能函数阶段,二直角矩形表型可编程阶段;可编程阶...

  • OpenGL ES之绘制矩形

    首先我们看看绘制矩形的效果: 在OpenGL ES2.0上没有绘制矩形的方法,所有图形只能有点、线、三角形去拼,上...

  • C++ opengl 绘制矩形

    opengl_triangle.cpp

  • 在iOS中如何使用OpenGL画一些简单的图形

    本篇文章中,主要实现的是如何使用OpenGL画一个三角形和矩形,我分为下几个步骤来说明: OpenGL的语言GLS...

  • OpenGL ES for Android 绘制矩形和正方形

    前面的文章介绍了如何 绘制三角形,在OpenGL ES中没有直接绘制矩形的方式,通过绘制2个三角形的方式绘制矩形。...

  • OpenGL 学习 03 - 移动的矩形

    学习书籍: OpenGL 超级宝典(中文第五版) 密码:fu4w 书籍源码:OpenGL 超级宝典第五版源代码 ...

  • Opengl ES 3.0 on iOS--- HelloWor

    简介 本文记录了我初学Opengl 绘制彩色矩形的过程,可能我对内容的描述不够准确,还请多多指正 实现 配置图层 ...

网友评论

    本文标题:OpenGL 矩形

    本文链接:https://www.haomeiwen.com/subject/tlpcyqtx.html