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. 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)
  2. 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.
  3. 7.

    • ReactNative ARKit • ReactNative ARCore • Expo • Viro

    • ViewAR What about JavaScript? • AR.js • 8thWall Mobile Apps Browser
  4. 14.
  5. 15.
  6. 17.
  7. 20.
  8. 21.
  9. 22.
  10. 24.

    { position: { x: 0, y: 0, z: 0 },

    orientation: { w: 1, x: 0, y: 0, z: 0 }, scale: { x: 1, y: 1, z: 1 } }
  11. 27.
  12. 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": { … } }
  13. 32.
  14. 35.
  15. 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);
  16. 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();
  17. 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 }); });