Slide 1
Slide 1 text
met.a.verse
noun
A Virtual-Reality Space in which users can inte
ract with a computer-generated environment and
other users.
S H A U N D U N N E / / S T U D I O Z E R O
N O V E M B E R 2 3 R D , 2 0 1 6 - F U L L S T A C K B Y T E S - L O N D O N
T H E O P E N M E T A V E R S E
Slide 2
Slide 2 text
WHY
VR?
S H A U N D U N N E / / S T U D I O Z E R O
N O V E M B E R 2 3 R D , 2 0 1 6 - F U L L S T A C K B Y T E S - L O N D O N
T H E O P E N M E T A V E R S E
Slide 3
Slide 3 text
S H A U N D U N N E / / S T U D I O Z E R O
N O V E M B E R 2 3 R D , 2 0 1 6 - F U L L S T A C K B Y T E S - L O N D O N
T H E O P E N M E T A V E R S E
Slide 4
Slide 4 text
EDUCATION
S H A U N D U N N E / / S T U D I O Z E R O
N O V E M B E R 2 3 R D , 2 0 1 6 - F U L L S T A C K B Y T E S - L O N D O N
T H E O P E N M E T A V E R S E
Slide 5
Slide 5 text
STORIES
S H A U N D U N N E / / S T U D I O Z E R O
N O V E M B E R 2 3 R D , 2 0 1 6 - F U L L S T A C K B Y T E S - L O N D O N
T H E O P E N M E T A V E R S E
Slide 6
Slide 6 text
ENTERTAINMENT
S H A U N D U N N E / / S T U D I O Z E R O
N O V E M B E R 2 3 R D , 2 0 1 6 - F U L L S T A C K B Y T E S - L O N D O N
T H E O P E N M E T A V E R S E
Slide 7
Slide 7 text
WEB VR?
S H A U N D U N N E / / S T U D I O Z E R O
N O V E M B E R 2 3 R D , 2 0 1 6 - F U L L S T A C K B Y T E S - L O N D O N
T H E O P E N M E T A V E R S E
WHY
Slide 8
Slide 8 text
PROPRIETARY
S H A U N D U N N E / / S T U D I O Z E R O
N O V E M B E R 2 3 R D , 2 0 1 6 - F U L L S T A C K B Y T E S - L O N D O N
T H E O P E N M E T A V E R S E
F**K
Slide 9
Slide 9 text
FRICTIONLESS
S H A U N D U N N E / / S T U D I O Z E R O
N O V E M B E R 2 3 R D , 2 0 1 6 - F U L L S T A C K B Y T E S - L O N D O N
T H E O P E N M E T A V E R S E
Slide 10
Slide 10 text
S H A U N D U N N E / / S T U D I O Z E R O
N O V E M B E R 2 3 R D , 2 0 1 6 - F U L L S T A C K B Y T E S - L O N D O N
T H E O P E N M E T A V E R S E
iswebvrready.org
Slide 11
Slide 11 text
S H A U N D U N N E / / S T U D I O Z E R O
N O V E M B E R 2 3 R D , 2 0 1 6 - F U L L S T A C K B Y T E S - L O N D O N
T H E O P E N M E T A V E R S E
Slide 12
Slide 12 text
S H A U N D U N N E / / S T U D I O Z E R O
N O V E M B E R 2 3 R D , 2 0 1 6 - F U L L S T A C K B Y T E S - L O N D O N
T H E O P E N M E T A V E R S E
Slide 13
Slide 13 text
S H A U N D U N N E / / S T U D I O Z E R O
N O V E M B E R 2 3 R D , 2 0 1 6 - F U L L S T A C K B Y T E S - L O N D O N
T H E O P E N M E T A V E R S E
blog.mozvr.com/webvr-coming-to-servo-part-1/
Slide 14
Slide 14 text
START
S H A U N D U N N E / / S T U D I O Z E R O
N O V E M B E R 2 3 R D , 2 0 1 6 - F U L L S T A C K B Y T E S - L O N D O N
T H E O P E N M E T A V E R S E
Slide 15
Slide 15 text
WHAT?
S H A U N D U N N E / / S T U D I O Z E R O
N O V E M B E R 2 3 R D , 2 0 1 6 - F U L L S T A C K B Y T E S - L O N D O N
T H E O P E N M E T A V E R S E
Slide 16
Slide 16 text
S H A U N D U N N E / / S T U D I O Z E R O
N O V E M B E R 2 3 R D , 2 0 1 6 - F U L L S T A C K B Y T E S - L O N D O N
T H E O P E N M E T A V E R S E
£££
Slide 17
Slide 17 text
S H A U N D U N N E / / S T U D I O Z E R O
N O V E M B E R 2 3 R D , 2 0 1 6 - F U L L S T A C K B Y T E S - L O N D O N
T H E O P E N M E T A V E R S E
webvr.info
Slide 18
Slide 18 text
S H A U N D U N N E / / S T U D I O Z E R O
N O V E M B E R 2 3 R D , 2 0 1 6 - F U L L S T A C K B Y T E S - L O N D O N
T H E O P E N M E T A V E R S E
WebVR
WebVR Polyfill
WebGL
Three.js Babylon.js PrimroseVR
Aframe ReactVR
Playcanvas Vizor
Slide 19
Slide 19 text
S H A U N D U N N E / / S T U D I O Z E R O
N O V E M B E R 2 3 R D , 2 0 1 6 - F U L L S T A C K B Y T E S - L O N D O N
T H E O P E N M E T A V E R S E
webglfundamentals.org
Slide 20
Slide 20 text
S H A U N D U N N E / / S T U D I O Z E R O
N O V E M B E R 2 3 R D , 2 0 1 6 - F U L L S T A C K B Y T E S - L O N D O N
T H E O P E N M E T A V E R S E
three.js
Slide 21
Slide 21 text
S H A U N D U N N E / / S T U D I O Z E R O
N O V E M B E R 2 3 R D , 2 0 1 6 - F U L L S T A C K B Y T E S - L O N D O N
T H E O P E N M E T A V E R S E
var canvas = document.getElementById('renderCanvas');
var engine = new BABYLON.Engine(canvas, true);
var init = function(){
var scene = new BABYLON.Scene(engine);
//var camera = new BABYLON.ArcRotateCamera('camera', 0, 0, 15, BABYLON.Vector3.Zero(), scene);
var camera = new BABYLON.WebVRFreeCamera("WVR", new BABYLON.Vector3(0, 1, -15), scene);
camera.upperRadiusLimit = 20000;
camera.attachControl(canvas);
scene.clearColor = new BABYLON.Color3(0,0,0)
var sun = BABYLON.Mesh.CreateSphere('sun', 16, 4, scene);
var sunMaterial = new BABYLON.StandardMaterial('sunMaterial', scene);
sunMaterial.emissiveTexture = new BABYLON.Texture('https://s3-us-west-2.amazonaws.com/s.cdpn.io
sunMaterial.diffuseColor = new BABYLON.Color3(0,0,0);
sunMaterial.specularColor = new BABYLON.Color3(0,0,0);
sun.material = sunMaterial;
//sunlight
var sunlight = new BABYLON.PointLight('sunlight', BABYLON.Vector3.Zero(), scene);
sunlight.intesity = 2;
// Planets
Babylon JS
Slide 22
Slide 22 text
S H A U N D U N N E / / S T U D I O Z E R O
N O V E M B E R 2 3 R D , 2 0 1 6 - F U L L S T A C K B Y T E S - L O N D O N
T H E O P E N M E T A V E R S E
PrimroseVR
Slide 23
Slide 23 text
S H A U N D U N N E / / S T U D I O Z E R O
N O V E M B E R 2 3 R D , 2 0 1 6 - F U L L S T A C K B Y T E S - L O N D O N
T H E O P E N M E T A V E R S E
AFrame
Slide 24
Slide 24 text
REACT VR
S H A U N D U N N E / / S T U D I O Z E R O
N O V E M B E R 2 3 R D , 2 0 1 6 - F U L L S T A C K B Y T E S - L O N D O N
T H E O P E N M E T A V E R S E
Slide 25
Slide 25 text
S H A U N D U N N E / / S T U D I O Z E R O
N O V E M B E R 2 3 R D , 2 0 1 6 - F U L L S T A C K B Y T E S - L O N D O N
T H E O P E N M E T A V E R S E
PlayCanvas
Slide 26
Slide 26 text
S H A U N D U N N E / / S T U D I O Z E R O
N O V E M B E R 2 3 R D , 2 0 1 6 - F U L L S T A C K B Y T E S - L O N D O N
T H E O P E N M E T A V E R S E
Vizor
Slide 27
Slide 27 text
IRL
S H A U N D U N N E / / S T U D I O Z E R O
N O V E M B E R 2 3 R D , 2 0 1 6 - F U L L S T A C K B Y T E S - L O N D O N
T H E O P E N M E T A V E R S E
Slide 28
Slide 28 text
S H A U N D U N N E / / S T U D I O Z E R O
N O V E M B E R 2 3 R D , 2 0 1 6 - F U L L S T A C K B Y T E S - L O N D O N
T H E O P E N M E T A V E R S E
360syria.com
Slide 29
Slide 29 text
S H A U N D U N N E / / S T U D I O Z E R O
N O V E M B E R 2 3 R D , 2 0 1 6 - F U L L S T A C K B Y T E S - L O N D O N
T H E O P E N M E T A V E R S E
www.washingtonpost.com/video/mars/public/
Slide 30
Slide 30 text
S H A U N D U N N E / / S T U D I O Z E R O
N O V E M B E R 2 3 R D , 2 0 1 6 - F U L L S T A C K B Y T E S - L O N D O N
T H E O P E N M E T A V E R S E
aframe.io/blog/
Slide 31
Slide 31 text
S H A U N D U N N E / / S T U D I O Z E R O
N O V E M B E R 2 3 R D , 2 0 1 6 - F U L L S T A C K B Y T E S - L O N D O N
T H E O P E N M E T A V E R S E
Blender
Slide 32
Slide 32 text
S H A U N D U N N E / / S T U D I O Z E R O
N O V E M B E R 2 3 R D , 2 0 1 6 - F U L L S T A C K B Y T E S - L O N D O N
T H E O P E N M E T A V E R S E
magicavoxel
Slide 33
Slide 33 text
FUTURE
S H A U N D U N N E / / S T U D I O Z E R O
N O V E M B E R 2 3 R D , 2 0 1 6 - F U L L S T A C K B Y T E S - L O N D O N
T H E O P E N M E T A V E R S E
Slide 34
Slide 34 text
S H A U N D U N N E / / S T U D I O Z E R O
N O V E M B E R 2 3 R D , 2 0 1 6 - F U L L S T A C K B Y T E S - L O N D O N
T H E O P E N M E T A V E R S E
WebAR
Slide 35
Slide 35 text
S H A U N D U N N E / / S T U D I O Z E R O
N O V E M B E R 2 3 R D , 2 0 1 6 - F U L L S T A C K B Y T E S - L O N D O N
T H E O P E N M E T A V E R S E
Slide 36
Slide 36 text
S H A U N D U N N E / / S T U D I O Z E R O
N O V E M B E R 2 3 R D , 2 0 1 6 - F U L L S T A C K B Y T E S - L O N D O N
T H E O P E N M E T A V E R S E
w e b v r . i n f o
w e b v r . s l a c k . c o m
a f r a m e . i o
p l a y c a n v a s . c o m
p r i m r o s e v r . c o m
b a b y l o n j s . c o m
t h r e e j s . o r g
v i z o r . i o
i s w e b v r r e a d y . o r g
m o z v r . c o m
Slide 37
Slide 37 text
S H A U N D U N N E / / S T U D I O Z E R O
N O V E M B E R 2 3 R D , 2 0 1 6 - F U L L S T A C K B Y T E S - L O N D O N
T H E O P E N M E T A V E R S E
@shaundunne
shaun_dunne [email protected]
bit.ly/vr-workshop