The Open Metaverse - Fullstack Bytes

Transcript

1. 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
2. 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
3. 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
4. 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
5. 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
6. 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
7. 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
8. 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
9. 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
10. 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
11. 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
12. 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
13. 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/
14. 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
15. 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
16. 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 £££
17. 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
18. 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
19. 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
20. 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
21. 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
22. 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
23. 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 <a-scene> <a-assets> <img id="r1" src="rogueone.jpg"> <video id="trailer" src="trailer.mp4" webkit-playsinline></video> </a-assets> <a-curvedimage src="#r1" radius="7.2" theta-length="360" height="9" rotation="0 0 0" scale="1.2 1.2 1.2"> </a-curvedimage> <a-video src="#trailer" width="16" height="9" position="0.11 3.27 7.19" material="color:#FFF;shader:flat;side:double;transparent:true;src:#trailer" rotation="0 180 0" scale="0.5 0.5 0.5"> </a-video> <a-sky color="#000"></a-sky> <a-entity rotation="0 180 0" position="0 0 0"> <a-camera></a-camera> </a-entity> </a-scene>
24. 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
25. 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
26. 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
27. 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
28. 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
29. 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/
30. 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/
31. 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
32. 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
33. 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
34. 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
35. 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
36. 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
37. 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 shaun@studiozero.co bit.ly/vr-workshop