Interesting/iPhone | Posted by hyena0 2010. 1. 22. 22:55

[iPhone] OpenGL 프로그래밍 ...5


  

  [iPhone] OpenGL 프로그래밍 ...5


  마지막으로 다루어볼 도형 그리는 법을 알아보겠습니다.

  3. glVertexPointer, glNormalPointer, glTexCoordPointer, 
   glDrawArrays 이용

  여기서는 glTexCoordPointer 함수가 추가된 형태입니다.

  이 함수는 Texture 를 추가적으로 입력하기 위한 배열을 포함하고 있습니다.

  이것을 적용하기 위해서는 두 가지 작업이 필요한데, 우선은 Texture 를 

  3D 도형에 맞추어서 배열 값을 얻는 것과 이미지를 별도로 등록시키는 것입니다.

  아래의 예제를 봅시다.

  - (void)drawView {

// Our new object definition code goes here

    const GLfloat cubeVertices[] = {

        

        // Define the front face

        -1.0, 1.0, 1.0,             // top left

        -1.0, -1.0, 1.0,            // bottom left

        1.0, -1.0, 1.0,             // bottom right

        1.0, 1.0, 1.0,              // top right

        

        // Top face

        -1.0, 1.0, -1.0,            // top left (at rear)

        -1.0, 1.0, 1.0,             // bottom left (at front)

        1.0, 1.0, 1.0,              // bottom right (at front)

        1.0, 1.0, -1.0,             // top right (at rear)

        

        // Rear face

        1.0, 1.0, -1.0,             // top right (when viewed from front)

        1.0, -1.0, -1.0,            // bottom right

        -1.0, -1.0, -1.0,           // bottom left

        -1.0, 1.0, -1.0,            // top left

        

        // bottom face

        -1.0, -1.0, 1.0,

        -1.0, -1.0, -1.0,

        1.0, -1.0, -1.0,

        1.0, -1.0, 1.0,

        

        // left face

        -1.0, 1.0, -1.0,

        -1.0, 1.0, 1.0,

        -1.0, -1.0, 1.0,

        -1.0, -1.0, -1.0,

        

        // right face

        1.0, 1.0, 1.0,

        1.0, 1.0, -1.0,

        1.0, -1.0, -1.0,

        1.0, -1.0, 1.0

    };

    const GLshort squareTextureCoords[] = {

        // Front face

        0, 1,       // top left

        0, 0,       // bottom left

        1, 0,       // bottom right

        1, 1,       // top right

        

        // Top face

        0, 1,       // top left

        0, 0,       // bottom left

        1, 0,       // bottom right

        1, 1,       // top right

        

        // Rear face

        0, 1,       // top left

        0, 0,       // bottom left

        1, 0,       // bottom right

        1, 1,       // top right

        

        // Bottom face

        0, 1,       // top left

        0, 0,       // bottom left

        1, 0,       // bottom right

        1, 1,       // top right

        

        // Left face

        0, 1,       // top left

        0, 0,       // bottom left

        1, 0,       // bottom right

        1, 1,       // top right

        

        // Right face

        0, 1,       // top left

        0, 0,       // bottom left

        1, 0,       // bottom right

        1, 1,       // top right

    };

    [EAGLContext setCurrentContext:context];    

    glBindFramebufferOES(GL_FRAMEBUFFER_OES, viewFramebuffer);

    glViewport(0, 0, backingWidth, backingHeight);

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

glMatrixMode(GL_MODELVIEW);

// Our new drawing code goes here

rota += 0.5;

    glLoadIdentity();

    glTranslatef(0.0, 0.0, -6.0);

    glRotatef(rota, 1.0, 1.0, 1.0);

    glVertexPointer(3, GL_FLOAT, 0, cubeVertices);

    glEnableClientState(GL_VERTEX_ARRAY);


    glTexCoordPointer(2, GL_SHORT, 0, squareTextureCoords);

    glEnableClientState(GL_TEXTURE_COORD_ARRAY);

// Draw the front face in Red

        glColor4f(1.0, 0.0, 0.0, 1.0);

        glDrawArrays(GL_TRIANGLE_FAN, 0, 4);

// Draw the top face in green

glColor4f(0.0, 1.0, 0.0, 1.0);

glDrawArrays(GL_TRIANGLE_FAN, 4, 4);

// Draw the rear face in Blue

glColor4f(0.0, 0.0, 1.0, 1.0);

glDrawArrays(GL_TRIANGLE_FAN, 8, 4);

// Draw the bottom face

glColor4f(1.0, 1.0, 0.0, 1.0);

glDrawArrays(GL_TRIANGLE_FAN, 12, 4);

// Draw the left face

glColor4f(0.0, 1.0, 1.0, 1.0);

glDrawArrays(GL_TRIANGLE_FAN, 16, 4);

// Draw the right face

glColor4f(1.0, 0.0, 1.0, 1.0);

glDrawArrays(GL_TRIANGLE_FAN, 20, 4);

    glBindRenderbufferOES(GL_RENDERBUFFER_OES, viewRenderbuffer);

    [context presentRenderbuffer:GL_RENDERBUFFER_OES];

[self checkGLError:NO];

}


  위의 코드에서 처럼 glTexCoordPointer 함수가 추가되어 있는 것을 알 수 있습니다.

   squareTextureCoords[] 배열 값에 Texture 를 어떻게 입력할 것인지하는 정보가 있습니다.

  이 부분은 정사각형의 좌표를 각각 표현한 내용입니다.

  Texture 관련 부분은 Blender부분에서 자세히 다루도록 하겠습니다.

  기본적으로 알면 좋긴 하지만, Blender 로 Export하게 되면 값이 나오게 되므로

  배열값을 보고 알 수 없는 경우도 있기 때문에 지금은 그냥 넘어가겠습니다.

  그래도 궁금하신 분들은 여기를 보시기 바랍니다.

  위의 코드에서 빠진 부분은 texture 를 선택하는 부분인데 아래와 같습니다.

