WebGL in Native Applications
-
Upload
ida-maria-mannonen -
Category
Mobile
-
view
30 -
download
0
Transcript of WebGL in Native Applications
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