The document discusses the use of WebGL in mobile applications at Qvik, highlighting its applicability in areas such as augmented reality, games, and 3D visualizations. It compares WebGL's low-level API with the high-level Three.js library, emphasizing the ease of development and cross-platform capabilities of WebGL. Additionally, it outlines the potential drawbacks of using WebGL, including performance issues and intellectual property concerns, while suggesting native alternatives like Unity3D and OpenGL.

1. Matti Dahlbom / Qvik
Lead Architect
WEBGL IN NATIVE
APPLICATIONS
PIZZA & BEER | 15.12.2016

2. @QVIK
JAVASCRIPT API FOR
RENDERING INTERACTIVE
2D/3D GRAPHICS

3. @QVIK
BUT.. WHY

4. @QVIK
USES FOR 3D GRAPHICS IN
MOBILE APPLICATIONS
‣ Augmented Reality
‣ Games & VR
‣ 3D visualizations (physics, chemistry, ..)
‣ 3D UIs
‣ Maps & simulations

5. @QVIK
SOME MANDATORY YET TOTALLY RANDOM
AND ONLY SLIGHTLY RELATED IMAGES

6. @QVIK
WEBGL API
Very low-level, aliased-on-OpenGL API:
gl.enable(gl.BLEND);
gl.blendFunc(gl.ONE, gl.ONE);
gl.disable(gl.CULL_FACE);
gl.depthMask(false);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices),
gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER,squareVertexPositionBuffer);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

7. @QVIK
ENTER THREE.JS
Very high-level, scene graph -based API:
var texture = new THREE.TextureLoader().load( 'textures/crate.gif' );
var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
var material = new THREE.MeshBasicMaterial( { map: texture } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

8. @QVIK
SO WHAT ELSE CAN YOU DO
IN JAVASCRIPT IN A WEBVIEW?
‣ Graphics - THREE.js
‣ Networking - Socket.IO
‣ Audio - Web Audio API
‣ Physics - CANNON.js
‣ UI - HTML/CSS

9. 1 2 3
@QVIK
WHY SHOULD I USE WEBGL?
CROSS-PLATFORM
Truly write once, run almost
anywhere. All you need is a
browser/webview.
EASE OF DEVELOPMENT
Develop & test in desktop
browser, deploy on mobile.
GOOD ENOUGH
Performance and supported
feature set almost on par
with native OpenGL ES.

10. 1 2 3 4
@QVIK
WHY SHOULD I (POSSIBLY) NOT USE WEBGL?
IT’S JAVASCRIPT
But get over it.
Javascript shall inherit
the Earth.
PERFORMANCE
Especially loading
times are slower than
with native
alternatives. Harder to
control memory
consumption.
“NEW” TECH
WebGL support is still
quite new tech, in
mobile browsers.
Feature support may
vary.
IPR VULNERABLE
Come up with a clever
way to protect your
bundled JS sources!

11. @QVIK
NATIVE ALTERNATIVES
‣ Unity3D - whole application
‣ Ogre3D - portable 3D engine with C++ APIs
‣ SceneKit on iOS - high-level proprietary API
‣ OpenGL - low-level, highly portable API

12. @QVIK
BORING SLIDES DONE, IT’S DEMO
TIME!
FINALLY!

13. THANK YOU
qvik.fi