Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Creating an Augmented Reality App - Using ViewA...

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.

Nikolaus Graf

February 22, 2019
Tweet

More Decks by Nikolaus Graf

Other Decks in Programming

Transcript

  1. 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. 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. • ReactNative ARKit • ReactNative ARCore • Expo • Viro

    • ViewAR What about JavaScript? • AR.js • 8thWall Mobile Apps Browser
  4. { position: { x: 0, y: 0, z: 0 },

    orientation: { w: 1, x: 0, y: 0, z: 0 }, scale: { x: 1, y: 1, z: 1 } }
  5. { "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": { … } }
  6. 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);
  7. 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();
  8. Synchronisation const callClient = await createCallClient(viewarApi); await callClient.connect(); await callClient.join({

    sessionId: "1234", username: "[email protected]", password: "abc" }); callClient.clientsUpdate.subscribe (({ clients }) => { callClient.call({ id: clients[0].id }); });