最通俗易懂的OpenGLES 透视投影理解

和正交投影的区别

• 透视投影
  • 近大远小
• 正交投影
  • 没有近大远小

指定绘图区域

• 函数：GLES20.glViewport(0, 0, width, height);
• 0，0表示左下角开始
• width、height表示绘图的宽度和高度
• 从而建立绘图区域坐标系向右为 x正方向、向上为y正方向，垂直屏幕向外为z正方向。

构建MVP矩阵

创建一个模型矩阵（可选ModelMatrix）

• 主要用途：用于做物体移动变换。
• 函数：

   float[] mModelMatrix = new float[16];
   Matrix.setIdentityM(mModelMatrix, 0);
   //Matrix.translateM(mModelMatrix, 0, 0, 0, 2);
   //Matrix.rotateM(mModelMatrix, 0, 135 + rotateX, 1, 0, 0);
   //Matrix.rotateM(mModelMatrix, 0, rotateY, 0, 1, 0);
   //Matrix.rotateM(mModelMatrix, 0, 45 + rotateZ, 0, 0, 1);
   //Matrix.translateM(mModelMatrix, 0, 0, 0, -2);   

设置眼睛的位置、方向、眼睛朝向（view矩阵）

• 主要用途：设置视角，眼坐标系和相机坐标系（已视点为原点，视线方向为z+轴正方向）
• 函数：

Matrix.setLookAtM(float[] viewMatrixValue, int rmOffset,
        float eyeX, float eyeY,float eyeZ,
        float centerX, float centerY, float centerZ, 
        float upX, float upY,float upZ) 

• eyeX、eyeY、eyeZ代表的是照相机眼睛的位置（相对于绘图区域坐标系）
• centerX、centerY、centerZ代表的是眼睛看向的目标点的位置，通过眼睛位置和目标点位置确定了方向。
• upX、upY、upZ，摄像机UP向量XYZ分量,代表照相机朝向。该方向是相对于绘图区域坐标系的x、y、z方向所指定的位置，可以理解为照相机可以正着拿拍摄指定点、也可以旋转指定角度拍摄指定点，但是得到的画面肯定是不相同的。具体朝向由upX、upY、upZ三个变量决定。upX取值范围（-1，1）。

设置投影变换矩阵

• 主要用途：由眼坐标可知，OpenGL管道首先会将目标从世界坐标变换到眼坐标，然后对视线范围外的部分进行裁剪。
• 函数

 public static void frustumM(float[] projectionViewValue, int offset,
            float left, float right, float bottom, float top,
            float near, float far)

1. 字面的意思是截锥体，通过near和far将相机预览范围裁剪为截锥体。
2. near、far截锥体离相机最近的位置和离相机最远的位置，在此范围外的物体将会被裁剪，不会出现画面中（相对于眼坐标系）
3. left、right、bottom、top指的是near平面相对绘图区域坐标系的区域坐标。比如说left 为-1，right为1代表near铺满整个屏幕画面。

使用案例（屏幕三维坐标系）

• 创建v、p矩阵

  @Override
    public void onSurfaceChanged(GL10 gl, int width, int height) {
        glViewport(0, 0, width, height);

        float scale = 1.0f * width / height;

        //相对于屏幕坐标系将摄像头固定在（0，0，-5）方向，看向屏幕正中点（0，0，0），以屏幕向上为正方向（0，1，0）
        Matrix.setLookAtM(mVMatrix, 0, 0, 0, -5, 0f, 0f, 0, 0f, 1f, 0f);
        //创建一个透视视景体
        //注意：near,far都必须大于0，且二者不能相等，left、right、bottom、top 是near的left和right坐标
        //但是由于相机视点为（0，0，-5）而屏幕应该显示的是正方向（0，0，x）x大于0的方向的画面，所有left对应的屏幕坐标应该为负，right对应的坐标系为正，呈左右翻转的效果。
        //将near设置为4，far设置为8。由此可以得到视图可见区域为由视点（0，0，-5）出发的距离为4-8的区域内的物体。（注意不是由0，0，0点出发距离4-8的区域）。
        Matrix.frustumM(mProjMatrix, 0, scale, -scale, -1, 1, 4, 8);

    }

