www.swingdev.io React VR workshop Building Cannon Shooter game in React VR with Mirek Ciastek, SwingDev’s Front-end Developer 

www.swingdev.io Agenda 1. Introduction and recap 2. Project setup and building basic scene 3. Loading models and adding interaction 4. Adding particles and sounds 5. Adding score and weapon types 6. Summary 

www.swingdev.io Cannon Shooter 

www.swingdev.io Introduction and recap 

www.swingdev.io React VR React VR lets you build VR apps using only JavaScript. It uses the same design as React, letting you compose a rich VR world and UI from declarative components. 

www.swingdev.io It’s more complicated than that Main Thread React VR Runtime React Native WebGL/WebVR OVRUI Three.js WebWorker React VR Application Code React Native React Web Browser Asynchronous Bridge 

www.swingdev.io • JSX and React API • Props and State • Input handlers - onEnter, onExit, onMove, onInput, onClick • Fonts and Text Core features 

www.swingdev.io 3D space • OpenGL coordinates • units in meters • rotation in degrees • Y axis points up, Z axis points to user 

www.swingdev.io React VR is based on React React is a declarative, efficient, and flexible JavaScript library for building user interfaces. • JSX syntax - like HTML in JavaScript • component oriented - everything is a component • props are for passing data to component • state allows to update component • React is only for views - the rest you need to add by your own 

www.swingdev.io class ShoppingList extends React.Component { render() { return ( ); } } React example 

www.swingdev.io hello React VR example 

www.swingdev.io Project setup and building basic scene 

www.swingdev.io Requirements • Node.js • NPM or Yarn • React VR CLI • Git (version control) or SourceTree 

www.swingdev.io https://github.com/SwingDev/reactvr-workshop or short version https://bit.ly/2qzdp5k 

www.swingdev.io Setup project git clone [email protected]:SwingDev/reactvr-workshop.git Clone repository cd reactvr-workshop && git checkout stage_1 Go to project directory and checkout to start branch yarn install && yarn start Run the app Go to http://localhost:8081/vr?hotreload 

www.swingdev.io Project structure !"" /actions !"" /components !"" /libs !"" /modules !"" /reducers !"" /static_assets !"" /store !"" /utils !"" /views !"" /vr #"" index.vr.js #"" /components !"" App.js !"" Cannon.js !"" Ground.js !"" HUD.js !"" Sky.js !"" Summary.js #"" Wall.js #"" /views !"" /CustomModel #"" /ParticlePool 

www.swingdev.io Let’s make Sky const vertexShader = ` varying vec3 vWorldPosition; void main() { vec4 worldPosition = modelMatrix * vec4( position, 1.0 ); vWorldPosition = worldPosition.xyz; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); } `; const fragmentShader = ` uniform vec3 topColor; uniform vec3 bottomColor; uniform float offset; uniform float exponent; varying vec3 vWorldPosition; void main() { float h = normalize( vWorldPosition + offset ).y; gl_FragColor = vec4( mix( bottomColor, topColor, max( pow( max( h , 0.0), exponent ), 0.0 ) ), 1.0 ); } `; Sky.js 

www.swingdev.io Let’s make Sky const Sky = () => ( ); const uniforms = { topColor: { value: new THREE.Color(0x0077ff), }, bottomColor: { value: new THREE.Color(0xffffff), }, offset: { value: Y_OFFSET, }, exponent: { value: 0.6, }, }; Sky.js 

www.swingdev.io Ground const Ground = () => ( ); Ground.js 

www.swingdev.io Add Sky and Ground to App.js import Sky from './Sky'; import Ground from './Ground'; class App extends React.Component { render() { return ( ); } } App.js 

www.swingdev.io Add lights to scene import { View, AmbientLight, DirectionalLight, } from 'react-vr'; class App extends React.Component { render() { return ( ); } } App.js 

www.swingdev.io Loading models and adding interaction 

