GIS Developer

이번에는 화면상의 물체(점, 선, 폴리곤, 그리고 이들의 조합으로 이루어진 것들)을 움직여 보고 회전 시켜 보며 크기를 변경하는 것에 대해서 살펴보자. 이 장은 1장의 소스에서 출발을 한다.

먼저 이동과 회전 그리고 크기를 조절할 대상이 되는 간단한 물체를 생성해 보자. 뭐가 좋을까? 정육면체로 하자. 정육면체는 면이 6개이며 꼭지점이 8개인 물건(?)이다. 꼭지점이 8개 이므로 우리는 8개의 좌표를 알고 있어야 한다. 다음의 코드는 화면상에 정육면체를 그려주는 glDrawGLScene 함수의 코드이다.

int DrawGLScene(GLvoid)
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    glLoadIdentity();
    glTranslatef(0.0f,0.0f,-10.0f);
    glColor3f(1.0f, 1.0f, 1.0f);
    glBegin(GL_LINE_LOOP);
    glVertex3f(-1.0f, 1.0f, 1.0f);
    glVertex3f(1.0f, 1.0f, 1.0f);
    glVertex3f(1.0f, -1.0f, 1.0f);
    glVertex3f(-1.0f, -1.0f, 1.0f);
    glEnd(); 
   
    glBegin(GL_LINE_LOOP);
    glVertex3f(-1.0f, 1.0f, -1.0f);
    glVertex3f(1.0f, 1.0f, -1.0f);
    glVertex3f(1.0f, -1.0f, -1.0f);
    glVertex3f(-1.0f, -1.0f, -1.0f);
    glEnd();
   
    glBegin(GL_LINES);
    glVertex3f(-1.0f, 1.0f, 1.0f);
    glVertex3f(-1.0f, 1.0f, -1.0f);
    glVertex3f(1.0f, 1.0f, 1.0f);
    glVertex3f(1.0f, 1.0f, -1.0f);
    glVertex3f(1.0f, -1.0f, 1.0f);
    glVertex3f(1.0f, -1.0f, -1.0f);
    glVertex3f(-1.0f, -1.0f, 1.0f);
    glVertex3f(-1.0f, -1.0f, -1.0f);
    glEnd();
    return TRUE;
} 	

2장을 충분이 이해하고 있다면 전혀 어려운 부분이 없다. 이해가 가지 않는 독자가 있다면 2장을 보기 바란다. 코딩을 끝마친후 실행해보자. 다음은 그 실행 결과이다.

혹시 이런 질문을 던지는 독자가 있을지도 모르겠다. 정육면체라고 했는데 앞면과 뒷면의 크기가 다르지 않는가?라고… 답부터 말하자면 앞면과 뒷면의 크기는 분명이 동일하다. 달라보이는 이유는 좀더 사실적인 연출을 위해 원근감이 적용되었기 때문이다.

자, 이제 물체의 이동, 회전, 크기조절(스케일)을 할 물체가 준비되었다.

먼저 독자에게 주지 시켜야 할것이 있다. 그것은 필자가 말한 물체의 이동, 물체의 회전, 물체의 크기조절이라는 말에서 풍기는 의미전달의 오류를 바로 잡고자 한다. OpenGL에서는 이러한 작업을 좌표체계를 변경함으로써 이루어진다는 것이다. 즉 물체의 이동에 있어서 실제로 물체를 이동하는 것이 아니고 좌표축을 이동시킨후에 물체를 그려주는 것이다. 회전도 마찬가지이다. 먼저 좌표축을 지정된 각으로 회전시킨후에 그 회전 좌표축 상에 물체를 그려주는 것이다. 결국 우리가 원하는 상태의 물체를 얻을 수 있다는 것이다. 자 지금까지의 모든 것을을 이해했다면 이제 실제 우리가 원하는 것들을 해보자!!

