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)