9번 강좌까지 오신 여러분 수고가 많습니다. 본 코스는… 쿨럭~ ㅡㅡ; 지금까지의 공부를 통해서 OpenGL윈도우를 여는 것부터 시작해서 광원과 투명처리를 한 텍스쳐 물체를 회전시키는 것까지, OpenGL에 대하여 많은 이해가 있으셨을 것입니다. 이번 강좌는 준 심화 단계 학습이 될 것입니다. 오늘 배울 것은 비트맵을 3차원 화면에서 움직이는 법, 블렌딩을 통해서 비트맵 주위의 검은 점을 없애는 법, 흑백 이미지에 색상을 입히는 법, 여러 색상의 텍스쳐를 이용해서 화려한 색상의 간단한 애니메이션을 만드는 법 등입니다.

Lesson 1 에서 만든 코드의 처음 부분에 새로운 변수를 추가하는 것으로 시작하겠습니다. 전체 소스를 모두 실어서 어떤 부분이 변경되었는지를 쉽게 알 수 있게끔 하겠습니다. (제 번역은 그렇게 안 하겠습니다. 원문은 윈도우 프로그래밍을 기준으로 쓰여있기 때문에 매킨토시 동지들은 필요가 없습니다.)

다음의 변수 twinkle 과 tp 는 true 와 false 의 논리값을 갖습니다. twinkle변수는 반짝거리기 효과가 활성화되었는지 아닌지를 기록하고 tp는 키보드 T 가 눌렸는지 떼어졌는지를 기록합니다.


BOOL twinkle;
BOOL tp;


num변수는 화면에 출력된 별의 개수로서 상수값입니다. 따라서 프로그램 실행 도중 이 값이 변경되지 않습니다. 왜냐하면 프로그램 실행 도중에 배열을 새로 정의하지 않게 하기 위해서입니다. 별을 50개 출력하기 위해서 배열을 선언해 두고 갑자기 프로그램 중간에서 num변수를 51로 증가시키더라도 배열은 51로 늘어나지 않게 되고, 따라서 프로그램 오류가 발생합니다. 이 값을 변화시킬 수 있는 곳은 여기뿐입니다. 프로그램 중간에서 이 값을 바꾸면 큰일납니다.


const num=50;


이제 구조체를 선언합니다. 구조체라는 말을 듣더라도 겁먹으실 필요는 없습니다. 구조체라는 것은 큰 규모의 개체를 선언하는 작은 변수들의 조합일 뿐입니다. 우리가 선언하는 stars라는 구조체는 별들의 특성과 위치를 추적하는 역할을 합니다. 각 별들은 색상을 정의하기 위한 세 개의 정수값을 구조체 세 번째 줄에 있는 int r,g,b 에 가지고 있습니다. r은 빨간색, g는 녹색, b는 파란색을 뜻합니다. 또한 각 별들은 화면의 중심으로부터 다른 거리만큼 떨어져 있습니다. 구조체 네 번째 줄에 dist라는 이름의 부동소숫점 변수가 별의 거리를 기록하고 입니다. 다섯 번째 줄에는 angle이라는 부동소숫점 변수가 있는데 그것은 별의 각도를 기록하는 변수입니다.

지금까지 데이터의 조합에는 색상을 정의하는 데이터, 화면에서 별이 위치하는 거리와 각도를 기록하는 데이터가 있었습니다. 그런데 우리가 다루어야 할 별은 한 개가 아니죠. 우리는 빨간 색을 기록할 변수 50개, 녹색 50개, 파란 색 50개, 거리 값 50개, 각도 50개를 선언하지 않고 이것을 star라는 이름의 한 배열로 선언하겠습니다. star배열의 하나 하나의 요소들은 stars 라는 이름의 구조체의 정보를 담고 있습니다. star 배열은 밑으로 8번째 줄에 선언하고 있습니다. stars star[num]이라는 코드는 우리가 선언하는 배열의 타입이 stars라는 구조체라는 뜻입니다. 따라서 배열에는 구조체가 가지는 모든 정보를 담고 있습니다. 배열의 이름은 star이고, 배열의 길이는 [num], 50입니다. star배열은 stars구조체를 각 요소로 담고 있기 때문에, 별의 정보에 대한 변수를 따로 따로 갖고 있는 것보다 훨씬 다루기 쉽습니다. 따로 선언하는 것은 멍청한 짓이고, num변수를 변경하여 별의 개수를 조정하는 것을 어렵게 만듭니다.