먼저 물체를 이동시켜보자. 왼쪽으로 1.0만큼, 위쪽으로 1.0만큼 좌표체계를 이동시키는 것은 어떻게 될까? 바로 다음 한줄의 코드가 그러한 일을 한다.

glTranslatef(1.0f, 1.0f, 0.0f); 

glTranslatef 함수의 첫번째 인자는 X축으로 이동값, 두번째와 세번째는 각각 Y축과 Z축으로의 이동값이다. 이 함수를 어디에 위치시켜야 하는가? 바로 물체를 그려주기 바로 전에 사용하면 되겠다. 다음 코드의 <*> 코드가 그 주인공이다.

int DrawGLScene(GLvoid)
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    glLoadIdentity();
    glTranslatef(0.0f,0.0f,-10.0f);
    glColor3f(1.0f, 1.0f, 1.0f);
    
    glTranslatef(1.0f, 1.0f, 0.0f); // <*>
   
    glBegin(GL_LINE_LOOP);
    glVertex3f(-1.0f, 1.0f, 1.0f);
    glVertex3f(1.0f, 1.0f, 1.0f);
    glVertex3f(1.0f, -1.0f, 1.0f);
    glVertex3f(-1.0f, -1.0f, 1.0f);
    glEnd(); 
   
       .
       .
       .
   
    return TRUE;
}

아래는 실행 결과이다. 우리가 원하는 대로 물체가 이동되었음을 알수있다.

이제 물체를 회전시켜보는 것을 알아보자. Z축으로 45도 회전시켜보는 것으로 예를 들어보자. 다음은 좌표축을 Z축으로 45도 회전시키는 코드이다.

glRotatef(45.0f, 0.0f, 0.0f, 1.0f)

첫번째 인자는 회전각(60도)이고 나머지 인자들은 X,Y,Z축상의 값들이다. (0.0, 0.0, 1.0)이 Z축을 기준으로 회전한다는 의미데 회전을 할때는 반드시 회전축이 필요하다. 바로 (0.0, 0.0, 1.0)이 회전축을 지정해 주는 것이다. 원점에서 (0.0, 0.0, 1.0)을 잇는 선, 바로 이 선이 회전축인 것이다. 그렇다면 이 코드의 위치는 어디인가? 마찬가지로 물체를 그려주기 바로 전에 위치하면 되겠다.

int DrawGLScene(GLvoid)
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    glLoadIdentity();
    glTranslatef(0.0f,0.0f,-10.0f);
    glColor3f(1.0f, 1.0f, 1.0f);
    
    glRotatef(45.0f, 0.0f, 0.0f, 1.0f); // <*>
    
    glBegin(GL_LINE_LOOP);
    glVertex3f(-1.0f, 1.0f, 1.0f);
    glVertex3f(1.0f, 1.0f, 1.0f);
    glVertex3f(1.0f, -1.0f, 1.0f);
    glVertex3f(-1.0f, -1.0f, 1.0f);
    glEnd(); 
    
         .
         .
         .
    
    return TRUE;
} 

다음은 실행 결과의 화면이다.

어떤가 생각했던 대로 회전이 이루어 졌는가?

이제 다음으로 물체의 크기조절에 대한 것에 대해 알아보도록 하겠다. 물체를 Y축으로 2배 늘려보자. 다른 좌표축보다 Y축으로 2배의 값으로 증가하는 좌표축을 구성하면 물체도 그에 따라 Y축으로 2배 늘어날 것이다. 바로 아래가 그러한 일을 하는 코드이다.

glScalef(1.0, 2.0f, 1.0f);

첫번째 인자는 X축 좌표값의 증가배수값이고 두번째와 세번째가 각각 Y, Z축의 좌표값의 증가 배수이다. 두번째 값을 2.0으로 잡아줌으로써 Y축의 좌표축 값을 다른 축에 비해 2배로 증가하게 되는 것이다. 이 코드의 위치해야할 곳은 또 어디인가? 마찬가지로 물체를 그리기 바로 전에 위치하면 된다.

