webGL 조사

webGL 정의

webGL(Web Graphics Library)

• 3D 를 렌더링하기 위한 모든 처리를 클라이언트의 GPU를 사용하여 수행하는 Javascript API.
  
  
• OpenGL ES 2.0을 기반으로 브라우저 엔진에 내장된 HTML5 Canvas 요소위에 그려짐.
  
  
• 애플리케이션이 CPU에 로드되고 코드에서 계산 집약적인 부분(compute-intensive)을 발견할때마다 해당 부분은 GPU 에서 로드되고 실행되는 방식.

---

webGL 기반 3D 라이브러리 채택

webGL을 기반으로하는 웹 3D 라이브러리는 두가지가 대표적.

1. Babylon.js

   • HTML5를 통한 real-time 3D 엔진

   • 사실적 이미지 중점

   • 복잡한 3D 애플리케이션, 특히 복잡한 게임 및 물리 시물레이션 적합

   • 웹 기반 VR/AR 적용 가능

   • TypeScript 로 되어 있어 안정성 높음

   • 비교적 배우기 어려움, 커뮤니티 작음

2. Three.js (채택)

   • javascript 라이브러리

   • 애니메이션 중점(추상적)

   • 데이터 시각화, 그래픽 애니메이션 적합

   • 웹 기반 VR/AR 적용 가능

   • 비교적 배우기 쉬움, 커뮤니티 활발, 국내외 채용시장에서 더 많이 차지

---

Unity -> Three.js

three.js 모델 input 파일확장자: FPX or glTF

FPX

Export FPX in Unity

Loaders-fbx in JS

glTF

Needle Engine – Getting Started. Unity → three.js