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.

Creating a new GLB File

FASTEST

Craftblocks by @sgidon
Made with 8th Wall Web

Try it on mobile here: https://apps.8thwall.com/qdts/craftblocks

Craftblocks is a fully featured voxel editor built in A-Frame using 8th Wall Web SDK. It allows you to create complex 3D objects with a variety of textures and colors.

Other features include:

  • Export to glTF, glb, obj, stl

  • Save/Load

  • Screenshot Mode

  1. Tap 'menu' (top left), scroll down to ‘export glb’

  2. Save to device

  3. Navigate to https://console.8thwall.com/cameras and sign up or sign in

  4. Tap ‘create a camera’ and upload your GLB

  5. Modify values and publish!

Scandy Pro allows iOS devices equipped with a TrueDepth camera (iPhone X, XS, XS Max, XR, and new iPad Pro) to capture full-color 3D scans. You get one free scan each day and pay a low fee for unlimited scans. You can also scan objects more easily by either mirroring the scan view to another iOS device over WiFi or 3D printing a mirror attachment.

For Speed

  1. From My Scans, tap on a scan you wish to export

  2. Tap the ‘share’ icon, then export as GLB

  3. Navigate to https://console.8thwall.com/cameras and sign up or sign in

  4. Tap ‘create a camera’ and upload your GLB

  5. Modify values and publish!

For Quality

IMPORTANT! Be sure to reduce poly count to ~25-75k or it may affect performance (the example above came in at ~500k). Also, keep file size below 15MB and adjust your pivot point when converting so that it is at the base of your scan

  1. From My Scans, tap on a scan you wish to export

  2. Tap the ‘share’ icon, then export as PLY

  3. Share the file to a computer and import in Blender (free to download here)

  4. Correct the pivot point's position and rotation

  5. File -> Export -> COLLADA (.dae)

  6. Convert to GLB using https://blackthread.io/gltf-converter/ (more tools here)

  7. Navigate to https://console.8thwall.com/cameras and sign up or sign in

  8. Tap ‘create a camera’ and upload your GLB

  9. Modify values and publish!

Particubes by @particubes

Live Demo

Particubes is a free voxel editor on iOS. It has a number of features including undo, MagicaVoxel export (.vox), and paint brush.

  1. Select the export button from the menu, tap .vox, and send the file to your computer

  2. Open the .vox file in MagicaVoxel (download for PC/Mac here)

  3. Export as OBJ

  4. Convert to GLB using https://blackthread.io/gltf-converter/ (more tools here)

    a. Select OBJ, MTL, and PNG then upload

  5. Navigate to https://console.8thwall.com/cameras and sign up or sign in

  6. Tap ‘create a camera’ and upload your GLB

  7. Modify values and publish!

Tilt Brush lets you paint in 3D space with virtual reality. It has a ton of great features for artists and supports HTC Vive, Oculus Rift and Windows Mixed Reality HMDs.

  1. From the Tools panel, select "More Options..." > Labs > Export

    a. An .fbx file, brush texture, and geometry will be saved to C:\Users\[Name]\Documents\Tilt Brush\Exports

  2. Convert to GLB using https://blackthread.io/gltf-converter/ (more tools here)

  3. Navigate to https://console.8thwall.com/cameras and sign up or sign in

  4. Tap ‘create a camera’ and upload your GLB

  5. Modify values and publish!

Preparing an existing 3D File for GLB

Important!

  • 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 Maya 2018 into FBX (2018).
    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” (required)
      • Clip 1; “motion” (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
  2. Convert to GLB
    1. Use https://blackthread.io/gltf-converter/ EASIEST
      or
    2. Use CLI tool here
      or
    3. Install Maya GLTF export tool (supports GLB, macOS/Windows)
      or
    4. Try many other solutions available here
    Already have GLTF + bin? Convert to GLB here
  3. 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 and Substance both support GLTF export
  2. Convert to GLB
    1. Use https://blackthread.io/gltf-converter/ EASIEST
      or
    2. Use CLI tool here
      or
    3. Install Maya GLTF export tool (supports GLB, macOS/Windows)
      or
    4. Try many other solutions available here
    Already have GLTF + bin? Convert to GLB here
  3. 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