SAITNav is an academic group project developed as our NMPD capstone project. This project explored working with augmented reality to create a wayfinding solution for SAIT’s campus. We decided to use front-end web technologies, graphic design video production, 3D modeling, and animation.
As the person responsible for the web app's development, it required studying on the browser’s current capability of recreating AR experiences with the use of existing WebGL-AR JavaScript libraries.
Using A-FRAME, a leading AR Javascript framework made for building augmented reality experiences on the web, we were able to use HTML5 markup to set up different scenes composed of cameras, anchors, models, and lights.
<a-scene embedded arjs="debugUIEnabled: false;
trackingMethod: best;" vr-mode-ui="enabled: false">
<a-entity>
<a-marker-camera preset="custom" type="pattern"
url="pattern.patt"></a-marker-camera>
<a-text value="TO SENATOR BURNS BUILDING" width="1.5"
wrap-count="16" align="center" position="-0.1 0.3 0.9"
rotation="-90 0 0" shader="msdf"
font="TitilliumWeb-Regular.json" color="white">
</a-text></a-entity>
<a-entity geometry="primitive:plane;" rotation="-90 0 0"
position="0 -0.2 -0.3" scale="1.9 2.9 0"
material="shader:gif;src:url(CC2SB.gif);"
gif=""></a-entity><a-gltf-model src="arrow.gltf"
position="0 0 1.3" rotation="-10 180 0" scale="1 1 1"
width="1" height="1" depth="1"
animation-mixer="loop:repeat"></a-gltf-model>
</a-scene>
Each scene corresponds to a specific instruction on how to get to a destination and it is composed of a 3D animated arrow model, an instructional video, and a guide text.
As a web app solution for SAIT, CSS styles were adjusted to ensure SAIT Brand guidelines.
HTML5 geolocation API was used to serve the user the correct set of directions depending on where they were located within campus.