W3C HTML5 KIG-HTML5 Game Performance Issue

W3C HTML5 KIG-HTML5 Game Performance Issue

• 1.
  HTML5 Game PerformanceIssues 2012.2.16, 동국대 멀티미디어공학과 이창환
• 2.
  게임 개발의 요소  게임루프  자바스크립트, WebCL  이미지  Image tag, CSS, canvas, SVG, WebGL  사운드 재생  Audio tag, web audio  사용자 입력  Key, Gamepad, etc.
• 3.
  게임 그래픽  윈도  모바일  웹?
• 4.
  게임 그래픽 –윈도  Windows GDI  WinG  Windows Direct-X http://blogs.msdn.com/b/directx/archive/2009/09/29/co mparing-direct2d-and-gdi.aspx
• 5.
  게임 그래픽 –모바일 (iOS)  2D Graphics Primitives  Quartz 2D  Core Animations  OpenGL ES  In 2D & 3D Games  For API compatibility with other devices and platform
• 6.
  게임 그래픽 –웹  Image tag  CSS  SVG  Canvas  WebGL
• 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.
  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.
  성능 비교  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.
  성능 비교:테스트 방법  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 we're measuring raw vertex-filling speed.
• 11.
  성능 비교:Canvas 2Drenderer
• 12.
  성능 비교:WebGL renderer
• 13.
  성능비교:C++/DirectX renderer
• 14.
  성능비교:결론  “Hardware accelerated 2D canvases are fast, but WebGL is still way faster.”