Paul Merritt - Lead AR Developer
Transcript of Paul Merritt - Lead AR Developer
![Page 1: Paul Merritt - Lead AR Developer](https://reader034.fdocuments.net/reader034/viewer/2022042318/625ca8ea06b83819260c984d/html5/thumbnails/1.jpg)
![Page 2: Paul Merritt - Lead AR Developer](https://reader034.fdocuments.net/reader034/viewer/2022042318/625ca8ea06b83819260c984d/html5/thumbnails/2.jpg)
Paul Merritt - Lead AR Developer
AN INTRODUCTION TO WEBXR
#PSCR2021
![Page 3: Paul Merritt - Lead AR Developer](https://reader034.fdocuments.net/reader034/viewer/2022042318/625ca8ea06b83819260c984d/html5/thumbnails/3.jpg)
DISCLAIMER
Certain commercial entities, equipment, or materials may be identified in this document in order to describe an experimental procedure or concept adequately.Such identification is not intended to imply recommendation or endorsement by the National Institute of Standards and Technology, nor is it intended to imply that the entities, materials, or equipment are necessarily the best available for the purpose. * Please note, unless mentioned in reference to a NIST Publication, all information and data presented is preliminary/in-progress and subject to change
#PSCR2021
![Page 4: Paul Merritt - Lead AR Developer](https://reader034.fdocuments.net/reader034/viewer/2022042318/625ca8ea06b83819260c984d/html5/thumbnails/4.jpg)
AR vs VRVirtual objects superimposed on the real world A completely virtual space
44
![Page 5: Paul Merritt - Lead AR Developer](https://reader034.fdocuments.net/reader034/viewer/2022042318/625ca8ea06b83819260c984d/html5/thumbnails/5.jpg)
WHAT IS WEBXR?
• A platform combining AR and VR (miXed Reality)• Easy to use
• Similar to HTML• Convenient• Various frameworks
5Images taken from blog.mozilla.org and learn.framevr.io
![Page 6: Paul Merritt - Lead AR Developer](https://reader034.fdocuments.net/reader034/viewer/2022042318/625ca8ea06b83819260c984d/html5/thumbnails/6.jpg)
A-FRAME AND AR.JS
A-Frame
- Entity component structure- Document Object Model (DOM) based, but performant
AR.js
- Lightweight- Adds location/marker-based functionality
6
![Page 7: Paul Merritt - Lead AR Developer](https://reader034.fdocuments.net/reader034/viewer/2022042318/625ca8ea06b83819260c984d/html5/thumbnails/7.jpg)
#PSCR2021
WALKING THROUGH YOUR FIRST WEBXR
APP
![Page 8: Paul Merritt - Lead AR Developer](https://reader034.fdocuments.net/reader034/viewer/2022042318/625ca8ea06b83819260c984d/html5/thumbnails/8.jpg)
GETTING STARTED WITH A-FRAME
88
This slide is a video demonstrating how to create a basic WebXR scene using A-Frame. If you cannot view this video,
please view my recorded presentation at pscr.gov
![Page 9: Paul Merritt - Lead AR Developer](https://reader034.fdocuments.net/reader034/viewer/2022042318/625ca8ea06b83819260c984d/html5/thumbnails/9.jpg)
GETTING STARTED WITH A-FRAME
Just a few linesInitialize by referencing the script in the header
Populate the scene in the bodyEntity objects!
99
![Page 10: Paul Merritt - Lead AR Developer](https://reader034.fdocuments.net/reader034/viewer/2022042318/625ca8ea06b83819260c984d/html5/thumbnails/10.jpg)
BASIC A-FRAME SCENE
10
![Page 11: Paul Merritt - Lead AR Developer](https://reader034.fdocuments.net/reader034/viewer/2022042318/625ca8ea06b83819260c984d/html5/thumbnails/11.jpg)
BASIC A-FRAME SCENE
11
![Page 12: Paul Merritt - Lead AR Developer](https://reader034.fdocuments.net/reader034/viewer/2022042318/625ca8ea06b83819260c984d/html5/thumbnails/12.jpg)
ADDING A CURSOR FOR INTERACTIVITY
12
This slide is a video demonstrating how to add a cursor to your scene. If you cannot view this video, please view my recorded presentation at pscr.gov
![Page 13: Paul Merritt - Lead AR Developer](https://reader034.fdocuments.net/reader034/viewer/2022042318/625ca8ea06b83819260c984d/html5/thumbnails/13.jpg)
ADDING A CURSOR FOR INTERACTIVITY
13
![Page 14: Paul Merritt - Lead AR Developer](https://reader034.fdocuments.net/reader034/viewer/2022042318/625ca8ea06b83819260c984d/html5/thumbnails/14.jpg)
ADDING A CURSOR FOR INTERACTIVITY
14
![Page 15: Paul Merritt - Lead AR Developer](https://reader034.fdocuments.net/reader034/viewer/2022042318/625ca8ea06b83819260c984d/html5/thumbnails/15.jpg)
ADDING INTERACTIVITY
15
This slide is a video demonstrating how to add event handling for that cursor. If you cannot view this video,
please view my recorded presentation at pscr.gov
![Page 16: Paul Merritt - Lead AR Developer](https://reader034.fdocuments.net/reader034/viewer/2022042318/625ca8ea06b83819260c984d/html5/thumbnails/16.jpg)
ADDING INTERACTIVITY
16
![Page 17: Paul Merritt - Lead AR Developer](https://reader034.fdocuments.net/reader034/viewer/2022042318/625ca8ea06b83819260c984d/html5/thumbnails/17.jpg)
ADDING INTERACTIVITY
17
This slide is a video demonstrating what that interactivity looks like. If you cannot view this video,
please view my recorded presentation at pscr.gov
![Page 18: Paul Merritt - Lead AR Developer](https://reader034.fdocuments.net/reader034/viewer/2022042318/625ca8ea06b83819260c984d/html5/thumbnails/18.jpg)
INJECTING AR.JS
An extension of A-FrameIntroduces a few entities and components
Adds fundamental AR functionalitiesLocation-Based and Image-Tracking
1818
![Page 19: Paul Merritt - Lead AR Developer](https://reader034.fdocuments.net/reader034/viewer/2022042318/625ca8ea06b83819260c984d/html5/thumbnails/19.jpg)
ADDING A MARKER WITH AR.JS
19
This slide is a video showcasing what that interactivity looks like. If you cannot view this video, please view my
recorded presentation at pscr.gov
![Page 20: Paul Merritt - Lead AR Developer](https://reader034.fdocuments.net/reader034/viewer/2022042318/625ca8ea06b83819260c984d/html5/thumbnails/20.jpg)
ADDING A MARKER WITH AR.JS
20
![Page 21: Paul Merritt - Lead AR Developer](https://reader034.fdocuments.net/reader034/viewer/2022042318/625ca8ea06b83819260c984d/html5/thumbnails/21.jpg)
ADDING A MARKER WITH AR.JS
21
![Page 22: Paul Merritt - Lead AR Developer](https://reader034.fdocuments.net/reader034/viewer/2022042318/625ca8ea06b83819260c984d/html5/thumbnails/22.jpg)
#PSCR2021
WHAT DOES IT MEAN THAT IT IS ENTITY
BASED?
![Page 23: Paul Merritt - Lead AR Developer](https://reader034.fdocuments.net/reader034/viewer/2022042318/625ca8ea06b83819260c984d/html5/thumbnails/23.jpg)
#PSCR2021
DYNAMIC
![Page 24: Paul Merritt - Lead AR Developer](https://reader034.fdocuments.net/reader034/viewer/2022042318/625ca8ea06b83819260c984d/html5/thumbnails/24.jpg)
DOCUMENT OBJECT MODEL (DOM) MANIPULATION
querySelector()accessing any element by id/class
getAttribute()accessing an attribute of that element
createElement()adding an element to the a-scene at runtime
setAttribute()changing an attribute at runtime
24
![Page 25: Paul Merritt - Lead AR Developer](https://reader034.fdocuments.net/reader034/viewer/2022042318/625ca8ea06b83819260c984d/html5/thumbnails/25.jpg)
TEMPLATING
Templatingfriendly
25
![Page 26: Paul Merritt - Lead AR Developer](https://reader034.fdocuments.net/reader034/viewer/2022042318/625ca8ea06b83819260c984d/html5/thumbnails/26.jpg)
AJAX
Easy to edit at runtime
26
![Page 27: Paul Merritt - Lead AR Developer](https://reader034.fdocuments.net/reader034/viewer/2022042318/625ca8ea06b83819260c984d/html5/thumbnails/27.jpg)
UPDATING TEXT DATA WITH AJAX
2727
This slide is a video teaching how to use AJAX to update the contents of your scene. If you cannot view this video,
please view my recorded presentation at pscr.gov
![Page 28: Paul Merritt - Lead AR Developer](https://reader034.fdocuments.net/reader034/viewer/2022042318/625ca8ea06b83819260c984d/html5/thumbnails/28.jpg)
UPDATING TEXT DATA WITH AJAX
2828
![Page 29: Paul Merritt - Lead AR Developer](https://reader034.fdocuments.net/reader034/viewer/2022042318/625ca8ea06b83819260c984d/html5/thumbnails/29.jpg)
UPDATING TEXT DATA WITH AJAX
2929
![Page 30: Paul Merritt - Lead AR Developer](https://reader034.fdocuments.net/reader034/viewer/2022042318/625ca8ea06b83819260c984d/html5/thumbnails/30.jpg)
30
![Page 31: Paul Merritt - Lead AR Developer](https://reader034.fdocuments.net/reader034/viewer/2022042318/625ca8ea06b83819260c984d/html5/thumbnails/31.jpg)
31
WEBXR AND ITS FUTURE
Easy to put togetherHTML/JavaScript, plenty of examples
Convenient for any deviceFirst Responder teams with multiple devices can access and share information with ease
CloudXR, OpenXRComplex WebXR platforms are here and coming soon
PULLING THE FUTURE FORWARD
![Page 32: Paul Merritt - Lead AR Developer](https://reader034.fdocuments.net/reader034/viewer/2022042318/625ca8ea06b83819260c984d/html5/thumbnails/32.jpg)