• 创建MVP矩阵

     Matrix.setIdentityM(mModelMatrix, 0);
    //Matrix.rotateM(mModelMatrix, 0, 135 + rotateX, 1, 0, 0);
    //Matrix.rotateM(mModelMatrix, 0, rotateY, 0, 1, 0);
    //Matrix.rotateM(mModelMatrix, 0, 45 + rotateZ, 0, 0, 1);


    //mv矩阵
    Matrix.multiplyMM(mMVMatrix, 0, mVMatrix, 0, mModelMatrix, 0);


     //mvp矩阵
    // Calculate the projection and view transformation
    Matrix.multiplyMM(mMVPMatrix, 0, mProjMatrix, 0, mMVMatrix, 0);

    //进行绑定
    GLES20.glUniformMatrix4fv(matrixHandle, 1, false, mMVPMatrix, 0);

• 完成源码

class DirectionRenderer implements GLSurfaceView.Renderer {
    private int programRef;
    private FloatBuffer vertexBuffer;
    private FloatBuffer ptsVertexBuffer;

    private float vertexArray[] = {
            //z轴
            0.0f, 0.0f, 0.0f,
            1.0f, 0.0f, 0.0f,
            //y轴
            0.0f, 0.0f, 0.0f,
            0.0f, 1.0f, 0.0f,
            //z轴
            0.0f, 0.0f, 0.0f,
            0.0f, 0.0f, 1.0f
    };

    private float pointArray[] = {
            //原点
            0.0f, 0.0f, 0.0f,
            //z轴
            1.0f, 0.0f, 0.0f,
            //y轴
            0.0f, 1.0f, 0.0f,
            //z轴
            0.0f, 0.0f, 1.0f
    };

    private int positionHandle;
    private int mColorHandle;
    private int matrixHandle;
    private float[] mModelMatrix = new float[16];

    //定义一个16x16的透视矩阵
    private final float[] mProjMatrix = new float[16];
    //视图矩阵
    private final float[] mVMatrix = new float[16];
    //透视矩阵与视图矩阵变换后的总矩阵
    private final float[] mMVPMatrix = new float[16];
    private final float[] mMVMatrix = new float[16];
    private float rotateY;
    private float rotateZ;
    private float rotateX;

    @Override
    public void onSurfaceCreated(GL10 gl, EGLConfig config) {
        initGl();
        initGlProgram();
    }


    private void initGl() {
        glClearColor(0f, 0f, 0f, 0f);
        glEnable(GL_BLEND);
        glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
    }

    private void initGlProgram() {
        int vShaderRef = compileShader(GL_VERTEX_SHADER, Shaders.V_SHADER);
        int fShaderRef = compileShader(GL_FRAGMENT_SHADER, Shaders.F_SHADER);
        programRef = glCreateProgram();
        glAttachShader(programRef, vShaderRef);
        glAttachShader(programRef, fShaderRef);
        glLinkProgram(programRef);
        glUseProgram(programRef);


        ByteBuffer b = ByteBuffer.allocateDirect(vertexArray.length * 4);
        b.order(ByteOrder.nativeOrder());
        vertexBuffer = b.asFloatBuffer();
        vertexBuffer.put(vertexArray);
        vertexBuffer.position(0);

        ByteBuffer bufferByte = ByteBuffer.allocateDirect(pointArray.length * 4);
        bufferByte.order(ByteOrder.nativeOrder());
        ptsVertexBuffer = bufferByte.asFloatBuffer();
        ptsVertexBuffer.put(pointArray);
        ptsVertexBuffer.position(0);

        positionHandle = glGetAttribLocation(programRef, "aPosition");
        mColorHandle = glGetUniformLocation(programRef, "vColor");
        matrixHandle = glGetUniformLocation(programRef, "uModelMatrix");

    }

    private int compileShader(int type, String shaderCode) {
        int ref = glCreateShader(type);
        glShaderSource(ref, shaderCode);
        glCompileShader(ref);
        return ref;
    }


