Guide to 3D Models for Web AR

Last updated on April 25th, 2022

Due to advancements in web technologies such as WebGL, 3D rendering in mobile browsers has improved tremendously in recent years. Not only is Web AR available in modern browsers with Marvin XR, but beautifully rendered scenes and objects can be viewed in AR as well. Advanced rendering techniques such as PBR materials, custom shaders, real time shadows/reflections and high res textures are currently possible- even while retaining very small file sizes, high frame rates and insanely fast load times.

While there are components that allow for loading various types of 3D files (FBX, OBJ, etc) into these frameworks, we stand by GLB (glTF 2.0 Binary) as the current best option with its small file size, great performance and versatile feature support (PBR, animations, etc).

Converting 3D Models into .glb using Marvin XR Studio

• Now you can convert your GLTF 3D models into GLB within seconds using the absolute stunning 3D Export feature within Marvin XR studio. Select all your GLTF materials and bin files and then drag & drop them to the 3D exporter. Our super fast conversion engine will convert them into GLB format almost instantly.

If you want to do it in your way, please remember:

• Pivot point is at the base of the model (if you expect it to attach to the ground)

• Forward vector of object is along Z axis (if you expect it to face forward)

• Poly count does not exceed 35k tris (or performance will suffer)

• Combined file size does not exceed 10MB (people are loading this on a webpage!)

• To reduce file size, compress textures and reduce poly count

• For Markerbased AR, do not change the current scale. If you want to change it, keep the scale ratio (1,1,1)

• If your model has animation, make sure to export it into GLB format

• If your model is meant to be shiny and has no textures, it will appear black unless you give is something to reflect back.

Native Converters

• Blender 2.93

• FBX2glTF CLI tool (supports GLB)

• More converters here

Convert to USDZ

Convert GLB file to USDZ format online which is best for rendering 3D models in Apple iOS. Drag and drop your 3D GLB file in the online user interface to convert it to USDZ format.

• spase.io

Preparing an existing 3D File for an AR Camera

• Before you export, ensure that

  1. Pivot point is at the base of the model

  2. Forward vector of object is along Z axis

• Before you upload, ensure that

  1. Poly count does not exceed 35k tris (or performance will suffer)

  2. Combined file size does not exceed 15MB

     • To reduce file size, compress textures and reduce poly count

PREPARING YOUR RIGGED CHARACTER 3D MODEL

1. Export your rigged character model out of the modeling software of your choice. We used Maya 2018 with FBX (2018) for this example.

   1. Ensure your animation clips are on a single timeline separated by clip.

   2. The clips should be organized in the following order:

      • Clip 0: Idle animation (required)

      • Clip 1: Motion animation (required)

      • Clip 2: Custom Clip 1 (optional)

      • Clip 3: Custom Clip 2 (optional)

      • ...

1. Open the “Game Exporter” and use the following settings:

   • Export All

   • “idle” is first, “motion” is second, followed by your other clips

   • Start/End frames per clip are correct

   • Save Clips to Single File

   • Bake Animation ✅

   • Up Axis: Y

   • Embed Media ✅

   • File Type: ASCII

   • FBX Version: FBX 2018

2. Convert to GLB

1. Use an online converter such as https://www.creators3d.com/online-viewer or

2. Use CLI tool here MOST RELIABLE or

3. Install Maya GLTF export tool (supports GLB, macOS/Windows) or

4. Try many other solutions availablehere

Already have GLTF + bin? Convert to GLB here

1. Check your model and animation

   1. Navigate to https://gltf-viewer.donmccurdy.com

   2. Drop in your newly created GLB

   3. Inspect your model and confirm there are no issues with geometry or textures

   4. Unfurl “Animation” tab

   5. Make sure every animation clip is listed beginning with “idle”, “motion”, clip 3, clip 4, etc

   6. Click each one to confirm they are working properly

PREPARING YOUR STATIC 3D MODEL

1. Export your 3D model out of your 3D modeling software.

   • Blender 2.93 and Substance Painter both support GLTF export

2. Convert to GLB

   1. Use an online converter such as https://www.creators3d.com/online-viewer or

   2. Use CLI tool here MOST RELIABLE or

   3. Install Maya GLTF export tool (supports GLB, macOS/Windows) or

   4. Try many other solutions availablehere

Already have GLTF + bin? Convert to GLB here

1. Check your model

   1. Navigate to https://gltf-viewer.donmccurdy.com

   2. Drop in your newly created GLB

   3. Inspect your model and confirm there are no issues with geometry or textures