W3C HTML5 KIG-HTML5 Game Performance Issue

1,865 views

Published on

HTML5 KIG-HTML5 Game Performance Issue

Published in: Technology, Art & Photos
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,865
On SlideShare
0
From Embeds
0
Number of Embeds
651
Actions
Shares
0
Downloads
1
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

W3C HTML5 KIG-HTML5 Game Performance Issue

  1. 1. HTML5 Game Performance Issues 2012.2.16, 동국대 멀티미디어공학과 이창환
  2. 2. 게임 개발의 요소 게임루프  자바스크립트, WebCL 이미지  Image tag, CSS, canvas, SVG, WebGL 사운드 재생  Audio tag, web audio 사용자 입력  Key, Gamepad, etc.
  3. 3. 게임 그래픽 윈도 모바일 웹?
  4. 4. 게임 그래픽 – 윈도 Windows GDI WinG Windows Direct-X http://blogs.msdn.com/b/directx/archive/2009/09/29/co mparing-direct2d-and-gdi.aspx
  5. 5. 게임 그래픽 – 모바일 (iOS) 2D Graphics Primitives  Quartz 2D  Core Animations OpenGL ES  In 2D & 3D Games  For API compatibility with other devices and platform
  6. 6. 게임 그래픽 – 웹 Image tag CSS SVG Canvas WebGL
  7. 7. 캔버스 HTML Canvas 2D Context (http://dev.w3.org/html5/2dcontext/)  The canvas state  Transformations  Compositing  Colors and styles  Line styles  Shadows  Simple shapes (rectangles)  Complex shapes (paths)  Text  Images  Pixel manipulation  Drawing model
  8. 8. WebGL “WebGL is a cross-platform, royalty-free web standard for a low-level 3D graphics API based on OpenGL ES 2.0, exposed through the HTML5 Canvas element as Document Object Model interfaces.”, from WebGL - OpenGL ES 2.0 for the Web ( http://www.khronos.org/webgl/) Hardware Related API Glue API Layers
  9. 9. 성능 비교 HTML5 2D Gaming Performance Analysis  http://www.scirra.com/blog/58/html5-2d-gaming- performance-analysis  2011.11.18 발표  Canvas Renderer  WebGL Renderer  C++/DirectX renderer Scirra  Construct2: HTML Based Game Engine
  10. 10. 성능 비교:테스트 방법 Use a simple blue square sprite Create many on-screen as possible until the framerate drops to 30fps. Minimises the effect of the typical per-frame calculations Ensures were measuring raw vertex-filling speed.
  11. 11. 성능 비교:Canvas 2D renderer
  12. 12. 성능 비교:WebGL renderer
  13. 13. 성능비교:C++/DirectX renderer
  14. 14. 성능비교:결론 “Hardware accelerated 2D canvases are fast, but WebGL is still way faster.”

×