使用适用于 iOS 的 OpenGL ES 绘制正方形

Question

我正在尝试使用苹果提供的 GLPaint 示例项目绘制一个矩形。 我曾尝试修改顶点，但无法在屏幕上显示一个矩形。 手指画效果完美。 我在我的 renderRect 方法中遗漏了什么吗？

- (void)renderRect {

    [EAGLContext setCurrentContext:context];
    glBindFramebufferOES(GL_FRAMEBUFFER_OES, viewFramebuffer);

    // Replace the implementation of this method to do your own custom drawing.
    static const GLfloat squareVertices[] = {
        -0.5f, -0.33f,
        0.5f, -0.33f,
        -0.5f,  0.33f,
        0.5f,  0.33f,
    };

    static float transY = 0.0f;

    glTranslatef(0.0f, (GLfloat)(sinf(transY)/2.0f), 0.0f);


    // Render the vertex array
    glVertexPointer(2, GL_FLOAT, 0, squareVertices);
    glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);


    // Display the buffer
    glBindRenderbufferOES(GL_RENDERBUFFER_OES, viewRenderbuffer);
    [context presentRenderbuffer:GL_RENDERBUFFER_OES];
}

项目的其余部分设置了库存以允许在屏幕上绘图，但仅供参考，这些是设置的 gl 设置。

// Set the view's scale factor
self.contentScaleFactor = 1.0;

// Setup OpenGL states
glMatrixMode(GL_PROJECTION);
CGRect frame = self.bounds;
CGFloat scale = self.contentScaleFactor;
// Setup the view port in Pixels
glOrthof(0, frame.size.width * scale, 0, frame.size.height * scale, -1, 1);
glViewport(0, 0, frame.size.width * scale, frame.size.height * scale);
glMatrixMode(GL_MODELVIEW);

glDisable(GL_DITHER);
glEnable(GL_TEXTURE_2D);
glEnableClientState(GL_VERTEX_ARRAY);

glEnable(GL_BLEND);
// Set a blending function appropriate for premultiplied alpha pixel data
glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_ALPHA);

glEnable(GL_POINT_SPRITE_OES);
glTexEnvf(GL_POINT_SPRITE_OES, GL_COORD_REPLACE_OES, GL_TRUE);
glPointSize(width / brushScale);   

Answer 1

问题是：

(1)以下代码：

    glMatrixMode(GL_PROJECTION);
    CGRect frame = self.bounds;
    CGFloat scale = self.contentScaleFactor;
    // Setup the view port in Pixels
    glOrthof(0, frame.size.width * scale, 0, frame.size.height * scale, -1, 1);
    glViewport(0, 0, frame.size.width * scale, frame.size.height * scale);

确定屏幕坐标范围从左下角的 (0, 0) 到右上角的 frame.size。 换句话说，一个 OpenGL 单元就是一个 iPhone 点。 所以你的数组：

static const GLfloat squareVertices[] = {
    -0.5f, -0.33f,
    0.5f, -0.33f,
    -0.5f,  0.33f,
    0.5f,  0.33f,
};

尺寸小于 1 像素。

(2) 您在设置中有以下内容：

    brushImage = [UIImage imageNamed:@"Particle.png"].CGImage;

    /* ...brushImage eventually becomes the current texture... */

    glEnable(GL_TEXTURE_2D);

您随后无法为您的四边形提供纹理坐标。 可能您想禁用GL_TEXTURE_2D 。

所以如下：

static const GLfloat squareVertices[] = {
    0.0f, 0.0f,
    0.0,  10.0f,
    90.0,  0.0f,
    90.0f, 10.0f,
};



glDisable(GL_TEXTURE_2D);
glColor4f(1.0f, 1.0f, 1.0f, 1.0f);

// Render the vertex array
glVertexPointer(2, GL_FLOAT, 0, squareVertices);
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

将在屏幕左下方产生一个 90 点宽和 10 点高的白色四边形。

Answer 2

static const GLfloat squareVertices[] = {
        30.0f,  300.0f,//-0.5f, -0.33f,
        280.0f, 300.0f,//0.5f, -0.33f,
        30.0f,  170.0f,//-0.5f,  0.33f,
        280.0f, 170.0f,//0.5f,  0.33f,
    };

那绝对是太多了。 OpenGL 在 [-1..1] 范围内标准化了屏幕坐标。 因此，您必须将设备坐标转换为规范化的坐标。