Guide to 3D Files for Web AR

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 8th Wall Web, 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.

When moving to Web AR from a native AR game engine pipeline, you will notice many similarities. A-Frame and Sumerian share many similar concepts to Unity such as game object hierarchy and a component-based development environment. 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). Below you will learn more about how to both create GLB files and convert your existing files to GLB for use with 8th Wall Web.

Converting to GLB for 8th Wall Web

Important!

Before you export, ensure that

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

After you import into A-Frame (three.js, babylon.js, etc) ensure that

Scale looks correct at (1, 1, 1)

If it is off by a significant amount (i.e. 0.0001 or 10000), do not change the scale in A-Frame (three.js, babylon.js, etc). Instead, change it in your modeling software and re-import. Otherwise you may see clipping issues with your model

If your model has animations (and using A-Frame), be sure to use the animation-mixer component
If your model is meant to be shiny and has no textures, it will appear black unless you give is something to reflect back. Use an environment map for this

If you discover any issues with your model in your scene, import it into Don McCurdy's GLTF Viewer. This uses the same renderer as A-Frame (three.js) so it should help with debugging any issues with your scene

Online Converters

https://www.creators3d.com/online-viewer
https://boxshot.com/facebook-3d-converter/
https://blackthread.io/gltf-converter/WARNING: May lose material properties

Native Converters

Blender 2.8 Beta
FBX2glTF CLI tool (supports GLB)
Maya GLTF export (supports GLB, macOS/Windows)
More converters here

Preparing an existing 3D File for an AR Camera

Important!

Before you export, ensure that

Pivot point is at the base of the model
Forward vector of object is along Z axis

Before you upload, ensure that

Poly count does not exceed 35k tris (or performance will suffer)
Combined file size does not exceed 15MB

To reduce file size, compress textures and reduce poly count

Preparing your Rigged Character 3D Model

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)
  - ...
3. 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
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
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

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

Blender 2.8b and Substance Painter both support GLTF export

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
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