[WebGL] WebGL 개발 입문

WebGL 개발 입문 국내도서 저자 : 브라이언 댄칠라(Brian Danchilla) / 유윤선역 출판 : 길벗 2012.12.26 상세보기

정점 = vertex

chapter_01 씬 설정

03 WebGL 컴포넌트

드로잉 버퍼

종류: 색상 버퍼, 심도 버퍼, 스텐실 버퍼

버퍼는 읽고 쓸 수 있는 메모리 블록으로, 임시 데이터를 저장하는 공간이다.

색상 버퍼: 색상 정보를 보관하고 선택적으로 투명/불투명도에 해당하는 알파 값 저장

심도 버퍼: 픽셀의 심도(z값)에 대한 정보를 저장.

스텐실 버퍼: 렌더링하거나 렌더링 하지 않을 영역의 경계를 정하는데 사용. 

이미지의 한 영역을 렌더링하지 않도록 표시하는 것을 해당 영역을 마스크한다고 말한다.

마스크한 영역을 포함한 전체 이미지는 스텐실이라고 부른다.

원시타입

원시타입은 특정 그래픽 언어에서 모델을 개발할 때 사용하는 그래픽 구성 요소다.

웹지엘의 7개 원시 타입

POINTS: 점

LINES: 선 - 각 선은 별도로 정의(vertex을 공유해도 각각의 vertex 필요함)

LINE_STRIP: 이어진선

LINE_LOOP: 닫힌 고리

TRIANGLES: vertex 세개로 이루어짐, LINES와 마찬가지로 공유된 vertex이라도 각각 필요

TRIANGLE_STRP: 마지막 두개의 정점과 다음 정점을 사용해 삼각형 형성(모든 삼각형이 최소 한 변을 공유한 상태)

TRIANGLE_FAN: 삼각형의 일부로 지정한 첫 번째 정점을 사용.

vertex 데이터

웹지엘에서는 위치, 색상, 법선, 텍스처 좌표 같은 정점 어트리뷰트를 보관하는 저점 버퍼 객체(VBO)를 생성해야 한다.

그런 다음 vertex 버퍼를 처리할 수 있는 셰이더 프로그램으로 vertex 버퍼를 보내야 한다.

정점 버퍼 객체(VBO)

각 VBO는 vertext의 특정 어트리뷰트에 대한 데이터를 보관한다. 이 어트리뷰트는 위치, 색상, 법선 벡터, 텍스처 좌표 등이 될 수 있다.

버퍼생성

var myBuffer = gl.createBuffer();

버퍼 바인딩

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, myBuffer);




어트리뷰트 및 유니폼

vertex는 shader로 넘겨줄 수 있는 attribute를 갖고 있다. 

shader는 컴파일되는 외부 프로그램이므로 프로그램 내 모든 변수의 위치를 참조할 수 있어야 한다.