웹 기반 하이퍼포먼스 그래픽 처리 - 문경두

1. 웹 기반의 하이 퍼포먼스 그래픽 처리 문경두 Daum Communication

2. Web is not a document anymore

6. Web Based Graphic •Canvas • WebGL • CSS 3D

7. Canvas • HTML5 2D 그래픽 API

12. `requestAnimationFrame` 로 Animation 을 만들자. • 애니메이션의 표현은 짧은 시간에 화면을 지웠다 다시 그리는 방식 • setInterval 을 쓰거나 재귀 적 호출방식을 쓰지만 이는 비효율적

15. Pre render 를 이용하자.

19. Float 연산은 피하라 텍스트

20. Float 연산은 피하라 텍스트 Math.round 혹은 bitwise 연산

21. Float 연산은 피하라 텍스트 Math.round 혹은 bitwise 연산

22. 복잡한 장면을 구성할때는 여러장의 canvas를 사용하라

26. WebGL

27. WebGL WebGL API(JS) Browser OpenGL의 JS binding OpenGL API Hardware(GPU)

28. GPU를 이용한다?

29. 한 화면은 수백만개의 pixel로 구성. pixel들을 얼마나 빠르게 보여주느냐가 관건 http://glge.org/demos/cardemo/

32. 한 pixel을 찍기 위한 많은 연산

33. CPU 연산?

34. CPU 연산?

35. CPU 연산?

36. GPU pipeline

37. Shading Language (GLSL) •GPU를 컨트롤할 수 있는 언어 • OpenGL의 GLSL은 C like syntax

38. WebGL은 Shading Language와 GL API의 조합

39. •Shader에서는 분기문을 가급적 줄이자 • Main메모리 <-> GPU 메모리간의 이동 수를 줄이자. • GC 처리 • 쌩 API쓰지 말고 라이브러리 갖다 쓰 자. • GLGE, PhiloGL, Three.js 등의 라이브러 리가 있다.

40. WebGL • IE를 제외한 브라우져에서 지원(IE는 지원할까?) • Android Mobile FireFox(Fennec)에서 지원 http://maps.google.com/

41. IE9은 canvas 도 하드웨 어 가속이 된다던데?

42. IE9은 canvas 도 하드웨 어 가속이 된다던데? iOS의 Safari, Chrome, IE9+ 에서 canvas도 하드웨어 가속

43. CSS3 3D Transform

44. CSS3 3D Transform http://www.webkit.org/blog-ﬁles/3d-transforms/morphing-cubes.html

45. CSS3 3D Transform http://www.webkit.org/blog-ﬁles/3d-transforms/morphing-cubes.html

50. CSS 3D • 좀더 웹 개발자 친화적임. • 개발자의 CSS3D 코드로 렌더링은 브라 우져가 하드웨어 API를 사용 • PC Chrome, Safari, Firefox, IE10+ 지원 • iOS Safari, Android ICS 지원 • 하드웨어 가속 지원 http://www.adobe.com/devnet/html5/articles/css- shaders.html

51. 감사합니다.

웹 기반 하이퍼포먼스 그래픽 처리 - 문경두

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (8)

Semelhante a 웹 기반 하이퍼포먼스 그래픽 처리 - 문경두

Semelhante a 웹 기반 하이퍼포먼스 그래픽 처리 - 문경두 (20)

Último

Último (6)

웹 기반 하이퍼포먼스 그래픽 처리 - 문경두

Notas do Editor