基本原理
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
拓展阅读
参考
见Android OpenGL ES学习资料所列举的博客、资料。
GitHub代码工程
本系列课程所有相关代码请参考我的GitHub项目GLStudio。
课程目录
本系列课程目录详见 简书 - Android OpenGL ES教程规划
网友评论