Android显示系统(01)- 架构分析
Android显示系统(02)- OpenGL ES - 概述
Android显示系统(03)- OpenGL ES - GLSurfaceView的使用
Android显示系统(04)- OpenGL ES - Shader绘制三角形
Android显示系统(05)- OpenGL ES - Shader绘制三角形(使用glsl文件)
Android显示系统(06)- OpenGL ES - VBO和EBO和VAO
Android显示系统(07)- OpenGL ES - 纹理Texture
Android显示系统(08)- OpenGL ES - 图片拉伸
Android显示系统(09)- SurfaceFlinger的使用
Android显示系统(10)- SurfaceFlinger内部结构
Android显示系统(11)- 向SurfaceFlinger申请Surface
Android显示系统(12)- 向SurfaceFlinger申请Buffer
Android显示系统(13)- 向SurfaceFlinger提交Buffer
一、前言:
前面介绍了OpenGL当中通过纹理渲染图片的方法,但是,渲染出来的图片明显被拉伸,本文介绍下如何对抗这种拉伸。
二、防止被拉伸的方法:
1、什么是拉伸:
如上图所示,我本来要笑得很开心,就像左边图片一样,结果笑抽了,像右边一样了。这里面有个视口的概念,视口是指在屏幕上用于显示图形的矩形区域。
2、如何避免:
我们发现上图被拉伸是因为默认情况下视口大小就是屏幕大小,所以图片宽高比和屏幕宽高比不一样肯定就会被拉伸了。所以,我们将视口的宽高和照片保持一致是不是就可以正常显示了?这样的确可以解决问题,但是会存在一种情况,就是,如果照片很小,就像下图一样了:
是不是非常奇怪?因此,我们一般的做法就是:根据宽高比,选择宽顶到屏幕两头,或者长顶到屏幕两头!
具体调整方法:视口调整
或者投影调整
,下面详细分析:
三、视口调整:
注意,下图中视口的红线其实和照片一样大,为了让大家看清,留了一点空白。
最终结果就如上图所示。步骤如下:
-
计算视口的宽高比:
以图片宽高比和窗口宽高比为基础来决定视口的大小。首先计算宽高比:
float textureWidth = 300.0f; float textureHeight = 200.0f; float windowWidth = 640.0f; float windowHeight = 480.0f; float textureAspectRatio = (float) textureWidth / textureHeight; float windowAspectRatio = (float) windowWidth / windowHeight;
-
决定视口的大小:
基于比较这两个宽高比,设置适合的视口:
-
情况 1:窗口宽高比大于图片宽高比
在这种情况下,窗口是较宽的,使用图片的高度为基准:
if (windowAspectRatio > textureAspectRatio) { // 使用窗口高度作为基准 float adjustedWidth = textureAspectRatio * windowHeight; // 调整后的宽度 int viewportX = (windowWidth - adjustedWidth) / 2; // 左侧留白 glViewport(viewportX, 0, adjustedWidth, windowHeight); // 设置视口 } else { // 情况2 }
-
情况 2:窗口宽高比小于图片宽高比
在这种情况下,窗口是较窄的,使用图片的宽度为基准:
else { // 使用窗口宽度作为基准 float adjustedHeight = (1.0f / textureAspectRatio) * windowWidth; // 调整后的高度 int viewportY = (windowHeight - adjustedHeight) / 2; // 上侧留白 glViewport(0, viewportY, windowWidth, adjustedHeight); // 设置视口 }
-
在Android中我们有了图片的起始位置(左上角坐标)和宽高就可以调用下面函数完成视口调整:
glViewport(X, Y, vWidth, vHeight)
四、投影调整:
1、定义:
我们之前说了,在渲染管线的投影变换
阶段有两种选择:正交变换
和透视变换
,其中透视变换
一般用于显示3D效果,物体距离观察者越远,尺寸越小,造成深度感,一般适用于电影、游戏等场景;而正交变换
一般用于显示2D图片,无论距离如何,物体的尺寸保持不变,因此我们选择正交变换
;
-
透视投影:
-
正交投影:
2、正交投影特点:
- 无失真:物体的各个部分间的相对关系保持不变。
- 平行线:在投影过程中,平行线在投影后仍然平行。
- 均匀缩放:物体在距离视点的远近时大小不会变化。
3、投影平面:
通常选择Z=0平面作为投影平面(Z轴等于0,也就是说三维空间中变成二维的XY平面)。
4、正交投影的过程:
可以看出,先平移到坐标系的远点和物体模型的几何中心重合,再缩放成单位立方体,最后将3D模型投影到2D屏幕上。也就是平移和缩放两步。
之前章节介绍过,投影过程中需要三个矩阵,我们一般叫做MVP,MVP 是指 Model-View-Projection(模型-视图-投影)矩阵,是一种常用的矩阵变换组合,用于将三维场景中的对象坐标转换为最终在二维屏幕上呈现的坐标。
- Model Matrix(模型矩阵):用于将对象从局部坐标系转换到世界坐标系(即将对象放置到世界空间中的合适位置)。
- View Matrix(视图矩阵):描述了观察者的位置和方向,将世界坐标系中的对象转换到观察者的视角坐标系。视图矩阵实际上是观察者逆向移动的矩阵。
- Projection Matrix(投影矩阵):用于将观察坐标系中的对象投影到屏幕坐标系,定义了视锥体的几何形状,包括透视投影和正交投影。
一般情况下M我们不设置,或者设置为单位矩阵即可。V和P是需要我们计算出来的。
5、视图矩阵(V):
要构建相机的视图矩阵,以确定观察者的位置和方向。这个方法通常与 OpenGL ES 中的相机视图转换相关联。
主要通过 Matrix.setLookAtM()
方法完成:
-
方法签名:
public static void setLookAtM(float[] rm, int rmOffset, float eyeX, float eyeY, float eyeZ, float centerX, float centerY, float centerZ, float upX, float upY, float upZ)
-
参数:
rm
:目标矩阵,即要设置视图矩阵的目标数组。rmOffset
:目标矩阵的偏移量。eyeX, eyeY, eyeZ
:摄像机看向哪儿。centerX, centerY, centerZ
:摄像机观察的目标位置的坐标。upX, upY, upZ
:摄像机的朝向向量。
-
功能:
setLookAtM()
方法的作用是根据摄像机的位置、观察目标的位置和朝向向量,设置视图矩阵。这个视图矩阵描述了一个摄像机从指定位置观看指定目标的视角。 -
使用示例:下面是一个简单的示例代码,演示如何使用
Matrix.setLookAtM()
方法设置视图矩阵:float[] viewMatrix = new float[16]; Matrix.setLookAtM(viewMatrix, 0, eyeX, eyeY, eyeZ, centerX, centerY, centerZ, upX, upY, upZ);
6、投影矩阵(P):
正交投影矩阵用于定义如何将三维坐标转换为二维坐标。设定参数包括视口的左、右、下、上、近、远平面值。通用格式如下:
- L (Left): 左侧边界
- R (Right): 右侧边界
- B (Bottom): 下侧边界
- T (Top): 上侧边界
- N (Near): 近剪裁平面
- F (Far): 远剪裁平面
上面的矩阵如此负责,我们平时怎么记住,或者怎么构建呢?在Android中提供了如下方法,我们调用一下就会生成正交投影矩阵:
Matrix.othroM(mvpM, offset, l, r, b, t, n, f)
mvpM
:目标数组,用于存储生成的正交投影矩阵。offset
:目标数组中的偏移量,指定从哪个位置开始存储矩阵数据,一般设置为0。l, r, b, t
:定义了正交投影矩阵的左、右、底和顶面边界。n
:近裁剪面(near clipping plane)的距离,即视锥体近端的距离。f
:远裁剪面(far clipping plane)的距离,即视锥体远端的距离。
由于图片是二维的,所以n和f不会改变,我们将它们设置为-1和1即可。
对于宽高来说,则需要根据实际情况来设定。如果上下留白,则左右设置为-1, 1;如果左右留白,则上下设置为-1,1。
所以,我们又像视口变换一样,来到一张二维图片了,根据,宽高比分类讨论。
矩阵宽高计算算法:
- 当图片宽高比大于窗口宽高比:
- 这意味着图片更“宽”相对于窗口。例如,窗口是竖直的,而图片是横向的。
- 计算模型的高度(tb)时,用图片的宽高比除以窗口的宽高比:
tb = (WI/HI) / (WW/HW)
。 - 设置正交投影矩阵的上边界 (
t
) 和下边界 (b
) 为-tb
和tb
。这确保了在Y轴方向上,图片能够适当缩放以不失真。
- 当图片宽高比小于或等于窗口宽高比:
- 这意味着图片更“高”相对于窗口。例如,窗口是横向的,而图片是竖直的。
- 计算模型的宽度(lr):
lr = (WW/HW) / (WI/HI)
; - 设置正交投影矩阵的左边界 (
l
) 和右边界 (r
) 为-lr
和lr
。这确保了在X轴方向上,图片能够适当缩放以不失真。
这样我们就得到了正确的正交变换矩阵,之后用这个正交变换矩阵就可以将图片正确的渲染到屏幕上。
7、MVP生成:
Matrix.multiplyMM()
是 Android 提供的用于矩阵相乘的方法,用于将两个 4x4 的浮点数矩阵相乘,并将结果存储在一个目标矩阵中。这个方法通常用于进行矩阵变换,比如将模型矩阵、视图矩阵和投影矩阵相乘,以生成 MVP(Model-View-Projection)矩阵。
以下是关于 Matrix.multiplyMM()
方法的一些重要信息:
-
方法签名:
public static void multiplyMM(float[] result, int resultOffset, float[] lhs, int lhsOffset, float[] rhs, int rhsOffset)
-
参数:
result
:存储结果的目标矩阵数组。resultOffset
:目标矩阵的偏移量。lhs
:左矩阵数组(第一个矩阵)。lhsOffset
:左矩阵的偏移量。rhs
:右矩阵数组(第二个矩阵)。rhsOffset
:右矩阵的偏移量。
-
功能:
multiplyMM()
方法将两个 4x4 的浮点数矩阵相乘,即左矩阵和右矩阵相乘,结果存储在目标矩阵中。这种矩阵相乘通常用于进行复合变换,例如将模型矩阵、视图矩阵和投影矩阵相乘。 -
使用示例:下面是一个简单的示例代码,演示如何使用
Matrix.multiplyMM()
方法进行矩阵相乘:float[] resultMatrix = new float[16]; Matrix.multiplyMM(resultMatrix, 0, modelMatrix, 0, viewMatrix, 0); Matrix.multiplyMM(resultMatrix, 0, resultMatrix, 0, projectionMatrix, 0);
8、编码示例:
private void calculateProjection(int windowWidth, int windowHeight) {
float imageWidth = textureBitmap.getWidth();
float imageHeight = textureBitmap.getHeight();
float imageAspectRatio = imageWidth / imageHeight;
float windowAspectRatio = (float) windowWidth / (float) windowHeight;
// 正交投影参数
float left, right, bottom, top;
if (imageAspectRatio > windowAspectRatio) {
// 图片相对窗口更宽
float tb = (imageWidth / imageHeight) / (windowWidth / (float) windowHeight);
top = tb;
bottom = -tb;
left = -1; // 可根据实际需求调整
right = 1; // 可根据实际需求调整
} else {
// 图片相对窗口更高或相等
float lr = (windowWidth / (float) windowHeight) / (imageWidth / imageHeight);
left = -lr;
right = lr;
top = 1; // 可根据实际需求调整
bottom = -1; // 可根据实际需求调整
}
// 更新正交投影矩阵
float[] projectionMatrix = new float[16];
Matrix.orthoM(projectionMatrix, 0, left, right, bottom, top);
square.setProjectionMatrix(projectionMatrix); // 这个square是你自定义的类来处理绘制
}
关键点总结:
- 计算正交投影矩阵:
- 在
calculateProjection
方法中,根据图片和窗口的宽高比计算并更新投影矩阵。
- 在
- 根据条件设置矩阵的边界:
- 当图片宽高比大于窗口宽高比时,调整模型的高度。
- 当图片宽高比小于或等于窗口宽高比时,调整模型的宽度。
- 设置和渲染图像:
- 图片加载、绘制等逻辑将在
Square
类中进行。
- 图片加载、绘制等逻辑将在
五、编码实战:
我们需要对两种方式都进行编码验证。
1、视口变换:
-
定义变量:
文件路径:
com/example/glsurfaceviewdemo/GLRenderTest.java
private int mSurfaceWidth = 0; // 窗口宽 private int mSurfaceHeight = 0; // 窗口高 private int mViewportWidth = 0; // 视口宽 private int mViewportHeight = 0; // 视口高 private int mViewportX = 0; // 视口起始横坐标 private int mViewportY = 0; // 视口起始纵坐标 private Bitmap mBitmap;
注意,我顺便将图片操作挪到
GLRenderTest
当中了,之前是在com/example/glsurfaceviewdemo/TextureRender.java
当中,通过构造函数传递给TextureRender
即可。 -
图片加载函数挪位置:
public TextureRender(Context context, Bitmap bitmap) { mContext = context; mBitmap = bitmap; initialize(); }
对应
GLRenderTest
也需要修改:public GLRenderTest(Context context) { this.mContext = context; mBitmap = loadImage(); } // 加载图片 private Bitmap loadImage() { BitmapFactory.Options options = new BitmapFactory.Options(); options.inScaled = false; return BitmapFactory.decodeResource(mContext.getResources(), R.drawable.android_logo, options); } public void onDestroy() { // mTriangle.release(); mBitmap.recycle(); // 回收bitmap mTextureRender.release(); }
-
添加视口变换函数:
文件路径:
com/example/glsurfaceviewdemo/GLRenderTest.java
// 视口变换:通过调整视口大小,保证图片不被拉伸 private void calculateViewport() { // 获取图片的宽高比 float imageRatio = (float) mBitmap.getWidth() / mBitmap.getHeight(); Log.e("Bitmap", "Bitmap111 width: " + mBitmap.getWidth() + ", height: " + mBitmap.getHeight()); // 获取surface(窗口)的宽高比 float surfaceRatio = (float) mSurfaceWidth / mSurfaceHeight; if (imageRatio > surfaceRatio) { // 图片宽高比大于窗口的宽高比,按照宽度填满 mViewportWidth = mSurfaceWidth; mViewportHeight = (int) (mSurfaceWidth