使用適用於 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] 范圍內標准化了屏幕坐標。 因此，您必須將設備坐標轉換為規范化的坐標。