W3C HTML5 KIG-HTML5 Game Performance Issue

HTML5 Game Performance Issues 2012.2.16, 동국대 멀티미디어공학과 이창환

게임 개발의 요소 게임루프  자바스크립트, WebCL 이미지  Image tag, CSS, canvas, SVG, WebGL 사운드 재생  Audio tag, web audio 사용자 입력  Key, Gamepad, etc.

게임 그래픽 윈도 모바일 웹?

게임 그래픽 – 윈도 Windows GDI WinG Windows Direct-X http://blogs.msdn.com/b/directx/archive/2009/09/29/co mparing-direct2d-and-gdi.aspx

게임 그래픽 – 모바일 (iOS) 2D Graphics Primitives  Quartz 2D  Core Animations OpenGL ES  In 2D & 3D Games  For API compatibility with other devices and platform

게임 그래픽 – 웹 Image tag CSS SVG Canvas WebGL

캔버스 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

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

성능 비교 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

성능 비교:테스트 방법 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.

성능 비교:Canvas 2D renderer

성능 비교:WebGL renderer

성능비교:C++/DirectX renderer

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

W3C HTML5 KIG-HTML5 Game Performance Issue

by Changhwan Yi on Feb 15, 2012

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 502

Statistics

W3C HTML5 KIG-HTML5 Game Performance Issue Presentation Transcript

http://html5gamers.wordpress.com	500
http://localhost	2