www.swingdev.io glTF glTF (GL Transmission Format) is a file format for 3D scenes and models using the JSON standard. It is described by its creators as the "JPEG of 3D." 

www.swingdev.io How glTF look like 

www.swingdev.io Create Cannon component render() { return ( ); } import { CustomModel } from '../views/CustomModel/component'; Cannon.js 

www.swingdev.io Make Wall of boxes renderBox = (box) => { const { id, x, y, file, } = box; return ( ); } render() { const { boxes } = this.state; return ( {boxes.map(this.renderBox)} ); } Wall.js 

www.swingdev.io Add Cannon and Wall to App.js class App extends React.Component { render() { return ( ); } } 

www.swingdev.io Adding click listener to boxes this.handleHit(box)} > {/* Custom model component */} handleHit = (box) => { const { id, x, y } = box; const { boxes } = this.state; const { updatedBoxes, boxesToRemove, } = getUpdatedBoxes(boxes, id, weapon); this.setState({ boxes: updatedBoxes, }, () => this.afterHitUpdate(boxesToRemove)); }; afterHitUpdate = (boxesToRemove) => { const { boxes } = this.state; this.props.addHit( getPoints(boxesToRemove), boxesToRemove.length, ); }; Wall.js 

www.swingdev.io Link Cannon’s head to camera componentDidMount() { this.rotateListener = RCTDeviceEventEmitter.addListener( 'onReceivedHeadMatrix', this.handleReceiveMatrix, ); } componentWillUnmount() { this.rotateListener(); } handleReceiveMatrix = () => { const [x, y] = VrHeadModel.rotation(); this.setState({ headRotateX: getClamped(x), headRotateY: getClamped(y), }); }; Cannon.js 

www.swingdev.io Update Cannon’s render function render() { const { headRotateX, headRotateY } = this.state; return ( ); } 

www.swingdev.io Adding particles and sounds 

www.swingdev.io Show particles on box’s hit Wall.js state = { boxes: getBoxesProps(), explosionPosition: new THREE.Vector3(0, 0, -5), showExplosion: false, }; handleHit = (box) => { const { id, x, y } = box; const { boxes, explosionPosition } = this.state; NativeModules.ShotBridge.emitShot(); const { updatedBoxes, boxesToRemove, } = getUpdatedBoxes(boxes, id); this.setState({ boxes: updatedBoxes, explosionPosition: explosionPosition.clone().set(x, y, -5), showExplosion: true, }, () => this.afterHitUpdate(boxesToRemove)); }; afterHitUpdate = (boxesToRemove) => { this.props.addHit( getPoints(boxesToRemove), boxesToRemove.length, ); this.setState({ showExplosion: false, }); }; 

www.swingdev.io Add particles to Wall’s boxes Wall.js import { ParticlePool } from '../views/ParticlePool/component'; render() { const { boxes, explosionPosition, showExplosion } = this.state; return ( {boxes.map(this.renderBox)} ); } 

www.swingdev.io Update Cannon’s state on shot Cannon.js state = { headRotateX: 0, headRotateY: 0, showSmoke: false, }; componentDidMount() { this.rotateListener = RCTDeviceEventEmitter.addListener( 'onReceivedHeadMatrix', this.handleReceiveMatrix, ); this.shotListener = RCTDeviceEventEmitter.addListener( 'shot', this.handleShot, ); } componentWillUnmount() { this.rotateListener(); this.shotListener(); } handleShot = () => { this.setState({ showSmoke: true, }, () => { this.setState({ showSmoke: false, }); }); }; 

www.swingdev.io Add particles to Cannon 

