OpenGL Texture

2019年5月24日 316次阅读 来源: 蓦然地执着

我们基于前面四边形的例子，给四边形贴个图

《OpenGL Texture》 screenshot-1550647708208.jpg

文理坐标

纹理的坐标是屏幕左下角

{
    0.0f, 0.0f, // 左下角
    1.0f, 0.0f, // 右下角
    1.0f, 1.0f ,// 左上角
    0.0f,1.0f //右上角
}

《OpenGL Texture》 文理坐标

然后看下文理创建的方法

private fun genTexture(bitmap: Bitmap): Int {
        var textureId = IntArray(1)
        GLES30.glGenTextures(1, textureId, 0)
        GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, textureId[0])
        GLUtils.texImage2D(GLES30.GL_TEXTURE_2D, 0, bitmap, 0)
        //过滤方式 GL_LINEAR 线性取插值 GL_NEAREST 取最靠近
        //当图片缩小时的模式
        GLES30.glTexParameteri(GLES30.GL_TEXTURE_2D, GLES30.GL_TEXTURE_MIN_FILTER, GLES30.GL_NEAREST)
        //当图片放大时的模式
        GLES30.glTexParameteri(GLES30.GL_TEXTURE_2D, GLES30.GL_TEXTURE_MAG_FILTER, GLES30.GL_LINEAR)

        //文理横轴的缩放方式 GL_CLAMP_TO_EDGE：纹理坐标会被约束在0到1之间，超出的部分会重复纹理坐标的边缘，产生一种边缘被拉伸的效果
        // GL_REPEAT 重复
        // GL_MIRRORED_REPEAT 镜像重复
        //GL_CLAMP_TO_BORDER 边缘颜色
        GLES30.glTexParameteri(GLES30.GL_TEXTURE_2D, GLES30.GL_TEXTURE_WRAP_S, GLES30.GL_CLAMP_TO_EDGE)
        //文理纵轴的缩放方式
        GLES30.glTexParameteri(GLES30.GL_TEXTURE_2D, GLES30.GL_TEXTURE_WRAP_T, GLES30.GL_CLAMP_TO_EDGE)
        GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, 0)
        return textureId[0]
    }

要注意文理环绕方式和纹理过滤方式，注释里已经写清楚了

绘画时绑定下文理就能画出来了

override fun onDrawFrame(gl: GL10?) {
        GLES30.glClear(GLES30.GL_COLOR_BUFFER_BIT)
        esShader.use()
        GLES30.glBindVertexArray(vao[0])
        GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, texture)
        GLES30.glDrawElements(
            //图元的类型
            GLES30.GL_TRIANGLES,
            //定点个数
            6,
            //定点数据类型
            GLES30.GL_UNSIGNED_SHORT,
            //顶点偏移量
            0
        )

    }

还要更换着色器

顶点
#version 300 es
layout (location = 0) in vec3 aPos;
layout (location = 1) in vec3 aColor;
layout (location = 2) in vec2 aTexCoord;
out vec3 ourColor;
out vec2 TexCoord;
void main() {
    gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);
    ourColor=aColor;
    TexCoord=aTexCoord;
}
片段
#version 300 es
precision mediump float;
out vec4 FragColor;
in vec3 ourColor;
in vec2 TexCoord;

uniform sampler2D ourTexture;
void main()
{
      FragColor = texture(ourTexture, TexCoord);
}

这样就能显示出纹理了

学习OpenGL就是为了之后视频滤镜打基础，现在可以尝试下了
比如给箱子图片加点颜色

《OpenGL Texture》 screenshot-1550648668524.jpg

我们改下片段着色器

#version 300 es
precision mediump float;
out vec4 FragColor;
in vec3 ourColor;
in vec2 TexCoord;

uniform sampler2D ourTexture;
void main()
{
//      FragColor = texture(ourTexture, TexCoord);
    FragColor = texture(ourTexture, TexCoord)* vec4(ourColor, 1.0);
}

