WebGL - (5) 사각형 그리기

앞서 삼각형을 그릴 때의 vertex 와 index 는 아래와 같았습니다.

------

var vertices = [ -1.0, -1.0, 0,
                    1.0, -1.0, 0,
                    0, 1.0, 0
                        ];
var indices = [ 0, 1, 2 ];

------

삼각형의 3 꼭지점 좌표와 삼각형을 이루는 꼭지점 3개의 인덱스.

-1.0, -1.0, 0 -> 0번
1.0, -1.0, 0 -> 1번
0, 1.0, 0 ->2번

삼각형은 0번, 1번, 2번으로 이루어 진다고 알려주는 index.

var indices = [ 0, 1, 2 ];

그릴때는 indices 에서 3개씩 꺼집어 내서 삼각형을 그리는 거죠.

그럼, 사각형은 어떻게 그릴 수 있을까요?

위의 4개의 점(0,1,2,3) 으로 이루어진 사각형은 (0,1,2)로 이루어진 삼각형 하나와 (0,2,3)으로 이루어진 삼각형을 합치면 되겠습니다.

앞서 작업했던 것 중에... vertices 와 indices 를 아래와 같이 수정해서 한 번 봅시다.

-----

var vertices = [ -1.0, -1.0, 0,
                    1.0, -1.0, 0,
                    1.0, 1.0, 0,
                    -1.0, 1.0, 0
                        ];
var indices = [ 0, 1, 2, 0, 2, 3 ];

-----

vertex 정보와 index 정보를 수정했더니 아래와 같이 나타나는군요.

흠...이건 삼각형 두개지 사각형이 아니군요. ㅋㅋ

모든 것은 삼각형으로 구성된다~~~~~~

마지막 줄에 drawElements() 함수에 인자로 들어가는 gl.LINE_LOOP 를 바꿔봅시다.

gl.drawElements(gl.TRIANGLE_STRIP, indices.length, gl.UNSIGNED_SHORT,0);

or

gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0);

이제 두개의 삼각형이 같은 색상으로 칠해져서 사각형으로 보입니다.

다음엔 drawElements() 함수의 인자에 대해서 살펴봐야겠군요.