
348 - 프로그레시브 웹 앱
12.3
WebGL을 사용한 실시간 그래픽스
한동안 고품질의 그래픽으로 인상깊은 게임이나 애플리케이션을 만들려면 네이
티브 앱을 사용하는 것이 유일한 방법이었습니다. 단순히 말해,
DOM
은 고급 실
시간 그래픽스 요구사항을 처리하도록 만들어진 것은 아니었습니다.
요즘은 여러 데스크톱 브라우저와 모바일 브라우저에서
WebGL
을 지원하고, 실
시간
GPU
가속 그래픽을 만들 수 있는 방법을 제공합니다
(
그림
12
-
3)
.
그림
12
-
3
WebGL
을 사용한 실시간
3D
렌더링
PC
네이티브 앱이나 콘솔 비디오 게임과 같은 고급 그래픽 프로그래밍은 고난이
도의 수학과 삼각법, 그리고 엄청난 집중력을 필요로 합니다. 카메라 시점과 조리
개 계산은 물론,
C
와 비슷한
GLSL
언어로 커스텀 셰이더를 코딩해야 한다는 사
실은
WebGL
를 쉽게 시작하지 못하게 합니다.
다행히도 많은 프로젝트가 자바스크립트 개발자를 위해 공평한 경쟁의 장을 제공
하여 고품질의
2D
,
3D
그래픽을 쉽고, 표현력 있고, 친숙하게 구현할 수 있도록
만들어 주었습니다.
그중 가장 인기있는 것은
three
.
js
(https
://
pwabook
.
com
/
threejs)
입니다.
2D
와
3D
장면을 쉽게 설정할 수 있고 카메라, 기하학, 매터리얼 등을 추가할 수 있습니다.