WebGL (Web Graphics Library)
웹상에서 2D 및 3D 그래픽을 렌더링하기 위한 로우 레벨 JavaScript API.
OpenGL ES2.0을 기반으로 브라우저 엔진에 내장된 HTML5 Canvas 요소 위에 그려진다.
❓ 렌더링(Rendering)이란, 컴퓨터 프로그램을 사용하여 모델에서 이미지를 생성하는 프로세스.
유형
- 소프트웨어 렌더링 : 모든 그래픽 계산 CPU 도움으로 수행
- 하드웨어 렌더링 : 모든 그래픽 계산 GPU에 의해 수행
방식
- 서버 사이드 렌더링(SSR) : 리소스가 충분한 전용 서버에서 수행
- 클라이언트 사이드 렌더링(CSR) : CPU에서 로컬로 수행
✔ WebGL은 CSR을 통해 3D 장면을 렌더링하고, 이미지를 얻는데 필요한 모든 처리는 클라이언트의 그래픽 하드웨어(GPU)를 사용해 로컬에서 수행하게 된다.
쉐이더(Shader)
- 컴퓨터 그래픽에서 최종적으로 화면에 출력할 픽셀의 위치와 색상을 계산하는 함수. 그래픽 처리 장치의 프로그래밍이 가능한 렌더링 파이프라인(=그래픽 파이프라인)을 프로그래밍하는 데 쓰인다.
✔ 쉐이더 종류
-
정점 쉐이더(vertex shader)
: 모든 정점(vertex)에서 호출되는 프로그램 코드이다. 정점 정보에 수학적인 연산을 해서 물체에 효과를 주는 쉐이더. -
프래그먼트 쉐이더(fragment shader=pixel shader)
: 모든 프래그먼트의 픽셀에서 실행되는 프로그램 코드이다. 개별 픽셀의 색상을 계산하고 채우기 위해 사용되는 쉐이더.
❗ 메쉬는 여러 삼각형으로 구성되는데, 각 삼각형의 표면을 프래그먼트라고 한다.
✔ 쉐이딩 언어 종류
: 쉐이더를 프로그래밍(컨트롤) 할 수 있는 간략하고 효율적인 언어. 세 언어 모두 C 기반이기 때문에 C언어와 문법이 유사하다.
- HLSL(High Level Shading Language) : DirectX에서 제작
- GLSL(OpenGL Shading Language) : OpenGL에서 제작
- CG(C for graphics) : NVIDIA에서 제작
렌더링 파이프라인(=그래픽스 파이프라인)
: 3차원으로 만들어진 모델을 2차원에 투영하는 렌더링 과정을 자세하게 표현한 구조.
▶ 위의 과정을 따르며 초록색 단계는 고정 기능, 주황색 단계는 사용자가 조작이 가능한(Programmable) 단계이다.
용어 정리
- 정점(vertex)
: 3차원 개체의 가장자리 결합을 형성하는 점(JS 배열 사용). 정점을 수동으로 저장하고 정점 버퍼를 사용하여 WebGL 렌더링 파이프라인에 전달한다. - 인덱스(index)
: 정점을 식별하는 숫자 값. 인덱스를 이용하여 WebGL의 메쉬를 그리는데 사용. - 버퍼(buffer)
: 데이터를 가지고 있는 WebGL의 메모리 영역. 버퍼 영역 안에는 다양한 버퍼가 존재한다. - 메쉬(mesh)
: 기본 다각형을 사용하여 그린 3D 개체. 2D 또는 3D 개체를 그리기 위해 WebGL API에서 drawArrays(mode)와 drawElements(mode) 메서드를 제공해준다(mode는 점, 선, 삼각형만 가능). 이 두가지 방법을 사용하여 점, 선, 삼각형으로 하나 이상의 다각형을 구성하며 기본 다각형을 사용하여 메쉬를 형성한다.
vertex/index buffer
↓
1. Input assembler (입력 어셈블러)
: 저장된 버퍼에서 원시 vertex 데이터를 수집하고 index 버퍼를 이용하여 vertex의 복제나 중복을 방지한다.
(CPU로부터 렌더링을 수행할 도형의 정점 정보를 정점 버퍼에 담아 전달받는다. GPU는 CPU의 자원에 직접 접근할 수 없으므로 CPU에서 버퍼라고 부르는 메모리에 필요한 정보를 담아 GPU로 전달해준다.)
2. Vertex shader
: 모든 vertex 위치를 model matrix에서 view matrix에서 projection matrix로 변환하는 작업을 한다. matrix 변환 과정에서 임의로 변형이 가능하다.
(기본적으로 도형들은 자신만의 좌표계인 Local Space의 좌표를 가지는데, 모든 물체들이 하나의 월드에 위치하도록 Local Space에서 World Space로 변환하고, 실제 플레이어가 바라보는 카메라가 중심이 되는 공간인 View Space로 변환해준다.)
3. Tessellation (테셀레이션) ▶생략가능
: 주어진 모델의 정점을 더 잘게 쪼개어 디테일하게 표현할 때 사용한다.
4. Geometry shader ▶생략가능
: 기본 도형에서 정점을 추가하거나 삭제하여 모델을 변경할 수 있는 쉐이더.
(Geometry Shader로 정점 정보를 조금 추가하여 표현할 수 있는 모델이라면 그만큼의 정점 정보를 빼고 저장할 수 있으니 디스크 용량과 그래픽 메모리 절약에 도움이 될 수도 있으며, 테셀레이션 등으로 추가된 정점들을 표현할 때도 사용된다.)
5. Rasterization (레스터화)
: 정점 정보를 완전히 결정한 3D 도형을 실제 픽셀 데이터로 변환해주는 단계이다. 정점 사이의 공간은 보간(Interpolation)을 통해 메워주어야 한다.
6. Fragment shader
: Pixel Shader라고도 부르며, 래스터화된 도형에 텍스쳐 매핑, 범프 매핑, 노말 매핑 등의 기법으로 텍스쳐를 입혀 색을 표현한다. 정점의 법선 벡터 정보를 통해 조명(Lighting) 처리도 이뤄진다.
7. Color blending
↓
Frame buffer
❗ OpenGL, WebGL 정리
- OpenGL은 Open Graphics Library의 약자로 C언어를 기반으로 하고있다. GPU를 이용한 하드웨어 가속화를 통해 렌더링을 하며 주로 데스크탑 어플리케이션 등에 사용된다.
- WebGL은 Web Graphics Library의 약자로 OpenGL ES 2에서 파생되었다. 자바스크립트를 사용하며 HTML Canvas에 2d, 3d를 표현해내는 역할을 한다.
▶ OpenGL에서 파생된 OpenGL ES가 있으며, OpenGL ES 2.0을 기반으로 WebGL이 만들어졌다. WebGL은 OpenGL의 모든 기능을 지원하지는 않는다.
📌 참고자료
WebGL이란 무엇인가?
[WebGL] WebGL #1 - 기초1
WebGL이란 무엇인가?(+ HTML Canvas, WebGL 기초)
webgl vs opengl
그래픽스 파이프라인
[Computer Graphics] 렌더링 파이프라인 요약
