How to make AR portal in MyWebAR

You can use augmented reality technology to create AR portals and give users an experience they will not forget.

MyWebAR editor is a perfect tool for making such scenes.

Let’s start with creating a new project. As an example, we are going to make a QR code based tracking project.

Adding 3D objects

The first thing you need to do is to add a 3D model of the room. You can use any model. We take a room without one wall.

Then, adjust the position of the object in the scene (move it slightly up and forward) and scale down the model.

Look at the result:

The room model lacks a doorway that would open the entrance to the virtual world.

In this case, the doorway was made in the advanced editor, so we need to add a JSON MAE object.

The object is completely dark, so add two light sources to illuminate it: Ambient Light and Directional Light.

The next step is to adjust the doorway size and fit it into the wall.

How to work with Occlusion plugin

The main instrument that will help us to create a portal is occlusion.

Occlusion is a process that helps to hide one virtual objects behind others (either real or virtual ones).

Without occlusion:

With occlusion (the bee is hidden):

Therefore, in MyWebAR you can use occlusion to hide certain objects or create an invisible effect when you view the scene from one angle.

To use occlusion in your scene add the plugin. For this, click Plugin button at the top panel.

The window opens, where you can manage plugins.

In the plugin list find Occlusion cube or use search bar in the top right corner.

Then click the Add button. The installation status of the plugin will appear in the top right corner. In our case, the plugin is already installed (green popup).

Close the Plugins window. The Occlusion Cube will appear in the AR-content list on the left.

To add it to the scene, click +. In the opened window, click the Save button.

The occlusion plugin in the scene looks like a transparent purple cube.

Everything inside the cube will not be visible in augmented reality.

So you need to cover the room walls with the occlusion cube. Leave the doorway uncovered, this will create the portal effect.

Look at the preview ( in AR it will look the same):

You can see the room interior only through the doorway.

You can create portals based on MyWebAR editor without QR code as well.

The example of the scene in augmented reality

Scan the QR code below to see this scene with the portal in augmented reality.

Point your camera to the QR code and watch the portal in augmented reality.