WebGL

 WebGL이란

Web Graphics Library의 약자로 Web상에서 2D 및 3D 그래픽을 렌더링하기 위한 로우 레벨 Javascript API를 말함.

OpenGL ES 2.0을 기반으로 브라우저 엔진에 내장된 HTML5 Canvas 요소 위에 그려짐.

 

Canvas는 처음부터 3D 그래픽을 렌더링하지는 못했음. 처음에는 일부 위젯과 애플 운영체제의 애플리케이션에서 2D 그래픽 렌더링을 위해 공개되었었음.

WebGL이 등장 이후부터 3D 게임이나 고급 3D 그래픽 애플리케이션을 만들 수 있음.

 

WebGL 장점

- 로열티 없이 누구나 사용 가능

- 렌더링 가속화를 지원하는 그래픽 하드웨어를 활용

- 별도의 플러그인이 필요 없으며, 웹 브라우저에 내장되어 실행

- OpenGL ES 2.0을 기반으로 하므로, 이미 OpenGL API에 대한 경험이 있다면 다루기 쉬움.

- Javascript 프로그래밍이 가능, WebGL이 Javascript의 기능을 상속받음

- Mobile 브라우저에서도 사용 가능하다.(모든 모바일 브라우저가 가능한 것은 아님)

 

렌더링(Rendering)

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

  - 소프트웨어 렌더링: 모든 그래픽 계산을 CPU의 도움으로 수행

  - 하드웨어 렌더링: 모든 그래픽 계산을 GPU(그래픽 처리 장치)에 의해 수행

 

WebGL2

- OpenGL ES 3.0을 기반으로 하고 있으며 멋진 새로운 기능들이 추가됨.

- But, 사파리에 대한 지원이 완벽하지 않음.

 

WebGL 기초 - 좌표 시스템

- 3D API가 아닌 저수준의 레스터 API

- X: 가로축

- Y: 세로축

- Z: 공간축

 

WebGL 기초 - 용어

- 정점(vertex): 3차원 개체의 가장자리의 결합을 형성하는 점, 자바스크립트 배열을 사용하여, 정점을 수동으로 저장하고 정점 버퍼를 사용하여 WebGL 렌더링 파이프 라인에 전달해야 한다.

- 인덱스(Index): 정점을 식별하는 숫자 값, WebGL의 메쉬(Mesh)를 그리는데 사용

- 버퍼(buffer): 버퍼는 데이터를 가지고 있는 WebGL의 메모리 영역, 이 버퍼 영역에는 다양한 버퍼가 존재

- 메쉬(mesh): 2D or 3D 개체를 그리기 위해 WebGL API에서 drawArrays(mode)와 drawElements(mode) 메서드를 제공, mode는 점, 선, 삼각형만 가능, 즉 기본 다각형을 사용하여 그린 3D 개체를 메쉬라 한다.

- 셰이더 프로그램(shader programs): WebGL을 GPU 가속 컴퓨팅을 사용하기 때문에 우리가 만든 메쉬 정보를 CPU에서 GPU로 전송해야되는 많은통신 오버 헤드가 발생. WebGL에서는 셰이더 프로그램을 사용하여 클라이언트 시스템에 그래픽 요소를 그리는데 필요한 모든 프로그램을 작성

- 정점 셰이더(vertex shader): 모든 정점에서 호출되는 프로그램 코드, 기하학을 한 위치에서 다른 위치로 변환하는데 사용. 정점 변환, 정상 변환 및 정규화, 텍스쳐 좌표 생성, 텍스쳐 좌표 변환, 조명, 색상 재료 적용등 가능

- 프래그먼트 셰이더(fragment shader): 메쉬는 여러 삼각형으로 구성되며 각 삼각형의 표면을 프래그먼트라 한다. 모든 프래그먼트의 픽셀에서 실행되는 코드이며 개별 픽셀의 색상을 계산하고 채우기 위해 사용한다.

 

참고자료

- https://code-masterjung.tistory.com/110