OpenGL|ES 1.0 2D 튜토리얼 2/2 [출처] OpenGL|ES 1.0 2D 튜토리얼 2/2|작성자 똥라면

아이폰4랑 아이폰3는 해상도는 틀리나

다행히도 화면비율은 같습니다.

아이폰4 -> 640x960 비율 1:1.5 (세로모드일 경우)

아이폰3 -> 320x480 비율 1:1.5 (세로모드일 경우)

1.우선 정사각형으로 만들어 봅시다.

199라인에 있는 glOrthof()를 추가합니다.

gl.h를 보면 ( left, right, bottom, top, zNear, zFar ) 이렇게 6개의 파라메터를 넣으라 합니다.

저도 자세한건 모르니

현재 출력화면(다음부턴 viewport라 하겟슴)을 glOrthof()에 지정한 비율로 출력한다 라고 합시다.

결국 제대로된 정사각형을 출력하기 위해선 비율만 맞춰주면 됩니다.

여지껏 세로가 긴화면을 억지로 1:1의 비율로 출력됬으니 

이걸 1:1.5의 비율로 바꿔주기만 하면 됩니다.

3D공간은 원점이 가운데이고 상하좌우 ±1.0를 사용하여 전체싸이즈가 2.0이나

viewport는 +만써서 1.0의 싸이즈를 사용하니 

상하좌우 각각 ±1:1.5씩을 대입하여 전체싸이즈를 2배로 뿔려줍니다.

161라인의 setFramebuffer는 밑에서 설명.

2.EAGLView에서 viewport가 자동으로 설정됩니다.

디버그창에보이듯이 320x480으로 viewport를 설정되였습니다.

viewport는 여기서 설정됩니다를 위한것이기에 여기선 아무것도 안하고 패스합니다.

3.지대루 정사각형이 출력되어졌습니다.

4.위의 정사각형의 싸이즈는 둘다 1.0입니다.

좌표는 컬러풀이 (-0.5,-0.5)이고 검둠이고 (0,0)입니다.

이런식의 싸이즈와 좌표로는 원하는곳에 원하는 싸이즈의 사각형을 표시할 염두가 안납니다.

그래서 이걸 2D좌표와 2D싸이즈로 변활할 필요가 있습니다.

검둥이를 x160,y240 에 가로 80, 세로 120

컬러풀을 x0,y0 에 가로 240, 세로 360 으로 설정하면 이렇게 됩니다.

5.우선 사각형의 좌표와 싸이즈를 바꿔줍시다.

바꿔주는김에 사각형 그리는 순서도 알기쉽게 바꿔줍니다.

퀘변조로의 Z의 순서로.

179라인의 static const 삭제도 까먹으면 안됩니다.

6.이제 3D좌표를 2D좌표로 바꿔줍니다.

좌표X는 0.0 ~ 320.0  ------>  -1.0 ~ +1.0 으로 변환

좌표Y도 0.0 ~ 480.0  ------>  -1.5 ~ +1.5 으로 변환

-우선 2D좌표를 3D좌표로 바꿔줍니다.(좌표X의 경우)

2D좌표 / 320.0

2D좌표가 0.0 이면 0.0이 되고,

2D좌표가 320.0 이면 1.0이 됩니다.

(2D좌표는 +0.0 ~ +1.0이 되었습니다)

-이걸 2배로 늘려줍니다(2배라고는 하나 사실은 아까 설정한 좌우비율의 2배입니다)

0.0이면 0.0이 되고,

1.0이면 2.0이 됩니다.

(2D좌표는 +0.0 ~ +2.0이 되었습니다)

3D좌표의 -쪽으로 좌우비율의 반만큼 이동시켜줍니다.

0.0 이면 2D좌표 - 1.0 = -1.0이 되고,

2.0 이면 2D좌표 - 1.0 = +1.0이 됩니다.

(2D좌표는 -1.0 ~ +1.0이 되었습니다)

이걸 공식으로 하면

3DPosX = ( 2DPosX / 320.0f ) * ratioWidth - ( ratioWidth * 0.5f );

좌표Y도 이런식으로 바꿔주고 싶은데

OpenGL에서의 viewport좌표의 원점은 화면 왼쪽 밑에 존재하고

아이폰에서의 view좌표의 원점은 화면 왼쪽 위에에 존재하니

2배로 늘려줄때 곱하기 - 해줘서 부호를 반대로 만들어주고

위쪽이 + 가 되므로 상하비율의 반만큼 +쪽으로 이동시켜줍니다.

이걸 공식으로 하면

3DPosY = ( 2DPosY / 480.0f ) * -ratioHeight + ( ratioHeight * 0.5f );

이걸루 OpenGL에서 2D 사용의 기초가 끝났습니다.

샘플을 최대한 수정안하는 방향으로 했기에 실질적으로 사용할려면 이곳저곳 띁어 고쳐야 합니다.

잘못된 곳이 있으면 지적 부탁드립니다 ㅎ_ㅎ;

다음엔 텍스쳐를 붙혀볼랍니다.

[출처] OpenGL|ES 1.0 2D 튜토리얼 2/2|작성자 똥라면