Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building AR & VR Applications using React Native

852 views

Published on

These are my slides from the React Amsterdam talk on building Augmented Reality & Virtual Reality applications using React Native & Viro Media

  • Be the first to comment

Building AR & VR Applications using React Native

  1. 1. Building VR & AR with React Native
  2. 2. @dabit3 Nader Dabit
  3. 3. 1. Layouts 2.Viro React API 3.Why Viro Takeaways
  4. 4. Hype cycle
  5. 5. Why AR?
  6. 6. AR is winning
  7. 7. Building with React React VR Viro React React Native AR Kit
  8. 8. VIRO MEDIA IS THE CREATOR OFVIROREACT AND VIROCORE, PLATFORMS FOR DEVELOPERS TO BUILD IMMERSIVE AUGMENTED REALITY (AR) ANDVIRTUAL REALITY (VR) APPLICATIONS.
  9. 9. AR ARKit
  10. 10. VR
  11. 11. Renderer runs natively on iOS & Android hardware
  12. 12. ARKIT ARCORE SLAM POSITIONAL TRACKING, POSING POSITIONAL TRACKING, POSING DETECTION PLANES, HIT POINTS PLANES, HIT POINTS DEVICES IPHONE SE, 6S/6S+, 7/7+, 8/8+, X | IPAD 2017 AND PRO SAMSUNG 8, PIXEL, TBA EST. USERS (E2017) 200-500M 100M TRACKING RENDERING SCENEKIT UNITY/UNREAL VIRO 3D RENDERING YES YES YES LIGHTING, SHADOWS YES YES YES PHYSICS, PARTICLES YES YES YES LAYOUTS, ANIMATIONS YES YES YES CROSS PLATFORM NO YES YES REACT BASED NO NO YES
  13. 13. <div class=‘container’ /> .container { margin: 20px; }
  14. 14. <ViroText position={[2, 0, -2]} text=“Hello World” />
  15. 15. Getting Started
  16. 16. 1. Get API Key 2. Install CLI npm install -g react-viro-cli 3. Generate project react-viro init MyNewProject Visit https://viromedia.com/ Getting Started
  17. 17. Building / Testing 1. Run directly on device 2. Download Viro Media app & run on testbed device
  18. 18. API
  19. 19. import { ViroImage } from ‘react-viro’ <ViroImage position={[2, 0, -2]} height={2} width={2} source={require(“./path”)} />
  20. 20. Hello World
  21. 21. ViroBox, ViroMaterials, Import Components <ViroBox position={[0, -.5, -1]} scale={[.3, .3, .1]} materials={["grid"]} /> New Component in render() ViroMaterials.createMaterials({ grid: { diffuseTexture: require('./res/grid_bg.jpg'), }, }); Add after class declaration Adding a Box to a Scene
  22. 22. Viro3DObject, ViroAmbientLight, ViroSpotLight, Import Components <ViroAmbientLight color={"#aaaaaa"} /> <ViroSpotLight innerAngle={5} outerAngle={90} direction={[0,-1,-.2]} position={[0, 3, 1]} color="#ffffff" castsShadow={true} /> <Viro3DObject source={require('./res/emoji_smile/emoji_smile.vrx')} position={[-.5, -.5, -.5]} scale={[.2, .2, .2]} type="VRX" /> New Components in render() Adding a 3D object to a Scene
  23. 23. ViroARPlaneSelector, Import Components <ViroARPlaneSelector> </ViroARPlaneSelector> New Component in render() Plane Selector
  24. 24. Add Dinosaur to Plane Selector <ViroARPlaneSelector> <Viro3DObject source={require('./res/emoji_sad/emoji_sad.vrx')} position={[0, .25, 0]} scale={[.2, .2, .2]} type="VRX" /> </ViroARPlaneSelector> Add Viro3DObject to ViroARPlaneSelector
  25. 25. Shadows & Lights ViroSurface, Import Component <Viro3DObject source={require('./res/ emoji_angry/emoji_angry.vrx')} position={[0, .15, 0]} scale={[.2, .2, .2]} type="VRX" lightReceivingBitMask={3} shadowCastingBitMask={2} /> Update Component in ARPlaneSelector Add Components in ARPlaneSelecteor <ViroSpotLight innerAngle={5} outerAngle={45} direction={[0,-1,-.2]} position={[0, 3, 1]} color="#ffffff" castsShadow={true} influenceBitMask={2} shadowMapSize={2048} shadowNearZ={2} shadowFarZ={5} shadowOpacity={.7} /> <ViroSurface rotation={[-90,0,0]} width={.5} height={.5} arShadowReceiver={true} lightReceivingBitMask={2} />
  26. 26. ViroAnimations, Import Component ViroAnimations.registerAnimations({ rotate: { properties: { rotateY: "+90" }, duration: 250, //.25 seconds }, }); Add to Viro component Animate Objects Register Animation animation={{name: "rotate", run: true, loop: true}}
  27. 27. ViroNode Import Components onDrag(dragToPos, source) { // dragtoPos[0]: x position, // dragtoPos[1]: y position, // dragtoPos[2]: z position } <ViroNode position={this.state.positions} dragType=“FixedToWorld" onDrag={this.onDrag} > ViroNode Interact with Objects
  28. 28. @dabit3 Nader Dabit

×