前言
之前我们的所有图形效果,都是变形的,比如我们原本绘制的是长宽比是1:1的,结果在手机屏幕上的效果展示却是长方形。那么,本节课我们通过正交投影来解决这个问题。
本节课主要讲解如何去编写相关代码来解决问题,而具体的原理、概念、GL坐标体系变换等暂不做深入说明,会在之后的课程在讲解。
归一化设备坐标
在OpenGL中,我们要渲染的所有物体都要映射到x轴、y轴、z轴上的[-1, 1]范围内,这个范围内的坐标被称为归一化设备坐标,其独立于屏幕的实际尺寸或者形状。归一化设备坐标假定的坐标空间是一个正方形。如下图
![](https://img.haomeiwen.com/i33019/95147c741d526b0b.png)
但是我们手机设备一般都不是正方形的,而是长方形的。所以导致x和y两个方向上,同样的比例值,但是视觉上所占的长度却是不一样的。如下图,绘制一个半径占0.5的圆时,效果却是一个椭圆。
![](https://img.haomeiwen.com/i33019/986f7bf294759978.png)
解决这个问题,一般我们的解决方案步骤如下:
- 在设置物体的坐标、尺寸时,将短边视为标准边,取值范围是[-1,1],而较长边的取值范围则是[-N,N],其中N≥1,N是长边/短边的比例系数。
- 顶点着色器设置顶点参数的时候,将长边上的值从[-N,N]换算为[-1,1]的范围内。
步骤如下图:
![](https://img.haomeiwen.com/i33019/a483644dff5b081a.png)
![](https://img.haomeiwen.com/i33019/0995510bb2588b86.png)
代码实现
针对上面的解决步骤,步骤1只需要我们在设置顶点的时候按照这个标准即可。而步骤2则是本课程的关键。
要对坐标向量进行换算,可以使用矩阵来解决问题。
在三维图形学中,一般使用的是4阶矩阵。OpenGL中使用的是列向量,如[xyzw]T,所以与矩阵相乘时,矩阵在前,向量在后。
知道了原理之后,我们代码实现上需要解决以下几个问题:
- 如何获得一个矩阵,可以把坐标范围从[-N,N]换算为[-1,1]的范围内
- 如何将矩阵传递到GLSL中
- 对于问题1,Android提供了Matrix.orthoM这个方法来处理矩阵。
- 对于问题2,与获取顶点索引类似,可以再GLSL中声明一个mat4类型的矩阵变量,获取其索引,再传递值给她
具体代码实现如下:
private static final String VERTEX_SHADER = "" +
// mat4:4×4的矩阵
"uniform mat4 u_Matrix;\n" +
"attribute vec4 a_Position;\n" +
"void main()\n" +
"{\n" +
// 矩阵与向量相乘得到最终的位置
" gl_Position = u_Matrix * a_Position;\n" +
"}";
private int uMatrixLocation;
/**
* 矩阵数组
*/
private final float[] mProjectionMatrix = new float[]{
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1,
};
@Override
public void onSurfaceCreated(GL10 glUnused, EGLConfig config) {
// 省略部分代码
uMatrixLocation = getUniform("u_Matrix");
}
@Override
public void onSurfaceChanged(GL10 glUnused, int width, int height) {
// 边长比(>=1),非宽高比
float aspectRatio = width > height ?
(float) width / (float) height :
(float) height / (float) width;
// 1. 矩阵数组
// 2. 结果矩阵起始的偏移量
// 3. left:x的最小值
// 4. right:x的最大值
// 5. bottom:y的最小值
// 6. top:y的最大值
// 7. near:z的最小值
// 8. far:z的最大值
if (width > height) {
// 横屏
Matrix.orthoM(mProjectionMatrix, 0, -aspectRatio, aspectRatio, -1f, 1f, -1f, 1f);
} else {
// 竖屏or正方形
Matrix.orthoM(mProjectionMatrix, 0, -1f, 1f, -aspectRatio, aspectRatio, -1f, 1f);
}
// 更新u_Matrix的值,即更新矩阵数组
GLES20.glUniformMatrix4fv(uMatrixLocation, 1, false, mProjectionMatrix, 0);
}
参考
见Android OpenGL ES学习资料所列举的博客、资料。
GitHub代码工程
本系列课程所有相关代码请参考我的GitHub项目GLStudio。
课程目录
本系列课程目录详见 简书 - Android OpenGL ES教程规划
网友评论