Embed Size (px)
DESCRIPTION
아직 기존 프론트엔드 기술로 된 웹에 머물러 계시나요? 매번 더 강력한 GPU를 내장하고 있는 PC, 모바일 기기 출시소식을 듣지만, 하드웨어 발전을 잘 활용하고 있기는커녕 더욱 고도화되는 요구사항 앞에 기존 웹페이지 랜더링 기술들은 한계에 봉착되어 있는 상황입니다. 기존 중심적인 그래픽 처리 방법인 DOM의 렌더링 한계를 극복하기 위해 WebGL을 활용하는 방안을 살펴봅니다. 과연 현재의 브라우저 환경이 WebGL을 적용하기에 적합한지 실제 조사자료를 통해 검증해보고, 기존의 프론트엔드 기술이 해소하기 어려웠던 부분을 Web GL로 극복하기 위해 진행했던 시행착오와 오픈소스 WebGL프레임워크를 개발하면서 알게된 여러 가지 경험을 나누는 자리를 갖고자 합니다. 본 세션은 이를 통해서 DOM 프로세싱으로 기존의 프론트엔드 개발에 한계에 봉착한 개발자들에게 새로운 프론트엔드 패러다임으로 안내하는 길잡이가 될거라 생각합니다.
Citation preview
이준호과장 / NHN Technology Services백선기대리 / MIDAS IT ONLINE
지금까지상상한web 표현의한계를넘자WebGL
1. Why2. What3. Where4. Now
5. How
CONTENTS
Why왜WebGL인가…
픽셀표현 성능<픽셀표현자유도
성능
GPU가속비중이높아야한다
GPU가속이되기는하는데
픽셀단위표현문제
픽셀전처리CPU의존도가높다
복잡도에따른성능이슈
DOM CANVAS2D SVG
이걸가속이라봐야하나..
DOM SVG CANVAS 2D
Video Video Video
WebGL웹지엘은뭐야?
OpenGL ES 2.0기반3차원그래픽을사용하기위한프로그래밍인터페이스
초고속화면렌더링!브라우저기반 GPU제어
While(i--){// 픽셀처리
}
WebGL을통한
렌더부하분산
Application Performance
Now..
IE11Safari (Mac )
http://www.koreahtml5.kr/jsp/infoSquare/browserUseStatsKor.jsp?type_code_LIST=USST0002&os_code=all&search_type=D&search_date=201406
85.9% +
Where어디서쓸까..
Game
BIG DATA 시각화
UI Interface
HOW어떻게하나..
화면출력
Fragment Shader
Vertex Shader
Data(Vertex Buffer)
WebGL API
Hello Triangle!!!
를사용하기위한초기화을사용하기위한모든준비의끝
에서실행되는프로그램코드
생성
추가자료 - 학습사이트
Beginning WebGLhttp://www.beginningwebgl.com Learning WebGL
http://learningwebgl.com/blog/?page_id=1217
추가자료– Framework List
Khronoshttp://www.khronos.org/webgl/wiki/User_Contributions
추가자료– Framework List
bsWebGLhttp://projectbs.github.io/bsWebGL/
ThreeJShttp://threejs.org/
Q&A
THANK YOU
