Android显示系统（08）- OpenGL ES - 图片拉伸

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