“像素精确”的失真度OpenGL 渲染精灵

Question

定义我想要做的事情：我希望能够从 ^2x^2 大小的 PNG 中获取任意“精灵”图像，并仅在屏幕上的给定 x/y 位置显示感兴趣的像素。

我的结果就是问题 - 主要失真 - 看起来很糟糕！ （请注意，这些 SS 在 iPhone sim 中，但在真正的视网膜设备上，它们看起来是一样的......垃圾）。这是“预览”中源 PNG 的屏幕截图 - 看起来很棒（任何变体我在这个问题中描述的渲染看起来几乎与垃圾渲染一模一样）

以前，我已经 询问了一个关于使用 OpenGL ES 2.0 将非 2 次方纹理显示为精灵的问题 （尽管这适用于任何 OpenGL）。我已经很接近了，但我有一些无法解决的问题。我认为可能存在多个错误 - 我认为有一些错误，我基本上通过渲染大然后挤压 x2 来混淆我所显示的内容，反之亦然，但我看不到它。此外，还有一些错误，我无法处理它们。我无法目视识别它们的发生，但我确信它们就在那里。

我正在使用 960 x 640 横向分辨率（在 iPhone4 视网膜显示屏上）。所以我预计 0->959 从左到右移动，0->639 从下到上移动。 （我认为我看到的与此相反 - 但这不是这个问题的目的）

为了让事情变得简单，我在这个测试用例中试图实现的是 PNG 文件的全屏 960x640 显示。只是其中之一。我首先显示红色背景，这样我是否覆盖屏幕就很明显了。

更新：我意识到 setFramebuffer 调用内部的“glViewport”正在向后设置我的宽度和高度。我注意到这一点是因为当我将几何图形设置为从 0,0 到 100,100 绘制时，它会绘制一个矩形而不是正方形。当我交换它们时，该调用确实绘制了一个正方形。然而，使用相同的调用，我的整个屏幕充满了 0,0 -> 的顶点范围。 480,320（一半“分辨率”）..不明白。然而，无论我从哪里推进，我仍然没有得到好看的结果

这是我的顶点着色器：

attribute vec4 a_position;
attribute vec2 a_texCoord;
varying vec2 v_texCoord;
// Gives 'landscape' full screen..
mat4 projectionMatrix = mat4( 2.0/640.0, 0.0, 0.0, -1.0,
                              0.0, 2.0/960.0, 0.0, -1.0,
                              0.0, 0.0, -1.0, 0.0,
                              0.0, 0.0, 0.0, 1.0);  
// Gives a 1/4 of screen.. (not doing 2.0/.. was suggested in previous SO Q)
/*mat4 projectionMatrix = mat4( 1.0/640.0, 0.0, 0.0, -1.0,
                              0.0, 1.0/960.0, 0.0, -1.0,
                              0.0, 0.0, -1.0, 0.0,
                              0.0, 0.0, 0.0, 1.0);                        */

// Apply the projection matrix to the position and pass the texCoord 
void main()
{
    gl_Position = a_position;
    gl_Position *= projectionMatrix;

    v_texCoord = a_texCoord;
}

这是我的片段着色器：

precision mediump float;
varying vec2 v_texCoord;
uniform sampler2D s_texture;


void main()
{
    gl_FragColor = texture2D(s_texture, v_texCoord);
}

这是我的绘图代码：

#define MYWIDTH 960.0f
#define MYHEIGHT 640.0f

// I have to refer to 'X' as height although I'd assume I use 'Y' here..
// I think my X and Y throughout this whole block of code is screwed up
// But, I have experimented flipping them all and verifying that if they
// Are taken from the way they're set now to swapping X and Y that things
// end up being turned the wrong way.  So this is a mess, but unlikely my problem
#define BG_X_ORIGIN 0.0f
// ALSO NOTE HERE: I have to put my 'dest' at 640.0f.. --- see note [1] below
#define BG_X_DEST 640.0f

#define BG_Y_ORIGIN 0.0f
// --- see note [1] below
#define BG_Y_DEST 960.0f

// These are texturing coordinates, I texture starting at '0' px and then
// I calculate a percentage of the texture to use based on how many pixels I use
// divided by the actual size of the image (1024x1024)  
#define BG_X_ZERO   0.0f
#define BG_Y_USEPERCENTAGE BG_X_DEST / 1023.0f 

#define BG_Y_ZERO 0.0f
#define BG_X_USEPERCENTAGE BG_Y_DEST / 1023.0f

// glViewport(0, 0, MYWIDTH, MYHEIGHT); 
// See note 2.. it sets glViewport basically, provided by Xcode project template
[(EAGLView *)self.view setFramebuffer];

// Big hack just to get things going - like I said before, these could be backwards
// w/respect to X and Y 
static const GLfloat backgroundVertices[] = {
    BG_X_ORIGIN, BG_Y_ORIGIN, 
    BG_X_DEST, BG_Y_ORIGIN, 
    BG_X_ORIGIN, BG_Y_DEST, 
    BG_X_DEST, BG_Y_DEST 
};


static const GLfloat backgroundTexCoords[] = {
    BG_X_ZERO, BG_Y_USEPERCENTAGE,
    BG_X_USEPERCENTAGE, BG_Y_USEPERCENTAGE,
    BG_X_ZERO, BG_Y_ZERO,
    BG_X_USEPERCENTAGE, BG_Y_ZERO

};  

    // Turn on texturing
