Loading...
Simply put, Augmented Reality (AR) enhances the physical world around us with the help of technology. Technology that overlays information and virtual things on real-world scenes in real-time. It uses the pre-existing environment and adds information to it to make a new artificial environment. [1]
Augmented Reality (AR) is often mistaken with Virtual Reality (VR). The main difference between the two is that while Virtual Reality replaces the entire real environment with an artificial one, Augmented Reality is applied in a direct view of an existing real environment and adds elements like sounds, videos, or graphics onto it.
During our research, we can find the earliest application of AR in greetings cards around 2018 [2]. At that time, there must be a highly visible 2D mark for the camera to locate and track the position of the object. Another way to show greetings is by using physical cards as a markers to show AR models.
One of the main projects we looked at for inspiration on the implementation came from a project made by our seniors that we found on the IXN 2020 abstract[2], which was an Augmented Reality Business Card system[3]. This system gave us a few clues as to how to implement it, and the difference between the two systems guided us in our later choices of technologies. For example, we saw that a business card could be stored in a single JSON file on MongoDB as it could contain all of the information it needed, while on our end, our template sharing would make for much more information that would be stored and accessed more efficiently if it is stored in multiple tables.
There were other apps that have implemented AR Greeting cards before like iGreet[4] or kineticards[5]. Both of those involve buying paper cards where effects are added. However, those don’t solve our main goal, which was to remove the paper from the equation. Since our greetings are wholly virtual, we can allow more liberty in shape these greetings take as well as the user customization in general.
Both projects focus more on the AR experience and the appearance of the greetings card and are mostly real-card based; however, the user lacks the freedom to make a card themselves, and it is usually challenging to make. Both project also lacks the ability to send greetings online. Most importantly, they lack the key feature our project provides - Card customisation.
Overall, we've learned a lot of useful insights and ideas about how we should build our AR greetings cards, and what we should and shouldn't do with reference to existing products on the internet.
Unity + Vuforia
The Unity Editor is a popular and useful authoring platform to create cutting edge augmented reality experiences for both handheld devices and digital eyewear
Vuforia Engine is a software development kit (SDK) for creating Augmented Reality apps. Developers can easily add advanced computer vision functionality to any application, allowing it to recognize images and objects, and interact with spaces in the real world. [7]
AR Core / AR Kit
ARCore is Google’s platform for building augmented reality experiences. Using different APIs, ARCore enables your phone to sense its environment, understand the world and interact with information. Some of the APIs are available across Android and iOS to enable shared AR experiences.
ARkit is Apple's platform for building augmented reality experiences. It integrates iOS device camera and motion features to produce augmented reality experiences in apps or games. [8]
We didn't choose this combo because they are limited to specific Android or IOS devices.
AR.js / Three.js
AR. js is a lightweight JavaScript library for Augmented Reality on the Web, which includes features like Image Tracking, Location based AR and Marker tracking.
Three.js is a cross-browser JavaScript library and application programming interface (API) used to create and display animated 3D computer graphics in a web
This is the first implementation we wanted to use, but because they all lack the ability to allow users to customize AR models.
WebXR
WebXR is an API for web content and apps to use to interface with mixed reality hardware such as VR headsets and glasses with integrated augmented reality features. However, IOS users have to download an app called WebXRviewer to view the AR models.
Because IOS users need another separate app to use, so we abandon this solution.
PlugXR webAR
PlugXR is an easy-to-use Cloud-based Augmented Reality platform with powerful features to Create & Publish advanced AR Apps & Experiences. [9]
The User can create AR experiences with a simple drag & drop interface.
PlugXr's webAR supports most devices with internet connection, whether it is PC, Android or IOS. So it is accessible anywhere over the internet & seamlessly works on all major browsers without installing any software on the local system.
We used PlugXR as the media to let users create and view the AR models.
Hybrid App
Web-based applications are websites optimized for mobile browsers. They are solely developed to be accessed via a web browser. They can run in multiple browsers, such as Chrome or Safari, and are written in JavaScript and HTML5.[10]
The Hybrid apps can also be packaged as application packages (ipa, apk) on different devices to achieve multi-platform support
Native app
Native applications are smartphone apps specifically designed for a particular operating system—iOS or Android.
What distinguishes native apps from mobile web and hybrid apps is that they are developed for specific devices.
Native apps can work offline and offer the fastest, most reliable and most responsive experience to users. However, this also means that if we want to deploy our app to iOS and Android, we need to write two different codebases. So we decided not to do native development.
uni-app
It is a front-end framework for developing cross-platform applications using Vue.js. So developers can use uni-app to compile it to multiple platforms such as iOS, Android, WeChat applet, etc.
Not only supports compiling into H5 app, but also supports native rendering on the App side, which can support a smoother user experience. At the same time of cross-platform, through conditional compilation + platform-specific API call, we can write specific code for a certain platform and call proprietary capabilities without affecting other platforms.
We choose to use uni-app, because of the diversity of its ecosystem. Also it's based on the general front-end technology stack, using vue syntax + WeChat applet api.
Flutter
Flutter is an open source framework by Google for building beautiful, natively compiled, multi-platform applications from a single codebase.
Flutter uses Dart as its programming language, which is a client-optimised language for fast mobile development.
We did not choose Flutter, because the recent version of Flutter was updated, many previous packages are out of date, which may affect our development, and the app developed by Flutter does not support hot updates.
Vue.js
Vue.js is an open source progressive JavaScript framework used to develop interactive web interfaces.
It builds on top of standard HTML, CSS and JavaScript, and provides a declarative and component-based programming model that helps you efficiently develop user interfaces, be it simple or complex.
We also found a helpful admin template for Vue called vue-admin-template.
We choose to use Vue.js, because the learning process is smooth as uni-app also uses Vue.js as programming language.
React
React. js is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. It's used for handling the view layer for web and mobile apps. React also allows us to create reusable UI components. It is maintained by Facebook.
Unlike Vue, React doesn’t have official packages for routing or state management.
PHP
PHP is an open-source server-side scripting language designed specifically for the web development. Although PHP is a server-side scripting language, it is also used as a general purpose scripting language.
It has built a compiler for it so it can be turned into native code on its web servers, thus boosting performance. We didn't choose PHP because it's not lightweight enough.
Python + Flask
Flask is one of the most two famous python Web development frameworks.
Flask is a lightweight WSGI web application framework. It is designed to make getting started quick and easy, with the ability to scale up to complex applications.
We did not choose python, because we want a better overall deploy process for our client, most of our dependencies are based on node.js, and it would be redundant to use python.
Node.js + Express
Express is a minimal and flexible Node.js web application framework that provides a robust set of features to develop web and mobile applications. It facilitates the rapid development of Node based Web applications.
With Express, It is very easy to develop RestFUl api which is an Application Programming Interface (API) that uses HTTP verbs like GET, PUT, POST, and DELETE to operate data.
Compared to PHP, Node.js has better performance on request per second because of the asynchronous request handling [13]
MySQL
MySQL is an open-source relational database management system. It's the most popular Open Source SQL database management system, is developed, distributed, and supported by Oracle Corporation.
MySQL databases are relational which stores data in separate tables rather than putting all the data in one big storeroom.
We choose to use MySQL, because some table or collections have relational relationship. And it's easy to deploy a local server or integrated with IBM SQL database in the future.
NoSQL(MongoDB)
MongoDB is a database based on a non-relational document model.
A NoSQL database provides a ton of flexibility in the types of data that the user can store, but because of the potentially large differences in data structures, querying isn’t as efficient as with a SQL database.
MongoDB is a cross-platform document-oriented database program. It is a NoSQL database that uses JSON-like documents with schemas.
As we need to deploy multiple websites on the same server, and we also need to forward requests from frontend to backend using reverse proxy,we choose to use a web server to handle requests
Nginx
NGINX is open source software for web serving, reverse proxying, caching, load balancing, media streaming, and more. It started out as a web server designed for maximum performance and stability.
Nginx is ‘asynchronous’ and ‘event-driven’, which means it can handle multiple requests at once and process them while there are available resources.
NGINX was written specifically to address the performance limitations of Apache web servers. The performance and scalability of NGINX arise from its event-driven architecture.
We choose Nginx, because reverse proxy is very easy to configure in Nginx with proxy_pass.
Apache
Apache HTTP Server is an open-source cross-platform web server which is also known as “httpd” and Apache. It was developed by the Tim Berners Lee and released in 1995. [14]
It is a modular, process-based web server application that creates a new thread with each simultaneous connection.
We decided not to use Apache because it's a little hard to configure compared to Nginx.
To build the system, we have come up with the following tech stack:
[1] Varun Rao, (Feb 26, 2020), Augmented Reality (AR) – A brief Synopsis, [online] Available: https://www.specbee.com/blogs/augmented-reality-AR-brief-synopsis
[2] REAL cARds - AR Greeting Cards, [online] Available: https://apps.apple.com/us/app/real-cards-ar-greeting-cards/id1338217665
[3] D.Mohamedally in “Student Projects 2020, Book of Abstracts”, [online] Available: http://www0.cs.ucl.ac.uk/staff/D.Mohamedally/ixn2020.pdf
[4] Ziheng.Z, Zhiwei.Z, Jiayi.C in collaboration with John McNamara from IBM [online] Available: https://github.com/IBM-AR-CARD
[5]iGreet, [online] Available: https://www.igreet.co/
[6]Kineticards, [online] Available: https://www.kineticards.com/
[7] Vuforia, [online] Available: https://library.vuforia.com/articles/Training/getting-started-with-vuforia-in-unity.html
[8]AR.js, [online] Available: https://github.com/AR-js-org/AR.js/
[9]PlugXR, [online] Available: https://www.plugxr.com/
[10] Native Apps vs Hybrid Apps Comparison?, [online] Available: https://saucelabs.com/resources/articles/native-apps-vs-hybrid-apps-comparison
[11] Native Apps, Web Apps or Hybrid Apps? What’s the Difference?, [online] Available: https://www.mobiloud.com/blog/native-web-or-hybrid-apps
[12] Flutter, [online] Available: https://flutter.dev/
[13]“PHP vs NodeJS comparison and benchmarks,” Thinkmobiles. [Online]. Available: https://thinkmobiles.com/blog/php-vs-nodejs/.
[14] NGINX vs Apache: Head to Head Comparison [Online]. Available: https://hackr.io/blog/nginx-vs-apache<
[15] What is NGINX? [Online]. Available: https://www.nginx.com/resources/glossary/nginx/
