쉽게 풀어보는 WebGL

projectBS 오명운

웹지엘이냐 웹지Hell이냐..

Naver D2 발표

목 차

• WebGL, 뭐냐?

• WebGL, 왜 써?

• WebGL, 어따 써?

• WebGL, 할 수 있나?

• WebGL, 맛만 보자

• WebGL, 뛰어들기

WebGL, 뭐냐?

웹 브라우저에서

아무런 플러그인 없이

3D 그래픽을 그릴 수 있는

사실 상의 표준 3D 그래픽 라이브러리

WebGL은 뭐다?

W3C에서 관리하지 않음 • 당연히 W3C HTML5 스펙에 WebGL 없음

사실 상의 표준?

사실 상의 표준?

사용률 기준 글로벌 브라우저 75% 거의 다 WebGL 지원

WebGL, 왜 써?

GPU를 쓴다 • 그리는 성능 그 자체가 뛰어나다

• CPU에게 더 많은 여유를 준다

더 훨씬 나은 성능 X

그리는 성능 그 자체

CPU vs GPU

http://youtu.be/-P28LKWTzrI

그리는 성능 그 자체

Canvas2D vs WebGL

CPU에게 더 많은 여유

non-blocking • JavaScript는

• WebGL API인 gl.draw***() 호출로

• 그리기를 GPU에 위임하고

• 그리기 결과 대기 없이 • 바로 다음 라인의 JavaScript 수행

WebGL, 어따 써?

게임.. 너무 당연하다

Data Visualization

Big Data → Realtime Big Data

이모 : 고모

=

엄마 : ??

Ent. Java Architecture : 제니퍼소프트

=

Realtime Big Data : Data Visualization

이모 : 고모

=

엄마 : 아빠

Data Visualization 사례

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

다양한 웹 기반 에디터 Text Editor

Graph Editor

IDE

Photoshop

AfterEffect

음악 편집

뮤직 비디오

설치형 Native App보다 Cloud형 Web App이 좋은 점

유지 관리성 ↑ 과금 편리성 ↑

불법 복제 손실 ↓

외쿡 일자리

WebGL, 할 수 있나?

환경은 이미 지원

남은 건 공부

GLSL(OpenGL Shading Language)

수학(행렬, 삼각함수, …)

쉽게 쓰기

Three.js

Screen.js

PhiloGL

GLGE … 많음

WebGL 계의 jQuery

WebGL, 맛만 보자

큰 흐름

Hello Triangle

Canvas에서 WebGL Context 가져오기

Viewport 초기화

Shader 소스 컴파일, Shader Program 생성

삼각형 정보 생성

Shader Program에 삼각형 정보 전달 및 gl.draw***() 호출

Shader 소스 작성

요 세 놈은 소스가 늘 거의 같다 (딱히 할 게 없다)

WebGL, 뛰어들기

사랑스런 우리말

http://www.bswebgl.com/

https://github.com/hanmomhanda/WebGL-Study/

https://developer.mozilla.org/ko/docs/Web/WebGL (목차만 우리말)

울렁스런 외국말

http://beginningwebgl.com/

http://learningwebgl.com/blog/?page_id=1217

https://developer.mozilla.org/en-US/docs/Web/WebGL

볼거리

http://www.chromeexperiments.com/webgl/

https://developer.mozilla.org/ko/demos/tag/tech:webgl

http://webglsamples.org/

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

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