React VR

What is React VR

React VR uses Three.js  to support the lower-level WebVR  and WebGL APIs

Three.js & WebGL

Three.js is a JavaScript library for displaying 3d graphics in the browser.

WebGL - JS Api for rendering 3D graphics in browser without any plugins

WebVR

Experimental JS api on top of WebGL to interact with virtual reality devices

State of WebGl and WebVR

State of WebGl and WebVR

Motivation

Use declarative and functional programming style vs imperative

Reuse React ecosystem

Styling using yoga

Architecture

React Code

Packager

WebVR & ThreeJS

Getting started

npm install -g react-vr-cli

react-vr init WelcomeToVR

cd WelcomeToVR

npm start


AppRegistry.registerComponent('WelcomeToVR', () => WelcomeToVR);

export default class WelcomeToVR extends React.Component {
  render() {
    return (
      <View>
        <Pano source={asset('chess-world.jpg')}/>
        <Text
          style={{
            backgroundColor: '#777879',
            fontSize: 0.8,
            fontWeight: '400',
            layoutOrigin: [0.5, 0.5],
            paddingLeft: 0.2,
            paddingRight: 0.2,
            textAlign: 'center',
            textAlignVertical: 'center',
            transform: [{translate: [0, 0, -3]}],
          }}>
          hello
        </Text>
      </View>
    );
  }
};

360 panoramas

equirectangular

360 panoramas

Cubic skyboxes

Coordinate system

Transforms

  style={{
    transform: [
      {rotateZ : this.state.rotation},
      {translate: [0, 2, 0]},
      {scale : 0.01 },
    ],
  }}
style={{
   transform: [
     {matrix : [0.01,0,0,0, 0,0.01,0,0, 0,0,0.01,0, 3,2,0,1]},
   ],
}}

Models and lights

          <Model style={{
              transform: [
              { translate: [10, -20, 5 ]},
              {scale: 0.2 }
            ]}} source={{
              obj:asset('castle.obj'),
              mtl:asset('castle.mtl'),
            }} lit={true} />
<AmbientLight intensity={ .5 }  />

Lights

Integration with existing apps

After all it's Three.js on steroids

under the hood

Thanks

vladjs.com