【OpenGL ES】绘制立方体

1 前言

本文主要介绍使用 OpenGL ES 绘制立方体，读者如果对 OpenGL ES 不太熟悉，请回顾以下内容：

在绘制立方体的过程中，主要用到了 MVP （Model View Projection）矩阵变换。

Model：模型变换，施加在模型上的空间变换，包含平移变换（translateM）、旋转变换（rotateM）、对称变换（transposeM）、缩放变换（scaleM）；
View：观测变换，施加在观测点上的变换，用于调整观测点位置、观测朝向、观测正方向；
Projection：透视变换，施加在视觉上的变换，用于调整模型的透视效果（如：矩形的透视效果是梯形）。

上述变换依次叠加，得到一个总的变换矩阵，即 MVP 变换矩阵，mvpMatrix = projectionMatrix * viewMatrix * modelMatrix，MVP 变换作用到模型的原始坐标矩阵上，得到的最终坐标矩阵即为用户观测到的模型状态。MVP 矩阵变换原理见→MVP矩阵变换。

本文完整代码资源见→【OpenGL ES】绘制立方体

项目目录如下：

2 案例

MainActivity.java

package com.zhyan8.cube;

import android.opengl.GLSurfaceView;

import android.os.Bundle;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    private GLSurfaceView mGlSurfaceView;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        mGlSurfaceView = new MyGLSurfaceView(this);

        setContentView(mGlSurfaceView);

        mGlSurfaceView.setRenderer(new MyRender(this));

    }

    @Override

    protected void onResume() {

        super.onResume();

        mGlSurfaceView.onResume();

    }

    @Override

    protected void onPause() {

        super.onPause();

        mGlSurfaceView.onPause();

    }

}

MyGLSurfaceView.java

package com.zhyan8.cube;

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.cube;

import android.content.Context;

import android.opengl.GLES30;

import android.opengl.GLSurfaceView;

import java.nio.ByteBuffer;

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 colorBuffer;

    private ByteBuffer indexBuffer;

    private GLUtils mGLUtils;

    private int mProgramId;

    private float mRatio;

    public MyRender(Context context) {

        mGLUtils = new GLUtils(context);

    }

    @Override

    public 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);

    }

    @Override

    public void onSurfaceChanged(GL10 gl, int width, int height) {

        //设置视图窗口

        GLES30.glViewport(0, 0, width, height);

        getFloatBuffer();

        mRatio = 1.0f * width / height;

    }

    @Override

    public 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, 4, GLES30.GL_FLOAT, false, 0, colorBuffer);

        //绘制正方体的表面（6个面，每面2个三角形，每个三角形3个顶点）

        gl.glDrawElements(GLES30.GL_TRIANGLES, 6 * 2 * 3, GLES30.GL_UNSIGNED_BYTE, indexBuffer);

        //禁止顶点数组句柄

        GLES30.glDisableVertexAttribArray(0);

        GLES30.glDisableVertexAttribArray(1);

    }

    private void getFloatBuffer() {

        float r = 1.0f;

        float[] vertex = new float[] {

            r, r, r, //0

            -r, r, r, //1

            -r, -r, r, //2

            r, -r, r, //3

            r, r, -r, //4

            -r, r, -r, //5

            -r, -r, -r, //6

            r, -r, -r //7

        };

        byte[] index = new byte[] {

            0, 2, 1, 0, 2, 3, //前面

            0, 5, 1, 0, 5, 4, //上面

            0, 7, 3, 0, 7, 4, //右面

            6, 4, 5, 6, 4, 7, //后面

            6, 3, 2, 6, 3, 7, //下面

            6, 1, 2, 6, 1, 5 //左面

        };

        float c = 1.0f;

        float[] color = new float[] {

            c, c, c, 1,

            0, c, c, 1,

            0, 0, c, 1,

            c, 0, c, 1,

            c, c, 0, 1,

            0, c, 0, 1,

            0, 0, 0, 1,

            c, 0, 0, 1

        };

        vertexBuffer = mGLUtils.getFloatBuffer(vertex);

        indexBuffer = mGLUtils.getByteBuffer(index);

        colorBuffer = mGLUtils.getFloatBuffer(color);

    }

}

GLUtils.java

package com.zhyan8.cube;

import android.content.Context;

import android.opengl.GLES30;

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 GLUtils {

    private Context mContext;

    private int mRotateAgree = 0;

    public GLUtils(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 ByteBuffer getByteBuffer(byte[] byteArr) {

        ByteBuffer bb = ByteBuffer.allocateDirect(byteArr.length * Byte.BYTES)

                .order(ByteOrder.nativeOrder());

        bb.put(byteArr);

        bb.position(0);

        return bb;

    }

    //通过代码片段编译着色器

    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();

    }

    //计算MVP变换矩阵

    public void transform(int programId, float ratio) {

        //初始化modelMatrix, viewMatrix, projectionMatrix

        float[] modelMatrix = getIdentityMatrix(16, 0); //模型变换矩阵

        float[] viewMatrix = getIdentityMatrix(16, 0); //观测变换矩阵

        float[] projectionMatrix = getIdentityMatrix(16, 0); //投影变换矩阵

        //获取modelMatrix, viewMatrix, projectionMatrix

        mRotateAgree = (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 * modelMatrix

        float[] mvpMatrix = new float[16];

        Matrix.multiplyMM(mvpMatrix, 0, viewMatrix, 0, modelMatrix, 0);

        Matrix.multiplyMM(mvpMatrix, 0, projectionMatrix, 0, mvpMatrix, 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;

    }

}

vertex_shader.glsl

#version 300 es

layout (location = 0) in vec4 vPosition;

layout (location = 1) in vec4 aColor;

uniform mat4 mvpMatrix;

out vec4 vColor;

void main() {

     gl_Position  = mvpMatrix * vPosition;

     vColor = aColor;

}

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

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

fragment_shader.glsl

#version 300 es

precision mediump float; //声明float型变量的精度为mediump

in vec4 vColor;

out vec4 fragColor;

void main() {

     fragColor = vColor;

}

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

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

运行结果：

声明：本文转自【OpenGL ES】绘制正方形