最通俗易懂的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)
- 字面的意思是截锥体，通过near和far将相机预览范围裁剪为截锥体。
- near、far截锥体离相机最近的位置和离相机最远的位置，在此范围外的物体将会被裁剪，不会出现画面中（相对于眼坐标系）
- 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;
}
}