让箱子的颜色乘以添加的颜色，这样两个颜色就混合一块了

现在才使用一个文理，我们使用两个文理来做个有趣的事情
两张图片，一张作为背景，一张作为人物，让他们一块显示

《OpenGL Texture》 背景图
《OpenGL Texture》 人物图

不用在于两个图片大小不一致，因为小的会放大，大的会放小，都取决于坐标。

《OpenGL Texture》 屏幕快照 2019-02-20 下午4.14.46.png

效果就是两张图片混合一块了，很多滤镜都是通过这样做的
要实现这效果的话改下着色器就可以了

顶点

#version 300 es
layout (location = 0) in vec3 aPos;
layout (location = 1) in vec3 aColor;
layout (location = 2) in vec2 aTexCoord;
out vec3 ourColor;
out vec2 TexCoord;
void main() {
    gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);
    ourColor=aColor;
    TexCoord=vec2(aTexCoord.x,1.0-aTexCoord.y);
}

TexCoord=vec2(aTexCoord.x,1.0-aTexCoord.y); 这句要注意 不然图片会翻转的，因为文理是左下角 但是图片是左上角开始的

片段

#version 300 es
precision mediump float;
out vec4 FragColor;
in vec3 ourColor;
in vec2 TexCoord;

uniform sampler2D texture1;
uniform sampler2D texture2;

void main()
{
    FragColor = mix(texture(texture1, TexCoord), texture(texture2, TexCoord), 0.2);
}

就是两个文理混合，mix是着色器语音的内置函数，如果第三个值是0.0，它会返回第一个输入；如果是1.0，会返回第二个输入值。0.2会返回80%的第一个输入颜色和20%的第二个输入颜色，即返回两个纹理的混合色。
看下所有代码

class MixTextureRender : GLSurfaceView.Renderer {

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

    private var vertices = floatArrayOf(
        //顶点            //颜色             //文理
        0.5f, 0.5f, 0.0f, 1.0f, 0.0f, 0.0f, 1.0f, 1.0f,// 右上角
        0.5f, -0.5f, 0.0f, 0.0f, 1.0f, 0.0f, 1.0f, 0.0f,// 右下角
        -0.5f, -0.5f, 0.0f, 0.0f, 0.0f, 1.0f, 0.0f, 0.0f,// 左下角
        -0.5f, 0.5f, 0.0f, 0.5f, 0.5f, 0.5f, 0.0f, 1.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,
            //步长，它告诉我们在连续的顶点属性组之间的间隔 字节单位
            8 * DataUtil.sizeof(GLES30.GL_FLOAT),
            //数据偏移量 这里只有顶点 位置数据在数组的开头，所以这里是0
            0
        )
        GLES30.glEnableVertexAttribArray(0)

        //设置颜色数组指针
        GLES30.glVertexAttribPointer(
            //shader中 layout(location = 0)的值
            1,
            //顶点属性的大小。顶点属性是一个vec3，它由3个值组成，所以大小是3
            3,
            //数据的类型
            GLES30.GL_FLOAT,
            //GL_TRUE，数据被标准化，所有数据都会被映射到0（对于有符号型signed数据是-1）到1之间。我们把它设置为GL_FALSE
            false,
            //步长，它告诉我们在连续的顶点属性组之间的间隔 字节单位
            8 * DataUtil.sizeof(GLES30.GL_FLOAT),
            //数据偏移量 编译前面
            3 * DataUtil.sizeof(GLES30.GL_FLOAT)
        )
        GLES30.glEnableVertexAttribArray(1)


