Post on 16-Apr-2017
WebGL and WebVRThe next frontier
Hi, I’m Martin from Zurich
I work at Archilogic
What we’ll do today1. WebGL 101 / Three.js intro2. WebVR introduction3. Wrap up / Questions
WebGL 101
Use cases● Maps / Navigation● Art / Architecture / History● Medicine● Entertainment / Games● Image processing / CAD
Browser support
From 2D to 3D
Vocabulary I / V
Vertices
Vocabulary II / V
Face
Face
Vocabulary III / V
Texture
Vocabulary IV / V
Rasterization Normal vector
Fragment
Vocabulary V / V● Shaders = GPU programs● Written in GLSL● Vertex shader:(vertex) => (new vertex)
● Fragment shader:(position, ..) => (color, depth)
WebGL pipeline
WebVR
Specification (work in progress)
https://mozvr.github.io/webvr-spec/
Start exploring!
WebVR with Three.jsvar vrEffect = new THREE.VREffect(renderer),
vrControls = new THREE.VRControls()
…
vrControls.update()
vrEffect.render(scene, camera)
Photo Spheres
Photo Spheres
A-Frame <body>
<a-scene>
<a-cube></a-cube>
</a-scene>
</body>
Augmented reality
getUserMedia + WebGL
Google Tango + WebVR
Code behind the demo I / IInavigator.getVRDevices().then(
(devices) => {
devices[0].resetSensor()
startRenderLoop(devices[0])
})
Code behind the demo II / IIvar state = device.getState()
cam.quaternion.copy(state.orientation)
cam.position.set(
state.position.x,
state.position.y,
state.position.z)
Links● aframe.io● WebVR boilerplate● Google Cardboard
Guidelines
Final remarks
“ ... the computer is [...] a bicycle for our minds”
Final remarks
“ ... virtual reality is [...] a teleporter for our minds”
Grazie!Slides: bit.ly/cm16-rome-3d
Twitter: @g33konaut
Web: archilogic.com
Questions?