typedef struct    // 별의 정보를 담을 구조체를 선언한다
{
int r, g, b;    // 별의 색상
GLfloat dist;    // 중심으로부터의 거리
GLfloat angle;    // 별의 각도
}
stars;    // 구조체의 이름은 stars
stars star[num];


이제 선언하는 변수는 별들이 관찰자로부터 얼마나 멀리 떨어져 있는지를 기록하는 zoom이라는 변수와 어떤 각도에서 별들을 보고 있는지를 기록하는 tilt변수입니다. spin변수는 반짝이는 별들을 z축 중심으로 회전하게 만들어서 별들이 현재 위치에서 회전하는 것처럼 만들게 됩니다.

loop변수는 모두 50개의 별을 그리는 데에 쓰이고, texture[1]은 흑백 텍스쳐를 읽어서 저장하는 데에 쓰입니다. 더 많은 텍스쳐를 만들려면 원하는 만큼의 숫자를 대신 넣으시면 됩니다.


GLfloat zoom=-15.0f;    // 별들의 거리
GLfloat tilt=90.0f;    // 별들을 보는 각도
GLfloat spin;    // 반짝이는 별들이 회전

GLuint        loop;    // 일반적인 루프 변수
GLuint        texture[1];    // 텍스쳐 저장


그 다음에는 텍스쳐를 읽어들이는 코드를 추가합니다. Lesson 6, 7, 8에서 쓰던 것과 동일하기 때문에 자세한 내용은 설명할 필요 없을 것입니다. 이번에 읽어들이는 비트맵은 star.bmp 파일 딱 하나뿐이므로 glGenTextures(1,&texture[0]) 함수를 호출합니다. 이번에는 선형 필터링을 쓰겠습니다.


AUX_RGBImageRec *LoadBMP(char *Filename)
{
FILE *File=NULL;

if (!Filename)
{
return NULL;
}

File=fopen(Filename,"r");

if (File)
{
fclose(File);    
return auxDIBImageLoad(Filename);
}
return NULL;
}


이제 위의 코드를 호출하여 비트맵 이미지를 읽고 그것을 텍스쳐로 변환하는 코드입니다. Status변수는 텍스쳐로 제대로 변환되었는지를 기록하는 변수입니다.


int LoadGLTextures()
{
int Status=FALSE;

AUX_RGBImageRec *TextureImage[1];

memset(TextureImage,0,sizeof(void *)*1);

if (TextureImage[0]=LoadBMP("Data/Star.bmp"))
{
Status=TRUE;

glGenTextures(1, &texture[0]);

glBindTexture(GL_TEXTURE_2D, texture[0]);

glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR);
glTexImage2D(GL_TEXTURE_2D, 0, 3, TextureImage[0]->sizeX, TextureImage[0]->sizeY, 0, GL_RGB, GL_UNSIGNED_BYTE, TextureImage[0]->data);
}

        if (TextureImage[0])
{
if (TextureImage[0]->data)
{
free(TextureImage[0]->data);
}

free(TextureImage[0]);
}

return Status;
}


이제 우리가 원하는대로 랜더링을 하게끔 OpenGL을 셋업하겠습니다. 이번 예제에서는 Depth Testing을 사용하지 않기 때문에 lesson 1에서 만들었던 코드에서 glDepthFunc(GL_LEQUAL) 과 glEnable(GL_DEPTH_TEST) 를 삭제해 합니다. 그렇지 않으면 좋지 않은 결과를 얻게 됩니다. 텍스쳐 매핑을 사용할 것이기 때문에 lesson 1 에 없었던 텍스쳐 매핑과 블렌딩을 활성화하는 코드를 모두 적어 넣었는지 확인하십시오.