int DrawGLScene(GLvoid)
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    glLoadIdentity();
    glTranslatef(0.0f,0.0f,-10.0f);
    glColor3f(1.0f, 1.0f, 1.0f);
   
    glScalef(1.0, 2.0f, 1.0f);
   
    glBegin(GL_LINE_LOOP);
    glVertex3f(-1.0f, 1.0f, 1.0f);
    glVertex3f(1.0f, 1.0f, 1.0f);
    glVertex3f(1.0f, -1.0f, 1.0f);
    glVertex3f(-1.0f, -1.0f, 1.0f);
    glEnd(); 
   
       .
       .
       .
   
    return TRUE;
} 

또 다음은 그 실행 결과이다.

어떤가. 우리가 원하는 대로 물체가 Y축으로 2배 길어졌다.

이로써 물체의 이동, 회전, 스케이링에 대한 장을 마치겠다.

OpenGL에서 화면상에 점과 선, 그리고 면을 그리는 것은 아주 쉽다. 그려주는 핵심적인 코드를 살펴보자. 먼저 코드를 살펴보기 전에 알고 있어야 할 것은 OpenGL의 좌표체계는 3차원 직각좌표를 기본으로 하고 있으며 왼쪽에서 오른쪽으로 그 X좌표의 값이 증가하며 아래에서 위쪽으로 Y좌표의 값이 증가한다. 그리고 모니터 화면의 바깓쪽으로 Z값이 증가한다는 점이다. 또한 폴리곤은 한마디로 안이 채워진 도형이며 면(Face)이라는 것이다

화면에 점을 그려주는 예

glBegin(GL_POINTS);
glVertex3f(0.0f, 0.0f, 0.0f);
glEnd();

화면에 선을 2개 그려주는 예

glBegin(GL_LINES);
glVertex3f(-1.0f, -1.0f, 0.0f);
glVertex3f(1.0f, -1.0f, 0.0f);
glVertex3f(1.0f, 1.0f, 0.0f);
glVertex3f(-1.0f, 1.0f, 0.0f);
glEnd();

폴리곤을 그려주는 예

glBegin(GL_POLYGON);
glVertex3f(-1.0f, -1.0f, 0.0f);
glVertex3f(1.0f, -1.0f, 0.0f);
glVertex3f(1.0f, 1.0f, 0.0f);
glVertex3f(-1.0f, 1.0f, 0.0f);
glEnd();

눈치가 빠른 독자라면 위에서 보인 세가지의 코드가 공통점이 있다는 것을 파악했을 것이다. 바로 glBegin과 glEnd라는 구문 안에 각 점들을 기술해줬다는 것이다. 점들을 기술하는 방법은 우리가 이미 알고 있는 3차원 직교 자표계로 쉽게 생각할 수 있다. 세번째인 폴리곤을 그려주는 예에서 4개의 점 좌표를 기술해 줬는데 종이를 준비해서 각 점을 종이에 순서대로 찍어보고 그 점을 순서 이어보자. 사각형이 그려질 것이다. 폴리곤이므로 처음 좌표와 마지막 좌표가 이어지게 되고 안은 지정된 색으로 채워지게 된다. 바로 이것이 좌표를 기술해 주는 방식이다. 간단하다.

그렇다면 이제 점을 그릴 것인지 선을 그릴것인지, 아니면 폴리곤을 그릴것인지 어떤 식으로 기술할 수 있는가. 역시 눈치 빠른 독자는 이미 그 방법을 위의 코드를 통해서 알것이다. 그렇다. 바로 glBegin이라는 함수를 통해 그 인자로 지시를 해주는 것이다. GL_POINTS는 점, GL_LINES는 선, GL_POLYGON은 폴리곤을 그려라는 의미이다. 이쯤이라면 위에서 제시한 3가지 코드에 대한 이해를 완벽하게 했으리라 믿어 의심치 않는다. 그래도 모르겠다면 필자에게 왜 이렇게 설명을 못하냐는 멜과 함께 뭐가 이해가 가지 않는지 멜을 가볍게 한통 던져주길 바란다.

