1 前言

        本文通过一个立方体贴图的例子，讲解三维纹理贴图的应用，案例中使用 6 张不同的图片给立方体贴图。本文涉及到的知识点主要包含：三维绘图、MVP 矩阵变换、纹理贴图，读者如果对 OpenGL ES 不太熟悉，请回顾以下内容：

• 绘制立方体
• MVP矩阵变换
• 纹理贴图

        项目目录如下：

 

2 案例

        MainActivity.java

package com.zhyan8.texture3d;import android.opengl.GLSurfaceView;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;public class MainActivity extends AppCompatActivity {private GLSurfaceView mGlSurfaceView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);mGlSurfaceView = new MyGLSurfaceView(this);setContentView(mGlSurfaceView);mGlSurfaceView.setRenderer(new MyRender(this));}@Overrideprotected void onResume() {super.onResume();mGlSurfaceView.onResume();}@Overrideprotected void onPause() {super.onPause();mGlSurfaceView.onPause();}
}

        MyGLSurfaceView.java

package com.zhyan8.texture3d;import android.content.Context;
import android.opengl.GLSurfaceView;
import android.util.AttributeSet;public class MyGLSurfaceView extends GLSurfaceView {public MyGLSurfaceView(Context context) {super(context);setEGLContextClientVersion(3);}public MyGLSurfaceView(Context context, AttributeSet attrs) {super(context, attrs);setEGLContextClientVersion(3);}
}

        MyRender.java