- (void)loadTexture {

    CGImageRef textureImage = [UIImage imageNamed:@"checkerplate.png"].CGImage;

    if (textureImage == nil) {

        NSLog(@"Failed to load texture image");

return;

    }

    NSInteger texWidth = CGImageGetWidth(textureImage);

    NSInteger texHeight = CGImageGetHeight(textureImage);

GLubyte *textureData = (GLubyte *)malloc(texWidth * texHeight * 4);

    CGContextRef textureContext = CGBitmapContextCreate(textureData,

                                                         texWidth, texHeight,

                                                         8, texWidth * 4,

                                                         CGImageGetColorSpace(textureImage),

                                                         kCGImageAlphaPremultipliedLast);

CGContextDrawImage(textureContext, CGRectMake(0.0, 0.0, (float)texWidth, (float)texHeight), textureImage);

CGContextRelease(textureContext);

glGenTextures(1, &textures[0]);

glBindTexture(GL_TEXTURE_2D, textures[0]);

glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, texWidth, texHeight, 0, GL_RGBA, GL_UNSIGNED_BYTE, textureData);

free(textureData);

glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);

glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

glEnable(GL_TEXTURE_2D);

}  

  checkerplate.png 파일을 호출해서 textures 배열에 넣고 바인딩 시켜주는 과정입니다.

  물론 이 메소드를 실행해 주어야만 동작합니다.

  [self loadTexture];

  실제 실행 캡처 화면은 아래와 같습니다.


  



  이제 3차원 도형을 그리는 세가지 방법에 대해 다 알아봤습니다.

  다음 포스팅에서는 3차원 도형을 그리는 툴인 Blender 를 사용해 보고, export 하여 배열로 만든 뒤

  아이폰에서 그려보는 작업을 해 보겠습니다.

Interesting/iPhone | Posted by hyena0 2010. 1. 20. 01:18

[iPhone] OpenGL 프로그래밍 ...3


  [iPhone] OpenGL 프로그래밍 ...3

이전 포스트에서 drawView 메소드 부분을 다루어 보았습니다.

이 drawView에서 3차원 도형을 그리는 방법을 크게 3가지로

분류해서 다루어 보겠습니다.

1. glVertexPointer, glDrawArrays 이용

2. glVertexPointer, glNormalPointer, glDrawArrays 이용

3. glVertexPointer, glNormalPointer, glTexCoordPointer, glDrawArrays 이용

우선 첫번째 부분을 보면 아래와 같은 예를 볼 수 있겠습니다.