int InitGL(GLvoid)
{
if (!LoadGLTextures())
{
return FALSE;
}

glEnable(GL_TEXTURE_2D);
glShadeModel(GL_SMOOTH);
glClearColor(0.0f, 0.0f, 0.0f, 0.5f);
glClearDepth(1.0f);
glHint(GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST);
glBlendFunc(GL_SRC_ALPHA,GL_ONE);
glEnable(GL_BLEND);


다음에 소개하는 코드는 새로 추가되는 것으로서, 별들의 각도, 거리, 그리고 색상을 지정합니다. 구조체 안의 내용을 조절하는 것이 얼마나 쉬운지 보세요. 반복 구문이 50개의 별들을 한 번에 훑게 됩니다. 만약에 star[1]의 각도를 바꾸고 싶다면 star[1].angle={some number} 라고만 써 주면 됩니다. 간단하죠?


for (loop=0; loop<num; loop++)    // 별을 훑는 반복 구문을 만든다
{
star[loop].angle=0.0f;    // 모든 별의 시작 각도는 0.0f


중심으로부터의 별의 거리는 현재 반복 구문의 값을 별의 갯수로 나눈 값에 5.0f를 곱하여 구했습니다. 이렇게 하면 결국 각각의 별들을 그 전의 별들보다 조금씩 멀리 떨어지게 만들어 줍니다. loop의 값이 50이 되면 (마지막 별) loop를 num으로 나누어준 값은 1.0f이고, 5.0f이라는 숫자를 택한 이유는 마지막 값 1.0f 을 5.0f 과 곱하면 5.0f 가 되기 때문입니다. 5.0f는 화면의 맨 가장자리 값입니다. 별이 화면 밖으로 밀려나면 안되기 때문에 5.0f 는 적당한 값입니다. 화면 깊숙히 줌을 해 주면 5.0f보다 더 큰 값을 넣어도 되겠지만, (원근법을 쓰기 때문에) 별의 크기는 훨씬 작아질 것입니다.

확인하실 것은 각각의 별들의 색상이 0부터 255사이의 난수로 정해진다는 점입니다. 색상이 0.0f 에서 1.0f로 정의되는데 왜 이렇게 큰 값을 만드는지 궁금하실 것입니다. 이번에는 색상을 선택할 때 glColor4f() 함수 대신 glColor4ub() 함수를 쓸 것입니다. ub는 Unsigned Byte라는 뜻입니다. byte는 0부터 255사이의 값을 갖습니다. 이 프로그램에서는 바이트 단위를 쓰는 것이 부동소숫점 난수를 사용하는 것보다 훨씬 쉽습니다.


star[loop].dist=(float(loop)/num)*5.0f;    // 거리 계산
star[loop].r=rand()%256;    // 빨간색 난수
star[loop].g=rand()%256;    // 녹색 난수
star[loop].b=rand()%256;    // 파란색 난수
}
return TRUE;
}


크기 조절 함수는 동일하고, 이제 그리기 함수로 넘어가겠습니다. Lesson 1의 코드에서 DrawGLScene()함수를 지우시고 밑에 있는 코드를 복사해 넣어 주십시오. 어차피 Lesson 1 의 DrawGLScene() 함수는 두 줄짜리이기 때문에 별로 지울 것도 없을 것입니다.


