How to create 1536x2048 framebuffer for iPad Retina sample (GLGravity)

Question

So of course the first thing I'm trying on my new iPad (4g) is the old GLGravity example. The only modification I've made is to set the target device to "iPad".

However, when running on the device, the UIView's bounds are set to 768,1024 as are the "backingWidth, backingHeight" in createFramebuffer.

Eyeballing the image confirms it's still being rendered at 768x1024. What have I missed - how do I get this to render at native resolution?

Answer 1

To enable conditional support for Retina graphics, as we did for the iPhone 4, you would need to have a line of code like this somewhere in the setup for your OpenGL ES hosting view (GLGravityView, in this case):

self.contentScaleFactor = [[UIScreen mainScreen] scale];

This makes sure that the content within that view (such as Quartz drawing) is rendered with the 2-pixels-per-point scaling used in the current Retina displays on the iPhone and iPad.

Your view's bounds will remain at the 768 x 1024 point size, but the render buffer will return 1536 x 2048 as its pixel dimensions when queried by glGetRenderbufferParameterivOES(). This will allow you to render Retina-level graphics within your OpenGL ES context.

Note that some of Apple's sample code (like GLGravity) uses the view bounds to size other display elements, so they will appear too small in the scene. You might need to replace calculations based on the view bounds (in points) with the backing width (in pixels) to make sure that the 2.0 scaling of the Retina graphics is taken into account.

Answer 2

As an expansion on this answer, the GLGravity sample needs another change to ensure the GL viewport is set correctly. This is because theboundsproperty returns Quartz points, not pixels.

-(void)setupView
{
  ...
  CGRect rect = self.bounds;
  // new code - modify the viewport dimensions.
  rect.size.width *= self.contentScaleFactor;
  rect.size.height *= self.contentScaleFactor;
  // end of new code
  glFrustumf(-size, size, -size / (rect.size.width / rect.size.height), size / (rect.size.width / rect.size.height), zNear, zFar);
  glViewport(0, 0, rect.size.width, rect.size.height);
  ...
}