glEnable(GL_TEXTURE_2D);

// Clear to RED so that it's obvious when I'm not drawing my sprite on screen
glClearColor(1.0f, 0.0f, 0.0f, 1.0f);
    glClear(GL_COLOR_BUFFER_BIT);


    // Texturing parameters - these make sense.. don't think they are the issue
glActiveTexture(GL_TEXTURE0);
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_NEAREST);//GL_LINEAR); 
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_NEAREST);//GL_LINEAR);

    // Update attribute values.
    glVertexAttribPointer(ATTRIB_VERTEX, 2, GL_FLOAT, 0, 0, backgroundVertices);
    glEnableVertexAttribArray(ATTRIB_VERTEX);
    glVertexAttribPointer(ATTRIB_TEXCOORD, 2, GL_FLOAT, 0, 0, backgroundTexCoords);
    glEnableVertexAttribArray(ATTRIB_TEXCOORD);

    glActiveTexture(GL_TEXTURE0);
    glBindTexture(GL_TEXTURE_2D, background->textureId);         

    // I don't understand what this uniform does in the texture2D call in shader.
    glUniform1f(uniforms[UNIFORM_SAMPLERLOC], 0);

    // Draw the geometry...
    glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

    // present the framebuffer see note [3]
    [(EAGLView *)self.view presentFramebuffer];

注意[1]：

如果我将 BG_X_DEST 设置为 639.0f，则无法完全覆盖 640 像素，右侧会显示红色。但这对我来说没有意义 - 我的目标是像素完美，我必须绘制从 0 到 640 的精灵几何图形，即 641 像素，而我只有 640！ 红线出现在 639f 而不是 640f

如果我将 BG_Y_DEST 设置为 959.0f 我不会让红线穿过。 红线顶部错误出现在 958f 而不是 960 或 959f

这可能是一个很好的线索我遇到了什么错误。

注：[2] - 由 Xcode 包含在 OpenGL ES 2 框架中

- (void)setFramebuffer 
{
    if (context)
    {
        [EAGLContext setCurrentContext:context];

        if (!defaultFramebuffer)
            [self createFramebuffer];

        glBindFramebuffer(GL_FRAMEBUFFER, defaultFramebuffer);

        glViewport(0, 0, framebufferWidth, framebufferHeight);
    }
}

注 [3]： - 由 Xcode 包含在 OpenGL ES 2 框架中

- (BOOL)presentFramebuffer
{
    BOOL success = FALSE;

    if (context)
    {
        [EAGLContext setCurrentContext:context];

        glBindRenderbuffer(GL_RENDERBUFFER, colorRenderbuffer);

        success = [context presentRenderbuffer:GL_RENDERBUFFER];
    }

    return success;
}

注 [4 ] - 相关图像加载代码（我使用过带有和不带有 alpha 通道的 PNG，实际上它似乎没有任何区别...我也尝试将我的代码更改为 ARGB 而不是 RGBA 和这是错误的 - 由于到处 A = 1.0，我得到一个非常红色的图像，这让我认为 RGBA 实际上是有效的，并且此代码是正确的。）： 更新： 我已将此纹理加载切换为使用 CG/ImageIO 调用的完全不同的设置，它看起来与此相同，所以我认为这不是图像库完成的某种别名或颜色压缩（除非它们都进行相同的基本调用，这是可能的..）

// Otherwise it isn't already loaded
glEnable(GL_TEXTURE_2D);
glActiveTexture(GL_TEXTURE0);

glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_NEAREST);//GL_LINEAR); 
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_NEAREST);//GL_LINEAR);


// TODO Next 2 can prob go later on..
glGenTextures(1, &(newTexture->textureId)); // generate Texture
// Use this before 'drawing' the texture to the memory...
glBindTexture(GL_TEXTURE_2D, newTexture->textureId);


NSString *path = [[NSBundle mainBundle] 
                        pathForResource:[NSString stringWithUTF8String:newTexture->filename.c_str()] ofType:@"png"];
NSData *texData = [[NSData alloc] initWithContentsOfFile:path];
UIImage *image = [[UIImage alloc] initWithData:texData];
if (image == nil)
    NSLog(@"Do real error checking here");

newTexture->width = CGImageGetWidth(image.CGImage);
newTexture->height = CGImageGetHeight(image.CGImage);

CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();

void *imageData = malloc(newTexture->height * newTexture->width * 4 );

CGContextRef myContext = CGBitmapContextCreate
    (imageData, newTexture->width, newTexture->height, 8, 4 * newTexture->width, colorSpace, 
    kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big );

CGColorSpaceRelease(colorSpace);
CGContextClearRect(myContext, CGRectMake(0, 0, newTexture->width, newTexture->height));

CGContextDrawImage(myContext, CGRectMake(0, 0, newTexture->width, newTexture->height), image.CGImage);


// Texture is created!
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, newTexture->width, newTexture->height, 0, 
                 GL_RGBA, GL_UNSIGNED_BYTE, imageData);
CGContextRelease(myContext);

free(imageData);
[image release];
[texData release];

Answer 1

[(EAGLView *)self.view setContentScaleFactor:2.0f];

默认情况下，iPhone 窗口会进行缩放以达到高分辨率模式。这破坏了我的图像质量..

感谢大家的帮助