Creating an Augmented Reality App - Using ViewAR and React

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.

Afcee4ad6e383e26799ff05681d1a2a5?s=128

Nikolaus Graf

February 22, 2019
Tweet

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
  15. None
  16. Let’s get started

  17. None
  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

  27. None
  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

  32. None
  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