Android OpenGL ES （九）多纹理绘制

基本原理

1. 多次绘制，单纹理单元

之前我们在第三节基础图形绘制的时候有推导出一个结论：

上面的示例图中，在onDrawFrame里，同时绘制了点、线、三角形，也就是多次调用glDrawArrays，并且绘制出来了。 我们暂时定义glDrawArrays是进行一次图元组装，也就是绘制一个图层，那么一次onDrawFrame只绘制一帧，而这一帧可以绘制多种图元，多个图层。 也就是：一次只绘制一帧，但是一帧可以绘制多个图层。

所以我们要绘制多个纹理，可以通过多次调用glDrawArrays绘制纹理顶点的方式来实现。这样就是一张一张图片按先后顺序，一层一层地画到当前的一帧画面上去。

2. 单次绘制，多纹理单元

上一节纹理绘制讲到，OpenGL中可以同时操作的纹理单元是16个，那么我们可以利用多个纹理单元来进行绘制同一个图层，从而达到目的。

代码实现

单纹理单元

init {
    // 加载2个顶点坐标数据，避免绘制2个纹理重叠
    mVertexData = BufferUtil.createFloatBuffer(POINT_DATA)
    mVertexData2 = BufferUtil.createFloatBuffer(POINT_DATA2)
    mTexVertexBuffer = BufferUtil.createFloatBuffer(TEX_VERTEX)
}

override fun onSurfaceCreated(gl: GL10?, config: EGLConfig?) {
    // 加载2个纹理数据
    mTextureBean = TextureHelper.loadTexture(context, R.drawable.pikachu)
    mTextureBean2 = TextureHelper.loadTexture(context, R.drawable.tuzki)
}

override fun onDrawFrame(glUnused: GL10) {
    GLES20.glClear(GL10.GL_COLOR_BUFFER_BIT)
    drawPikachu()
    drawTuzki()
}

private fun drawPikachu() {
    mVertexData.position(0)
    GLES20.glVertexAttribPointer(mAPositionLocation, POSITION_COMPONENT_COUNT,
            GLES20.GL_FLOAT, false, 0, mVertexData)
    GLES20.glEnableVertexAttribArray(mAPositionLocation)

    // 设置当前活动的纹理单元为纹理单元0
    GLES20.glActiveTexture(GLES20.GL_TEXTURE0)
    // 将纹理ID绑定到当前活动的纹理单元上
    GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, mTextureBean!!.textureId)
    GLES20.glUniform1i(uTextureUnitLocation, 0)
    GLES20.glDrawArrays(GLES20.GL_TRIANGLE_FAN, 0, POINT_DATA.size / POSITION_COMPONENT_COUNT)
}

private fun drawTuzki() {
    mVertexData2.position(0)
    GLES20.glVertexAttribPointer(mAPositionLocation, POSITION_COMPONENT_COUNT,
            GLES20.GL_FLOAT, false, 0, mVertexData2)
    GLES20.glEnableVertexAttribArray(mAPositionLocation)

    // 绑定新的纹理ID到已激活的纹理单元上
    GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, mTextureBean2!!.textureId)
    GLES20.glDrawArrays(GLES20.GL_TRIANGLE_FAN, 0, POINT_DATA.size / POSITION_COMPONENT_COUNT)
}

代码和上一节基本相同，Shader文件不变，最大的区别在onDrawFrame的时候，绑了2次纹理，调用了2次glDrawArrays绘制不同的纹理。

多纹理单元

precision mediump float;
varying vec2 v_TexCoord;
uniform sampler2D u_TextureUnit1;
uniform sampler2D u_TextureUnit2;
void main() {
    vec4 texture1 = texture2D(u_TextureUnit1, v_TexCoord);
    vec4 texture2 = texture2D(u_TextureUnit2, v_TexCoord);
    if (texture1.a != 0.0) {
        gl_FragColor = texture1;
    } else {
        gl_FragColor = texture2;
    }
}

通过上面这样设置Fragment，就可以实现纹理1和纹理2的叠加效果控制。

接下来再讲解下如何绑定多个纹理单元的相关信息。

private fun drawPikachu() {
    GLES20.glActiveTexture(GLES20.GL_TEXTURE0)
    GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, pikachuBean!!.textureId)
    GLES20.glUniform1i(textureLocation1, 0)
}

private fun drawTuzki() {
    GLES20.glActiveTexture(GLES20.GL_TEXTURE1)
    GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, tuzkiBean!!.textureId)
    GLES20.glUniform1i(textureLocation2, 1)
}

这种方式的优点是可以控制多个纹理的关系，做出复杂的效果。缺点是多个纹理单元的顶点坐标必须是一样的。

多纹理绘制.png