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.

Single page Wordpress layout. Each section pulls a Wordpress page content.
SVG Animated Icons on hover. Each icon design moved/transformed differently.
Portfolio section pulls a different work on each page load. Showcasing the project.
PeachnTeal website design mockup

Technologies Used

Invision Icon JS Icon HTML5 Icon CSS3 Icon SaSS Icon

Technical Challenges

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-marker-camera preset="custom" type="pattern" 
    <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-entity geometry="primitive:plane;" rotation="-90 0 0" 
    position="0 -0.2 -0.3"  scale="1.9 2.9 0" 
    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" 

<article id='basicmarkup'</article>

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.

#styles{display: block;}

As a web app solution for SAIT, CSS styles were adjusted to ensure SAIT Brand guidelines.

var title = 'javascript rocks';

HTML5 geolocation API was used to serve the user the correct set of directions depending on where they were located within campus.