Search
  • Marvin XR

Guide to 3D Models 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 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 to GLB for Marvin XR Web


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

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






Online Converters



Native Converters


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.


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.

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

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

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

  3. Drop in your newly created GLB

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

  5. Unfurl “Animation” tab

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

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

  1. Convert to GLB

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

  3. Use CLI tool here MOST RELIABLE or

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

  5. Try many other solutions availablehere

Already have GLTF + bin? Convert to GLB here

  1. Check your model

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

  3. Drop in your newly created GLB

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



59 views1 comment