Code

Holograma – Augmented Reality Builder App

Holograma – Augmented Reality Builder App

Holograma is a web application that allows you to create augmented reality experiences with markers, using images, videos, audios and 3D models. Go to the app URL, point your smartphone camera over the marker (target) and the magic will happen in front of your eyes.

Holograma Dashboard - Augmented Reality Web App

Augmented reality scenes made with the Holograma App

The Holograma supports augmented reality with:

  • Videos – mp4;
  • Audios – mp3;
  • Images – jpg, png and gif;
  • 3D Models – glTF 2.0 (embedded ou binary): .gtlf, .glb.

Showing a Banner Or Image

Holograma - Augmented Reality Banner of a Car

Playing a Video

Holograma - Augmented Reality with Video of Houses

Showing a 3D Model

Holograma - Web AR App with 3D Model of a Monster

How People Are Using the Holograma

The Holograma can be used to add augmented reality to business cards, invitations, flyers, handouts, curriculum, real estate books and more.

Holograma - Web AR App create scene page

Do It Yourself

What will you need?

Go to the bit.ly URL (app URL) and point your smartphone camera over the marker to see augmented reality.

NOTE: For better stability, do not scan the marker on the computer screen. Please Print.

Holograma - Augmented Reality Marker

Technologies

  • HTML5
  • CSS3
  • PHP
  • MySQL
  • Laravel
  • JQuery
  • Bootstrap
  • WebRTC
  • WebGL
  • ARjs
  • Aframe

Main Features

  1. Two types of users: Admin and Editor;
  2. The Editor can create and manage his augmented reality scenes and change profile data;
  3. Admin can manage users, manage augmented reality scenes and change app settings;
  4. Admin can customize the theme: change the app name, main color, logo and icon;
  5. Bit.ly integration;
  6. Automatic generation of markers (targets);
  7. Admin and Editor can create and manage custom markers;
  8. Preview and download marker as pdf or png;
  9. Upload file configuration: file size, media width, media height and media duration;
  10. Manual with installation and use instructions.

Requirements

  • Apache Server;
  • PHP >= 7.1.3;
  • GD PHP extension;
  • Domain with SSL Certificate;
  • PHP extensions required by Laravel on the server:
    • BCMath;
    • Ctype;
    • JSON;
    • Mbstring;
    • OpenSSL;
    • PDO;
    • Tokenizer;
    • XML.
  • For generation of augmented reality in smartphones:
    • Android 6+;
    • iOS 11+.

Attetion

  • Holograma is a marker based augmented reality web app;
  • It supports one marker in each scene;
  • Markers must be at least 3 centimeters in size.

Change log:

Version 2.1 - July 06, 2020
- A-frame updated to the latest version
- Ar.js updated to the latest version
- Improved performance of object tracking
- Bug fixed in the scene rendering
- Fix white screen on new versions of Android and iOS

Version 2.0 - November 22, 2019
- Security fixes
- Alter tables structure and relationship
- Update Aframe to latest version
- Add custom markers creation and management
- Add improvements to stability of augmented reality scenes
- Add Bit.ly integration
- Remove unstable QR Code marker
- Remove QR Code options
[ATTENTION]: Version 2 is not compatible with version 1. Therefore, you need a fresh installation.

Version 1.3 - August 16, 2019
- Add option to improve QR Code readability by smartphone camera
- Fix the size of rendered objects
- Adjust the preview panel

Version 1.2 - August 06, 2019
- Add more stability in augmented reality scenes
- Add improvement to scene lighting
- Add message on top of QR CODE when scene status is not public

Version 1.1 - July 20, 2019
- Fixed problem model validator
- Fixed problem camera calibration

Version 1.0 – July 19, 2019
- Initial Release
by
by
by
by
by
by