Tony Parisi is VP of Web and Open Technologies at WEVR. He created an early experiment with React and WebGL for VR development called react-vr. The experiment renders a spherical 360 video player for the web using Three.js, requestAnimationFrame(), and OrbitControls. It implements a basic VR scene without actual VR support yet, with next steps including adding WebVR and Cardboard support and investigating integration with GLAM.

1. Tony Parisi
is VP of Web and Open Technologies
tony@wevr.com
+1 (415) 902 8002
@auradeluxe
react-vr
an early experiment with React and
WebGL for VR development

2. the experiment
spherical 360 video player for the web

3. the React (1)
var App = React.createClass({
getInitialState: function() {
return { url: "../360videos/MythBusters+-
+Sharks+Everywhere!+(360+Video)-3WIS6N_9gjA.mp4" };
},
render: function() {
return (
<VRPlayer url={this.state.url}></VRPlayer>
);
}
});

4. the React (2)
var VRPlayer = React.createClass({
render: function() {
return (
<div className="vr_player"></div>
);
},

5. the React (3)
componentDidMount : function() {
this.container = React.findDOMNode(this);
// Initialize THREE
this.initThreeJS();
// Create the scene content
this.initScene();
// Create the camera controller
this.initControls();
var that = this;
// Run the run loop
window.requestAnimationFrame(function(time) {
that.run(time);
});
},

6. the VR
•render WebGL using Three.js
•use requestAnimationFrame()
for update loop
•use THREE.OrbitControls for
panning
•actually no VR yet!— that’s
next
// Create a new Three.js scene
var scene = new THREE.Scene();
// Add a camera so we can view the scene
var camera = new THREE.PerspectiveCamera( 90,
window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = .001;
scene.add(camera);
// Create a video texture for playing the movie
var video = document.createElement('video');
video.autoplay = true;
video.src = this.props.url;
var texture = new THREE.VideoTexture( video );
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.format = THREE.RGBFormat;
var material = new THREE.MeshBasicMaterial({
map: texture,
side:THREE.DoubleSide });
// Create the sky sphere geometry
var geometry = new THREE.SphereGeometry(10, 32, 32);
// We're looking at the inside
geometry.applyMatrix(
new THREE.Matrix4().makeScale( -1, 1, 1 ) );

7. next steps
1. add WebVR and Cardboard support
2. investigate integrating with GLAM (GL and Markup)
http://www.glamjs.org/
•how deep can React integration go? (who owns the
“scene graph”?)
•compare to performance of DOM/Web Components-
based approaches

8. Thank
You.
Tony Parisi
is VP of Web and Open Technologies
tony@wevr.com
+1 (415) 902 8002
@auradeluxe
this experiment can be found on Github at
https://github.com/tparisi/react-vr