Custom view transition in OpenGL ES

Question

I'm trying to create a custom transition, to serve as a replacement for a default transition you would get here, for example:

[self.navigationController pushViewController:someController animated:YES];

I have prepared an OpenGL-based view that performs an effect on some static texture mapped to a plane (let's say it's a copy of the flip effect in Core Animation). What I don't know how to do is:

• grab current view content and make a texture out of it (I remember seeing a function that does just that, but can't find it)
• how to do the same for the view that is currently offscreen and is going to replace current view
• are there some APIs I can hook to in order to make my transition class as native as possible (make it a kind of Core Animation effect)?

Any thoughts or links are greatly appreciated!

UPDATE

Jeffrey Forbes's answer works great as a solution to capture the content of a view.

What I haven't figured out yet is how to capture the content of the view I want to transition to, which should be invisible until the transition is done.

Also, which method should I use to present the OpenGL view? For demonstration purposes I used pushViewController. That affects the navbar, though, which I actually want to go one item back, with animation, check this vid for explanation:

http://vimeo.com/4649397.

Another option would be to go with presentViewController, but that shows fullscreen. Do you think maybe creating another window (or view?) could be useful?

Answer 1

While I cannot completely answer your question without doing some more research of my own, I can help a bit:

-In order to get the view of a UINavigationController, you need to take a screenshot. The easiest way to do this is by grabbing it into a UIImage:

UIGraphicsBeginImageContext(self.view.frame.size);
[[self.view layer] renderInContext:UIGraphicsGetCurrentContext()];
UIImage* test = UIGraphicsGetImageFromCurrentImageContext();
UIImageView* view = [[UIImageView alloc] initWithImage:test];
UIGraphicsEndImageContext();

I am not sure if you can render a GLContext (not familiar on the phone) into a CGImage, but I would do something like that (and init a UIImage from that). I would prerender every frame of the animation you are trying to do and slap it into an UIImageView using the animation stuff provided within. That is, if your animation is simple enough. Otherwise, it might come down to writing your own animation function :-/

Answer 2

I think the function you might be thinking of is http://www.opengl.org/sdk/docs/man/xhtml/glCopyTexImage2D.xml ... you set the viewport to the texture size and then draw as usual, then do glCopyTexImage2D to copy the scene onto a texture.

or you should look into FrameBuffer Objects. The default OpenGL template in XCode uses these. Just generate the example project to see how those work.

Answer 3

I have just put together a transition class to implement your own transition animation in OpenGL ES.

Feel free to read about it here

There are two example transitions in the project, feel free to add you own to it.