package com.zhyan8.texture3d;import android.content.Context;
import android.opengl.GLES30;
import android.opengl.GLSurfaceView;
import java.nio.FloatBuffer;
import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;public class MyRender implements GLSurfaceView.Renderer {private FloatBuffer vertexBuffer;private FloatBuffer textureBuffer;private MyGLUtils mGLUtils;private int mProgramId;private float mRatio;private int[] mTextureIds;public MyRender(Context context) {mGLUtils = new MyGLUtils(context);}@Overridepublic void onSurfaceCreated(GL10 gl, EGLConfig eglConfig) {//设置背景颜色GLES30.glClearColor(0.1f, 0.2f, 0.3f, 0.4f);//启动深度测试gl.glEnable(GLES30.GL_DEPTH_TEST);//编译着色器final int vertexShaderId = mGLUtils.compileShader(GLES30.GL_VERTEX_SHADER, R.raw.vertex_shader);final int fragmentShaderId = mGLUtils.compileShader(GLES30.GL_FRAGMENT_SHADER, R.raw.fragment_shader);//链接程序片段mProgramId = mGLUtils.linkProgram(vertexShaderId, fragmentShaderId);GLES30.glUseProgram(mProgramId);mTextureIds = mGLUtils.loadTexture(Model.resIds);}@Overridepublic void onSurfaceChanged(GL10 gl, int width, int height) {//设置视图窗口GLES30.glViewport(0, 0, width, height);getFloatBuffer();mRatio = 1.0f * width / height;}@Overridepublic void onDrawFrame(GL10 gl) {//将颜色缓冲区设置为预设的颜色GLES30.glClear(GLES30.GL_COLOR_BUFFER_BIT | GLES30.GL_DEPTH_BUFFER_BIT);mGLUtils.transform(mProgramId, mRatio); //计算MVP变换矩阵//启用顶点的数组句柄GLES30.glEnableVertexAttribArray(0);GLES30.glEnableVertexAttribArray(1);//准备顶点坐标和纹理坐标GLES30.glVertexAttribPointer(0, 3, GLES30.GL_FLOAT, false, 0, vertexBuffer);GLES30.glVertexAttribPointer(1, 2, GLES30.GL_FLOAT, false, 0, textureBuffer);//激活纹理GLES30.glActiveTexture(GLES30.GL_TEXTURE);//绘制纹理drawTextures();//禁止顶点数组句柄GLES30.glDisableVertexAttribArray(0);GLES30.glDisableVertexAttribArray(1);}private void getFloatBuffer() {vertexBuffer = mGLUtils.getFloatBuffer(Model.vertex);textureBuffer = mGLUtils.getFloatBuffer(Model.texture);}private void drawTextures() {int count = 4;for (int i =0; i < mTextureIds.length; i++) {int first = i * count;//绑定纹理GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, mTextureIds[i]);//绘制正方体的表面（6个面，每面2个三角形，每个三角形3个顶点）GLES30.glDrawArrays(GLES30.GL_TRIANGLE_FAN, first, count);}}
}

        GLUtils.java

package com.zhyan8.texture3d;import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.opengl.GLES30;
import android.opengl.GLUtils;
import android.opengl.Matrix;
import java.io.BufferedReader;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;public class MyGLUtils {private Context mContext;private int mRotateAgree = 0;public MyGLUtils(Context context) {mContext = context;}public FloatBuffer getFloatBuffer(float[] floatArr) {FloatBuffer fb = ByteBuffer.allocateDirect(floatArr.length * Float.BYTES).order(ByteOrder.nativeOrder()).asFloatBuffer();fb.put(floatArr);fb.position(0);return fb;}//通过代码片段编译着色器public int compileShader(int type, String shaderCode){int shader = GLES30.glCreateShader(type);GLES30.glShaderSource(shader, shaderCode);GLES30.glCompileShader(shader);return shader;}//通过外部资源编译着色器public int compileShader(int type, int shaderId){String shaderCode = readShaderFromResource(shaderId);return compileShader(type, shaderCode);}//链接到着色器public int linkProgram(int vertexShaderId, int fragmentShaderId) {final int programId = GLES30.glCreateProgram();//将顶点着色器加入到程序GLES30.glAttachShader(programId, vertexShaderId);//将片元着色器加入到程序GLES30.glAttachShader(programId, fragmentShaderId);//链接着色器程序GLES30.glLinkProgram(programId);return programId;}//从shader文件读出字符串private String readShaderFromResource(int shaderId) {InputStream is = mContext.getResources().openRawResource(shaderId);BufferedReader br = new BufferedReader(new InputStreamReader(is));String line;StringBuilder sb = new StringBuilder();try {while ((line = br.readLine()) != null) {sb.append(line);sb.append("\n");}br.close();} catch (Exception e) {e.printStackTrace();}return sb.toString();}//加载纹理贴图public int[] loadTexture(int[] resIds) {BitmapFactory.Options options = new BitmapFactory.Options();options.inScaled = false;Bitmap[] bitmaps = new Bitmap[resIds.length];// 生成纹理idfinal int[] textureIds = new int[resIds.length];GLES30.glGenTextures(resIds.length, textureIds, 0);for (int i = 0; i < resIds.length; i++) {bitmaps[i] = BitmapFactory.decodeResource(mContext.getResources(), resIds[i], options);// 绑定纹理到OpenGLGLES30.glBindTexture(GLES30.GL_TEXTURE_2D, textureIds[i]);GLES30.glTexParameteri(GLES30.GL_TEXTURE_2D, GLES30.GL_TEXTURE_MIN_FILTER, GLES30.GL_LINEAR_MIPMAP_LINEAR);GLES30.glTexParameteri(GLES30.GL_TEXTURE_2D, GLES30.GL_TEXTURE_MAG_FILTER, GLES30.GL_LINEAR);// 加载bitmap到纹理中GLUtils.texImage2D(GLES30.GL_TEXTURE_2D, 0, bitmaps[i], 0);// 生成MIP贴图GLES30.glGenerateMipmap(GLES30.GL_TEXTURE_2D);// 取消绑定纹理GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, 0);bitmaps[i].recycle();}return textureIds;}//计算MVP变换矩阵public void transform(int programId, float ratio) {//初始化modelMatrix, viewMatrix, projectionMatrixfloat[] modelMatrix = getIdentityMatrix(16, 0); //模型变换矩阵float[] viewMatrix = getIdentityMatrix(16, 0); //观测变换矩阵float[] projectionMatrix = getIdentityMatrix(16, 0); //投影变换矩阵//获取modelMatrix, viewMatrix, projectionMatrixmRotateAgree = (mRotateAgree + 2) % 360;Matrix.rotateM(modelMatrix, 0, mRotateAgree, -1, -1, 1); //获取模型旋转变换矩阵Matrix.setLookAtM(viewMatrix, 0, 0, 5, 10, 0, 0, 0, 0, 1, 0); //获取观测变换矩阵Matrix.frustumM(projectionMatrix, 0, -ratio, ratio, -1, 1, 3, 20); //获取投影变换矩阵//计算MVP变换矩阵: mvpMatrix = projectionMatrix * viewMatrix * modelMatrixfloat[] tempMatrix = new float[16];float[] mvpMatrix = new float[16];Matrix.multiplyMM(tempMatrix, 0, viewMatrix, 0, modelMatrix, 0);Matrix.multiplyMM(mvpMatrix, 0, projectionMatrix, 0, tempMatrix, 0);//设置MVP变换矩阵int mvpMatrixHandle = GLES30.glGetUniformLocation(programId, "mvpMatrix");GLES30.glUniformMatrix4fv(mvpMatrixHandle, 1, false, mvpMatrix, 0);}private float[] getIdentityMatrix(int size, int offset) {float[] matrix = new float[size];Matrix.setIdentityM(matrix, offset);return matrix;}
}

        Model.java

package com.zhyan8.texture3d;public class Model {private static float r = 1.0f;public static int[] resIds = new int[] {R.raw.x1, R.raw.x2, R.raw.x3,R.raw.x4, R.raw.x5, R.raw.x6};public static float[] vertex = new float[] {//前面r, r, r,-r, r, r,-r, -r, r,r, -r, r,//后面r, r, -r,-r, r, -r,-r, -r, -r,r, -r, -r,//上面r, r, r,r, r, -r,-r, r, -r,-r, r, r,//下面r, -r, r,r, -r, -r,-r, -r, -r,-r, -r, r,//右面r, r, r,r, r, -r,r, -r, -r,r, -r, r,//左面-r, r, r,-r, r, -r,-r, -r, -r,-r, -r, r};public static float[] texture = new float[] {//前面0f, 0f,1f, 0f,1f, 1f,0f, 1f,//后面0f, 0f,1f, 0f,1f, 1f,0f, 1f,//上面0f, 0f,1f, 0f,1f, 1f,0f, 1f,//下面0f, 0f,1f, 0f,1f, 1f,0f, 1f,//右面0f, 0f,1f, 0f,1f, 1f,0f, 1f,//左面0f, 0f,1f, 0f,1f, 1f,0f, 1f};
}

        vertex_shader.glsl

#version 300 es
layout (location = 0) in vec4 vPosition;
layout (location = 1) in vec2 aTextureCoord;
uniform mat4 mvpMatrix;
out vec2 vTexCoord;
void main() {gl_Position  = mvpMatrix * vPosition;vTexCoord = aTextureCoord;
}

        顶点着色器的作用：进行矩阵变换位置、根据光照公式计算顶点颜⾊、⽣成 / 变换纹理坐标，并且把位置和纹理坐标发送到片元着色器。 

        顶点着色器中，如果没有指定默认精度，则 int 和 float 的默认精度都为 highp。

        fragment_shader.glsl

#version 300 es
precision mediump float;
uniform sampler2D uTextureUnit;
in vec2 vTexCoord;
out vec4 fragColor;
void main() {fragColor = texture(uTextureUnit,vTexCoord);
}

        片元着色器的作用：处理经光栅化阶段生成的每个片元，计算每个像素的颜色和透明度。 

        在片元着色器中，浮点值没有默认的精度值，每个着色器必须声明一个默认的 float 精度。

        运行效果：