How do I apply proper perspective to this OpenGL ES texture?

Question

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

Answer 1

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.