iOS UIView render to texture -- preserve quality - ios

Question

I've implemented a program to render a UILabel to a texture and then map that same texture to a quad in OpenGL. I then rendered the same UILabel normally by adding it to the UIView hierarchy to compare them visually.
I immediately noticed that the quality of the UILabel that I rendered to texture is lower than a normally rendered UILabel. I am having trouble figuring out why the quality is lower and would appreciate any advice.
I'm using the render to texture technique found here Render contents of UIView as an OpenGL texture
Here is some of the relevant code
// setup test UIView (label for now) to be rendered to texture
_testLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 50)];
[_testLabel setText:#"yo"];
_testLabel.textAlignment = NSTextAlignmentCenter;
[_testLabel setBackgroundColor:RGB(0, 255, 0)];
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
_testLabelContext = CGBitmapContextCreate(NULL, _testLabel.bounds.size.width, _testLabel.bounds.size.height, 8, 4*_testLabel.bounds.size.width, colorSpace, kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big);
CGColorSpaceRelease(colorSpace);
// setup texture handle for view to be rendered to texture
glGenTextures(1, &_testLabelTextureHandle);
glBindTexture(GL_TEXTURE_2D, _testLabelTextureHandle);
// these must be defined for non mipmapped nPOT textures (double check)
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, _testLabel.bounds.size.width, _testLabel.bounds.size.height, 0, GL_RGBA, GL_UNSIGNED_BYTE, NULL);
then in my render function...
GLubyte *labelPixelData = (GLubyte*)CGBitmapContextGetData(_testLabelContext);
glTexSubImage2D(GL_TEXTURE_2D, 0, 0, 0, _testLabel.bounds.size.width, _testLabel.bounds.size.height, GL_RGBA, GL_UNSIGNED_BYTE, labelPixelData);

Answer 1

Don't you need to multiply the render width and height by the #2x/#3x? OpenGL works in real pixels.

Answer 2

The answer from #soprof is correct. You do need to scale the content with the main screen bounds in every case when creating a view screenshot. You need to use the same coordinates later when uploading the data to the texture. Simply creating a larger context is not enough.
This actually goes for all connections between the openGL and an UIView. You need to understand that the coordinate system is kept as if 1x was used which is very useful for the view layout. Apple uses contentScaleFactor property on the UIView to then actually scale the the internal content but that is still not visible in frame or bounds property. So for instance to get the image from an UIView you would need to do something like this:
+ (UIImage *)imageFromView:(UIView *)view
{
CGRect rect = [view bounds];
UIGraphicsBeginImageContextWithOptions(rect.size, NO, view.contentScaleFactor);
CGContextRef context = UIGraphicsGetCurrentContext();
[view.layer renderInContext:context];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
See the context may be created with options and a view scale is used. But the problem does not stop here. The actual content scale factor is set when the view is added to the view hierarchy. This means simply initializing a label is not enough for the scale factor to be correct (it will be 1.0f by default). So you may either set the scale manually on the view to what you want, you may assign it from the screen using [UIScreen mainScreen].scale, insert this value directly when creating a context or anything in between.
Anyway if you modify your code to include the scale you will need the new frame at some point which is always
rect.size.width *= view.contentScaleFactor;
rect.size.height *= view.contentScaleFactor;
You need to use such rect for all continuing code but do not change the frame of the view you are trying to draw as the fonts will not be scaled with it. What might work though is applying a scale transform matrix on the actual inputed view (if I remember correctly the frame will scale as well so even your code should work naturally).
As I mentioned this goes to all connections so if you are creating a render buffer from the layer you will also need to use the scale in it. renderbufferStorage:GL_RENDERBUFFER fromDrawable: will take the UIView layer but you must explicitly set the scale to the layer to get the correct size of the render buffer using layer.contentsScale = [UIScreen mainScreen].scale. So if you are using this and you failed to set the scale the whole scene will have a 1x quality and even fixing the label texture will not produce a high enough quality.