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

最通俗易懂的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;

    }
}

你可能感兴趣的:(最通俗易懂的OpenGLES 透视投影理解)