五、OpenGl Es 学习：调整宽高比，探索视界无限可能

2023-11-08 02:34:03

前言

我们已经完成了前四个部分的学习，现在是时候把我们所学的知识综合起来，将我们的应用程序扩展到移动设备上。在移动设备上，屏幕的长宽比可能与我们平时在电脑上开发时所使用的屏幕的长宽比不同。这可能会导致我们的应用程序在移动设备上看起来变形或拉伸。为了解决这个问题，我们需要学习如何调整OpenGL ES的宽高比。

视口变换

视口变换是将一个矩形区域映射到另一个矩形区域的变换。在OpenGL ES中，我们可以使用glViewport()函数来设置视口。glViewport()函数的参数如下：

x：视口的x坐标
y：视口的y坐标
width：视口的宽度
height：视口的高度

举个例子，如果我们想要将视口设置为从屏幕左上角开始，宽度为200像素，高度为100像素，我们可以使用以下代码：

glViewport(0, 0, 200, 100);

投影变换

投影变换是将一个三维空间中的物体投影到一个二维平面上的变换。在OpenGL ES中，我们可以使用glFrustum()函数来设置投影变换。glFrustum()函数的参数如下：

left：投影区域的左边界
right：投影区域的右边界
bottom：投影区域的下边界
top：投影区域的上边界
near：投影区域的近平面
far：投影区域的远平面

举个例子，如果我们想要设置一个透视投影，其中投影区域的左边界为-1，右边界为1，下边界为-1，上边界为1，近平面为1，远平面为100，我们可以使用以下代码：

glFrustum(-1.0, 1.0, -1.0, 1.0, 1.0, 100.0);

屏幕适配

在移动设备上，屏幕的长宽比可能与我们在平时在电脑上开发时所使用的屏幕的长宽比不同。这可能会导致我们的应用程序在移动设备上看起来变形或拉伸。为了解决这个问题，我们需要调整我们的视口和投影变换，以确保我们的应用程序在所有设备上都看起来正常。

我们可以使用以下步骤来调整我们的视口和投影变换：

获取设备的屏幕宽高比。
计算视口的宽高比。
设置视口。
设置投影变换。

举个例子，如果我们想要将视口设置为与设备的屏幕宽高比一致，我们可以使用以下代码：

float aspectRatio = (float)screenWidth / (float)screenHeight;
glViewport(0, 0, screenWidth, screenHeight);
glFrustum(-aspectRatio, aspectRatio, -1.0, 1.0, 1.0, 100.0);