WebGL 기초( 3 - 삼각형 그리기 )

모든 준비가 완료되었으니 마지막으로 렌더링을 시작하겠습니다.

1
2
3

// 클리어 색상을 녹색으로 설정
gl.clearColor(0.1, 0.5, 0.1, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

초기화시 클리어 색상값(R,G,B,A)을 정하고 클리어하게되면
작성자가 정한 색으로 캔버스의 배경색이 칠해지게 됩니다.

그 후 WebGL이 앞서 만든 프로그램을 사용가능 하도록 해줍니다.

1
2
3

// 앞장에서 glProgram 이라는 프로그램을 만듬
// 프로그램 사용
gl.useProgram(glProgram);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// 참조한 위치 애트리뷰트를 사용할 것임을 알려줍니다.
gl.enableVertexAttribArray(positionAttributeLocation);

// 위치 버퍼를 바인드 합니다.
// 어느 버퍼를 사용할지 바인드 포인트로 지정하는 셈입니다.
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
 
// positionBuffer (ARRAY_BUFFER)에서 데이터를 가져오는
// 방법을 위치 애트리뷰트에게 알려 줌
var size = 2;          // 각 반복마다 2개씩 버퍼 데이타 참조
var type = gl.FLOAT;   // 32bit 부동 소수점 값
var normalize = false; // 데이터를 노말라이즈 하지 않는다.
var stride = 0;        // 0 = move forward size * sizeof(type) 각 반복마다 다음 위치
var offset = 0;        // 버퍼 시작 위치
gl.vertexAttribPointer(
  positionAttributeLocation,
  size,
  type,
  normalize,
  stride,
  offset
);

이제 마지막으로 WebGL 에게 만든 GLSL 프로그램을 실행하라고 요청을 해봅시다.

1
2
3
4
5

//GLSL 프로그램을 실행하도록 요청
var primitiveType = gl.TRIANGLES;
var offset = 0;
var count = 3;
gl.drawArrays(primitiveType, offset, count);

이제는 아래와 같이 두개의 삼각형이 보이게 될 것입니다.

마지막으로 drawArrays에 사용되는 원시타입에 대해 설명을 하자면

원시 타입(primitiveType)
원시 타입은 특정 그래픽 언어에서
모델을 개발할 때 사용하는 그래픽 구성 요소입니다.
웹지엘에는 7개의 원시타입이 있는데

좌측 상단부터 우측 하단 순서
POINTS, LINES, LINE_STRIP, LINE_LOOP,
TRIANGLES, TRIANGLE_STRIP, TRIANFLE_FAN 이 있습니다.

• POINTS
  POINTS는 한번에 하나씩 렌더링되는 정점(공간좌표)입니다.
  (총 정점 : 4개)

• LINES
  정점의 쌍을 따라 형태를 이룹니다.
  두개의 선이 같은 정점을 공유하고 있찌만, 각선은 별로도 정의 되어있습니다.
  (총 정점 : 6개)

• LINE_STRIP
  첫번째 선을 제외하고 각 선의 시작점이 이전 선의 끝점인 정점 컬렉션으로 이뤄집니다.
  LINE_STRIP에서는 여러 선에서 일부 정점을 재사용합니다.
  (총 정점 : 5개)

• LINE_LOOP
  첫번째 정점과 마지막 정점이 다시 연결돼 닫힌 고리를 형성한다는 점 을 제외하곤 LINE_STRIP과 유사합니다.
  (총 정점 : 5개)

• TRIANGLES
  삼각형당 정점 3개로 이뤄집니다.
  위 그림에서 삼각형 3개를 그리는데 삼각형별로 정점 3개씩 필요하며,
  LINES와 마찬가지로 공유된 정점은 우연히 겹쳐 있을 뿐입니다.
  (총 정점 : 9개)

• TRIANGLE_STRIP
  ABC, (BC)D, (CD)E, (DE)F, (EF)G, (FG)H, (GH)I 정점을 통해 형성됩니다.
  여러 삼각형에서 정점을 재사용 하여 삼각형을 렌더링 합니다.
  (총 정점 : 9개)

• TRIANFLE_FAN
  삼각형의 일부로 지정한 첫번쨰 정점을 사용합니다.
  첫번째 정점 A는 7번 사용 나머지 정점은 2번씩 사용됩니다.
  (총 정점 : 8개)