[WebGL] Lesson 5 - Three.js 소개

Written by Geol Choi | Feb. 10, 2014

이번 글에서는 WebGL의 대표적인 프레임워크인 Three.js의 대해 알아보도록 하겠습니다.

Three.js 기원 및 역사

• Browser 플러그인 등 별도의 설치없이 WebGL 기반 JavaScript를 이용하여 구현하는 GPU가속 3D 애니메이션 엔진

• 2010년 4월 Ricardo Cabello가 처음으로 릴리즈

• 본 라이브러의 시초는 2000년 초반으로 거슬러 올라가게 되는데 최초의 코드는 ActionScript로 개발되었으며 2009년에 JavaScript로 포팅함

• WebGL의 출현에 따라 Paul Brunt는 Three.js에 쉽게 렌더러를 추가할 수 있었음

• Cabello는 API 설계, CanvasRenderer, SVGRenderer를 추가하였으며, 본 프로젝트에 다양한 기여자의 작업을 통합함

• 두번째 기여자는 Branislav Ulicny이며 자신의 사이트에 무수한 WebGL 데모를 포스팅함

Three.js의 특징

• 렌더러: Canvas, SVG, WebGL 렌더

• 효과: 애너글리프, parallax barrier

• 씬: 런타임에서 오브젝트 추가/제거, 포그

• 카메라: perspective/orthographic, 카메라컨트롤: 트랙볼, FPS(First Person Shooter), 패스 등

• 애니메이션: 포워드 키네매틱, 인버스 키네매틱, 몰핑, 키프레임

• 조명: ambient/point/directional/spot, 그림자: caster 및 receiver

• 재질: Lambert/Phong/Smooth Shading/Texture

• 오브젝트: 메쉬/파티클/스프라이트/라인/리본/본 등

• 지오메트리: plane/cube/sphere/torus/3D text 등, 모디파이어: lathe/extrude/tube

• 데이터 로더: 바이너리/이미지/JSON/씬

• 유틸리티: 3D 수학 세트 제공

• 익스포트&임포트: Three.JS 호환 JSON 파일(Blender/openCTM/FBX/Max/OBJ)

• 디버깅: Stats.js, WebGL inspector: Three.js Inspector

• 지원 브라우저: Chrome/Firefox/Safari/IE11/Opera

• 라이센스 형태: MIT license