Slides from my talk the WebGL Developers Meetup 16-Dec-2015

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