BLOG

How to optimize your 3D models for AR / VR

In this blog, we will show you a quick guide on how to customize and optimize your 3D objects and import them into your AR / VR projects. We’ll show you some practical examples and steps you need to import them.

Software

Here is a list of what we use to create 3D models. If you prefer other applications, you don’t have to change them. Just follow these instructions to make sure you are exporting the 3D model correctly.

  1. Autodesk Maya (Free Trial) is a recognized, industry standard for 3D modeling software for many years. However, it is far from top-notch. There are many other programs that we use depending on the type of model we make. But it’s a great export tool that makes it easy to export sophisticated FBX models that work well with different rendering platforms.
  2. Pixelogic Zbrush ($ 795) is the industry standard among 3D sculpting tools that we use to create a high-poly base mesh for characters or complex objects.
  3. FBX Review (Free) – Easy standalone application that give you a chance to view exported FBX files. If it is rendered properly, it will be rendered properly in your rendering platform.
  4. Unfold 3D VS (Free Trial) is a great UV unwrapping tool that saves you a lot of time creating UV maps. Identify the seams, cut, then unwrap. It’s very simple.
  5. Photoshop CC (free trial) is a common image editing application I use to draw / edit textures.
  6. Mighty Bake (Free Trial) – A fast 64-bit texture baking tool that bakes a wide variety of important map types, including ambient occlusion, normal, etc.
  7. Viro Media (free) is a developer platform for building AR / VR applications. A great tool for rendering objects in AR or VR and for iterative AR / VR design.

Best practices

It doesn’t matter what you use to create 3D models. This model only needs to be optimized for real-time use and exported to OBJ or FBX format. These are the most widely supported formats. I prefer to export to FBX because you can embed multiple animations and get the most consistent and predictable results.

Resources with 3D models

If you are not creating a 3D model from scratch, there are several great sites that have great models to download:
www.sketchfab.com | www.turbosquid.com | www.poly.google.com | www.free3d.com | www.cgtrader.com

Features in real time

Polycount – There is no clear answer for all platforms. Polycount limitations depends on the total complexity (lighting, animation, number of objects, etc.) of your scene. But, as a general rule, make sure the model is optimized for real-time use. This means that the model is not overly mosaic and smoothed. When buying a 3D model from Turbosquid, we usually check the “Real-Time” items More and “Up to 10K” in the Count drop-down list. This filters results optimized for real-time use. Other sites, such as Google Poly, work in real time, so this is not a problem.

Effective modeling – Try to approach tasks wisely when it comes to efficiency. Consider how close the user is to your 3D object. If the user never gets close to your 3D object, a higher polycount will be unnecessary. Remove faces that the user will never see. Your GPU will use unnecessary resources that try to show faces in areas that do not need to be displayed. Try to make sure the model has only squares and triangles instead of faces. This facilitates deployment and produces more predictable results when the model is loaded onto the platform.

Texture maps – AR / VR rendering platforms use traditional 3D shaders and materials, which include diffuse, normalr and specular maps, and can handle several large textures and large sizes. But try to use as few textures as possible and keep dimensions as small as possible.

Compatible texture formats: .JPG, .PNG. Make sure textures are in one of these formats before exporting.

Creating of a 3D model

For this instruction, we created a simple modern lamp in Maya. We made sure the polycount was as low as possible, using only squares and triangles with enough polys to look decent from close range. To improve performance, we have removed all faces that users cannot see.

To add more texture to the surface and rotate the edges through regular maps, we moved our lamp to Zbrush. We split it several times and added surface noise to get the look we wanted. For the lamp legs we just used Maya. We added extra edge loops around the edges and used the Mesh>Smooth modifier in Maya to round the edges.

UV-unwrapping

As mentioned above, try to use as few textures as possible. The fewer textures to download, the more efficient of your application will be. Thanks to this principle, we set the entire UV of our lamp to 1 texture.

We carry a poorly detailed lamp in Unfold3D where we place the seams we want to cut.

  1. Once the seams are positioned, we press “C” to cut,
  2. Then click “Expand” to automatically expand the mesh into pelts.
  3. Press Optimize repeatedly to relax the pelts a little
  4. Then we manually move and lay out the pelts in the right window, making sure there is a space between each.

Baking textures

After we have done all the previous steps and are satisfied with the result of detailing, we go to work in Mightybake to bake the occlusion and maps. There are many settings you can play with depending on the type of mesh you want to bake, so here are just a few recommended settings:

We reference both “high poly mesh” and “low poly mesh” and make sure that “Normal Map” and “AO Map” are selected in the “Maps” section.

For a normal map, make sure that for Tangents is selected “Unity 5.3”.

Output is where you want to save your maps and here also make sure you set the width and height you need.

Press “BAKE IT” when you are ready to bake.

Texture painting

Consider the example of diffuse, normal, and specular maps.

Once both textures are baked, we upload them to Photoshop to create a diffuse, normal and specular map. There are other great ways to create textures, but for the sake of this tutorial, we will use some proven methods. Here’s what we did:

Diffuse Map – We use the ambient occlusion map as one of the layers in “Multilayer” mode in Photoshop and paint under it. We use a photo of the tree to fill the legs of the lamp.

Normal – A normal map created in Mightybake may have empty spaces that are transparent. We like to flatten the map and export it as a .PNG, making sure that the Transparency checkbox is not selected.

Specular – we lighten diffuse texture wherever necessary and make sure, that areas such as lampshades are darker so that they do not look as shiny as the legs of a lamp.

Applying material to a 3D object

Now we need to apply materials to our model. In your 3D modeling application, open the material editor and specify all the textures of the model.

Since we use Maya, we go to “Window”; “Rendering Editors”; Hyperscheid.

To create new material, press the “Blinn” button.

In the “Attribution Editor” section, click the checkerboard button next to Color and assign a diffuse map.

Click on the checkerboard button next to “Bright Wheel” and assign a specular map.

Click on the checkerboard button next to “Bump Map” and assign a normal map.

Export 3D model

Now that the model is set up, we need to export it to .FBX. For this we use Maya’s Game Exporter. This is a useful plugin from Maya for exporting real-time models to .FBX. If there are other objects on stage, we must make sure that the lamp is selected and “Export Selection” is selected in the top drop-down list. We check “Smoothing Groups” and check “Smooth Mesh”. Other parameters are saved by default. Determine where you want to save .FBX and specify it in the path.

Enter a name for your .FBX file next to “File Name”.

Click Export. If successful, the program will give you a confirmation window that can be closed.

Note: If your object is customized and has multiple animations, you can define animation clips in the “Animation Clips” tab. Because the lamp has no animation, we leave this field empty.

Test of our 3D model

If you want to test your 3D model, you should upload it to Autodesk’s FBX Review. This program doesn’t display normal maps, but you can test any other type of map. If you model show up without any problems in this viewer, it wiil work in Viro platform too.

3D model rendering in AR / VR

The following section shows you how to view your models in AR using the Viro platform (to view models in VR using Viro, follow these steps, starting with HelloWorldScene.js). Generally, Viro is a developer platform, but it can also be used by designers and advertisers to visualize 3D models and view ideas. The setup is simple and the steps below are what we use to view 3D models in AR / VR as designers.

Work with models in Viro

We will use our lamp model for this section to simplify the instructions.

First you need to convert FBX files to VRX using the ViroFBX script. This ViroFBX script can be found in the bin directory of your Viro application.
Go to the bin directory. We installed Viro in a folder called “WorkSpace”, so we enter the following command (replace WorkSpace with your root folder in this command):

cd WorkSpace/ViroSample/bin

After you get to your bin folder, enter the following command:

./ViroFBX viro_object_lamp/object_lamp.fbx
viro_object_lamp/object_lamp.vrx

Once the script is executed, you will see a file named “object_lamp.vrx” in the viro_object_lamp folder in your bin directory.
Once the VRX file is created, it can be uploaded to Viro3DObject. Copy the files from the viro_object_lamp folder and paste them into the res folder located at / ViroSample / js.
To view your 3D objects in AR, open the HelloWorldSceneAR.js file and replace the text in HellowWorldSceneAR.js with the code below.

‘use strict’;
import React, { Component } from ‘react’;
import {StyleSheet} from ‘react-native’;
import {
ViroARScene,
ViroText,
ViroMaterials,
Viro3DObject,
ViroAmbientLight,
ViroSpotLight,
ViroNode,
ViroSurface,
} from ‘react-viro’;
var createReactClass = require(‘create-react-class’);
var HelloWorldSceneAR = createReactClass({
getInitialState() {
return {
text : “Initializing AR…”
};
},
render: function() {
return (

{}}>

 

 

 

);
},
});

var styles = StyleSheet.create({
helloWorldTextStyle: {
fontFamily: ‘Arial’,
fontSize: 40,
color: ‘#ffffff’,
textAlignVertical: ‘center’,
textAlign: ‘center’,
},
});

module.exports = HelloWorldSceneAR;

Save the HelloWorldSceneAR.js file. In the menu, click the reboot button. You should see the lamp in front of you below “Hello World”. We added a shadow to the lamp and included a drag option. so you could move the lamp around with your finger.
To add and see your own object, replace several lines in the code:

<Viro3DObject source={require(‘./res/object_lamp.vrx’)}
resources={[require(‘./res/object_lamp_diffuse.png’),
require(‘./res/object_lamp_normal.png’),
require(‘./res/object_lamp_specular.png’),
]}
position={[0, 0, 0]}
scale={[0.3, 0.3, 0.3]}
type=”VRX”
/>

So, the necessary steps are:

  1. Convert FBX file to VRX format.
  2. Place the VRX objects in the correct folder.
  3. Update the new asset code. In the example above, you could change “object_lamp.vrx” to your vrx file name and change the texture names.
  4. Save the file and reload it to see the 3D object in AR.