Matti Dahlbom / Qvik Lead Architect

WEBGL IN NATIVE APPLICATIONS

PIZZA & BEER | 15.12.2016

@QVIK

JAVASCRIPT API FOR RENDERING INTERACTIVE

2D/3D GRAPHICS

@QVIK

BUT.. WHY

@QVIK

USES FOR 3D GRAPHICS INMOBILE APPLICATIONS

‣ Augmented Reality‣ Games & VR‣ 3D visualizations (physics, chemistry, ..)‣ 3D UIs‣ Maps & simulations

@QVIK

SOME MANDATORY YET TOTALLY RANDOM AND ONLY SLIGHTLY RELATED IMAGES

@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);

@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 );

@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

1 2 3

@QVIK

WHY SHOULD I USE WEBGL?

CROSS-PLATFORMTruly write once, run almost anywhere. All you need is a

browser/webview.

EASE OF DEVELOPMENTDevelop & test in desktop

browser, deploy on mobile.

GOOD ENOUGHPerformance and supported

feature set almost on par with native OpenGL ES.

1 2 3 4

@QVIK

WHY SHOULD I (POSSIBLY) NOT USE WEBGL?

IT’S JAVASCRIPTBut get over it.

Javascript shall inherit the Earth.

PERFORMANCEEspecially loading

times are slower than with native

alternatives. Harder to control memory consumption.

“NEW” TECHWebGL support is still

quite new tech, in mobile browsers.

Feature support may vary.

IPR VULNERABLECome up with a clever

way to protect your bundled JS sources!

@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

@QVIK

BORING SLIDES DONE, IT’S DEMO TIME!

FINALLY!

THANK YOUqvik.fi