[OpenGL Tutorial] Fog

사용자 삽입 이미지이장에서는 OpenGL에서 안개 효과를 얻는 것에 대해서 알아보자. OpenGL은 안개 효과를 얻기 위해 특별한 트릭을 사용해야하는 것이 아니라 안개 효과를 위한 API를 제공함으로써 쉽게 안개 효과를 얻을 수 있다.

OpenGL에서 제공하는 안개의 종류는 3가지가 있는데 사실 2가지로 구분된다. 하나는 GL_EXP와 GL_EXP2이고 다른 하나는 GL_LINEAR이다. GL_EXP와 GL_EXP2는 밀도라는 값을 이용해서 화면 전체에 지정된 안개의 색으로 마치 자욱한 연기 안에 물체들이 놓여있는 듯한 효과를 낸다. GL_LINEAR은 안개가 이제 막 시작되는 깊이와 안개가 완전하게 들이워져서 더 이상 물체가 보이지 않을 깊이를 지정함으로써 사실 가장 실제적인 안개 효과를 연출할 수 있다. 이론 설명은 여기서 마치기로 하고 코딩에 들어가보자. 6장에서 만든 코드에서부터 시작해보자.

먼저 안개에 대해서 설정해야 할 값들이 있다. initGL 함수의 구현부에 다음과 같은 배열을 선언한다.

위의 배열은 안개의 색상을 지정하데 쓰인다. 안개에도 빨간 안개, 노란 안개, 파란 안개 등 찢어진 안개만 빼고 어떤 색의 안개가 가능하다. ^^;;

다음으로 initGL에서 수정해야할 것이 있는데 이것은 배경색을 다르게 지정하는 것이다. 우리가 지금까지 배경색을 완전한 검정색으로 사용했음을 알고 있는가? 즉 다음의 코드가 이와같은 일을 처리했었다.

그러나 우리는 지금 안개를 보다 리얼하게 나타내기 위해서 배경색 조차도 안개의 색에 마춰야 한다. 다음과 같이 변경하자.

다음에 initGL에서 추가해야할 것은 안개에 대한 설정값들이다. 다음의 코드를 추가하자.

<1>번은 안개 모드를 GL_LINEAR로 해준다는 것이다. 앞에서 우리는 GL_LINEAR와 GL_EXP, GL_EXP2와 같은 안개의 종류가 있다는 것에 대해 알고 있다.

<2>번은 안개의 색을 지정하는 코드이다.

<3>번은 안개의 밀도를 지정하는 것인데 GL_EXP, GL_EXP2에서만 사용되는 값이다.

<4>번은 안개에 대한 연출에 있어서 가장 멋있게 보이도록 OpenGL에게 신경써 달라는 요청이다.

<5>번은 GL_LINEAR에서만 적용되는 것으로써 안개가 나타나기 시작하는 깊이(Z축 값) 거리를 설정하는 것이다.

<6>번은 GL_LINEAR에서만 적용되는 것으로써 안개가 완전이 들이워져서 물체가 더이상 보이지 않을 정도가 되는 깊이(Z축 값) 거리를 설정하는 것이다.

<7>번은 이렇게 설정한 값들을 이용해서 안개 효과를 사용하겠다는 것이다.

끝이다! ^^

이렇게 해주면 안개는 우리가 원하는 모습으로 나타날 것이다. 아래는 그 결과 화면이다.


사용자 삽입 이미지


어떤가? 차라리 안개라기 보다 눈속에 파뭍친 것 같지 않은가? ^^

안개 효과에 대해서 마치기 전에 이제 GL_EXP모드의 안개에 대해서 알아보자. GL_EXP 모드를 사용하기 위해서 변경해야 코드는 위에서 설펴본 코드중에 <1>번 코드의 두번재 인자를 GL_EXP로 변경하고 <3>번 코드에서 적절한 밀도값을 설정하기만 하면된다. 그렇게 설정했을때 나타나는 결과 화면은 다음과 같다.


사용자 삽입 이미지


마치 구름속에 파뭍힌 것 같다. 참고로 GL_EXP2는 GL_EXP보다 같은 밀도라고 해도 더 짙은 안개 효과를 나타낸다.

