The next frontier: WebGL and WebVR
•
2 likes•746 views
"The next frontier: WebGL and WebVR" by Martin Naumann The browser is a window into a vast, unlimited world. But what about we don't just peek into a flat, page-based world, but into a space with depth? What can we build with that? And now that our browser is the portal to a space, how can we immerse ourselves into it, rather than stare into it from the outside? And maybe we can link this world inside our browser to our real world as well? This talk explores the possibilities technologies such as Augmented Reality and Virtual Reality by using WebGL and Javascript to extend and enhance the web beyond the flat browser window.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to The next frontier: WebGL and WebVR
Similar to The next frontier: WebGL and WebVR (20)
More from Codemotion
More from Codemotion (20)
Recently uploaded
Recently uploaded (20)
The next frontier: WebGL and WebVR
- 1. WebGL and WebVR The next frontier
- 2. Hi, I’m Martin from Zurich
- 3. What we’ll do today 1. WebGL 101 / Three.js intro 2. WebVR introduction 3. Wrap up / Questions
- 4. WebGL 101
- 5. Use cases ● Maps / Navigation ● Art / Architecture / History ● Medicine ● Entertainment / Games ● Image processing / CAD
- 7. From 2D to 3D
- 8. Vocabulary I / V Vertices
- 9. Vocabulary II / V Face Face
- 10. Vocabulary III / V Texture
- 11. Vocabulary IV / V Rasterization Normal vector Fragment
- 12. Vocabulary V / V ● Shaders = GPU programs ● Written in GLSL ● Vertex shader: (vertex) => (new vertex) ● Fragment shader: (position, ..) => (color, depth)
- 13. WebGL pipeline
- 15. WebVR
- 17. Start exploring!
- 18. WebVR with Three.js var vrEffect = new THREE.VREffect (renderer), vrControls = new THREE.VRControls() … vrControls.update() vrEffect.render(scene, camera)
- 19. Photo Spheres
- 20. Photo Spheres
- 24. Google Tango + WebVR
- 25. Code behind the demo I / II navigator.getVRDevices().then( (devices) => { devices[0].resetSensor() startRenderLoop(devices[0]) })
- 26. Code behind the demo II / II var state = device.getState() cam.quaternion.copy(state.orientation) cam.position.set( state.position.x, state.position.y, state.position.z)
- 27. Links ● aframe.io ● WebVR boilerplate ● Google Cardboard Guidelines
- 28. Final remarks “ ... the computer is [...] a bicycle for our minds ”
- 29. Final remarks “ ... virtual reality is [...] a teleporter for our minds ”
- 30. Grazie! Slides: bit.ly/cm16-rome-3d Twitter: @g33konaut Web: archilogic.com Questions?