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)