Embed Size (px)
DESCRIPTION
Pocket WebGL: What WebGL support on mobile means for HTML5 games with Chris Shankland presented on September 17 2014 at FITC's Web Unleashed Toronto 2014 Conference WebGL is an adaptation of the OpenGL ES specification for usage within the context of HTML5. This allows for unprecedented control over hardware directly from JavaScript and can provide a significant performance boost for essentially any graphics intensive application. HTML5 games on mobile have been very limited in what they can achieve in terms of visual fidelity and performance, unless some kind of native extension was used. These native extensions significantly reduce the flexibility of the applications, both from a distribution point of view and from a cross-platform point of view. These reasons are a large part of the choice to use HTML5 in the first place, and any hinderance of them drastically reduces the value of HTML5 as a mobile platform for games. WebGL provides a standardized mechanism to overcome many of the performance issues that had previously crippled mobile HTML5. In this session, Chris Shankland will be exploring how to get WebGL into your application, even if it’s just a 2D application. He will also explore some of the drawbacks that come with the additional control: mobile HTML5 games that use WebGL can be a double-edged sword. Additionally, he will give some examples of how this is the case and share some best practices. Finally, given that the field of 3D graphics and OpenGL is extensive, Chris will also share a number of resources for further learning and exploration. OBJECTIVE Understand what WebGL means for Mobile TARGET AUDIENCE Game developers with a focus on HTML5 related technologies ASSUMED AUDIENCE KNOWLEDGE Familiarity with JavaScript, HTML5 (what it is, what it isn’t), and a general understanding of what WebGL (or OpenGL) is. Any mobile development experience will be a big bonus, but not required. 5 THINGS LEARNED How to get WebGL running from scratch A sense of the significance of WebGL (performance comparison against 2D canvas) Differences across platforms to be aware of Common pitfalls Performance best practices
Citation preview
POCKET WEBGL
What is WebGL?Khronos
“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.”
Why do we want WebGL?
Platform shouldn’t hold back content
True portability with performance
Battery life
HELLO WEBGL
How do I WebGL?
CREATE A SHADER (1/3)
CREATE A SHADER (2/3)
CREATE A SHADER (3/3)
CREATE BUFFERS
CREATE TEXTURES
MATRIX STACK AND TRANSFORM (1/5)
MATRIX STACK AND TRANSFORM (2/5)
MATRIX STACK AND TRANSFORM (3/5)
MATRIX STACK AND TRANSFORM (4/5)
MATRIX STACK AND TRANSFORM (5/5)
DRAWIMAGE AND STROKERECT (1/5)
DRAWIMAGE AND STROKERECT (2/5)
DRAWIMAGE AND STROKERECT (3/5)
DRAWIMAGE AND STROKERECT (4/5)
DRAWIMAGE AND STROKERECT (5/5)
PROFILING
MAKE A DEMO SCENE, MAKE IT SLOW
DEVELOPER TOOLS
2D CANVAS CONTEXT
WEBGL CONTEXT
JS PROFILE
OPTIMIZE
DRAW IMAGE (1/3)
DRAW IMAGE (2/3)
DRAW IMAGE (3/3)
BUFFER RESIZE AND DRAW (1/2)
BUFFER RESIZE AND DRAW (2/2)
SINGLE DRAW ELEMENTS
MOVING TO MOBILE
OVERVIEW
Does it run WKWebView What’s different
Tile-basedDeferred rendering
TBDR
Hardware - PowerVR
What is the bottleneck
Mobile specific concerns
TBDR
Draw calls are buffered and tiled
Hardware hidden surface removal
0 overdraw (only opaque fragments)
Going deeper on mobileNative profiling
Mobile Profiling
Instruments
OpenGL ES Analyzer
Custom build an app
ResourcesResources
- OpenGL Insights (http://openglinsights.com/)- MDN (https://developer.mozilla.org/en-US/)- WebGL Spec (https://www.khronos.org/webgl/)- Your hardware vendor (http://www.imgtec.com/powervr/graphics.asp)- Your platform vendor (https://developer.apple.com/library/ios)- Learning WebGL (http://learningwebgl.com)
