Augmented Reality Guidance System


Table of Contents

  1. Introduction
  2. Requirement Gathering
  3. Design and implementation
  4. Links


The department of Computer engineering of the University of Peradeniya has multiple important locations such as laboratories, lecture rooms, conference rooms etc. Each one of those locations is dedicated to various types of work. So every location has details like people in charge, a set of available features, equipment and usages, seating arrangements, rules etc. Most of these details are recorded in the department archives and some are not documented at all. So when a visitor comes to the department due to some requirement, He/she may have trouble finding the required room or may have trouble finding the details of a room/location. Currently, there’s no digitalized directory for this, so the people should have to find those details by asking somebody else. The information taken using that method may be unreliable sometimes. As the students of the department of computer engineering, we could develop a reliable digital solution to prevent these kinds of situations. For that, there are 2 approaches we can apply.

  1. Developing a 3D interactive map for the department
  2. Developing an AR guidance system for the department

Developing a 3d interactive map can solve the problems related to navigation such as helping to find a specific place easily and fastly. It can provide the ability to see a 3d interactive model of the department that allows the users to see the overall structure and the main details of the rooms. This method can be used by people who are not inside the department at the time of requirement.

The second method is to develop a Web-based augmented reality guidance system, which allows the users to scan markers placed in the department and see the details of the room associated with the scanned marker. This method can be used by people who are in front of some unknown room in a department building at some instance to find the details of that room/location.

Under this project, we’ll be implementing the second method, which is the Augmented reality guidance system and the other method will be implemented parallelly as another project by another group.

Augmented Reality is the technology that makes it possible to overlay content in the real world. It can be provided for several types of devices: handheld (like mobile phones), headsets, desktop displays, and so on. For handheld devices (more generally, for video-see-through devices) the ‘reality’ is captured from one or more cameras and then shown on the device display, adding some kind of content on top of it.

Requirement gathering


As an initial step, we gathered the requirements of the project with a stakeholder analysis. From that, 4 main stakeholders who interact and take benefits from the system which is to be designed were identified.

  1. Students
  2. Academic Staff
  3. Non-academic staff
  4. Visitors


Students can be divided into 2 categories.

  1. Students from the Computer Eng department
  2. Students from other departments

The requirements of the students are as follows:

Academic staff

The requirements of the academic staff are as follows:

Non-academic staff

The requirements of the non-academic staff are as follows:


The requirements of the visitors are as follows:

Requirement analysis

By analysing the above requirements, the functional requirements of the system were defined.

Design and implementation

After identifying the list of users and their requirements, the design of the solution was planned. For the solution, web-based augmented reality technology was chosen as the main technology.


High-level system architecture

Architecture Diagram Example - Multiplayer (Community) (2)

Marker Designs

AR Overlay Designs

Technology Stack

  1. HTML/CSS/JavaScript (Used for creating and styling the web application)
  2. JQuery - Simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation
  3. ThreeJS (Used for rendering 3D objects)
  4. ArJS (Used as the augmented reality library.)
    • Very Fast: It runs efficiently even on phones
    • Web-based: It is a pure web solution, so no installation is required. Fully javascript based, using three.js + A-Frame + jsartoolkit5
    • Open Source: It is completely open-source and free of charge!
    • Standards: It works on any phone with webgl and webrtc
  5. AFrame - Used for creating 3d objects
  6. aframe-htmlembed-component - Used for embedding html content in AFrame