Three.js로 시작하는
WebGL
Web 플랫폼 Lab | 문추근
오늘의 목표
- Three.js, tQuery 사용법
- 3차원 그래픽 프로그래밍 기초 학습
- WebGL에 대한 흥미와 관심 유발
- 장난감부터 서비스를 목표로
발표 순서
- WebGL
- Three.js
- tQuery
- WebGL 활용
WebGL
- 웹 브라우저에서 제공하는 3차원 그래픽 자바스크립트 API
- 플래시, 실버라이트, 유니티 등의 플러그인이 필요 없음
- GPU 가속을 사용한 높은 성능의 그래픽 구현
- OpenGL ES 2.0 기반
Renderer
- WebGLRenderer
- CanvasRenderer
- SVGRenderer
Scene
- 화면을 구성하는 기본 요소
- 여러 개의 모델과 조명으로 구성
Camera
- PerspectiveCamera
- OrthographicCamera
- CubeCamera
- CombinedCamera
Camera
var aspect = innerWidth / innerHeight;
camera = new THREE.PerspectiveCamera(50, aspect, 1, 10000);
camera.position.z = 1000;
Perspective vs Orthographic
Mesh
- 그물망
- 와이어프레임
- 도형과 질감을 적용한 물체
- Mesh = Geometry + Material
Geometry도형
- CircleGeometry
- ConvexGeometry
- CubeGeometry
- CylinderGeometry
- ExtrudeGeometry
- IcosahedronGeometry
- LatheGeometry
- OctahedronGeometry
- ParametricGeometry
- PlaneGeometry
- PolyhedronGeometry
- SphereGeometry
- TetrahedronGeometry
- TextGeometry
- TorusGeometry
- TorusKnotGeometry
- TubeGeometry
Animation
- 개체의 크기, 위치, 회전 변경
- RequestAnimation
RAF 브라우저 지원
데스크탑 |
10+ |
4+ |
10+ |
6+ |
모바일 |
6+ |
|
18+ |
|
Light
- AmbientLight
- DirectionalLight
- PointLight
- SpotLight
- HemisphereLight
DirectionalLight방향광
PointLight점광
SpotLight집중광
AmbientLight주변광
Hello, tQuery
var world = tQuery.createWorld().boilerplate().start();
var object = tQuery.createTorus().addTo(world);
오늘의 목표
- Three.js, tQuery 사용법
- 3차원 그래픽 프로그래밍 기초 학습
- WebGL에 대한 흥미와 관심 유발
- 장난감부터 서비스를 목표로
감사합니다.
Web 플랫폼 Lab PD / 문추근
fallroot@kthcorp.com
@fallroot