자!! 이렇게 해서 안개에 대한 것들을 마친다.

[OpenGL Tutorial] Sprite Processing by The Blending

이번장에서는 블랜딩의 또 다른 활용에 대해서 알아보겠는데 그 주제로 2차원 게임에서 많이 사용되는 스프라이트 처리 기법에 대한 예이다. 다음과 같은 그림이 준비되어있다. 첫째는 바탕화면 그림이고 둘째는 스프라이트가 될 이미지, 그리고 셋째는 스프라이트 이미지와 배경과의 조화를 위한 마스크 이미지이다.

사용자 삽입 이미지(배경 이미지)

사용자 삽입 이미지(스프라이트 이미지)

사용자 삽입 이미지(마스크 이미지)

위의 이미지가 섞여서 다음과 같은 스프라이트 효과를 얻는것이 이장의 목표이다.

사용자 삽입 이미지(최종 결과 화면)

실제로 우리는 OpenGL을 사용해서 위에서 주어진 스프라이트 이미지에서 위와 아래에 그려진 캐릭터의 두개의 동작을 주기적으로 반복해서 실제로 캐릭터가 움직이는 것 같은 모습으로 마무리를 짓겠다.


이장은 6장의 소스 코드에서 시작하도록 하겠다.


가장 먼저 해야할 것들은 배경 이미지와 스프라이트 이미지와 마스크 이미지를 읽어들어야 하는데 이것은 텍스쳐 맵핑 소스의 형태로 읽어들어야 한다. 먼어 이 세가지의 이미지를 읽어들이는 코드에 대해서 살펴보자. 이미지를 읽어들이는 코드는 InitGL 함수에서 해준다. InitGL 함수의 구현 부분을 완전이 새롭게 기술한다. 그 코드는 아래와 같다.

6장의 소스 코드에 크게 달라진 것은 없다. 바뀐 중요한 것은 맵핑 소스로 사용될 그림 파일이 3개로 늘어났다. 하지만 눈에 잘 보이지 않는 중요한 중요한 변화가 있는데 위 코드의 노란색 코드가 바로 그것이다. glTexParameteri의 세번째 인자가 GL_NEAREST로 변경되었다. GL_LINEAR로 사용할 경우 그림이 나쁘게 표현하면 누그러져(?)버리게 되는데 이점을 막기위함이다.

세개의 텍스쳐 맵핑 소스를 사용하는데 텍스쳐 맵핑 소스의 식별자로 사용되는 전역변수로 선언된 GLuint tex[3] 코드의 변수이름을 texture로 변경하기 바란다. 즉 다음과 같게 말이다.

자 이제 텍스쳐 맵핑 소스를 얻는 것은 이쯤에서 됬고 이제 실제로 스프라이트 효과를 나타내보자. 먼저 원리에 대해서 설명해 보겠다. 먼저 사각형의 폴리곤을 이용해서 그 사각형의 폴리곤에 배경 이미지로 텍스쳐 맵핑을 한다. 이렇게 하면 배경은 간단이 완성된다. 그리고 작은 사각형의 폴리곤을 이용해서 마스크 이미지로 텍스쳐 맵핑을 시키는데 이때 블랜딩 함수로 (GL_DST_COLOR, GL_ZERO)를 사용한다. 그리고 바로 다음에 또 다른 작은 사각형의 폴리곤을 이용해서 스프라이트 이미지로 텍스쳐 맵핑을 시키는데 이때의 블랜딩 함수로 (GL_ONE, GL_ONE)을 사용한다. 이때 두개의 작은 사각형의 폴리곤은 모두 똑 같은 크기이며 동일한 좌표에 위치해야만 한다. 이렇게 되면 스프라이트 효과를 간단이 얻을 수 있게 된다. 아래는 그 구현 코드이다.

코드 하나하나 짚어 보며 살펴보자.

