Web Graphics Library (WebGL) 기초

웹상에서 2D 및 3D 그래픽을 렌더링하기 위한 로우 레벨 Javascript API

 

• OpenGL ES 2.0을 기반으로 브라우저 엔진에 내장된 HTML5 Canvas 요소 위에 그려진다.
• 렌더링 가속화를 지원하는 그래픽 하드웨어(그래픽 카드 등)을 활용
• 별도의 플로그인이 필요 없으며, 웹 브라우저에 내장되어 실행된다.
• 자바스크립트는 자동 메모리 관리를 지원하기 때문에 메모리를 수동으로 할당할 필요도 없고 WebGL이 자바스크립트의 기능을 상속 받는다.

 

렌더링이란?

컴퓨터 프로그램을 사용하여 모델에서 이미지를 생성하는 프로세스

• 소프트웨어 렌더링 : 모든 그래픽 계산을 CPU 도움으로 수행
• 하드웨어 렌더링 : 모든 그래픽 계산을 GPU에 의해 수행

 

• 서버 사이드 렌더링 : 리소스가 충분한 전용 서버
• 클라이언트 사이드 렌더링 : CPU에서 로컬로 수행

→ Web GL은 클라이언트 사이드 렌더링을 3D를 렌더링하며, 이미지를 얻는데 필요한 모든 처리는 클라이언트의 GPU를 사용하여 로컬에서 수행하게 된다.

<canvas id="canvas" width="300" height="150"></canvas>

//...
<script>
	const canvas = document.getElementById('canvas');
	const ctx = canvas.getContext('experiment-webgl');
</script>

 

좌표 시스템

WebGL은 대부분 3D API가 아닌 저수준의 래스터 API다.

1. 정점 vertex
   • 3차원 개체의 가장자리 결합을 형성하는 점
   • 자바스크립트 배열을 사용
   • 수동으로 저장하여 정점 버퍼를 사용하여 WebGL 렌더링 파이프 라인에 전달
2. 인덱스 index
   • 정점을 식별하는 숫자값
   • WebGL의 메쉬를 그리는데 사용
3. 버퍼 buffer
   • 데이터를 가지고 있는 WebGL의 메모리 영역
   • 버퍼 영역에는 다양한 버퍼가 존재
4. 메쉬 mesh
   • 2D, 3D 개체를 그리기 위한 WebGL API에서 drawArrays()와 drawElements() 메서드 제공
     • 해당 메서드의 파라미터로는 점, 선, 삼각형(면)만 가능
     • 위의 메서드들을 사용하여 하나 이상의 다각형을 구성 → 기본 다각형으로 메쉬를 형성
   • 기본 다각형을 사용하여 그린 3D 개체가 즉 메쉬이다.
5. 셰이더 프로그램
   • WebGL을 GPU 가속 컴퓨팅을 사용하기 때문에 메쉬 정보를 CPU → GPU로 전송해야 되는 많은 통신 오버 헤드가 발생한다.
   • 이때 셰이더 프로그램을 사용하여 클라이언트 시스템에 그래픽 요소를 그리는데 필요한 모든 프로그램을 작성한다.
   • 즉 GPU용 프로그램이며 정점, 변형, 재질, 조명, 카메라가 상호작용하여 특정 이미지를 만드는 방법을 정확하게 정의한다.
   • 정점 셰이더와 프래그먼트 셰이더로 구분된다.

정점 셰이더	프래그먼트 셰이더
모든 정점에서 호출되는 프로그램 코드	메쉬는 여러 삼각형으로 구성되며 각 삼각형의 표면을 프래그먼트라고 한다.
기하학을 한 위치에서 다른 위치로 변환하는데 사용	모든 프래그먼트의 픽셀에서 실행되는 코드
자바스크립트로 작성된 Vertex Buttfer Object를 가리킨다.	개별 픽셀의 색상을 계산하고 채우기 위해 사용한다.
정점 변환, 정상 변환 및 정규화, 텍스처 좌표 생성, 텍스처 좌표 변환, 조명, 색상 재료 적용 등에 사용	보간된 값에 대한 연산, 텍스처 접근, 텍스처 적용, 안개, 색상 합계 등에 사용

 

 

3D 관련 라이브러리

three.js와 babylon.js 모두 webGL API를 쉽게 사용할 수 있는 인터페이스를 제공한다. 하지만 web 3D 그래픽 기술이 webGL에서 webGPU 로 옮겨가고 있는 시점에서 three.js 보다는 babylon.js를 사용하는 것이 장기적으로 기술을 사용하는 데 더 유리할 수 있음.

• webGL 실행 시 geometry, color, texture 버퍼 등 여러 상태가 stateful하게 동작하니 상태가 변경될 때마다 상태를 저장하고 GPU에 업데이트를 계속해줘야 한다.
• web animation, web audio 등 고비용의 네이티브 API를 사용하고, 상태를 변경할 때마다 webGL과 자바스크립트 사이에 불필요한 단계가 더 추가된다.
• webGL은 ALU에 개별적으로 접근하기 때문에 다른 ALU에 접근할 수 없지만 webGPU의 경우 shared memory를 통해서 다른 ALU에도 접근이 가능해 여러 연산에 대한 캐싱이 가능해진다.