- (void)drawView {

// Our new object definition code goes here

    const GLfloat cubeVertices[] = {

        // Define the front face

        -1.0, 1.0, 1.0,             // top left

        -1.0, -1.0, 1.0,            // bottom left

        1.0, -1.0, 1.0,             // bottom right

        1.0, 1.0, 1.0,              // top right

      

        // Top face

        -1.0, 1.0, -1.0,            // top left (at rear)

        -1.0, 1.0, 1.0,             // bottom left (at front)

        1.0, 1.0, 1.0,              // bottom right (at front)

        1.0, 1.0, -1.0,             // top right (at rear)     

        // Rear face

        1.0, 1.0, -1.0,             // top right (when viewed from front)

        1.0, -1.0, -1.0,            // bottom right

        -1.0, -1.0, -1.0,           // bottom left

        -1.0, 1.0, -1.0,            // top left


        // bottom face

        -1.0, -1.0, 1.0,

        -1.0, -1.0, -1.0,

        1.0, -1.0, -1.0,

        1.0, -1.0, 1.0,

  

        // left face

        -1.0, 1.0, -1.0,

        -1.0, 1.0, 1.0,

        -1.0, -1.0, 1.0,

        -1.0, -1.0, -1.0,

  

        // right face

        1.0, 1.0, 1.0,

        1.0, 1.0, -1.0,

        1.0, -1.0, -1.0,

        1.0, -1.0, 1.0

    };

    [EAGLContext setCurrentContext:context];    

    glBindFramebufferOES(GL_FRAMEBUFFER_OES, viewFramebuffer);

    glViewport(0, 0, backingWidth, backingHeight);

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

glMatrixMode(GL_MODELVIEW);

// Our new drawing code goes here

rota += 0.5; // 회전각도

glLoadIdentity();

    glTranslatef(0.0, 0.0, -6.0);

glRotatef(rota, 1.0, 1.0, 1.0);

glVertexPointer(3, GL_FLOAT, 0, cubeVertices);

    glEnableClientState(GL_VERTEX_ARRAY);

// Draw the front face in Red

glColor4f(1.0, 0.0, 0.0, 1.0);

    glDrawArrays(GL_TRIANGLE_FAN, 0, 4);

 

// Draw the top face in green

glColor4f(0.0, 1.0, 0.0, 1.0);

glDrawArrays(GL_TRIANGLE_FAN, 4, 4);

// Draw the rear face in Blue

glColor4f(0.0, 0.0, 1.0, 1.0);

glDrawArrays(GL_TRIANGLE_FAN, 8, 4);

// Draw the bottom face

glColor4f(1.0, 1.0, 0.0, 1.0);

glDrawArrays(GL_TRIANGLE_FAN, 12, 4);


// Draw the left face

glColor4f(0.0, 1.0, 1.0, 1.0);

glDrawArrays(GL_TRIANGLE_FAN, 16, 4);

// Draw the right face

glColor4f(1.0, 0.0, 1.0, 1.0);

glDrawArrays(GL_TRIANGLE_FAN, 20, 4);

    glBindRenderbufferOES(GL_RENDERBUFFER_OES, viewRenderbuffer);

    [context presentRenderbuffer:GL_RENDERBUFFER_OES];

[self checkGLError:NO];

}


정육면체가 회전하게 되는 예제로 glVertexPointer 함수에서 

배열 cubeVertices 의 값을 이용하여 정육면체를 그리게 됩니다.

여기서 배열  cubeVertices 의 값을 보면 각 면의 값을 모두 가지고 있다는 것을 알게 되지요.

그래서 각 면에 해당하는 부분을 glDrawArrays 함수에서 4 행씩 증가시켜가면서

그리게 됩니다.

사실 이런 방식으로 도형을 그리게 되면 정육면체 혹은 정사면체 등의 우리가 아는 도형만

그릴 수 있고 3D 게임을 만들거나 하기 위한 복잡한 도형을 만들기는 사실상 불가능합니다.

그래서 두 번째 및 세 번째 방법을 이용해야한다는 것을 알게 됩니다.

다음 방법은 다음 포스트에서 봅시다.





Interesting/iPhone | Posted by hyena0 2010. 1. 17. 02:00

[iPhone] iDarter v0.3 APP store 에 등록


  iDarter v0.3 APP store 에 등록

정식으로 첫 개발을 완료한 앱인 iDarter 를

아이디어 낸지 거의 4개월 만에 완성해서

오늘 앱스토어에 등록했답니다.

Provisioning Profile 을 Distribution 용으로 다시 다운로드 받고

다시 컴파일하는 등의 의외로 까다로운 부분이 있어서

거의 오늘 내내 작업을 했답니다.

불행히도 등록페이지에서 "The binary you uploaded was invalid. The signature was invalid, or it was not signed with an Apple submission certificate."

이런 에러도 나와서 알고 봤더니 등록절차를 진행할때 빌드하기 전에 Adhoc distribution 방법대로 진행했더니 안되더군요.

개발자 웹에는 12번으로 건너뛰고 진행하라고 되어 있는데, 그걸 무시하고 단순하게 죽 절차대로 했더니 등록오류가 났었습니다.

12번으로 바로 건너뛰고 진행하니 등록이 되었습니다.

이제 애플측의 평가만 끝나면 어플이 앱스토어에서 보일 수 있겠군요.

안드로이드 마켓에서 무료어플을 등록해 본 경험은 있지만 앱스토어에선 어떨지 기대되는 군요.

이제 차분한 마음으로 OpenGL ES 를 아이폰용 어플에서 적용하는 방법을 포스팅해봐야 겠군요.