    @Override
    public void onSurfaceChanged(GL10 gl, int width, int height) {
        glViewport(0, 0, width, height);

        float scale = 1.0f * width / height;

        //相对于屏幕坐标系将摄像头固定在（0，0，-5）方向，看向屏幕正中点（0，0，0），以屏幕向上为正方向（0，1，0）
        Matrix.setLookAtM(mVMatrix, 0, 0, 0, -5, 0f, 0f, 0, 0f, 1f, 0f);
        //创建一个透视视景体
        //注意：near,far都必须大于0，且二者不能相等，left、right、bottom、top 是near的left和right坐标
        //但是由于相机视点为（0，0，-5）而屏幕应该显示的是正方向（0，0，x）x大于0的方向的画面，所有left对应的屏幕坐标应该为负，right对应的坐标系为正，呈左右翻转的效果。
        //将near设置为4，far设置为8。由此可以得到视图可见区域为由视点（0，0，-5）出发的距离为4-8的区域内的物体。
        Matrix.frustumM(mProjMatrix, 0, scale, -scale, -1, 1, 4, 8);

    }

    private void initModelMatrix() {

        Matrix.setIdentityM(mModelMatrix, 0);
        Matrix.rotateM(mModelMatrix, 0, 135 + rotateX, 1, 0, 0);
        Matrix.rotateM(mModelMatrix, 0, rotateY, 0, 1, 0);
        Matrix.rotateM(mModelMatrix, 0, 45 + rotateZ, 0, 0, 1);


        Matrix.multiplyMM(mMVMatrix, 0, mVMatrix, 0, mModelMatrix, 0);


        // Calculate the projection and view transformation
        Matrix.multiplyMM(mMVPMatrix, 0, mProjMatrix, 0, mMVMatrix, 0);


        GLES20.glUniformMatrix4fv(matrixHandle, 1, false, mMVPMatrix, 0);

    }

    @Override
    public void onDrawFrame(GL10 unused) {
        render();
    }

    private float color[] = {1.0f, 0.0f, 0.0f, 1.0f};
    private float color2[] = {0.0f, 1.0f, 0.0f, 1.0f};
    private float color3[] = {0.0f, 0.0f, 1.0f, 1.0f};
    private float colorPoint[] = {0.0f, 0.0f, 0.0f, 1.0f};
    private float colorCenterPoint[] = {0.0f, 1.0f, 1.0f, 1.0f};

    int number;

    private void render() {
        number++;
        rotateX = number / 2;
        if (number == 720) {
            number = 0;
        }
        glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
        initModelMatrix();
        // 设置颜色
        glEnableVertexAttribArray(positionHandle);
        glVertexAttribPointer(positionHandle, 3, GL_FLOAT, false, 0, vertexBuffer);
        GLES20.glLineWidth(4);//设置线宽,线太窄时看不见

        GLES20.glUniform4fv(mColorHandle, 1, color, 0);
        glDrawArrays(GL_LINES, 0, 2);
        GLES20.glUniform4fv(mColorHandle, 1, color2, 0);
        glDrawArrays(GL_LINES, 2, 2);
        GLES20.glUniform4fv(mColorHandle, 1, color3, 0);
        glDrawArrays(GL_LINES, 4, 2);

        glVertexAttribPointer(positionHandle, 3, GL_FLOAT, false, 0, ptsVertexBuffer);
        GLES20.glLineWidth(10);//设置线宽,线太窄时看不见
        GLES20.glUniform4fv(mColorHandle, 1, colorCenterPoint, 0);
        glDrawArrays(GLES20.GL_POINTS, 0, 1);

        GLES20.glLineWidth(6);//设置线宽,线太窄时看不见
        GLES20.glUniform4fv(mColorHandle, 1, colorPoint, 0);
        glDrawArrays(GLES20.GL_POINTS, 1, 1);
        glDrawArrays(GLES20.GL_POINTS, 2, 1);
        glDrawArrays(GLES20.GL_POINTS, 3, 1);

        glDisableVertexAttribArray(positionHandle);
    }

    public void setRotateX(float rotate) {
        this.rotateX = rotate;
    }

    public void setRotateZ(float rotate) {
        this.rotateY = rotate;

    }

    public void setRotateY(float rotate) {
        this.rotateZ = rotate;

    }
}