Virtual Reality in the Web
Sebastian Siemssen
Nik Graf
Virtual reality is inevitably going to become mainstream - it's only a question of how good it needs to be before the mainstream is willing to use it.
Palmer Luckey
![](https://s3.amazonaws.com/media-p.slid.es/uploads/278894/images/3418732/Oculus-Rift-vs-HTC-Vive-vs-PlayStation-VR-1.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/278894/images/3418731/htc-vive-large-1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/278894/images/3418728/916_qqjdl7L._SX425_.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/278894/images/3418788/Google-Cardboard.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/278894/images/3418788/Google-Cardboard.jpg)
Head tracking
Lenses
Screen
The critical pieces
Head mount
![](https://s3.amazonaws.com/media-p.slid.es/uploads/278894/images/3419327/IMG_20170121_084920.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/278894/images/3419097/vr-headset-mouth-open.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/278894/images/3419098/maxresdefault.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/278894/images/3419099/zdnet-virutal-reality-open-mouth.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/278894/images/3419101/3027986-poster-p-2-a-high-percentage-of-white-dudes-who-wear-oculus-rift-are-also-mouth-breathers.jpg)
How do you make your users look like this?
Immersiveness through lens distortion
![](https://s3.amazonaws.com/media-p.slid.es/uploads/278894/images/3418733/without-lenses.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/278894/images/3418736/with-lense.png)
Lens*
Physical screen
Virtual Screen
With Lens
Without Lens
*Convex Fresnel Lens
![](https://s3.amazonaws.com/media-p.slid.es/uploads/278894/images/3418766/pincussion.png)
Pincussion Distortion
Projected image
Perceived image
![](https://s3.amazonaws.com/media-p.slid.es/uploads/278894/images/3418783/pinch-distortion.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/278894/images/3418767/barrel.png)
Barrel Distortion
Projected image
Perceived image
![](https://s3.amazonaws.com/media-p.slid.es/uploads/278894/images/3418784/barrel-distortion.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/278894/images/3418828/image1-barrel_animation.gif)
Pixel based
Mesh based
Geometry based
Computing a Barrel Distortion
![](https://s3.amazonaws.com/media-p.slid.es/uploads/278894/images/3418791/IMG_0432__1_.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/278894/images/3418792/IMG_0434.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/278894/images/3418793/vr2-01.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/278894/images/3418794/vr2-11.jpg)
The Oculus Thrift*
![](https://s3.amazonaws.com/media-p.slid.es/uploads/278894/images/3418790/vr2-09.jpg)
*Sparauge
![](https://s3.amazonaws.com/media-p.slid.es/uploads/278894/images/3418623/webvr-logo-square.png)
https://w3c.github.io/webvr/
WebVR is an experimental JavaScript API that provides access to Virtual Reality devices, such as the Oculus Rift, HTC Vive, Samsung Gear VR, or Google Cardboard, in your browser.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/278894/images/3418869/pasted-from-clipboard.png)
Browser enthusiasm
![](https://s3.amazonaws.com/media-p.slid.es/uploads/278894/images/3418875/pasted-from-clipboard.png)
Browser support
Browser installation and configuration instructions
Supported Web Browser
Polyfill
Mobile
Desktop
Virtual Reality Headset
Smartphone and Lenses
Requirements
WebVR
WebGL
![](https://s3.amazonaws.com/media-p.slid.es/uploads/278894/images/3418866/mozilla-a-frame-webvr-virtual-reality-firefox.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/278894/images/3418883/OYIaJ1KK.png)
Introduction to ReactVR
(Pre Release)
Let's create a VR scene?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/639265/images/3414894/giphy.gif)
yarn global add react-vr-cli
or
npm install -g react-vr-cli
Files
- index.vr.js
- node_modules
- package.json
- postinstall.js
- rn-cli.config.js
- static_assets/chess-world.jpg
- vr/client.js
- vr/index.html
- yarn.lock
<!-- vr/index.html -->
<html>
<head>
<title>firstproject</title>
<style>body { margin: 0; }</style>
<head>
<body>
<script src="./client.bundle?platform=vr"></script>
<script>
ReactVR.init(
'../index.vr.bundle?platform=vr&dev=true',
document.body
);
</script>
</body>
</html>
// vr/client.js
import {VRInstance} from 'react-vr-web';
function init(bundle, parent, options) {
const vr = new VRInstance(
bundle,
'firstproject',
parent,
{ ...options }
);
vr.render = function() {
// Any custom behavior you want to perform
// on each frame goes here
};
// Begin the animation loop
vr.start();
return vr;
}
window.ReactVR = {init};
// index.vr.js (part 1)
import React from 'react';
import {
AppRegistry,
asset,
StyleSheet,
Pano,
Text,
View
} from 'react-vr';
// index.vr.js (part 2)
class firstproject extends React.Component {
render() { return (
<View>
<Pano source={asset('chess-world.jpg')}/>
<Text style={{
backgroundColor:'blue',
textAlign:'center',
textAlignVertical:'center',
layoutOrigin: [0.5, 0.5],
transform: [{translate: [0, 0, -3]}],
}}>
hello
</Text>
</View>
)}
};
AppRegistry.registerComponent(
'firstproject', () => firstproject
);
![](https://s3.amazonaws.com/media-p.slid.es/uploads/639265/images/3417023/360_0004_small.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/639265/images/3417045/Screen_Shot_2017-01-20_at_13.30.26.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/639265/images/3417060/agentconf_small.jpg)
class firstproject extends React.Component {
render() { return (
<View>
<Pano source={asset('agentconf.jpg')}/>
<Text style={{
fontSize: 0.4,
layoutOrigin: [0.5, 0.5],
transform: [{translate: [0, 0, -3]}],
}}>
Welcome to Agent.sh
</Text>
</View>
)}
};
AppRegistry.registerComponent(
'firstproject', () => firstproject
);
Let's create a
Virtual World
![](https://s3.amazonaws.com/media-p.slid.es/uploads/639265/images/3417214/57abd1ec-cc9d-11e6-901d-e79958bfe1b3.png)
cube.obj
cube.mtl
<View>
<PointLight style={{
color:'white',
transform:[{translate : [0, 400, 700]}]}}
/>
<Pano source={asset('chess-world.jpg')}/>
<Mesh
style={{ transform: [
{translate: [0, -5, -20]},
{rotateY: -30},
{rotateX: -40}
] }}
source={{
mesh: asset('cube2.obj'),
mtl: asset('cube2.mtl'),
lit: true
}}
/>
</View>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/639265/images/3417427/giphy__1_.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/639265/images/3417232/eba9c214-cc9d-11e6-99ae-17b5dda0dd85.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/639265/images/3417233/ee653722-cc9d-11e6-8352-bd93b19a83d6.png)
// Tree.js
export default ({ style }) => (
<View style={style}>
<Mesh
source={{
mesh: asset('tree-trunk.obj'),
mtl: asset('tree-trunk.mtl'),
lit: true
}}
style={{ transform: [{scale: [0.6, 1, 0.6]}] }}
/>
<Mesh
source={{
mesh: asset('tree-crown.obj'),
mtl: asset('tree-crown.mtl'),
lit: true
}}
style={{ transform: [{translate: [0, 2.5, 0]}] }}
/>
</View>
);
// Forest.js Part 1
import { range, map, xprod, flatten } from 'ramda';
import Tree from './Tree';
const randomPosition = () => (Math.floor(Math.random() * 10) - 5);
const randomHeight = () => (Math.random() - 1);
const randomScale = () => (Math.random() * 0.25 + 1);
const grid = xprod(range(0, 10), range(0, 10));
const trees = grid.map((entry, index) => {
return {
x: entry[0] * 8 + randomPosition(),
y: entry[1] * 8 + randomPosition(),
id: index
};
});
// Forest.js
export default ({ style }) => (
<View style={style}>
{trees.map((tree) => {
const scale = randomScale();
return (
<Tree
key={tree.id}
style={{
transform: [
{scale: [scale, scale, scale]},
{translate: [
tree.x, randomHeight(),
tree.y
]},
]
}}
/>
);
})}
</View>
);
![](https://s3.amazonaws.com/media-p.slid.es/uploads/639265/images/3417312/ReactVR-HelloWorld.gif)
Examples
https://github.com/nikgraf/webvr-expriments
![](https://s3.amazonaws.com/media-p.slid.es/uploads/639265/images/3417093/15585497_1145694728877127_5164415521642250240_n-1.png)
What's next?
- Stablising the APIs
- Content creation
- More users
Thank you!
WebVR
By Sebastian Siemssen
WebVR
- 2,457