iOS OpenGL | ES 튜토리얼 9편

iOS OpenGL|ES 튜토리얼 9편에서는 종횡비를 다루겠습니다. 8편 강좌에서 결과 화면의 폴리곤 모양이 세로가 길게 나와 실제 이미지보다 늘어져서 나왔는데요. 그것은 뷰포트의 종횡비와 좌표계의 종횡비가 안 맞아서 생긴 결과입니다.

 

우리는 뷰포트를 설정할 때, 아이폰의 전체화면을 사용하기 위해서 가로 320, 세로 480으로 설정했습니다. 이 때 뷰포트의 종횡비는 1:1.5입니다. 1.5는 480.0/320.0 해서 나온 수치입니다. 그런데 직교절두체를 설정할 때, X축의 범위를 0.0에서 1.0으로 설정했고 Y축의 범위도 0.0에서 1.0으로 설정했습니다. 종횡비를 맞춘다면 Y축의 범위를 0.0에서 1.5로 해야하는 것이 맞겠지요.

1:1 종횡비

1:1.5 종횡비

 

위의 오른쪽 그림은 아이폰 화면 크기의 종횡비를 적용해 좌-하단을 원점으로 설정하고 X축의 범위를 [0, 1.0] 으로 하고 Y축의 범위를 [0, 1.5]로 설정한 것입니다.  이 튜토리얼에서 직교좌표계의 원점을 화면 중심에 두지 않는 것은 cocos2d 나 코어그래픽스와 같이 좌표계를 맞추기 위해서 입니다.

 

cocos2d를 써보신 분들은 cocos2d에서는 스프라이트의 위치를 잡을 때, 포인트 단위로 좌표를 설정한다는 것을 아실 것입니다. 화면 정중앙에 스프라이트를 놓고 싶다면 스프라이트의 앵커포인트가 (0.5, 0.5)일 때 스프라이트의 x 좌표는 160,  y 좌표는 240 이렇게 말입니다. 그러면 화면 중앙에 스프라이트가 그려지죠.

 

이것은 내부에서 좌표계의 변환이 일어나기 때문입니다. (160, 240)이 아이폰 화면의 포인트 좌표계이면 이것을 OpenGL|ES 좌표계로 변경합니다. 우리가 했던 것처럼 직교투영이고 좌-하단에 원점이 있고 X축의 범위가 [0.0, 1.0] 이고 Y축의 범위가 [0.0, 1.5]이면 단순히 포인트좌표계의 각 축의 최대값으로 각 좌표값을 나누어주면 우리가 만든 직교투영 OpenGL|ES좌표가 나옵니다. 그리고 종횡비가 1:1이 아니고 1:1.5 이므로 각 축 좌표에 종횡비를 곱해줍니다.

1. 160.0 / 320.0 = 0.5  (x좌표)
2. 240.0 / 480.0 = 0.5  (y좌표)
3. 0.5   * 1.0   = 0.5  (종횡비가 적용된 X좌표)
4. 0.5   * 1.5   = 0.75 (종횡비가 적용된 Y좌표)

 

위처럼 (160, 240) 이 종횡비가 적용되어 (0.5, 0.75)로 변환되는 것을 확인할 수 있습니다. 그러면 스프라이트가 화면 중앙에 나올 것입니다.

 

이번 튜토리얼부터 직교투영의 좌표계는 종횡비를 적용하여 X축의 범위는 [0.0, 1.0] 으로 설정하고 Y축의 범위는 [0.0, 1.5] 가 되도록 수정하겠습니다. 아래처럼 절두체를 설정하는 코드를 변경합니다.

1. -(void)setupView
   {
       ...
       //: 직교투영으로 설정한다.
       //: 종횡비를 맞춘다
       glOrthof(0.0f, 1.0f, 0.0f, 1.5f, -1.0f, 1.0f);
       ...
   }

 

화면 중앙에 8편 예제의 결과가 나오도록 폴리곤의 좌표를 수정해 보겠습니다.

1. GLfloat verticesForGL_TRIANGLE_STRIP[] = {
       0.2, 1.05, 0.0,          //v1
       1.0, 0.0, 0.0, 1.0,      //R
       0.0, 1.0,                //UV1
      
       0.2, 0.45, 0.0,          //v2
       0.0, 1.0, 0.0, 1.0,      //G
       0.0, 0.0,                //UV2
      
       0.8, 1.05, 0.0,          //v3
       0.0, 0.0, 1.0, 1.0,      //B
       1.0, 1.0,                //UV3
      
       0.8, 0.45, 0.0,          //v4
       1.0, 1.0, 0.0, 1.0,      //Y
       1.0, 0.0,                //UV4
   };

 

이제 컴파일하고 실행하면 아래와 같이 텍스춰와 색상이 적용된 정사각형 폴리곤이 그려진 화면을 얻을 수 있습니다.

Tutorial09.zip

이 글은 스프링노트에서 작성되었습니다.