www.swingdev.io Add sound to Wall’s component Wall.js state = { boxes: getBoxesProps(), soundPlayState: 'pause', explosionPosition: new THREE.Vector3(0, 0, -5), showExplosion: false, }; render() { // start of render() return ( boxes.map(this.renderBox) {/* rest of the component */} ); } 

www.swingdev.io Play sound on hit Wall.js handleSoundEnd = () => { this.setState({ soundPlayState: 'stop', }); }; handleHit = (box, weapon = weapons.CANNONBALL) => { const { id, x, y } = box; const { boxes, explosionPosition } = this.state; NativeModules.ShotBridge.emitShot(); const { updatedBoxes, boxesToRemove, } = getUpdatedBoxes(boxes, id, weapon); this.setState({ boxes: updatedBoxes, soundPlayState: 'play', explosionPosition: explosionPosition.clone().set(x, y, -5), showExplosion: true, }, () => this.afterHitUpdate(boxesToRemove)); }; 

www.swingdev.io Add sound to Cannon’s component Cannon.js state = { headRotateX: 0, headRotateY: 0, soundPlayState: 'pause', showSmoke: false, }; handleSoundEnd = () => { this.setState({ soundPlayState: 'stop', }); }; handleShot = () => { this.setState({ soundPlayState: 'play', showSmoke: true, }, () => { this.setState({ showSmoke: false, }); }); }; render() { const { headRotateX, headRotateY, showSmoke, soundPlayState, } = this.state; return ( {/* start of the component */} ); } 

www.swingdev.io Adding score and weapon types 

www.swingdev.io Make component for game summary Summary.js class Summary extends React.Component { render() { const { score, hits, time } = this.props.player; return ( Your points: {score} Your hits: {hits} Your time: {getFormattedTime(time)} this.props.updateFinishedStatus(false)}> Restart game ); } } 

www.swingdev.io Create game’s HUD HUD.js class HUD extends React.Component { render() { const { score } = this.props.player; return ( {score} ); } } 

www.swingdev.io Show Summary when game ends Wall.js render() { const { hasFinished } = this.props.player; const { boxes, explosionPosition, showExplosion, soundPlayState, } = this.state; return ( {(!hasFinished) ? ( boxes.map(this.renderBox) ) : ( )} {/* rest of the component */} ); } finishGame() { this.props.updateFinishedStatus(true); this.setState({ boxes: getBoxesProps(), soundPlayState: 'pause', }); } afterHitUpdate = (boxesToRemove) => { const { boxes } = this.state; this.props.addHit( getPoints(boxesToRemove), boxesToRemove.length, ); this.setState({ showExplosion: false, }); if (boxes.length === 0) { this.finishGame(); } }; import Summary from './Summary'; 

www.swingdev.io Attach HUD to Cannon’s head Cannon.js render() { // start of render() return ( {/* rest of the Cannon’s head */} {/* rest of the component */} ); } import HUD from './HUD'; 

www.swingdev.io Handle weapon types Wall.js renderBox = (box) => { const { id, x, y, file, } = box; return ( this.handleHit(box)} onLongClick={() => this.handleHit(box, weapons.ROCKET)} longClickDelayMS={SPECIAL_WEAPON_DELAY} > ); } handleHit = (box, weapon = weapons.CANNONBALL) => { const { id, x, y } = box; const { boxes, explosionPosition } = this.state; NativeModules.ShotBridge.emitShot(); const { updatedBoxes, boxesToRemove, } = getUpdatedBoxes(boxes, id, weapon); this.setState({ boxes: updatedBoxes, soundPlayState: 'play', explosionPosition: explosionPosition.clone().set(x, y, -5), showExplosion: true, }, () => this.afterHitUpdate(boxesToRemove)); }; 

www.swingdev.io 

www.swingdev.io Questions? 

www.swingdev.io Further reading • Getting started with React VR • Oculus Developer Center • Prototyping with React VR • Getting Started with WebVR • Bring Virtual Reality to Your Browser with React VR • Learn React VR (Chapter 8 | Building a VR Video App) • glTF Overview 

www.swingdev.io https://twitter.com/mciastek https://medium.com/@mciastek https://github.com/mciastek #webvrmeetup Where to find me: 

www.swingdev.io Thank you