Rapid Cross-Platform AR Development with React Native

Transcript

3. RA PID RA PID RA PID RA PID m m Cross Platform Cross Platform EACT NATIVE EACT NATIVE REACT NATIVE REACT NATIVE WITH WITH WITH WITH son Alex Hinson amhinson @amhinson
6. RA PID RA PID RA PID RA PID m m Cross Platform Cross Platform EACT NATIVE EACT NATIVE REACT NATIVE REACT NATIVE WITH WITH WITH WITH son Alex Hinson amhinson @amhinson
7. WHY WHY How How hat What
8. What is AR ?
9. creates a virtual environment that is closed off to the real world places virtual objects in the real world
11. ARKit & ARCore Pokemon GO, Instagram, Snapchat
12. How Does AR Work ?
13. g Tracking Rendering Rendering
14. 3d rendering lighting & shadows physics animations Rendering
15. built by Apple not cross platform it SceneKit
16. built for games cross platform not JS based Unity / Unreal
17. cross platform JS/React based
18. What is Viro ?
20. ARKit & ARCore Cardboard, Daydream, & Gear VR
21. Why would you use Viro ?
22. amiliar Familiar werful Powerful ABLE AVA ILABLE
23. How does viro work ?
24. high performance native 3D rendering engine custom React Native components
25. Viro Viro Testbed Testbed App App
26. warning: lots of code ahead Examples
27. <ViroARSceneNavigator apiKey={API_KEY} initialScene={{ scene: this.renderARScene }} />
28. <ViroARScene onTrackingUpdated={this.onInitialized} > // … </ViroARScene>
29. onInitialized = (state) => { if (state === ViroConstants.TRACKING_NORMAL) { this.setState({ tracking: true }); } };
30. <ViroARScene onTrackingUpdated={this.onInitialized}> {this.state.tracking && ( <ViroText text="Airship" position={[0, 0, -1]} style={{ color: '#FF2A13' }} /> )} </ViroARScene>
32. <ViroARScene onTrackingUpdated={this.onInitialized}> {this.state.tracking && ( <ViroText text="Airship" position={[0, 0, -1]} style={{ color: '#FF2A13' }} /> )} </ViroARScene>
34. s SHapes
35. <ViroBox height={0.2} length={0.2} width={0.2} materials={['white']} />
37. ViroMaterials.createMaterials({ white: { lightingModel: 'Blinn', diffuseColor: 'rgb(231,231,231)' } });
38. <ViroAmbientLight color=“#FFFFFF" intensity={150} /> <ViroDirectionalLight color="#FFFFFF" direction={[0.5, -1, 0.5]} castsShadow={true} /> // ...
40. <ViroSphere radius={0.2} materials={[‘white']} />
42. <ViroSphere radius={0.2} materials={['moon']} /> // ... ViroMaterials.createMaterials({ moon: { shininess: 2.0, lightingModel: 'Blinn', diffuseTexture: require('./res/moon.jpg') } });
45. <ViroSphere radius={0.2} onDrag={position => this.setState({ x: position[0], y: position[1], z: position[2] }) } position={[this.state.x, this.state.y, this.state.z]} materials={['moon']} />
47. ViroAnimations.registerAnimations({ spin: { properties: { rotateY: '+=45' }, duration: 2000 } });
48. <ViroSphere radius={0.2} onDrag={position => this.setState({ x: position[0], y: position[1], z: position[2] }) } position={[this.state.x, this.state.y, this.state.z]} materials={['moon']} animation={{ name: 'spin', run: true, loop: true }} />
50. Custom 3d Obj ects
53. <Viro3DObject source={require('./res/dino.vrx')} position={[0, 0, -1]} scale={[0.1, 0.1, 0.1]} type="VRX" />
55. final ARScene scene = new ARScene(); scene.setListener(new ARScene.Listener() { public void onAnchorFound(ARAnchor anchor, ARNode arNode) { // Make sure anchor is a plane if (anchor.getType() == ARAnchor.Typea.PLANE) { ARPlaneAnchor planeAnchor = (ARPlaneAnchor) anchor; // Ensure this is a horizontal plane of the right size if (planeAnchor.getAlignment() == ARPlaneAnchor.Alignment.HORIZONTAL && planeAnchor.getWidth() > 1.0 && planeAnchor.getHeight() > 1.0) { Object3D dinosaur = new Object3D(); dinosaur.loadModel("file://android-asset/dinosaur.fbx", Object3D.Type.FBS); arNode.addChildNode(dinosaur); } } } });
56. <ViroARPlaneSelector> <Viro3DObject source={require("./res/dinosaur.vrx")} type="VRX" /> </ViroARPlaneSelector>
59. <ViroSpotLight innerAngle={5} outerAngle={45} direction={[0, -1, -0.2]} position={[0, 3, 1]} color="#ffffff" castsShadow={true} shadowOpacity={0.5} /> // ... Viro3DObject <ViroQuad rotation={[-90, 0, 0]} width={4} height={4} arShadowReceiver={true} />
61. <Viro3DObject source={require('./res/dino.vrx')} position={[0, 0, 0]} scale={[0.1, 0.1, 0.1]} type="VRX" onClick={() => this.setState({ runAnimation: true }) } animation={{ name: 'move', run: this.state.runAnimation, loop: true }} />
62. ViroAnimations.registerAnimations({ move: { properties: { positionZ: '+=0.2' }, duration: 1000 } });
64. Portals
66. <ViroPortalScene passable={true}> <ViroPortal position={[0, 0, -1]} scale={[0.1, 0.1, 0.1]} > <Viro3DObject source={require(‘./res/ship_window.vrx')} type="VRX" /> </ViroPortal> <Viro360Image source={require(‘./res/360_island.jpg')} /> </ViroPortalScene>
68. <Viro360Video source={require('./res/360_surf.mp4')} loop={true} />
70. Image Recognition
72. <ViroARImageMarker target="airshipLogo" onAnchorFound={() => this.setState({ runAnimation: true }) } > // ... Objects to render when target is found </ViroARImageMarker>
73. ViroARTrackingTargets.createTargets({ airshipLogo: { source: require('./res/logo.png'), orientation: 'Up', physicalWidth: 0.03 } });
74. ViroAnimations.registerAnimations({ slideUp: { properties: { positionZ: 0, opacity: 1.0 }, easing: 'Bounce', duration: 700 }, rotate: { properties: { rotateZ: '+=45' }, duration: 200 } });
75. <ViroNode opacity={0} position={[0, -0.01, 0.05]} animation={{ name: ‘slideUp', run: this.state.runAnimation }} > <ViroText text="Airship" extrusionDepth={2} scale={[0.1, 0.1, 0.1]} rotation={[-90, 0, 0]} animation={{ name: 'rotate', run: this.state.runAnimation, loop: true }} /> </ViroNode>
76. <ViroARImageMarker target="airshipLogo" onAnchorFound={() => this.setState({ runAnimation: true })}> <ViroNode opacity={0} position={[0, -0.01, 0.05]} animation={{ name: ‘slideUp', run: this.state.runAnimation }}> <ViroText text="Airship" extrusionDepth={2} scale={[0.1, 0.1, 0.1]} rotation={[-90, 0, 0]} animation={{ name: ‘rotate', run: this.state.runAnimation, loop: true }} /> </ViroNode> </ViroARImageMarker> // … ViroARTrackingTargets.createTargets({ airshipLogo: { source: require('./res/mark_with_bg.png'), orientation: 'Up', physicalWidth: 0.03 } }); ViroAnimations.registerAnimations({ slideUp: { properties: { positionZ: 0, opacity: 1.0 }, easing: 'Bounce', duration: 700 }, rotate: { properties: { rotateZ: ‘+=45' }, duration: 200 } });
80. <ViroARImageMarker target="videoImage"> <ViroVideo source={require('./video.mp4')} loop={true} rotation={[-90, 0, 0]} height={0.08} width={0.15} /> </ViroARImageMarker>
83. Object Recognition
84. <ViroARObjectMarker target={target.targetName}> // ... Something to render </ViroARObjectMarker> // ... ViroARTrackingTargets.createTargets({ tvRemote: { source: require('./res/tvRemote.arobject'), type: 'Object' }, dvdRemote: { source: require('./res/dvdRemote.arobject'), type: 'Object' } });
86. const TARGETS = [ { displayText: 'TV', targetName: 'tvRemote' }, { displayText: 'DVD', targetName: 'dvdRemote' } ]; // ... {TARGETS.map(target => ( <ViroARObjectMarker target={target.targetName}> <ViroText text={target.displayText} extrusionDepth={2} scale={[0.15, 0.15, 0.15]} position={[0, 0.1, 0]} textAlign="center" /> </ViroARObjectMarker> ))}
88. Viro & react NAtive
90. <View style={{ flex: 1 }}> <ViroARSceneNavigator apiKey={API_KEY} initialScene={{ scene: this.renderARScene }} /> <Text>Score: {this.state.score}</Text> <TouchableOpacity onPress={this.restartGame}> <Text>Restart</Text> </TouchableOpacity> </View>
92. state = { dollarBills: [] }; // ... // Inside setInterval this.setState(({ dollarBills }) => ({ dollarBills: [ ...dollarBills, { position: this.randomXYZNumber(-2, 2), rotation: this.randomXYZNumber(-45, 45) } ] }));
93. dollarBills.map((item, index) => ( <ViroBox key={index} position={item.position} rotation={item.rotation} onClick={() => this.onDollarSelected(index)} height={0.2} length={0.01} width={0.6} materials={['billFace']} /> ))
96. bit.ly/scs-ar-demo Demo A pp
97. repo: bit.ly/scs-ar-demo ks Thanks on Alex Hinson mhinson @amhinson slides: bit.ly/scs-ar-slides