Question

每当我尝试渲染纹理四边形时，我最终会得到纹理扭曲的三角形部分：see this image http://i45.tinypic.com/14mgnkn.png。

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

我已尝试以多种不同的方式设置我的索引/ Verticle / texices，而不是Fastest way to draw quads in OpenGL ES?中发布的建议，但仍然没有运气。

我能错过什么？

加载纹理的代码

- (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;    
}

纹理坐标和Verticle

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);

Answer 1

看起来你的纹理坐标可能是错误的（请注意纹理似乎在左侧环绕）。

以下是我过去使用过的一段代码：

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。

修改：

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

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 - 纹理四核

1 个答案: