This post was last updated on July 11th, 2021
Web AR is an exciting prospect as it allows users to engage with AR experiences without the need for any app download and much longer time to engagement than any traditional marketing experience. Marvin XR have released a platform on which you can easily create WebAR applications within one minute and render with WebGL and increase user engagement up by 67%. We provide two types of web AR technologies.
Markerless WebAR
Markerless AR utilizes a concept called SLAM – simultaneous location and mapping which helps to place the AR overlay wherever we want as long as the surface is a flat surface. Hence, we would need our camera to be able to recognize the flat surface. Thus, for computer vision to help identify the flat surface better, it should have a bit of texture.
Marvin XR uses Google ARCore technology for providing Markerless AR. Fundamentally, ARCore is doing two things: tracking the position of the mobile device as it moves, and building its own understanding of the real world. ARCore's motion tracking technology uses the phone's camera to identify interesting points, called features, and tracks how those points move over time.
The stable, scalable, and extremely powerful will AR experience will transform your e-commerce solution.
Marker-based WebAR
When a marker is found by the camera, it's possible to show some kind of content on top of it, or near it. The content can be a a 3D model (also animated) for now. Marvin XR is using world's most popular marker based web AR backbone - A-Frame.
There is another important factor of marker-based Augmented Reality. The marker-based AR experience is tied to the marker. This means that the placement of digital elements depends on the location of the marker. In most cases, the experience will display on top of the marker and move along with the marker as it is turned or rotated.
Cases of use: Augmented Art, learning (Augmented books), Augmented flyers, advertising etc. to bring the best AR experience for users.
Do You Like Making Things From Scratch?
In this tutorial we are going to be making a simple Marker-less WebAR 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 can sign up at Marvin XR and create your first WebApp campaign within a minute, running in cloud. This is a huge advantage because often DYI WebAR development leads to cost more time and money than initially estimated and thus can affect your ROI in business.
Marvin XR 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.
We'll focus in here on how you can make your own WebApp without the help of anything and make it up and running at your local workstation to have fun with.
Lets Start It Now
3D Model:
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 XR 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).
The Code:
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.
Hosting:
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 WebAR (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 XR 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 WebAR is getting popular and used by many people across the world. Marvin XR 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 sign up in our cloud portal Marvin XR and create your first WebAR campaign even under 30 seconds. Yes, it is that simple and then you can announce the world about your first step achievement in AR world. If you are looking for testing product marketing experience with Augmented Reality, this is a great start for FREE. Of course, you can choose proper business plan when youo want to roll out your AR campains for bigger customer audience. For any queries, feel free to contact at support@marvinai.live.