int DrawGLScene(GLvoid)
{
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glBindTexture(GL_TEXTURE_2D, texture[0]);

for (loop=0; loop<num; loop++)
{
glLoadIdentity();
glTranslatef(0.0f,0.0f,zoom);
glRotatef(tilt,1.0f,0.0f,0.0f);


이제 별을 움직여 봅시다. 별은 가운데에서부터 시작합니다. 첫 번째 할 일은 y축을 중심으로 씬을 회전시키는 일입니다. 만일 90도를 회전하면 x축은 더 이상 왼쪽 오른쪽을 가리키지 않고 화면 안쪽과 바깥쪽을 가리키게 됩니다. 이해를 돕기 위해 예를 들겠습니다. 방 한 가운데에 있다고 생각해 보세요. 왼쪽 벽에는 -x라고 써 있고 앞에는 ­z, 오른쪽에는 +x, 뒤에는 +z라고 써 있습니다. 이제 사람은 가만히 있고 방이 오른쪽으로 90도 회전하면 이제 바로 앞의 벽에는 -z라고 써 있지 않고 -x라고 써 있습니다. ­z는 오른쪽, +z는 왼쪽, -x는 앞에, +x는 뒤에 써 있을 것입니다. 그렇죠? 씬을 회전하게 되면 x평면과 z평면의 방향이 바뀌게 됩니다.

두 번째 줄은 씬을 x축의 양수 방향으로 움직입니다. 보통은 양수의 x값은 화면 오른쪽으로 움직이는 것이었지만, 지금은 y축으로 회전을 한 이후이기 때문에 +x는 다른 방향이 됩니다. 만약 180도 회전을 하면 오른쪽이 아니라 왼쪽 방향으로 움직일 것입니다. 따라서 x 평면의 양수 방향으로 전진하게 되면 오른쪽, 왼쪽, 앞 뒤, 모두 가능하게 됩니다.



glRotatef(star[loop].angle,0.0f,1.0f,0.0f);
glTranslatef(star[loop].dist,0.0f,0.0f);


이제 복잡한 코드가 등장합니다. 별은 사실 납작한 텍스쳐입니다. 만약 평평한 사각형을 화면 가운데에 그리고 텍스쳐를 입힌다면 문제는 없습니다. 정면이 우리를 향하게 되기 때문이죠. 그러나 만약 이것을 y축을 중심으로 90도 돌리게 되면 텍스쳐의 오른쪽과 왼쪽이 화면에 보이게 되고, 우리가 볼 수 있는 것은 가느다란 줄 하나 뿐입니다. 얼마나 회전을 하건 어떤 각도에서 바라보건 이 별은 항상 화면을 향하여 정면이 되어야 합니다.

이렇게 하려면 별을 그리기 직전에 회전한 만큼 반대 방향으로 돌려주기만 하면 됩니다. 반대로 돌려서 상쇄시키는 것이죠. 위에서 우리는 먼저 보는 시각만큼 각도를 주었고 별의 현재 각도만큼 회전시켰습니다. 반대로 해 준다면 별의 각도만큼 반대로 되돌려 줍니다. 각도에 음수를 구해서 이용해서 그만큼 회전시키면 됩니다. 만약 별을 10도 각도로 회전시켰다면 반대로 -10도만큼 회전하면 별은 화면을 향해 정면을 바라보게 됩니다. 아래의 코드 첫 번째 줄이 y축으로 되돌려 회전을 상쇄시켜주는 코드입니다. 그 다음에는 x축에 가해진 화면의 각도를 상쇄시켜야 합니다. 이렇게 하기 위해서 -tilt만큼 기울여줍니다. y축, x축 회전이 끝나면 별은 완전히 화면에 정면으로 보이게 됩니다.


        glRotatef(-star[loop].angle,0.0f,1.0f,0.0f);   // 현재 별의 각도 상쇄
        glRotatef(-tilt,1.0f,0.0f,0.0f);    // 화면 기울여짐 상쇄


만약 twinkle변수의 값이 TRUE라면 회전하지 않는 별을 화면에 그립니다. 다른 색상을 얻기 위해서 우리는 별의 갯수(num)을 취해서 현재 별의 숫자(loop)를 빼고, loop값이 0부터 시작하므로 1을 더 빼 줍니다. 만일 그 결과가 10이라면 별 번호 10번의 색상을 이용합니다. 이렇게 하면 모든 별이 다른 색상을 갖게 됩니다. 좋은 방법은 아니지만 꽤 효과적입니다. 마지막 값은 alpha입니다. 이 값이 작으면 작을 수록 별은 어두운 색이 됩니다.

만일 twinkle이 활성화되면 각각의 별은 두 번 그려집니다. 컴퓨터 기종에 따라 프로그램 속도가 많이 느려질 것입니다. 이렇게 하면 두 별의 색상이 서로 섞여서 아주 멋있는 색상이 만들어집니다. 그리고 이 별은 회전하지 않기 때문에 마치 animate 하는 것처럼 보입니다. (뭔 말인지 모르겠으면 일단 한 번 보시라니깐요)

주의해서 보실 것은, 텍스쳐에 색상을 첨가하는 것이 얼마나 쉬운가입니다. 흑백 텍스쳐라도 그리기 전에 어떤 색깔이라도 선택할 수 있습니다. 또 하나, 우리는 색상을 지정할 때 부동소숫점 대신 바이트 단위를 썼다는 점입니다. alpha값도 역시 바이트를 사용했습니다.


        if (twinkle)    // 별이 반짝인다면
        {
            // 바이트 단위로 색상을 지정
            glColor4ub(star[(num-loop)-1].r,star[(num-loop)-1].g,star[(num-loop)-1].b,255);
            glBegin(GL_QUADS);    // 텍스쳐 사각형을 그린다
                glTexCoord2f(0.0f, 0.0f); glVertex3f(-1.0f,-1.0f, 0.0f);
                glTexCoord2f(1.0f, 0.0f); glVertex3f( 1.0f,-1.0f, 0.0f);
                glTexCoord2f(1.0f, 1.0f); glVertex3f( 1.0f, 1.0f, 0.0f);
                glTexCoord2f(0.0f, 1.0f); glVertex3f(-1.0f, 1.0f, 0.0f);
            glEnd();    // 텍스쳐 사각형 그리기 끝
        }


이제 원래 별을 그립니다. 이 별은 매번 그려지게 되고 z축을 중심으로 회전하게 됩니다.


        glRotatef(spin,0.0f,0.0f,1.0f);    // 별을 z축 중심으로 회전
        // 바이트 단위로 색상 지정
        glColor4ub(star[loop].r,star[loop].g,star[loop].b,255);
        glBegin(GL_QUADS);    // 텍스쳐 사각형을 그리기 시작
            glTexCoord2f(0.0f, 0.0f); glVertex3f(-1.0f,-1.0f, 0.0f);
            glTexCoord2f(1.0f, 0.0f); glVertex3f( 1.0f,-1.0f, 0.0f);
            glTexCoord2f(1.0f, 1.0f); glVertex3f( 1.0f, 1.0f, 0.0f);
            glTexCoord2f(0.0f, 1.0f); glVertex3f(-1.0f, 1.0f, 0.0f);
        glEnd();    // 텍스쳐 사각형 그리기 끝


이제 움직임을 구현하는 부분입니다. spin값을 증가시켜서 별들을 회전시킵니다. 그리고 각 별의 각도를 변경하는데, 그 값은 loop/num 만큼 증가하게 됩니다. 이렇게 하면 가운데에서 멀리 떨어진 별일수록 더 빨리 회전하게 되고, 가까이 있는 별일수록 느리게 회전하게 됩니다. 마지막으로 화면 중앙으로부터 떨어져 있는 거리를 줄여나갑니다. 이렇게 하면 마치 화면 중앙으로 별들이 빨려들어가는 것처럼 보이게 됩니다.

  
        spin+=0.01f;    // 별들을 회전시킨다
        star[loop].angle+=float(loop)/num;    // 별의 각도를 변경
        star[loop].dist-=0.01f;    // 별의 거리를 변경


이제 별들이 화면 중앙에 도달했는지를 검사합니다. 만약 별이 화면 중앙에 다다르면 새로운 색상을 지정하고 가운데에서 5 유닛 떨어진 곳으로 이동시켜서 새로운 별이 화면 가운데로 여행을 시작하게 만듭니다.


        if (star[loop].dist<0.0f)    // 별이 가운데에 다다랐는가
        {
            star[loop].dist+=5.0f;    // 화면에서 5유닛 거리를 벌린다
            star[loop].r=rand()%256;    // 새로운 빨간색 지정
            star[loop].g=rand()%256;    // 새로운 녹색 지정
            star[loop].b=rand()%256;    // 새로운 파란색 지정
        }
    }
    return TRUE;
}