        //设置颜色数组指针
        GLES30.glVertexAttribPointer(
            //shader中 layout(location = 0)的值
            2,
            //顶点属性的大小。顶点属性是一个vec3，它由3个值组成，所以大小是3
            2,
            //数据的类型
            GLES30.GL_FLOAT,
            //GL_TRUE，数据被标准化，所有数据都会被映射到0（对于有符号型signed数据是-1）到1之间。我们把它设置为GL_FALSE
            false,
            //步长，它告诉我们在连续的顶点属性组之间的间隔 字节单位
            8 * DataUtil.sizeof(GLES30.GL_FLOAT),
            //数据偏移量 编译前面
            6 * DataUtil.sizeof(GLES30.GL_FLOAT)
        )
        GLES30.glEnableVertexAttribArray(2)

        //vbo 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

        //vao end

        //shader
        esShader.loadProgramFromAsset(MyApp.context, "mix_texture_vert.glsl", "mix_texture_frag.glsl")

        //create texture1
        var bitmap = BitmapFactory.decodeResource(MyApp.context.resources, R.mipmap.test)
        texture1 = genTexture(bitmap)
        //记得用完释放
        bitmap.recycle()

        bitmap = BitmapFactory.decodeResource(MyApp.context.resources, R.mipmap.face)
        texture2 = genTexture(bitmap)
        //记得用完释放
        bitmap.recycle()

        esShader.use()
        esShader.setInt("texture1", 0)
        esShader.setInt("texture2", 1)

    }

    private fun genTexture(bitmap: Bitmap): Int {
        var textureId = IntArray(1)
        GLES30.glGenTextures(1, textureId, 0)
        GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, textureId[0])
        GLUtils.texImage2D(GLES30.GL_TEXTURE_2D, 0, bitmap, 0)
        //过滤方式 GL_LINEAR 线性取插值 GL_NEAREST 取最靠近
        //当图片缩小时的模式
        GLES30.glTexParameteri(GLES30.GL_TEXTURE_2D, GLES30.GL_TEXTURE_MIN_FILTER, GLES30.GL_NEAREST)
        //当图片放大时的模式
        GLES30.glTexParameteri(GLES30.GL_TEXTURE_2D, GLES30.GL_TEXTURE_MAG_FILTER, GLES30.GL_LINEAR)

        //文理横轴的缩放方式 GL_CLAMP_TO_EDGE：纹理坐标会被约束在0到1之间，超出的部分会重复纹理坐标的边缘，产生一种边缘被拉伸的效果
        // GL_REPEAT 重复
        // GL_MIRRORED_REPEAT 镜像重复
        //GL_CLAMP_TO_BORDER 边缘颜色
        GLES30.glTexParameteri(GLES30.GL_TEXTURE_2D, GLES30.GL_TEXTURE_WRAP_S, GLES30.GL_CLAMP_TO_EDGE)
        //文理纵轴的缩放方式
        GLES30.glTexParameteri(GLES30.GL_TEXTURE_2D, GLES30.GL_TEXTURE_WRAP_T, GLES30.GL_CLAMP_TO_EDGE)
        GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, 0)
        return textureId[0]
    }


    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)
        GLES30.glActiveTexture(GLES30.GL_TEXTURE0)
        GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, texture1)
        GLES30.glActiveTexture(GLES30.GL_TEXTURE1)
        GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, texture2)
        esShader.use()
        GLES30.glBindVertexArray(vao[0])
        GLES30.glDrawElements(
            //图元的类型
            GLES30.GL_TRIANGLES,
            //定点个数
            6,
            //定点数据类型
            GLES30.GL_UNSIGNED_SHORT,
            //顶点偏移量
            0
        )

    }
}

效果就是这些了

我么还可以合成颜色进去哦

《OpenGL Texture》 屏幕快照 2019-02-20 下午4.46.44.png

void main()
{
    FragColor = mix(texture(texture1, TexCoord), texture(texture2, TexCoord), 0.2)* vec4(ourColor, 1.0);
}

修改下片段着色器

源代码

    原文作者：蓦然地执着
    原文地址: https://www.jianshu.com/p/27e3fec6fe96
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