WebGL Introduction WebGL 소개

1. 쉽게 풀어보는
WebGL
projectBS 오명운

2. 웹지엘이냐 웹지Hell이냐..
Naver D2 발표

3. 목 차
• WebGL, 뭐냐?
• WebGL, 왜 써?
• WebGL, 어따 써?
• WebGL, 할 수 있나?
• WebGL, 맛만 보자
• WebGL, 뛰어들기

4. WebGL, 뭐냐?

5.  웹 브라우저에서
 아무런 플러그인 없이
 3D 그래픽을 그릴 수 있는
 사실 상의 표준 3D 그래픽 라이브러리
WebGL은 뭐다?

6.  W3C에서 관리하지 않음
• 당연히 W3C HTML5 스펙에 WebGL 없음
사실 상의 표준?

7. 사실 상의 표준?
사용률 기준 글로벌 브라우저
75% 거의 다 WebGL 지원

8. WebGL, 왜 써?

9.  GPU를 쓴다
• 그리는 성능 그 자체가 뛰어나다
• CPU에게 더 많은 여유를 준다
더 훨씬 나은 성능X

10. 그리는 성능 그 자체
CPU vs GPU

11. http://youtu.be/-P28LKWTzrI

12. 그리는 성능 그 자체
Canvas2D vs WebGL

13. CPU에게 더 많은 여유
 non-blocking
• JavaScript는
• WebGL API인 gl.draw***() 호출로
• 그리기를 GPU에 위임하고
• 그리기 결과 대기 없이
• 바로 다음 라인의 JavaScript 수행

14. WebGL, 어따 써?

15. 게임.. 너무 당연하다

16. Data Visualization
Big Data → Realtime Big Data

17. 이모 : 고모
=
엄마 : ??

18. Ent. Java Architecture : 제니퍼소프트
=
Realtime Big Data : Data Visualization
이모 : 고모
=
엄마 : 아빠

19. Data Visualization 사례

20. https://developers.google.com/events/io/sessions/327631300

21. 다양한 웹 기반 에디터
 Text Editor
 Graph Editor
 IDE
 Photoshop
 AfterEffect
 음악 편집
 뮤직 비디오
설치형 Native App보다
Cloud형 Web App이 좋은 점
유지 관리성 ↑
과금 편리성 ↑
불법 복제 손실 ↓

22. 외쿡 일자리

23. WebGL, 할 수 있나?

24. 환경은 이미 지원

25. 남은 건 공부
 GLSL(OpenGL Shading Language)
 수학(행렬, 삼각함수, …)

26. 쉽게 쓰기
 Three.js
 Screen.js
 PhiloGL
 GLGE
 … 많음
WebGL 계의
jQuery

27. WebGL, 맛만 보자

28. 큰 흐름

29. Hello Triangle
Canvas에서 WebGL Context 가져오기
Viewport 초기화
Shader 소스 컴파일, Shader Program 생성
삼각형 정보 생성
Shader Program에 삼각형 정보 전달 및 gl.draw***() 호출
Shader 소스 작성
요 세 놈은
소스가 늘 거의 같다
(딱히 할 게 없다)

30. WebGL, 뛰어들기

31. 사랑스런 우리말
 http://www.bswebgl.com/
 https://github.com/hanmomhanda/WebGL
-Study/
 https://developer.mozilla.org/ko/docs/W
eb/WebGL (목차만 우리말)

32. 울렁스런 외국말
 http://beginningwebgl.com/
 http://learningwebgl.com/blog/?page_id=
1217
 https://developer.mozilla.org/en-
US/docs/Web/WebGL

33. 볼거리
 http://www.chromeexperiments.com/webgl/
 https://developer.mozilla.org/ko/demos/ta
g/tech:webgl
 http://webglsamples.org/

34. 어쩌면 소모임을 만들지도..

35. Q&A는
시원하게 생략!!
감사합니다!