#DEVIEW 2014 아직 기존 프론트엔드 기술로 된 웹에 머물러 계시나요? 매번 더 강력한 GPU를 내장하고 있는 PC, 모바일 기기 출시소식을 듣지만, 하드웨어 발전을 잘 활용하고 있기는커녕 더욱 고도화되는 요구사항 앞에 기존 웹페이지 랜더링 기술들은 한계에 봉착되어 있는 상황입니다. 기존 중심적인 그래픽 처리 방법인 DOM의 렌더링 한계를 극복하기 위해 WebGL을 활용하는 방안을 살펴봅니다. 과연 현재의 브라우저 환경이 WebGL을 적용하기에 적합한지 실제 조사자료를 통해 검증해보고, 기존의 프론트엔드 기술이 해소하기 어려웠던 부분을 Web GL로 극복하기 위해 진행했던 시행착오와 오픈소스 WebGL프레임워크를 개발하면서 알게된 여러 가지 경험을 나누는 자리를 갖고자 합니다. 본 세션은 이를 통해서 DOM 프로세싱으로 기존의 프론트엔드 개발에 한계에 봉착한 개발자들에게 새로운 프론트엔드 패러다임으로 안내하는 길잡이가 될거라 생각합니다.

2. 이준호과장/ NHN Technology Services
백선기대리/ MIDAS IT ONLINE
지금까지상상한
web 표현의한계를넘자
WebGL

3. 1.Why
2.What
3.Where
4.Now
5.How
CONTENTS

4. Why
왜WebGL인가…

5. 픽셀표현
성능
<
픽셀표현자유도
성능
GPU가속비중이높아야한다

7. GPU가속이되기는하는데
픽셀단위
표현문제
픽셀전처리
CPU의존도가높다
복잡도에따른
성능이슈
DOM
CANVAS2D
SVG

8. 이걸가속이라봐야하나..
DOM
SVG
CANVAS 2D
Video
Video
Video

9. WebGL
웹지엘은뭐야?

10. OpenGL ES 2.0기반
3차원그래픽을사용하기위한프로그래밍인터페이스
초고속화면렌더링!
브라우저기반GPU제어

12. While(i--){
// 픽셀처리
}

14. WebGL을통한
렌더부하분산
Application Performance

16. Now..

17. IE11
Safari (Mac )

18. http://www.koreahtml5.kr/jsp/infoSquare/browserUseStatsKor.jsp?type_code_LIST=USST0002&os_code=all&search_type=D&search_date=201406
85.9% +

19. Where
어디서쓸까..

20. Game

21. BIG DATA 시각화

22. UI Interface

23. HOW
어떻게하나..

24. 화면출력
Fragment
Shader
Vertex
Shader
Data
(Vertex Buffer)
WebGLAPI

25. Hello Triangle!!!

26. 를사용하기위한초기화을사용하기위한모든준비의끝

28. 에서실행되는프로그램코드

29. 생성

34. 추가자료-학습사이트
Beginning WebGL
http://www.beginningwebgl.comLearning WebGL
http://learningwebgl.com/blog/?page_id=1217

35. 추가자료–Framework ListKhronoshttp://www.khronos.org/webgl/wiki/User_Contributions

36. 추가자료–Framework ListbsWebGL
http://projectbs.github.io/bsWebGL/ ThreeJS
http://threejs.org/

37. 추가자료–ShaderStudyShaderToy
https://www.shadertoy.com/

38. Q&A

39. THANK YOU