Nagarry's Blog

지난번 포스트에서 시작하는 의미로 화면Clear외엔 아무런 것도 하지 않는 WebGL Canvas를 만들어 보았다.

이번 포스팅에서 부터는 WebGL 기초지식부터 조금씩 알아보겠다.

1. Drawing Buffers 3가지

웹지엘은 Color, Depth, Stencil의 3가지 버퍼를 가지고 있다.

 - Color Buffer에는 색상과 투명도 정보가 담기고,

 - Depth Buffer에는 각 픽셀의 앞뒤를 나타내는 심도 정보가 담긴다.(뒷쪽 픽셀은 앞쪽 픽셀에 가려서 안보여야 정상아니겠는가)

 - Stencil Buffer에는 랜더링 영역의 경계정보가 담긴다.(안보이는 물체를 굳이 랜더링할 필요는 없지않은가)

이렇게 3가지 Buffer정보를 통해 어떤 픽셀이 어떤색을 띄는지, 얼마나 투명한지, 어떤부분이 보이거나 가려지는지,

어떤 픽셀을 랜더링할지를 결정할 수가 있는 것이다.

2. Vertex Data

많은 곳에서 Vertex를 굳이 우리말 풀어쓴게 정점인 듯 하다.

정점? 뭔가 와닿지 않는 말이다. 좌표라는 표현이 더 이해하기 쉬운 듯 하고, 솔직히 Vertex라는 용어 그대로 쓰고싶다.

Vertex Data 처리와 관련해서 Canvas 2D와 WebGL은 엄청난 차이가 존재한다.

Canvas 2D에서는 좌표의 위치와 색상들, 그러니까 Vertex Data들을 직접 Canvas Context 에 구현할 수 있었는데,

WebGL은 그렇지 않다. Vertex Data는 Vertex Buffer Object(VBO)를 생성해서 쉐이더라는 외부 프로그램으로 보내야 한다.

그러니까 Canvas 2D는 도화지에 직접 붓으로 물감을 찍어발라 그림을 그릴 수 있었는데,

WebGL에서는 도화지에 직접 손을 댈 수 없고, 그래픽카드(GPU)에 처리를 맡기는 것이다.

3. Primitive Types 7가지

WebGL에서는 7가지 기본 Vertex 타입을 제공한다.

- POINTS : 위쪽 1번째 그림. 말 그대로 점이다. 점 한개짜리 vertex

 - LINES : 위쪽 2번째 그림. 시작점과 끝점, 2개의 점을 가진 vertex이다. 꺽인선은 이어진게 아니라 두 LINES간에 한 POINTS좌표가 일치한거 뿐이다.

 - LINE_STRIP : 하나의 LINE을 시작으로 끝점이 계속 연결되는 vertex

 - LINE_LOOP : LINE_STRIP과 비슷히지만, 마지막 끝점이 시작점과 연결되는 vertex

 - TRIANGLES :  점 3개로 이루어진 vertex, 나비모양은 TRIANGLE 2개의 점 하나가 겹친거 뿐이다.

 - TRIANGLE_STRIP : TRIANGLE 모듬인데, 마지막 2개의 점이 다음 TRIANGLE 좌표로 사용된다.

 - TRIANGLE_FAN : TRIANGLE_STRIP과 마찬가지로 TRIANGLE 모듬인데, 모든 TRIANGLES들이 하나의 점을 공유한다.

4. Attributes and Uniforms

WebGL은 Canvas 2D와는 달리 Vertex를 직접 Canvas에 그릴수 없고, 쉐이더 프로그램에 맡겨야 한다고 했다.

그래서 Vertex에는 쉐이더로 넘겨주게되는 Attribute를 갖고 있다.

그렇지만 외부 프로그램인 쉐이더는 Attribute를 받아도 그게 뭔지 모른다.

따라서 그걸 해석할 수 있게 Uniforms을 전달해 주는 것이다.

지난 포스팅에서 HTML5 표준으로 잡힌 Canvas를 이용해서 2D 비행기게임을 만들어봤는데,

Canvas를 이용하면 생각보다 훨씬 쉽게 2D게임을 구현할 수 있었다.

이번 포스팅부터는 HTML5 Canvas위에서 3D구현을 공부할 건데, 역시나 간단한 게임개발을 목표로 진행해보겠다.

WebGL은 이름에서 알수있듯이 OpenGL과 관련이 있는 녀석인데,

2007년 출시된 OpenGL EmbadedSystem(ES) 2.0을 기반으로 나온 웹용 그래픽API이다.

OpenGL은 MS의 Direct3D와 비슷한 역활을 하는 표준 그래픽스 API로써

지금이야 DirectX가 Windows와 콘솔용 3D개발을 상당히 잠식했지만, 2000년대 초까지만 하더라도 OpenGL도 꽤나 많이 사용 되었다.

OpenGL을 익힌적 있는 개발자라면 쉽게 WebGL을 시작할 수 있지만,

내가 2000년대 초반 잠시 공부했던 OpenGL은  1.0버젼이라....

현재의 OpenGL과는 모습도 많이 다르고, 무엇보다 기억도 나지 않는다.

따라서 아주 기초부터 차근차근 할 것이다.

Javascript는 따로 공부해본적도 없고,

WebGL은 처음 접하기 때문에 둘다 시작하는 입장에서 쉽게 쉽게 가보겠다.

우선 아주 기초적인 WebGL을 해보겠다.

HTML5 Canvas 3D를 지원하는 브라우저를 쓰고 있다면 아래의 초록 Canvas영역이 보일 것이다.

Sorry, Your browser doesn't support HTML5 CANVAS