Wrapping/warping a CALayer/UIView (or OpenGL) in 3D (iPhone)

Question

I've got a UIView (and thus a CALayer) which I'm trying to warp or bend slightly in 3D space. That is, imagine my UIView is a flat label which I want to partially wrap around a beer bottle (not 360 degrees around, just on one "side").

I figured this would be possible by applying a transform to the view's layer, but as far as I can tell, this transform is limited to rotation, scale and translation of the layer uniformly. I could be wrong here, as my linear algebra is foggy at this point, to say the least.

How can I achieve this?

Answer 1

The best you can do with Core Animation is to do a piecewise-linear approximation.

For instance, you might divide your "cylinder" into eight segments, and arrange them like so:

  _
 / \
|   |

You could give them all the same image but change the translation so that they line up at the edges. Then give each a transform (either a simple horizontal compression or a sort of "keystone" if you are going for a perspective look).

In reality you'd probably want to use more than eight segments. Note that they would be concentrated near the edges of your view.

This CSS animation might give you some inspiration.

Answer 2

Take a look at the Apple's sample code PVRTextureLoader This is an OpenGL project that demonstrates how to display a texture (your label) on a surface (on a cylinder in your case).

Jeff LaMarche has posted a nice tutorial to get started with Open GL.

Answer 3

There are a few "distort" examples on this page: http://www.sgi.com/products/software/opengl/examples/more_samples/

I (honestly) am not sure how to do it, but I have had this page Bookmarked for quite some time to try to Warp/Morph a UIView with a mesh/grid.

Best of luck.

^.^