이제 키보드가 눌렸는지를 검사하는 코드를 첨가하니다. WinMain()함수 밑으로 가서 SwapBuffers(hDC)가 있는 곳을 보십시오. 그 바로 밑에 키보드 입력 코드를 첨가합니다.

이 코드는 키보드 T가 눌렸는지를 검사해서 눌려졌고 계속 누른 상태가 아니라면 그 다음을 실행합니다. 만약 twinkle이 FALSE였다면 TRUE로 바꾸고, TRUE였다면 FALSE로 바꿉니다. 키보드 T가 눌리면 tp는 TRUE가 되어서 키보드를 계속 누르고 있다고 해서 똑같은 루틴이 계속 반복되는 것을 방지합니다.

  
        if (keys['T'] && !tp)    // T 가 눌렸고 tp 가 FALSE 라면
        {
            tp=TRUE;    // 그렇다면 tp는 TRUE
            twinkle=!twinkle;   // twinkle 변수의 상태 변경
        }


아래 코드는 키보드 T가 떨어졌는지 검사해서 tp를 FALSE로 만듭니다. tp가 FALSE이기 때문에 키보드 T를 누르고 있어도 아무런 일도 일어나지 않게 만드는 이 루틴이 참 중요합니다.


        if (!keys['T'])    // T 가 떨어졌나
        {
            tp=FALSE;    // tp 를 FALSE 로
        }


다음 코드는 화살표 키 위, 아래 방향과 page up, page down키를 검사합니다.
  

        if (keys[VK_UP])    // 화살표키 위
        {
            tilt-=0.5f;    // 화면을 위로 기울인다
        }

        if (keys[VK_DOWN])    // 화살표키 아래
        {
            tilt+=0.5f;    // 화면을 아래로 기울인다
        }

        if (keys[VK_PRIOR])    // Page Up
        {
            zoom-=0.2f;    // 축소
        }

        if (keys[VK_NEXT])    // Page Down
        {
            zoom+=0.2f;    // 확대
        }