A talk from the Developer Track at AWE Europe 2017 - the largest conference for AR+VR in Munich, Germany October 19-20, 2017 Casper Fabricius (Cimmerse): WebVR with A-Frame, React and Redux Web-based virtual reality allows VR experiences at the click of a link, and it enables millions of web developers to dive straight into VR and AR. This workshop will teach developers with some web and javascript experience to use the popular React, Redux and A-Frame libraries to build advanced, interactive WebVR sites step by step. Participants will also learn how to add WebVR to existing websites, leveraging and sharing existing code between 2D, 3D and VR.

1. WebVR with A-Frame, React
and Redux
Casper Fabricius
Co-founder & CTO, Cimmerse

2. Hi, I’m Casper
I work at

3. What is WebVR WebXR?
WebVR is an experimental JavaScript API that provides support
for virtual reality devices, such as the HTC Vive, Oculus RiD or Google
Cardboard, in a web browser.
This API is designed with the following goals in mind:
• Detect available Virtual Reality devices.
• Query the devices capabiliKes.
• Poll the device’s posi6on and orienta6on.
• Display imagery on the device at the appropriate frame rate.

4. The state of WebVR
Browser OS Hardware Fully released?
Firefox (64 bit) Windows SteamVR (incl. HTC Vive), Oculus RiD Yes
Edge Windows Windows Mixed Reality headsets Yes
Samsung Internet Android GearVR, Cardboard Yes
Oculus Carmel Android GearVR Yes
Chrome Android Daydream, Cardboard Yes, but behind origin trial
Firefox macOS/Linux SteamVR (incl. HTC Vive) Yes, but must be enabled
Chrome Windows SteamVR (incl. HTC Vive), Oculus RiD No, custom Chromium build
? ?

5. Layers of a WebVR app
WebGL API WebVR API GamePad API WebAudio API
WebVR polyfill
Three.js Babylon.js Playcanvas OSG.JS Engine
Browser
A-Frame React VR X3DOM AbstracKon

6. Doesn’t Unity support WebGL and WebVR?
WebGL:
• Smaller games compile well to
WebGL, larger games may fail.
• WebGL builds are not officially
supported on any mobile device.
• Firefox and Edge have the best
support and performance.
WebVR:

7. So, what can you do with WebVR?
- quite a lot, actually

9. My choice of stack
Three.js
A-Frame
aframe-react
React Redux
Apollo Client
GraphQL-Ruby
PostgreSQL

10. A closer look at A-Frame

11. Let’s look at some code
aframe-react
React Redux

12. MenuReducer.js
const initialState = {!
isMainMenuOpen: false,!
openMenuItems: []!
}!
!
export default function menuReducer (state = initialState, action) {!
switch (action.type) {!
case actionTypes.TOGGLE_MAIN_MENU:!
return Object.assign({}, state, {!
isMainMenuOpen: !state.isMainMenuOpen!
})!
case actionTypes.TOGGLE_MENU_ITEM:!
…!
}!
default:!
return state!
}!
}!
!

13. main.js
const CimmerseViewer = props => {!
const isInVR = props.isInVR!
!
return (!
<ApolloProvider client={props.client} store={props.store}>!
<div>!
<Scene>!
<Model model={props.data.model} />!
{ isInVR && <Menu3D /> }!
</Scene>!
{ !isInVR && <Menu2D /> }!
</div>!
</ApolloProvider>!
)!
}!

14. Menu2D.js
const Menu2D = props => {!
return (!
<div className={styles.menuContainer}>!
<div!
className={styles.mainMenuButton}!
onClick={props.dispatchToggleMainMenu}!
></div>!
!
{!
props.isMainMenuOpen &&!
renderMenuItems(!
props.openMenuItems,!
props.dispatchToggleMenuItem!
)!
}!
</div>!
)!
}!
const renderMenuItems = (openMenuItems, onToggle) => {!
return (!
<div className={styles.menuItems}>!
{ openMenuItems.forEach(menuItem => {!
return <MenuItem2D!
item={menuItem}!
onToggle={onToggle.bind(undefined, menuItem)}!
/>!
} ) }!
</div>!
)!
}!
!
const Menu2DWithState = connect(!
(state) => ({!
isMainMenuOpen: state.menu.isMainMenuOpen,!
openMenuItems: state.menu.openMenuItems,!
}),!
(dispatch) => ({!
dispatchToggleMainMenu () { dispatch(toggleOnDemandMenu()) },!
dispatchToggleMenuItem (item) { dispatch(toggleOnDemandMenuItem(item)) },!
})!
)(Menu2D)!
!
export default Menu2DWithState!

15. Menu3D.js
const Toolbar3D = props => {!
return (!
<Entity position={{x: 1, y: 1, z: 0}}>!
<Entity!
text="Menu”!
geometry={{!
primitive: 'plane’,!
width: 0.5,!
height: 0.2!
}}!
/>!
!
{!
props.isMainMenuOpen &&!
renderMenuItems(!
props.openMenuItems,!
props.dispatchToggleMenuItem!
)!
}!
</Entity>!
)!
}!
const renderMenuItems = (openMenuItems, onToggle) => {!
return (!
<Entity>!
{ openMenuItems.forEach(menuItem => {!
return <MenuItem3D!
item={menuItem}!
onToggle={onToggle.bind(undefined, menuItem)}!
/>!
} ) }!
</Entity>!
)!
}!
!
const Menu3DWithState = connect(!
(state) => ({!
isMainMenuOpen: state.menu.isMainMenuOpen,!
openMenuItems: state.menu.openMenuItems,!
}),!
(dispatch) => ({!
dispatchToggleMainMenu () { dispatch(toggleOnDemandMenu()) },!
dispatchToggleMenuItem (item) { dispatch(toggleOnDemandMenuItem(item)) },!
})!
)(Menu3D)!
!
export default Menu3DWithState!

16. Casper Fabricius
@fabricius
casper@cimmerse.com
Learn more:
cimmer.se/webvr
cimmer.se/aframe
Thank you
www.cimmerse.com
Try it right now on your
phone:
cimmer.se/shoe
cimmer.se/handbag
cimmer.se/sushi