종횡비

이번 장에서는 종횡비를 다루겠습니다. 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로 해야하는 것이 맞겠지요.

위의 오른쪽 그림은 아이폰 화면 크기의 종횡비를 적용해 좌-하단을 원점으로 설정하고 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 이므로 각 축 좌표에 종횡비를 곱해줍니다.

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

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

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

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

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

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  
};

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