Virtual reality in portland

https://www.meetup.com/Portland-Virtual-Reality-Meetup/

friction

creating and distributing VR content

• Gatekeepers
• Installs
• Segmentation

Webvr

• Open
• Instant

https://webvr.rocks/

Oculus Medium built in WebVR

Frameworks

why a framework

Import WebVR polyfill

Set up camera

Set up lights

Initialize scene

Declare and pass canvas

Listen to window resize

Install VREffect

Instantiate renderer

Create render loop

A-Frame

A web framework for building virtual reality experiences

Make WebVR with HTML and Entity-Component

Works on Vive, Rift, desktop, mobile platforms 

react-vr

React VR is a framework for the creation of VR applications that run in your web browser. It pairs modern APIs like WebGL and WebVR with the declarative power of React, producing experiences that can be consumed through a variety of devices. 

A-Frame

Built on

three.js

<a-scene>
  <a-sphere position="0 1.25 -5" radius="1.25">
  </a-sphere>

  <a-box position="-1 0.5 -3" rotation="0 45 0">
  </a-box>

  <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5">
  </a-cylinder>

  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4">
  </a-plane>

  <a-sky color="#ECECEC">
  </a-sky>
</a-scene>

AFRAME.registerComponent('hello-world', {
  schema: {
    target: {type: 'selector'},
    speed: {type: 'number'}
  },
  init: function () {
    console.log('Hello, World!');
  },
  tick() {...},
  
  update() {...},
});

Entity

Component

System

aframe-react

import {Entity, Scene} from 'aframe-react';


class VRScene extends React.Component {
  render () {
    return (
      <Scene>
        <Entity geometry={{primitive: 'box'}}
         material="color: red"
         position={[0, 0, -5]} />

        <Entity text={{text: 'HELLO WORLD'}}
         position="{[0, 1, -5]}" />

      </Scene>
    );
  }
}

Tools

• locally in a static html file
• codepen + aframe from cdn (doesn't support viewing in a headset)
• create-react-app for aframe-react
• aframe-inspector

React VR

Built on

three.js

Built on React

• react-native
• react-vr
• react-vr-web

class WelcomeToVR extends React.Component {
  render() {
    return (
      <View>
        <Pano source={asset('chess-world.jpg')}/>
        <Text
          style={{
            fontSize: 0.8,
            layoutOrigin: [0.5, 0.5],
            transform: [{translate: [0, 0, -3]}],
          }}>
          hello
        </Text>
      </View>
    );
  }
};

TOols

• React dev tools
• react-vr-cli

three-legged potato sack race

github.com/jhsu/potato-hop

Thanks

Resources & Community

r/webvr

aframe blog

https://aframe.io/blog/

slack groups

https://aframevr-slack.herokuapp.com/

https://webvr-slack.herokuapp.com/