Question

我正在尝试将生成（屏幕分辨率）的Core Graphics图像绘制到OpenGL中。但是，图像渲染的混叠比CG输出更多（在CG中禁用抗锯齿）。 文本是纹理（蓝色背景分别在第一个图像的Core Graphics中绘制，第二个在OpenGL中绘制）。

CG输出：

OpenGL渲染（在模拟器中）：

帧缓冲设置：

context = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
[EAGLContext setCurrentContext:context];

glGenRenderbuffers(1, &onscrRenderBuffer);
glBindRenderbuffer(GL_RENDERBUFFER, onscrRenderBuffer);
[context renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.layer];

glGenFramebuffers(1, &onscrFramebuffer);
glBindFramebuffer(GL_FRAMEBUFFER, onscrFramebuffer);
glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, onscrRenderBuffer);

纹理加载代码：

-(GLuint) loadTextureFromImage:(UIImage*)image {

    CGImageRef textureImage = image.CGImage;

    size_t width = CGImageGetWidth(textureImage);
    size_t height = CGImageGetHeight(textureImage);

    GLubyte* spriteData = (GLubyte*) malloc(width*height*4);

    CGColorSpaceRef cs = CGImageGetColorSpace(textureImage);
    CGContextRef c = CGBitmapContextCreate(spriteData, width, height, 8, width*4, cs, kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big);
    CGColorSpaceRelease(cs);

    CGContextScaleCTM(c, 1, -1);
    CGContextTranslateCTM(c, 0, -CGContextGetClipBoundingBox(c).size.height);

    CGContextDrawImage(c, (CGRect){CGPointZero, {width, height}}, textureImage);
    CGContextRelease(c);

    GLuint glTex;
    glGenTextures(1, &glTex);
    glBindTexture(GL_TEXTURE_2D, glTex);

    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, (GLsizei)width, (GLsizei)height, 0, GL_RGBA, GL_UNSIGNED_BYTE, spriteData);

    glBindTexture(GL_TEXTURE_2D, 0);

    free(spriteData);

    return glTex;
}

顶点：

struct vertex {
    float position[3];
    float color[4];
    float texCoord[2];
};

typedef struct vertex vertex;

const vertex bgVertices[] = {
    {{1, -1, 0}, {0, 167.0/255.0, 253.0/255.0, 1}, {1, 0}}, // BR (0)
    {{1, 1, 0}, {0, 222.0/255.0, 1.0, 1}, {1, 1}}, // TR (1)
    {{-1, 1, 0}, {0, 222.0/255.0, 1.0, 1}, {0, 1}}, // TL (2)
    {{-1, -1, 0}, {0, 167.0/255.0, 253.0/255.0, 1}, {0, 0}} // BL (3)
};

const vertex textureVertices[] = {
    {{1, -1, 0}, {0, 0, 0, 0}, {1, 0}}, // BR (0)
    {{1, 1, 0}, {0, 0, 0, 0}, {1, 1}}, // TR (1)
    {{-1, 1, 0}, {0, 0, 0, 0}, {0, 1}}, // TL (2)
    {{-1, -1, 0}, {0, 0, 0, 0}, {0, 0}} // BL (3)
};

const GLubyte indicies[] = {
    3, 2, 0, 1
};

渲染代码：

glClear(GL_COLOR_BUFFER_BIT);

GLsizei width, height;
glGetRenderbufferParameteriv(GL_RENDERBUFFER, GL_RENDERBUFFER_WIDTH, &width);
glGetRenderbufferParameteriv(GL_RENDERBUFFER, GL_RENDERBUFFER_HEIGHT, &height);

glViewport(0, 0, width, height);

glBindBuffer(GL_ARRAY_BUFFER, bgVertexBuffer);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, indexBuffer);

glVertexAttribPointer(positionSlot, 3, GL_FLOAT, GL_FALSE, sizeof(vertex), 0);
glVertexAttribPointer(colorSlot, 4, GL_FLOAT, GL_FALSE, sizeof(vertex), (GLvoid*)(sizeof(float)*3));
glVertexAttribPointer(textureCoordSlot, 2, GL_FLOAT, GL_FALSE, sizeof(vertex), (GLvoid*)(sizeof(float)*7));

glDrawElements(GL_TRIANGLE_STRIP, sizeof(indicies)/sizeof(indicies[0]), GL_UNSIGNED_BYTE, 0);


glBindBuffer(GL_ARRAY_BUFFER, textureVertexBuffer);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, indexBuffer);

glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, texture);
glUniform1i(textureUniform, 0);

glVertexAttribPointer(positionSlot, 3, GL_FLOAT, GL_FALSE, sizeof(vertex), 0);
glVertexAttribPointer(colorSlot, 4, GL_FLOAT, GL_FALSE, sizeof(vertex), (GLvoid*)(sizeof(float)*3));
glVertexAttribPointer(textureCoordSlot, 2, GL_FLOAT, GL_FALSE, sizeof(vertex), (GLvoid*)(sizeof(float)*7));

glDrawElements(GL_TRIANGLE_STRIP, sizeof(indicies)/sizeof(indicies[0]), GL_UNSIGNED_BYTE, 0);

glBindTexture(GL_TEXTURE_2D, 0);

我正在使用混合函数glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA)，以防与它有任何关系。

问题出在哪里？

Answer 1

您的GL渲染输出看起来像素化，因为它的像素更少。根据{{3}}，CAEAGLLayer的默认比例因子为1.0，因此当您设置GL渲染缓冲区时，每个点的缓冲区中会有一个像素。（请记住，一个点是UI布局的一个单元，在具有Retina显示器的现代设备上可以处理多个硬件像素。）当您全屏渲染该缓冲区时，所有内容都会按比例放大（大约Drawing and Printing Guide for iOS）。

要以原生屏幕分辨率渲染，您需要增加视图的2.61x on an iPhone 6(s) Plus。（最好在设置渲染缓冲区之前，之后进行，以便从视图层获得新的比例因子。）

但请注意：您要使用contentScaleFactor，而不是scale。 scale属性反映了UI渲染，其中，在iPhone 6（s）Plus上，所有内容都以3x完成，然后稍微缩小到显示的原始分辨率。 nativeScale属性反映了每个点实际设备像素数的数量 - 如果您正在进行GPU渲染，则需要将其定位，这样您就不会通过绘制来消除性能像素比你需要的多。（在＆＃34; Plus＆＃34; iPhone以外的当前设备上，scale和nativeScale是相同的。但使用后者可能是一个很好的保险政策。）

通过让the UIScreen property nativeScale为您设置渲染缓冲区，您可以避免很多这类问题（以及其他问题）。即使您正在编写跨平台GL，您的代码部分也必须非常适合平台和设备，因此您可以减少必须编写和维护的数量。。

^{（解决以前编辑的问题，为了后人的缘故：这与多重采样或GL纹理数据的质量无关。多重采样与多边形边缘的光栅化有关 - 点多边形的内部每个像素获得一个片段，但边缘上的点获得多个片段，其颜色在解析阶段混合。如果您将纹理绑定到FBO并从glReadPixels绑定，您可以使用它。我会发现图像与你输入的图像非常相似。）}

OpenGL ES纹理质量下降

1 个答案: