Augmented Reality for previewing products is becoming more common within eCommerce and a few key stats can help us to understand this trend.

Recently Deloitte released a report that found that 56% of consumers agree that AR gives them more confidence about product quality. Pair this with the Harvard Business review’s findings that, interacting with products that have AR experiences leads to a 94% higher conversion rate. Then connect these two with the findings for ARInsider that AR-guided purchases led to a 25% decrease in returns. These stats make it clear that augmented reality is a vital part of digital commerce and a must-have for e-Commerce businesses.

Giants like Amazon and Wayfair have been slowly adding more and more 3D/AR previews to their products. For smaller retailers just starting, it could be tough to under how to make their products appear true to their real scale when using AR product previews.

In this guide, we will walk through how to set up a 3D model to appear in true scale within an AR experience. I will also show how to use Apple’s Reality Composer to disable scaling, and then how to create a web-based 3D preview that launches the true-scale AR experience.

For this guide, we’ll use Blender for the 3D modeling, though the approach is similar across 3D tools. We’ll also use Apple’s Reality Converter and Reality Composer tools to create our AR model. To visualize the model in our web browser and preview it in AR we’ll use the Virtual Try-Out (VTO) editor from Arlene.io.

This guide will assume a basic understanding of 3D concepts such as scale, rotation, and importing/exporting. Though no knowledge is needed to follow along.

To start, open Blender and load the default project. The first thing you’ll notice in the scene is the default cube, a camera, and a light. For setting up true-scale we only need the cube so remove the camera and light. The cube will act as our bounding box to ensure our 3D model stays within the required dimensions.

Before we start, let’s check the scene settings to ensure we are using the proper units. For this example, I’m using the default Metric unit system, and from this interface, we can see that the base unit will be meters. Take note of this base unit because later when we prep the model for AR, we will make sure we are using the same base units.

Now that our base units are set, select the cube and you’ll notice it's scaled 1 x 1 x 1 but what does that equate to in meters? To accurately measure the cube, switch the ViewPort to Front and zoom in so the cube fills most of the screen.

Next, select the measurement tool and use the grid to drag a measurement line from the left edge of the cube to the right edge.

Using the Measure tool we can see that the cube is 2m on each side, but to keep the calculations simple we’ll need a bounding box that is 1m on each side.

Next, we’ll modify the cube to make it 1m on each side. Switch to the Modeling tab, which puts us into edit mode, and type s to enable scaling then type 0.5 and hit enter to reduce the model scale by 50% of the original across all axes.

With the cube scaled down, switch back to the Layout tab and use the measure tool to confirm the cube is now 1m on each side. Now that the cube is 1m on all sides we can use it as a bounding box to accurately set the scale of our 3D model to match its physical counterpart.

The only drawback to the default cube it’s fully opaque, but to see what we are doing we’ll need the cube to have some transparency. There are a few options, one is to use Wireframe mode and another is to texture the cube.

While wireframes are faster to use and don’t require any extra setup, they aren’t the easiest to visualize when the product is protruding from the bounding box. For this reason, I prefer to add a texture with transparency to the cube. Check out this guide on how to add transparency to the cube, or download this cube from Sketchfab and import it into your project.

Once you have the semi-transparent cube setup, you are ready to set the bounding box scale.

To better understand the size that the pillow should be, I will use this sizing chart that gives the pillow’s dimensions in centimeters. For this example, I will use the standard size pillow.

Now that we have established the dimensions we want for our model, we can scale the cube to these dimensions.

Switch back to the Layout tab and select the Cube and within the Object properties in the right panel, set the Scale-x to 0.6 for 60cm width, Scale-y to 0.35 for 35cm depth, and Scale-z to 0.11 for 11cm height.

Now that we have established our bounding box, we can import the 3D model for our product. For this example, I will be using a 3D model of a pillow but feel free to use any 3D model.

Once you’ve imported the 3D model and may notice that the scale and rotation are not correct. In my instance, the pillow is quite large and rotated perpendicular to the bounding box.

To ensure we don’t distort the original product model we will need to add a parent node to the product mesh. Using a parent node for scaling and rotation ensures that the base model keeps its original properties.

In Blender, click Add > Empty > Plain Axis to add an empty node at the scene’s root. Make sure to name the root model for easier reference. Then using the scene graph, in the right panel, drag the mesh node over the root node and hold down the shift key to establish the parent/child relationship.

Now that we have established our bounding box, select the parent node then use the Scale and Rotate tools to fit within the bounding box. Make sure the model is scaled up to the edge of the bounding box but doesn’t break through any of the faces. For greater precision, set the scale and rotation values manually using the Object Properties tab within the right side panel.

In my example, I rotated the parent 90° around the Z-axis, and scaled the parent to 0.319 on all axes.

Our 3D product is now correctly scaled and ready for export. Before we export, make sure to hide the bounding box. From the Export options select the glTF 2.0 (.glb/.gltf) format.

Within the export options, expand the Include options and select “Visible Objects” to ensure the 3D product is exported without the bounding box.

The final step to visualizing our 3D product is to embed it within a 3D web preview that supports augmented reality. For this example we’ll use Arlene.io’s WebXR tools.

Create a free account or Log in to the webXR.tools platform and create a new project using the VTO project type.

Once the project loads, select the Model from the left side panel.

Then using the 📁 next to the “GLB/GTLF” input, in the right side panel, upload the GLB model. Once you select your model, the webXR.tools Asset Manager will automatically generate the USDZ file for AR on iOS devices.

After you have uploaded and selected your files, you may want to adjust some of the UI to fit your brand. Customize the header and call to action button by clicking on the element you want to edit. Enable Control Limits to restrict how far in or out users can zoom to avoid poor user experience caused when users zoom too far in or out.

Once you are happy with the design, click Save and Publish. A green check mark will appear when the project has been successfully published. Click View Live Project to preview your true-scale product experience.

From desktop, it’s easy to switch over to mobile. Click the Experience in AR button to display the page’s QR code.

Next, open your mobile phone’s camera app and scan the QR code. Tap the link in the camera view to load the 3D preview webpage.

Once the webpage loads, tap the Open in AR button to preview the true-scale product using augmented reality.

Thanks for taking the time to read my guide and if you have any questions please let me know with a comment.

Make 3D Models Appear True Scale in AR was originally published in AR/VR Journey: Augmented & Virtual Reality Magazine on Medium, where people are continuing the conversation by highlighting and responding to this story.