问题描述
我想描述一下我的目标并获得一些对建议解决方案的反馈.我对 OpenGL ES(或根本没有 OpenGL)很陌生，所以请保持温和.我还想提一下，该平台是 iPad (iOS)，它的归属限制.
目标:让用户以正确的视角(或至少可调整的视角)放置应正确绘制纹理的顶点.为了解释我的意思，请考虑以下示例.
假设我们有一张房子的照片，房子前面有相应的草坪.现在，我想用瓷砖(纹理)铺设(用户)指定的路径，以使透视看起来正确.如果视图只是正交的，则图块将是完全正方形的，这在图像中有某种深度时是不现实的.
现在，一种方法是在 OpenGL ES 上设置一个带有平截头体的透视图.然后放一个平面(如下图)并将图像纹理放在上面以供初学者使用.
现在，正如您从上图的外观所期望的那样，图像将被扭曲.但这很好，因为如果我们将平面向后倾斜(使其完美地适应显示器的边界)，图像将显示为正方形.
如果用户现在定义了要铺设的区域，我们可以将这些点放在与倾斜平面相同的角度，然后只需在其中放置一个带有方形瓷砖的纹理，它们就会以透视图出现.如果我们的倾斜角度不正确，用户可以手动调整，然后上图中的平面的角会被调整，平面会发生不同的倾斜以适应显示器.然后瓷砖纹理将从不同的角度出现.
这是一种可行的方法还是有其他更好的方法来做到这一点?我认为这是一个丑陋的 hack，可能与我在 3D 编程方面的有限技能有关.
如果您只想对图像应用透视，您甚至可能不需要 OpenGL ES.您可以按照我在 框架中获取 FilterShowcase 示例应用程序的代码，然后尝试 3-D 变换条目.代码都在 GPUImageTransformFilter 中，应该很容易理解.
I would like to describe my objective and get some feedback of a proposed solution. I am quite new to OpenGL ES (or OpenGL at all), so please be gentle. I would also like to mention that the platform is iPad (iOS) with it's belonging restrictions.
Objective: To let the user place vertices in which a texture should be drawn properly in the correct perspective (or at least adjustable perspective). To explain what I mean, consider the following example.
Let's say that we have a photograph of a house with a corresponding lawn in front of it. Now, I want to pave a (user) specified path with tiles (texture) such that the perspective looks right. If the view is just orthogonal, the tiles will be completely square which is not realistic when having some sort of depth in the image.
Now, one approach would be to set up an perspective view with a frustum on OpenGL ES. Then put a plane (like below) and put the image texture on it for starters.
Now as you expect from the look of the image above, the image will be distorted. But it's fine because if we tilt the plane backwards (so that it fit the bounds of the display perfectly) the image will appear square.
If the user now defines the area to be paved, we can put those points in the same angle as the tilted plane, and then just put a texture with square tiles in it, and they will appear with a perspective. If our tilt angle is incorrect, the user can adjust it manually, what then happens is that the corner angles of the plane in the above figure will be adjusted and the plane will tilt differently to fit the display. The tiles texture will then appear from a different angle.
Is this a workable approach or is there some other, better way to do this? I think it's an ugly hack that might have to do with my limited skills in 3D programming.
If all you want to do is apply perspective to an image, you may not even need OpenGL ES for that. You could simply create a proper CATransform3D and set that to a UIView or CALayer in the manner that I describe in this answer. The key is the m34 component of the transform matrix.
If you still want to do this with OpenGL ES and a texture, you could apply a transformation to the vertices of your textured quad to create a perspective effect. An example of this can be seen here:
where I transform a texture displaying camera input so that it has a perspective effect applied to it. This was done using the following vertex shader:
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;
}
where I'd generated a matrix based on a CATransform3D in the following manner:
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);
and then converted the CATransform3D to a mat4 (it has a 4x4 matrix internal structure, so this is fairly easy to do). If you want to see this in action, grab the code for the FilterShowcase sample application in my GPUImage framework and try the 3-D Transform entry. The code is all in the GPUImageTransformFilter and should be reasonably easy to follow.
这篇关于如何对这个 OpenGL ES 纹理应用正确的透视?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！