<1> 번 코드를 살펴보기에 앞서 스프라이트 이미지에 대해서 다시 보자. 이 이미지는 두개의 캐릭터 모습을 담고 있다. 즉 위쪽과 아래쪽에 각각 모습을 담고 있는데 바로 <1>번 코드의 frame이 위쪽과 아래쪽 모습중에 어떤 모습을 보여 줄것인지를 나타내게 된다. 즉 frame가 0이면 아랫쪽 모습을 1이면 위쪽 모습을 보여주게 된다.

<2> 번 코드는 캐릭터가 앞으로 움직이는데 그때 사용되는 좌표 변수이다.

<3>, <4> 번 코드는 배경 이미지를 그리기에 앞서 Depth Buffer를 사용하게 하고 블랜딩 기능을 사용하지 않도록 한다. 배경이미지를 그릴때는 블랜딩 기능을 사용해서는 않된다. 배경은 배경 자체로 그대로 그려져야 하기때문이다.

<5> 번 코드는 배경을 그리기 위해 배경 텍스쳐 맵핑 소스를 사용하도록 지시한다.

<6> 번 코드들은 실제로 사각형 폴리곤을 그리고 배경 텍스쳐 맵핑을 사용해서 배경 그림을 화면상에 그려준다.

<7> 번 코드 부터는 드디어 스프라이트를 그려주는 코드의 시작인데 먼저 Depth Buffer의 사용을 막는다. 이 프로그램에서는 굳이 필요치 않으나 일반적으로 블랜딩 기능을 사용할때는 블랜딩 함수에 적용에 방해를 받지 않도록 Depth Buffer를 사용하지 않는다.

<8> 번 코드는 블랜딩 기능을 활성 시킨다.

<9> 번 코드는 블랜딩 함수를 지정하게 된는데 마스크 이미지에 대한 블랜딩 처리에 대한 함수는 반드시 (GL_DST_COLOR, GL_ZERO)이여야만 한다.

<10> 번 코드는 마스크 이미지의 텍스쳐 맵핑 소스를 사용하도록 지시한다.

<11> 번 코드들은 작은 사각형에 마스크 이미지의 텍스쳐 맵핑을 해주는 코드이다. frame 변수와 x변수의 사용을 눈여겨 보기 바란다. frame 변수를 사용해서 텍스쳐 좌표의 각각 정확히 위, 아래의 반만을 취한다는 것을 알수있다. 여기까지 코드가 도달하면 아래와 같은 결과까지 얻게 된다.

사용자 삽입 이미지

이제 위의 그림 위에 스프라이트 이미지를 올려 놓기만 하면 되는데 <12> 번 코드 이후가 바로 그런 일을 하게 된다.

<12> 번 코드는 스프라이트 이미지를 위한 블랜딩 함수를 지정하는데 (GL_ONE, GL_ONE)여야만 한다.

<13> 번 코드는 스프라이트 이미지의 텍스쳐 맵핑 소스를 사용하도록 지시한다.

<14> 번 코드들은 역시 <11>번 코드들과 동일한 일을 한다.

<15-1>과 <15-2>코드는 스프라이트 이미지에 담긴 두개의 동작을 서로 반복해서 보여주기 위해서 frame 변수를 항상 0이나 1의 값을 반복적으로 갖도록 해주는 코드이다.

<15-3>은 화면의 갱신이 너무 빨라서 0.2초간 지연을 시켜주는 임시적으로 사용한 함수이다.

<15-4>와 <15-5>의 코드는 스프라이트를 앞으로 움직이게 해주는 x변수를 증가시키는 코드들이다.

이상으로 이렇게 하면 실제 스프라이트의 최종적인 결과를 얻을 수 있다. 간단하지 않은가?? 이제 OpenGL을 이용해서 2차원 게임도 만들수 있다는 느낌을 받을수도 있을 것이다. 하지만 OpenGL을 이용해서 스프라이트를 구현할 경우 많은 장점이 있는데 그것은 스프라이트를 원하는 크기로 쉽게 키우거나 줄일수있다는 것이고 또한 원하는 각도로 회전이 가능하다는 점이다. 게다가 OpenGL의 하드웨어 가속 기능을 지원받을 경우 상상을 초월할 정도의 속도를 얻을 수 있을지도 모르겠다.