여기서 끝마치면 너무 아쉽고 서운하다. 이 코드를 실제적으로 실습해봐야 할것이고 glBegin에 오는 인자가 더 있지나 않나하는 호기심을 품어야함이 옳다. 먼저 실습하는 방법에 대해서 알아보자. 필자는 이미 OpenGL을 초기화하는 과정을 튜어리얼 1번을 통해서 아주 길게 설명했다. 이 2번 튜어리얼은 1번에서 했던 코드를 그대로 사용한다. 먼저 1번 튜어리얼에서제작한 소스 코드를 살펴보면 DrawGLScane라는 함수가 있다. 바로 이 함수 안에서 그려주는 코드를 삽입하면 되겠다. 폴리곤을 그려주는 것으로 예를 들면 다음과 같다.

int DrawGLScene(GLvoid) // Here's Where We Do All The Drawing
{
    // Clear Screen And Depth    Buffer
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); 
    glLoadIdentity(); // Reset The Current Modelview Matrix
    glTranslatef(0.0f,0.0f,-10.0f);   // 추가된 코드 1
    glColor3f(1.0f, 1.0f, 1.0f);      // 추가된 코드 2
    glBegin(GL_POLYGON);              // 추가된 코드
    glVertex3f(-1.0f, -1.0f, 0.0f);   // 추가된 코드
    glVertex3f(1.0f, -1.0f, 0.0f);    // 추가된 코드
    glVertex3f(1.0f, 1.0f, 0.0f);     // 추가된 코드
    glVertex3f(-1.0f, 1.0f, 0.0f);    // 추가된 코드
    glEnd();                          // 추가된 코드
    return TRUE; // Everything Went OK
} 

추가된 코드만을 코딩한후에 실행해 보자. 썰렁한 하얀 정사각형이 화면에 그려질 것이다. 하지만 우리가 그리고자 했던 것임은 틀림없다. 아닌가??

위의 코드를 더 살펴보자. 추가된 코드1과 2가 있는데 이것을 그냥 넘겨버리자니 이미 황폐해져 버린 필자의 마지막 남은 양심을 지킬 수가 없고 해서 설명해야겠다. 먼저 OpenGL은 처음에 초기화 과정에서 원점(0, 0, 0)을 화면의 정중앙에 맞추게 된다. 이 원점을 중심으로 OpenGL에서 그려지는 모든 것들을 바라보게 된다. 중요한 것이 바로 여기에 있다. 바로 원점에서 우리가 그린 사각형을 바라봐야 하는데 눈과 사각형이 겹치게 된다. 상상해 보라 독자의 눈과 책이 만날정도로 부착시키면 독자는 무었을 보게 되는가… 그렇다! 아무것도 보이지 않는다. 그래서 추가코드1이 필요한 것이다. 즉 물체를 눈의 위치보다 앞이나 뒤로 옮겨야 볼수 있는 것이다. 추가 코드1인 glTranslatef(0.0f, 0.0f, -10.0f)가 바로 그러한 일을 하는데 물체를 Z축으로 10.0f만큼 뒤로(-) 옮겨 그리라는 것이다. 이제 추가 코드2번에 대해서 살펴보도록 하자. 함수 이름에서 직감할 수 있듯이 그려줄 것에 대한 색을 지정하는 것이다. glColor3f는 세개의 인자를 갖는데 각각의 인자는 Red, Green, Blue 값이며 셋모두 하한값과 상한값이 0~1 사이를 갖는다. 이 정도면 나머지 것들도 실습하는데 별 어려움이 없을 것이다. 하지만 그 어떤 아쉬움이 남지 않는가….. 하지만 일단 그 아쉬움에 대해 후일을 기약하자.

이제 glBegin에 올수 있는 인자에 대해서 알아보도록 하자. 아래 그림으로 한방에 해결하고 마친다.