ios - 如何对这个 OpenGL ES 纹理应用正确的透视？

Question

我想描述一下我的目标并获得一些对提议的解决方案的反馈。我对 OpenGL ES(或根本没有 OpenGL)很陌生，所以请保持温和。我还想提一下，该平台是 iPad (iOS)，它有归属限制。

目标:让用户以正确的视角(或至少可调整的视角)放置应正确绘制纹理的顶点。为了解释我的意思，请考虑以下示例。

假设我们有一张房子的照片，房子前面有相应的草坪。现在，我想用瓷砖(纹理)铺设(用户)指定的路径，以使透视看起来正确。如果 View 只是正交的，则图 block 将是完全正方形的，这在图像中有某种深度时是不现实的。

现在，一种方法是在 OpenGL ES 上设置一个带有平截头体的透视图。然后放置一个平面(如下所示)并将图像纹理放在其上以供初学者使用。



现在，正如您从上图的外观所期望的那样，图像将被扭曲。但这很好，因为如果我们将平面向后倾斜(使其完美地适应显示器的边界)，图像将显示为正方形。

如果用户现在定义了要铺设的区域，我们可以将这些点放在与倾斜平面相同的角度，然后只需在其中放置一个带有方形瓷砖的纹理，它们就会以透视图出现。如果我们的倾斜角度不正确，用户可以手动调整，然后上图中的平面的角会被调整，平面会发生不同的倾斜以适应显示器。然后瓷砖纹理将从不同的角度出现。

这是一种可行的方法还是有其他更好的方法来做到这一点？我认为这是一个丑陋的 hack，可能与我在 3D 编程方面的有限技能有关。

Answer 1

如果您只想对图像应用透视，那么您甚至可能不需要 OpenGL ES。您可以简单地创建一个适当的 CATransform3D 并按照我在 this answer 中描述的方式将其设置为 UIView 或 CALayer。 .关键是m34变换矩阵的组成部分。

如果您仍想使用 OpenGL ES 和纹理执行此操作，您可以对纹理四边形的顶点应用变换以创建透视效果。可以在这里看到一个例子:



我在其中转换了显示相机输入的纹理，以便对其应用透视效果。这是使用以下顶点着色器完成的:

 attribute vec4 position;
 attribute vec4 inputTextureCoordinate;

 uniform mat4 transformMatrix;
 uniform mat4 orthographicMatrix;

 varying vec2 textureCoordinate;

 void main()
 {
     gl_Position = transformMatrix * vec4(position.xyz, 1.0) * orthographicMatrix;
     textureCoordinate = inputTextureCoordinate.xy;
 }

我通过以下方式基于 CATransform3D 生成了一个矩阵:

 CATransform3D perspectiveTransform = CATransform3DIdentity;
 perspectiveTransform.m34 = 0.4;
 perspectiveTransform.m33 = 0.4;
 perspectiveTransform = CATransform3DScale(perspectiveTransform, 0.75, 0.75, 0.75);
 perspectiveTransform = CATransform3DRotate(perspectiveTransform, rotation, 0.0, 1.0, 0.0);

然后将 CATransform3D 转换为 mat4(它具有 4x4 矩阵内部结构，所以这很容易做到)。如果您想看到它的实际效果，请在我的 GPUImage 中获取 FilterShowcase 示例应用程序的代码。框架并尝试 3-D 变换条目。代码都在 GPUImageTransformFilter 中，应该相当容易理解。