OpenGL ES 2.0 - 纹理四边形 [英] OpenGL ES 2.0 - Textured Quad

问题描述

每当我尝试渲染带纹理的四边形时，我最终都会得到一个扭曲的纹理三角形部分:.

Whenever I attempt to render a textured quad, I end up with a triangular section of the texture distorted: .

纹理是在 GIMP 中创建的 PNG，我尝试了两种单独的加载纹理的方法(均来自 Apple 自己的示例代码).每种加载纹理的方法都会产生不同的结果(我不知道是默认设置不同，还是纹理有问题)，但我都无法正确渲染.

The texture is a PNG created in GIMP, and I've tried two seperate methods of loading the texture (both from Apple's own sample code). Each method of loading the texture produced different results (I don't know if it is different default settings, or if there is a problem with the texture), but I couldn't get either to render proper.

根据 在 OpenGL ES 中绘制四边形的最快方法是什么? 仍然没有运气.

I've tried setting up my indices/verticles/texices in multiple different ways, from suggestions posted in Fastest way to draw quads in OpenGL ES? yet still no luck.

我可能会错过什么?

加载纹理的代码

- (GLuint)setupTexture:(NSString *)fileName {    
    CGImageRef spriteImage = [UIImage imageNamed:fileName].CGImage;
    if (!spriteImage) {
        NSLog(@"Failed to load image %@", fileName);
        exit(1);
    }
    size_t width = CGImageGetWidth(spriteImage);
    size_t height = CGImageGetHeight(spriteImage);
    GLubyte * spriteData = (GLubyte *) calloc(width*height*4, sizeof(GLubyte));
    CGContextRef spriteContext = CGBitmapContextCreate(spriteData, width, height, 8, width*4, 
    CGImageGetColorSpace(spriteImage), kCGImageAlphaPremultipliedLast);    
    CGContextDrawImage(spriteContext, CGRectMake(0, 0, width, height), spriteImage);
    CGContextRelease(spriteContext);
    GLuint texName;
    glGenTextures(1, &texName);
    glBindTexture(GL_TEXTURE_2D, texName);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST); 
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, spriteData);
    free(spriteData);        
    return texName;    
}

纹理坐标和垂直

const GLfloat texices[] =
    { 0,1,
      1,1,
      0,0,
      1,0 };

glActiveTexture(GL_TEXTURE0);
glUniform1i(_texturedTextureUniformSlot, 0);
glVertexAttribPointer(_texturedTextureSlot, 2, GL_FLOAT, GL_FALSE, 0, texices);

GLfloat vertices[] = {-1, -1, 0, //bottom left corner
                  -1,  1, 0, //top left corner
                   1,  1, 0, //top right corner
                   1, -1, 0}; // bottom right rocner

GLubyte indices[] = {0,1,2, // first triangle (bottom left - top left - top right)
                 0,2,3}; // second triangle (bottom left - top right - bottom right)

glVertexAttribPointer(3, GL_FLOAT, 0, vertices);
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_BYTE, indices);

推荐答案

看起来你的纹理坐标可能是错误的(注意纹理似乎环绕左侧).

It looks like your texture coordinates may be wrong (notice the texture appears to be wrapping around the left side).

这是我过去使用的一段代码:

Here is a snippet of code that I've used in the past:

const float quadPositions[] = {  1.0,  1.0, 0.0, 
                                -1.0,  1.0, 0.0, 
                                -1.0, -1.0, 0.0, 
                                -1.0, -1.0, 0.0, 
                                 1.0, -1.0, 0.0, 
                                 1.0,  1.0, 0.0 };
const float quadTexcoords[] = { 1.0, 1.0, 
                                0.0, 1.0, 
                                0.0, 0.0, 
                                0.0, 0.0, 
                                1.0, 0.0, 
                                1.0, 1.0 };

// stop using VBO
glBindBuffer(GL_ARRAY_BUFFER, 0);

// setup buffer offsets
glVertexAttribPointer(ATTRIB_VERTEX, 3, GL_FLOAT, GL_FALSE, 3*sizeof(float), quadPositions);
glVertexAttribPointer(ATTRIB_TEXCOORD0, 2, GL_FLOAT, GL_FALSE, 2*sizeof(float), quadTexcoords);

// ensure the proper arrays are enabled
glEnableVertexAttribArray(ATTRIB_VERTEX);
glEnableVertexAttribArray(ATTRIB_TEXCOORD0);

// draw
glDrawArrays(GL_TRIANGLES, 0, 2*3);

这应该在 z=0 处绘制两个三角形.您需要将投影的宽度和高度设置为 -1 到 1.

That should draw a two triangles at z=0. You'll want to setup your projection from -1 to 1 in width and height.

编辑:

这是您的代码的工作版本:

Here's a working version of your code:

const GLfloat texices[] = { 0, 0,
                            0, 1,
                            1, 1,
                            1, 0 };


const GLfloat vertices[] = { -1, -1, 0,  // bottom left corner
                             -1,  1, 0,  // top left corner
                              1,  1, 0,  // top right corner
                              1, -1, 0}; // bottom right corner

const GLubyte indices[] = { 0, 2, 1,     // first triangle (bottom left - top left - top right)
                            0, 3, 2 };


// ensure no VBOs or IBOs are bound
glBindBuffer(GL_ARRAY_BUFFER, 0);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, 0);    

glVertexAttribPointer(ATTRIB_VERTEX, 3, GL_FLOAT, GL_FALSE, 3*sizeof(float), vertices);
glVertexAttribPointer(ATTRIB_TEXCOORD0, 2, GL_FLOAT, GL_FALSE, 2*sizeof(float), texices);

// ensure the proper arrays are enabled
glEnableVertexAttribArray(ATTRIB_VERTEX);
glEnableVertexAttribArray(ATTRIB_TEXCOORD0);

glDisable(GL_CULL_FACE);

glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_BYTE, indices);

这篇关于OpenGL ES 2.0 - 纹理四边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！