HTML5 KIG-HTML5 Game Performance Issue

1. HTML5 Game Performance Issues
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 2D renderer

12. 성능 비교:WebGL renderer

13. 성능비교:C++/DirectX renderer

14. 성능비교:결론
 “Hardware accelerated 2D canvases are fast, but
WebGL is still way faster.”