Make Your First Web AR app in 30 minutes
Web AR is an exciting prospect as it allows users to engage with AR experiences without the need for downloads and longer time to engagement. Marvin AI have released a platform on which you can easily create web AR applications and render with WebGL and increase user engagement up by 67%. We provide two types of web AR technologies: - Marker-less web AR: This kind of AR can be easily played with mobiles without the need of any external marker. Marvin AI is using Google ARCore technology for web to facilitate such kind of web AR experience.
- Marker-based web AR: The 3D rendering starts immediately once you focus your mobile towards a marker. Marvin AI is using AR.js to implement such kind of web AR experience.
In this tutorial we are going to be making a small marker-less web AR app in which you can open an astronaut from your mobile web browser and place it in real world virtually. If you have prior development experience, you can easily make it ready by following the guide and create your very first web AR within 30 minutes.
To get started professionally, you need to contact Marvin AI because they provide end to end service to take your web AR up and running in cloud without you doing anything. This is a huge advantage because often DYI web AR development leads to cost more time and money than initially estimated and thus can affect your ROI in business.
Marvin AI provides demo for free which can be used anywhere to test the solution. During production deployment, you can choose the correct license based on how you want to publish it before mass users.
Lets Start It Now
First thing first. Before we jump into the code section, we'll focus on the heart of web AR - the 3D model. 3D models can be created in many ways. The easiest way is to purchase professional 3D models or make a customized one from world's biggest 3D platform Sketchfab.
Another way to create realistic 3D model is Photogrammetry. Photogrammetry is the science and technology of obtaining reliable information about physical objects and the environment through the process of recording, measuring and interpreting photographic images and patterns of electromagnetic radiant imagery and other phenomena.
But Photogrammetry is a costly way of creating 3D models and often it might lead not to achieve a high resolution professional 3D. Of course it is based on which kind tool and expertise is been used.
To get high quality 3D models for business, we recommend to use Sketchfab. For custom needs, Marvin AI also can refer you to one of our partners to help model and animate WebAR-ready assets.
There are several 3D modelling tools you can use to create it by yourself. Blender is the most popular (probably because it is FREE) among some other tools like - Autodesk Maya - Natron - ZBrush - Cinema 4D - SketchUP etc.
For this tutorial, we'll use an inbuilt 3D model (in GLB format).
Here comes the king - the Code! If you are thinking there will be several thousands lines of code to make a web AR application - you're certainly wrong. You can create a web AR app with merely 10 lines of code - YES! it's that simple.
In your web application, replace the index.html with the following code from Github and that'll start work immediately.
Quick info: to play 3D model in iOS and Android, it needs different typed of 3D models. Both types are included in the example.
Here comes the final part - the deployment. You can host the application in a small web server (like Apache-Tomcat or Nginx) running within a local server. If you are tech savy, you can write your web server using Node.js. If you're cloud ambitious, you can rent out a cloud server to host the web AR (because your local server might not be reachable from the world outside).
But if you don't have prior knowledge in any of that, we can help you to setup things in an easy way. Glitch is an excellent cloud management tool to host such app for FREE. You can create a new project and upload the Github project there.
Marvin AI provides a cloud based secure platform to host the web AR applications. Also it provides a business dashboard showcasing all necessary KPIs and user metrics so that you can achieve a broader but precise overview on how your web AR is getting popular and used by many people across the world. Marvin AI also cater webpage designing to boost online sales for your business.
Well, that was all. Now you have successfully launched your first web AR application. You can simply open it from your latest Androind or iPhone models and enjoy the AR experience.
If you want to build your professional web AR application for retail business, please contact at email@example.com. Marvin AI will help you from end to end with professional guidance to publish your first web AR to enhance online shopping experience and customer engagement.