前言
之前我们的所有图形效果，都是变形的，比如我们原本绘制的是长宽比是1:1的，结果在手机屏幕上的效果展示却是长方形。那么，本节课我们通过正交投影来解决这个问题。
本节课主要讲解如何去编写相关代码来解决问题，而具体的原理、概念、GL坐标体系变换等暂不做深入说明，会在之后的课程在讲解。
归一化设备坐标
在OpenGL中，我们要渲染的所有物体都要映射到x轴、y轴、z轴上的[-1, 1]范围内，这个范围内的坐标被称为归一化设备坐标，其独立于屏幕的实际尺寸或者形状。归一化设备坐标假定的坐标空间是一个正方形。如下图
image
但是我们手机设备一般都不是正方形的，而是长方形的。所以导致x和y两个方向上，同样的比例值，但是视觉上所占的长度却是不一样的。如下图，绘制一个半径占0.5的圆时，效果却是一个椭圆。
image
解决这个问题，一般我们的解决方案步骤如下：
- 在设置物体的坐标、尺寸时，将短边视为标准边，取值范围是[-1,1]，而较长边的取值范围则是[-N,N]，其中N≥1，N是长边/短边的比例系数。
- 顶点着色器设置顶点参数的时候，将长边上的值从[-N,N]换算为[-1,1]的范围内。
步骤如下图：
解决步骤1.png
解决步骤2.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);
}
显示方形图片
用我的手机，三星s21，显示下图的横向图片
目标图片.jpg
宽高比1.86，上下范围在[-1.86，1.86]，如果按照上述的设定
图片会显示成：
正方形.jpg
图片默认填充满了正方形区域，不是我们想要的效果,查看orthoM源码
/**
* Computes an orthographic projection matrix.
*
* @param m returns the result
* @param mOffset
* @param left
* @param right
* @param bottom
* @param top
* @param near
* @param far
*/
// 比方设定了top=2，bottom=-2，区间在[-2,2]
public static void orthoM(float[] m, int mOffset,
float left, float right, float bottom, float top,
float near, float far) {
if (left == right) {
throw new IllegalArgumentException("left == right");
}
if (bottom == top) {
throw new IllegalArgumentException("bottom == top");
}
if (near == far) {
throw new IllegalArgumentException("near == far");
}
final float r_width = 1.0f / (right - left);
// r_height关注这个变量，是top - bottom分之1
// r_height = 0.25
final float r_height = 1.0f / (top - bottom);
final float r_depth = 1.0f / (far - near);
final float x = 2.0f * (r_width);
// 这里y=1/2，即当前图形占整个高度的2分之一
final float y = 2.0f * (r_height);
final float z = -2.0f * (r_depth);
final float tx = -(right + left) * r_width;
final float ty = -(top + bottom) * r_height;
final float tz = -(far + near) * r_depth;
// offset = 0，x=1
m[mOffset + 0] = x;
// 关注y，m是最终给出的4*4阶矩阵，用于图形坐标的变换，对应vec4
m[mOffset + 5] = y;
m[mOffset +10] = z;
m[mOffset +12] = tx;
m[mOffset +13] = ty;
m[mOffset +14] = tz;
m[mOffset +15] = 1.0f;
m[mOffset + 1] = 0.0f;
m[mOffset + 2] = 0.0f;
m[mOffset + 3] = 0.0f;
m[mOffset + 4] = 0.0f;
m[mOffset + 6] = 0.0f;
m[mOffset + 7] = 0.0f;
m[mOffset + 8] = 0.0f;
m[mOffset + 9] = 0.0f;
m[mOffset + 11] = 0.0f;
}
调试截图.jpg
通过阅读，要绘制的图像，设定了top=2，在y轴方向就会*0.5。
为了我们图像显示正常，需要把图片在高度上再调大些：
@Override
public void onSurfaceChanged(GL10 gl, int width, int height) {
GLES20.glViewport(0,0,width,height);
BitmapFactory.Options opts = new BitmapFactory.Options();
opts.inJustDecodeBounds = true;
BitmapFactory.decodeResource(mContext.getResources(), R.mipmap.zly, opts);
float imageWidth = opts.outWidth;
float imageHeight = opts.outHeight;
// 变形参数计算，https://www.jianshu.com/p/8049014b7952
float ratio= width > height ? (float)width / height : (float)height / width;
if (width > height) {
Matrix.orthoM(matrix, 0, -width / ((height / imageHeight) * imageWidth),
width / ((height / imageHeight) * imageWidth), -1f, 1f, -1f, 1f);
} else {
// 竖向
// 第一步，需要设置屏幕的正常宽高比，宽度设为参照1，则高度显示需要[-height/width,height/width]
// 第二步，图片在当前尺寸下，会显示为正方形，因为图像高度受到了拉伸，自动填充满设定的中间的正方形区间。
// 图片 w:500 h:300，比例系数，h/w=0.6,此时为了让图片显示正确，需要反向乘w/h,即
// 需要 *imageWidth/imageHeight来增大上下边界来显示正常
Matrix.orthoM(matrix, 0, -1f, 1f, -(float)height/width*imageWidth/imageHeight ,
(float)height/width *imageWidth/imageHeight, -1f, 1f);
}
}
这样图片就显示正常了
正常显示.jpg
参考
见Android OpenGL ES学习资料所列举的博客、资料。
GitHub代码工程
本系列课程所有相关代码请参考我的GitHub项目GLStudio。
课程目录
本系列课程目录详见 简书 - Android OpenGL ES教程规划
转自作者：Benhero
链接：https://www.jianshu.com/p/51a405bc52ed
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
