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

Showing a Transparent Video (Chroma key)

Holograma - Web AR App with Transparent Video

Showing a 3D Model with Contact Bar and Call-to-action Button

Holograma - Web AR App with Contact Bar and Call-to-action Button

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. Contact bar with buttons for social networks
  7. Call-to-action button with redirect link
  8. Transparent videos (chroma key)
  9. Automatic generation of markers (targets);
  10. Admin and Editor can create and manage custom markers;
  11. Preview and download marker as pdf or png;
  12. Upload file configuration: file size, media width, media height and media duration;
  13. 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.2 - January 12, 2021
- A-frame updated
- AR.js updated to the latest version
- Improved performance of object tracking
- Adds a custom loading until the scene is loaded
- Adds a new smart play/pause button for videos
- Videos are now automatically played on Android smartphones
- Adds transparent videos (chroma key)
- Adds a contact bar in the scene with buttons for calling, E-mail, WhatsApp, Telegram, Instagram, Youtube, etc.
- Adds a call-to-action button in the scene with a redirect link
- Adds another table to the database
- Changes the file storage structure and removes the need for symlink
- Changes how the application settings are stored
[ATTENTION]: Version 2.2 is not compatible with version 2.1. Therefore, you need a fresh installation.

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

Source
Live PreviewDownload Now

0 Shares:
Leave a Reply

Your email address will not be published. Required fields are marked *




Enter Captcha Here :

You May Also Like
Read More

Cookie Notice

The best solution for cookie consent, which can be customized individually using many parameters. Features Fully responsive Many…
Read More

Klik – CSS3 Buttons

Overview Klik is an easy-to-use and colorful set of buttons made in CSS3. It degrades nicely on older…
Read More

WooCommerce Category Accordion

No1: WooCommerce category accordion Plugin in the Envato Market WooCommerce Category Accordion plugin allows you to list wooCommerce…
Read More

GedCom Parser

The GedCom Parser is a JavaScript Library that focuses on translating GEDCOM structure into a GedCom Library. Tested…