생각보다 쉬운 webGL : 개념

사용자경험을 중요하게 생각할수록 웹에 더 다이내믹한 인터랙션을 표현하고 싶은 욕심이 생겼고 자연스럽게 WebGL에 호기심이 생겼습니다. WebGL관련 MDN문서에서는 3D 그래픽에 관련된 수학적 이해를 기반으로 읽어야 한다라며 겁을 줘서 두려운데(당연하게도 겁을 주지 않았다.) 작시성반이라고 일단 시작하고 보면 생각보다 쉬울 거라며 스스로를 다독이며 공부를 시작했습니다.

WebGL 

WebGL은 웹상에서 별도의 플러그인없이  2D/3D 그래픽을 렌더링 하기 위한 low level js API입니다. 종종 3D 라이브러리로 여겨지는데 *레스터화 엔진이라고 합니다. webGL은 브라우저 엔진에 내장된 HTML5 Canvas 요소 위에서 그려지며, 다음과 같은 좌표시스템 이해가 필요합니다. 

 

*3D 라이브러리 vs 래스터화

3D 라이브러리의 핵심은 3D 수학의 지식들이 내장되어 있어서 지식을 필요로 하지 않고, 라이브러리에 의존하여 처리할 수 있는 건데 WebGL은 고도의 3D 수학의 지식들을 요구하기 때문입니다.

WebGL 의 좌표 시스템

2D 화면에 사각형을 위치시킬 때 보통 <캔버스> 요소의 왼쪽 상단, 즉 점 (0,0)을 기준으로 도형 위치를 선정합니다. 좌우를 표시하는 x축은 오른쪽으로 갈 수록 숫자가 커지며, 상하를 표시하는 Y축은 아래로 갈 수록 숫자가 커집니다. 하지만 3D는 공간의 개념이 있습니다.  3D공간 가운데에 중심점(0,0,0)이 위치하며, 빨간색의 좌우 x축, 초록색의 상하y축이 있어 2D와 비슷하지만 위로 올라갈 수록 Y축값이 높아진다는 점, 깊이를 나타내는 파랑색Z 축이 있다는 차이점이 있습니다.

The 2D context

기초 용어

1. 정점 vertex : 도형의 꼭짓점. 

2. 인덱스 index : 정점을 식별하는 숫자 값. WebGL 의 3D 도형(mesh)를 그리는 데 사용.

3. 버퍼 buffer: 데이터를 가지고 있는 메모리 영역

4. 메쉬 mesh : 기본 다각형을 사용하여 그린 3D 개체 

 

출처

https://developer.mozilla.org/ko/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL

https://webglfundamentals.org/webgl/lessons/ko/webgl-fundamentals.html