1. 아꿈사 오전반 스터디
자유발표 : WebGL
2011. 10. 29.
2012. 10. 23.
전효성
itmentor@gmail.com

2. 이번 발표에서 다루는 것들
• WebGL 등장 배경
• WebGL로 할 수 있는 것들
• WebGL에 대한 소개
2

3. WebGL 등장 배경
• 컴퓨팅 파워의 증가, GPU의 활용
• 웹 상에서 3D 요구
3

4. Web 3D의 역사
• VRML / X3D
– 뷰어마다 보이는게 다름
– 망했어요
• Collada
– 최근 표준처럼 통용되는 3D모델 교환 형식
– XML기반, 느리다
• WebGL
– 최근 Khronos group에서 제정한 Web 3D를 지원
하기 위한 API
– 일부 웹 브라우저에서 사용이 가능하다.
4

5. Web 3D로 어떤 일들을 할 수 있나?
5

6. 6

7. Google Maps – MapsGL
7

8. Google:
WebGL Bookcase
8

9. PDF Viewer – CubicVR demo
9

10. Shader Toy
10

11. Google I/O 2011: Building Game Development
Tools with App Engine, GWT, and WebGL
11

12. Firefox plugin - Tilt
12

13. Google chrome web store
13

14. WebGL, 실체는 무엇인가?
14

15. OpenGL related eco-system
OpenGL
OpenCL
OpenGL ES
WebGL WebCL
(OpenGL ES 2.0)
Visualization Computation
15

16. 간단하게 말하면…
Web browser에서 javascript로 OpenGL
ES 2.0 API를 쓰게 하는 것
16

17. WebGL에 없는 것
• Math library
• High level graphics API
• Immediate mode
glBegin( GL_TRIANGLES );
glVertex3f( 0.0f, 0.0f, 0.0f );
glVertex3f( 1.0f, 0.0f, 0.0f );
glVertex3f( 1.0f, 1.0f, 1.0f );
glEnd();
17

18. 개발환경(IDE)
• 웹페이지 개발하는 IDE면 모든 OK
– Eclipse
– Titanium studio
18

19. 코드를 구경해 봅시다.
• WebGL 사이트
– http://learningwebgl.com/blog/?page_id=1217
• 한글 번역 사이트 :
– http://firejune.com/1669/
19

20. 웹에서 3D를 보여준다는 것은?
• 장점
– 새로운 사용자 경험 제공
– 빠른 성능
• 단점
– 컨텐츠 비용 증가
– 전력 소모 증가
– 웹개발 + 3D 개발 지식 필요
• 이슈사항
– 컨텐츠의 로딩 시간이 길다
20

21. 진입장벽을 낮추기 위한 노력들
• 라이브러리
– Three.js
– GLGE
– J3D
• Unity exporter
– 수 많은 WebGL기반 렌더링 라이브러리
– 심지어 물리 엔진도 JS기반으로 있음(JigLibJS)
• http://glge.org/demos/cardemo/
21

22. WebGL의 문제점
• 초기 로딩 속도 문제
• 보안 문제
• IE 미지원
• 안정성
• 완전하지 않은 모바일 브라우저 지원
– iOS 5.0부터 지원 (iAd에서만 지원)
– Android( 기본 브라우저에서 미지원 )
22

23. Web 3D를 위한 다른 기술
• Flash 11
• Silverlight / ActiveX
• PC시장 게임 엔진에서 export
– Unity Engine
– Cry engine
– Unreal engine
• Hybrid app
– Titanium opengl module
23

24. 결론
• 시간이 지나면 대부분에 웹브라우저에 장착 될 확률이 높
다.
• Apple iOS는 정책적으로 막아놓음.
• MS는 지원 계획 없음. 답이 없다.
• 당장은 사용하기 제한적이지만, 눈여겨보면 좋은 기술.
24