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.

Transcript

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