O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

React-VR: An Early Experiment with React and WebGL for VR Development

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

  • Seja o primeiro a comentar

React-VR: An Early Experiment with React and WebGL for VR Development

  1. 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. 2. the experiment spherical 360 video player for the web
  3. 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. 4. the React (2) var VRPlayer = React.createClass({ render: function() { return ( <div className="vr_player"></div> ); },
  5. 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. 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. 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. 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

×