Creating an Augmented Reality App - Using ViewAR and React

In this presentation we start a new AR app from scratch and place a model into the room. Using React we create a UI to switch between various materials.

1. Creating an
 Augmented Reality App 
 Using React and ViewAR
2. Disclaimer I’m part of the team
3. Augmented reality (AR) is an interactive experience of a real-world environment where the objects that reside in the real-world are "augmented" by computer-generated perceptual information, sometimes across multiple sensory modalities, including visual, auditory, haptic, somatosensory, and olfactory. Augment Reality (AR)
4. Augmented reality (AR) is an interactive experience of a real-world environment where the objects that reside in the real-world are "augmented" by computer-generated perceptual information, sometimes across multiple sensory modalities, including visual, auditory, haptic, somatosensory, and olfactory. Augment Reality (AR) Augmented reality is way to extend the real-world with virtual experiences.
5. Where do we start?
6. Announced in 2017/2018 Swift/ObjectivC Java/Kotlin ARKit/ARCore
7. • ReactNative ARKit • ReactNative ARCore • Expo • Viro • ViewAR What about JavaScript? • AR.js • 8thWall Mobile Apps Browser
8. Architecture
9. • Camera
10. • 3D Layer
11. • WebView
12. • Camera • 3D Layer • WebView
13. • Camera (viewar-api) • 3D Layer (viewar-api) • WebView (react)
14. • iOS • Android • Windows • Hololens • Web (Emscripten) ViewAR C++ Core
16. Let’s get started
18. npm install -g viewar-cli mkdir my-app cd my-app viewar init
19. npm start npm start:mock vs
20. Camera
21. Tracking
22. Model
23. 1.8 meters arCamera.getPoseInViewingDirection(1800, true/false); 1.8 meters false true
24. { position: { x: 0, y: 0, z: 0 }, orientation: { w: 1, x: 0, y: 0, z: 0 }, scale: { x: 1, y: 1, z: 1 } }
25. Hello World UI
26. Material Selector
28. { "Fabric": { "name": "Fabric", "values": [ { "key": "123", "imageUrl": "https://api.viewar.com/resources/DownloadImage/display:1/id:366 }, { "key": "152", "imageUrl": "https://api.viewar.com/resources/DownloadImage/display:1/id:366 }, ], "value": { "key": "123", "imageUrl": "https://api.viewar.com/resources/DownloadImage/display:1/id:36662 } }, "Wood": { … } }
29. Material Selector
30. Sync UI Updates
31. Improved UX
33. Intro Screen
34. Tracking Hint
35. Demo
36. Indoor Navigation const positions = [ { x: 12, y: 20, z: 0 }, { x: 88, y: 132, z: 0 }, { x: 30, y: 40, z: 0 } ]; guide.followPath(positions);
37. Object Recognition & Instructions async function onTrackingChanges(evt) { if (!evt.tracked) return false; api.sceneManager.scene.children[0]. animations.Lan.start({loop:true}) } viewarApi.tracker.on( "trackingTargetStatusChanged", onTrackingChanges ); await viewarApi.tracker.activate();
38. Synchronisation const callClient = await createCallClient(viewarApi); await callClient.connect(); await callClient.join({ sessionId: "1234", username: "x@example.com", password: "abc" }); callClient.clientsUpdate.subscribe (({ clients }) => { callClient.call({ id: clients[0].id }); });
39. The End @nikgraf