Pocket web gl sk

Preview:

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)

Recommended