our next stop: web-ar · our next stop: web-ar augmented reality for your mobile browser anastasiia...
Post on 23-Mar-2020
4 Views
Preview:
TRANSCRIPT
OUR NEXT STOP: WEB-ARAUGMENTED REALITY FOR YOUR MOBILE BROWSERANASTASIIA MIROSHNICHENKOWEB XR DEVELOPER AT SAINT ELMO‘S BERLIN
/ 2
REMEMBER WHENTHIS SEEMED LIKEA FAR AWAY FUTURE?
Source: Disney/LucasFilm
/ 3
THE FUTUREIS NOW.
Source: Microsoft
/ 4
WE CAME A LONG WAY.
/ 5
SENSORAMAMORTON HEILIG, 1962
/ 6
FIRST VR PATENTMORTON HEILIG, 1960
/ 7
FIRST VR HEAD MOUNTED DISPLAYIVAN SUTHERLAND, 1968
/ 8
Source: YouTube, Giulio Di Vico
/ 9
TODAY YOU HOLD THE FUTURE IN YOUR HAND.
/ 10
WITH MARKER MARKERLESS
Source: Saint Elmo‘s Berlin
/ 11
WHERE TO START? WHERE TO GO?
/ 12
/ 13
Source: webglsamples.org
ELECTRIC FLOWERWEBGL
/ 14
three.js
/ 15
/ 16
Source: webglsamples.org
RED CUBETHREE.JS
/ 17
<!DOCTYPE html><html><head>
<title>Our next stop: WebAR</title><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.js"></script>
</head><body>
<script>/* Our Javascript code will go here */
</script></body></html>
/ 18
<!DOCTYPE html><html><head>
<title>Our next stop: WebAR</title><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.js"></script>
</head><body>
<script>
</script></body></html>
/ 19
<!DOCTYPE html><html><head>
<title>Our next stop: WebAR</title><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.js"></script>
</head><body>
<script>var scene = new THREE.Scene();
</script></body></html>
/ 20
<!DOCTYPE html><html><head>
<title>Our next stop: WebAR</title><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.js"></script>
</head><body>
<script>var scene = new THREE.Scene();var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
</script></body></html>
/ 21
<!DOCTYPE html><html><head>
<title>Our next stop: WebAR</title><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.js"></script>
</head><body>
<script>var scene = new THREE.Scene();var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );
renderer.render( scene, camera );</script>
</body></html>
/ 22
<!DOCTYPE html><html><head>
<title>Our next stop: WebAR</title><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.js"></script>
</head><body>
<script>var scene = new THREE.Scene();var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );
renderer.render( scene, camera );</script>
</body></html>
/ 23
<!DOCTYPE html><html><head>
<title>Our next stop: WebAR</title><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.js"></script>
</head><body>
<script>var scene = new THREE.Scene();var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );
renderer.render( scene, camera );</script>
</body></html>
/ 24
<!DOCTYPE html><html><head>
<title>Our next stop: WebAR</title><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.js"></script>
</head><body>
<script>var scene = new THREE.Scene();var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );
renderer.render( scene, camera );</script>
</body></html>
/ 25
<!DOCTYPE html><html><head>
<title>Our next stop: WebAR</title><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.js"></script>
</head><body>
<script>var scene = new THREE.Scene();var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );
renderer.render( scene, camera );</script>
</body></html>
/ 26
<!DOCTYPE html><html><head>
<title>Our next stop: WebAR</title><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.js"></script>
</head><body>
<script>var scene = new THREE.Scene();var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );
renderer.render( scene, camera );</script>
</body></html>
/ 27
<!DOCTYPE html><html><head>
<title>Our next stop: WebAR</title><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.js"></script>
</head><body>
<script>var scene = new THREE.Scene();var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );
renderer.render( scene, camera );</script>
</body></html>
/ 28
<!DOCTYPE html><html><head>
<title>Our next stop: WebAR</title><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.js"></script>
</head><body>
<script>var scene = new THREE.Scene();var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );
renderer.render( scene, camera );</script>
</body></html>
/ 29
<!DOCTYPE html><html><head>
<title>Our next stop: WebAR</title><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.js"></script>
</head><body>
<script>var scene = new THREE.Scene();var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );
renderer.render( scene, camera );</script>
</body></html>
/ 30
<script>var scene = new THREE.Scene();var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );
renderer.render( scene, camera );</script>
/ 31
<script>var scene = new THREE.Scene();var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
renderer.render( scene, camera );</script>
/ 32
<script>var scene = new THREE.Scene();var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
renderer.render( scene, camera );</script>
/ 33
<script>var scene = new THREE.Scene();var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );var cube = new THREE.Mesh( geometry, material );
renderer.render( scene, camera );</script>
/ 34
<script>var scene = new THREE.Scene();var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );var cube = new THREE.Mesh( geometry, material );scene.add( cube );
renderer.render( scene, camera );</script>
/ 35
<script>var scene = new THREE.Scene();var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );var cube = new THREE.Mesh( geometry, material );scene.add( cube );
camera.position.z = 5;
renderer.render( scene, camera );</script>
/ 36
<script>var scene = new THREE.Scene();var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );var cube = new THREE.Mesh( geometry, material );scene.add( cube );
camera.position.z = 5;
renderer.render( scene, camera );</script>
/ 37
<script>var scene = new THREE.Scene();var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );var renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );var cube = new THREE.Mesh( geometry, material );scene.add( cube );camera.position.z = 5;
animate();</script>
/ 38
<script>var scene = new THREE.Scene();var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );var renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );var cube = new THREE.Mesh( geometry, material );scene.add( cube );camera.position.z = 5;
function animate() {requestAnimationFrame( animate );
cube.rotation.x += 0.01;cube.rotation.y += 0.01;
renderer.render( scene, camera );}animate();
</script>
/ 39
Source: webglsamples.org
RED CUBETHREE.JS
/ 40
/ 41
/ 42
<!DOCTYPE html><html><head>
<title>Our next stop: WebAR</title><script src="https://aframe.io/releases/0.9.1/aframe.min.js"></script>
</head><body>
<a-scene></a-scene></body></html>
/ 43
<!DOCTYPE html><html><head>
<title>Our next stop: WebAR</title><script src="https://aframe.io/releases/0.9.1/aframe.min.js"></script>
</head><body>
<a-scene><a-box></a-box>
</a-scene></body></html>
/ 44
<!DOCTYPE html><html><head>
<title>Our next stop: WebAR</title><script src="https://aframe.io/releases/0.9.1/aframe.min.js"></script>
</head><body>
<a-scene><a-box color="red"></a-box>
</a-scene></body></html>
/ 45
<!DOCTYPE html><html><head>
<title>Our next stop: WebAR</title><script src="https://aframe.io/releases/0.9.1/aframe.min.js"></script>
</head><body>
<a-scene><a-box color="red“ position="0 1.6 -3"></a-box>
</a-scene></body></html>
/ 46
<!DOCTYPE html><html><head>
<title>Our next stop: WebAR</title><script src="https://aframe.io/releases/0.9.1/aframe.min.js"></script>
</head><body>
<a-scene><a-box color="red“ position="0 1.6 -3“ rotation="0 45 45"></a-box>
</a-scene></body></html>
/ 47
<!DOCTYPE html><html><head>
<title>Our next stop: WebAR</title><script src="https://aframe.io/releases/0.9.1/aframe.min.js"></script>
</head><body>
<a-scene><a-box color="red“ position="0 1.6 -3“ rotation="0 45 45“
animation="property: rotation; to: 0 405 45; loop: true; dur: 5000"></a-box></a-scene>
</body></html>
/ 48
Source: webglsamples.org
RED CUBEA-FRAME
/ 49
WHERE TO GO FROM HERE?
/ 50
WITH MARKER MARKERLESS
Source: Saint Elmo‘s Berlin
/ 51
/ 52
/ 53
<!DOCTYPE html><html><head>
<title>Our next stop: WebAR</title><script src="https://aframe.io/releases/0.9.1/aframe.min.js"></script>
</head><body>
<a-scene>
<a-box color="red“ position="0 1.6 -3“ rotation="0 45 45“ animation="property: rotation; to: 0 405 45; loop: true; dur: 5000"></a-box>
</a-scene></body></html>
/ 54
<!DOCTYPE html><html><head>
<title>Our next stop: WebAR</title><script src="https://aframe.io/releases/0.9.1/aframe.min.js"></script><script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.2/aframe/build/aframe-ar.js"></script>
</head><body>
<a-scene>
<a-box color="red“ position="0 1.6 -3“ rotation="0 45 45“ animation="property: rotation; to: 0 405 45; loop: true; dur: 5000"></a-box>
</a-scene></body></html>
/ 55
<!DOCTYPE html><html><head>
<title>Our next stop: WebAR</title><script src="https://aframe.io/releases/0.9.1/aframe.min.js"></script><script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.2/aframe/build/aframe-ar.js"></script>
</head><body>
<a-scene arjs embedded>
<a-box color="red“ position="0 1.6 -3“ rotation="0 45 45“ animation="property: rotation; to: 0 405 45; loop: true; dur: 5000"></a-box>
</a-scene></body></html>
/ 56
<!DOCTYPE html><html><head>
<title>Our next stop: WebAR</title><script src="https://aframe.io/releases/0.9.1/aframe.min.js"></script><script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.2/aframe/build/aframe-ar.js"></script>
</head><body>
<a-scene arjs embedded>
<a-marker preset="hiro"><a-box color="red“ position="0 1.6 -3“ rotation="0 45 45“
animation="property: rotation; to: 0 405 45; loop: true; dur: 5000"></a-box></a-marker>
</a-scene></body></html>
/ 57
Source: webglsamples.org
RED CUBEAR.JS WITH HIRO MARKER
/ 58
/ 59
Source: 8th Wall Inc.
WEB-AR WITHIMAGE-TARGETS
/ 60
SPIDERMANSONY
MILLER LIGHTMILLERCOORS
LEGO CITYLEGO
Source: 8th Wall Inc.
/ 61
/ 62
Source: Apple/Saint Elmo‘s Berlin
APPLE QUICK-LOOKUSDZ-FORMAT
/ 63
WEB-AR
/ 64
WEB-ARNO APPLICATIONS
/ 65
WEB-ARNO APPLICATIONSFOR ANYONE
/ 66
WEB-ARNO APPLICATIONSFOR ANYONEFRICTIONLESS
/ 67
WEB-ARNO APPLICATIONSFOR ANYONEFRICTIONLESSEASY
/ 68
THANK YOU!The content of this presentation is proprietary and confidential information of Saint Elmo’s Berlin GmbH & Co. KG. The document and the information in it are provided in confidence, for the sole purpose of exploring business opportunities between the disclosing party and the receiving party and may not be disclosed to any third party or used for any other purpose without the express written permission of the disclosing party.
CONTACT ME:
ANASTASIIA MIROSHNICHENKOWEB XR DEVELOPERa.miroshnichenko@saint-elmos.com
@AnastasiiaaaaM
/ 69
top related