Links

3D Standard File Guide

Benefits of glTF for Web AR

WebAR uses WebGL technology. glTF file format, developed by Khronos who also built WebGL, is a standard format for delivering 3D content to WebGL applications.

Difference between .glTF and .glb file extension

A glTF file uses one of two possible file extensions: .glTF or .glb.
.gltf (GL Transmission Format) and *.glb (GLBinary) are both 3D model file formats used for transmitting 3D models and scenes between applications. The main difference between the *.gltf and *.glb formats is the way they store and transmit the 3D model data:

*.gltf

.gltf is a text-based format that separates the 3D model data into multiple files, including a JSON file that describes the scene, model, and animations, as well as external binary and image files that store the geometry, materials, textures, and other resources.

*.glb

*.glb is a binary format that combines the *.gltf file and all of its resources (such as images and shaders) into a single file which means a user can use it at SQUARS STUDIO by importing just one file. It provides a more efficient and compact format for transmitting 3D assets over the web and other networks, as well as improved loading times compared to *.gltf
Here, we suggest three methods for converting 3D files into glTF format for better 3D models in AR environments.

1. 3D Software's internal glTF exporter plug-ins (Blender / Cinema4d / Maya / 3DMax)

(1) Blender3D

Blender's particle system and cached vertex animation are not exported.
Please check Blender's official Documentation for details.
  • The Scale should be (1,1,1).
  • The world origin of the object should be (0,0,0).
  • Modifiers must be applied before export to glTF / Recommend ‘Apply Modifers’ OFF in the exporter.
  • Use NLA and Action editor and Push Down tracks to export multiple animations / Turn On ‘NLA Strips’ in the exporter.
(2) Cinema4D
  • Select File → Export → glTF (.glTF / .glb).
  • Use standard material.
C4d standard material
glTF
Color
BaseColor
Discussion
AO
Reflectance-Rougness
Roughness
Reflectance-Reflection Strength
Metalness
Normal
Normal
Alpha
Opacity
  • C4d Plugins support TRS(Translation, Rotation, Sale), PLA, Skin Animations, and pose Morph.
    • Polygon objects can have 1 PLA animation track.
    • Polygon objects can have a ‘point mode’ pose morph tag.
    • Bake animations before exporting the file.
  • Exporting multiple animation layers and combining PLA and pose morph targets is not supported.
  • Expression, dynamics, MoGraph, and Generators should be baked to TRS/ PLA animation tracks. Or check ‘Bake animation’ when exporting it.
Please check glTF export at Cineversity for details.

(3) Autodesk MAYA

If you have not already installed the Babylon plugin for Maya, you can find all instructions here as well as general information about the plugin.
With this plugin, you can also export your project to glTF 2.0 format.
All you need to do is choose gltf as the output format.
  • Install the Babylon plugin for Maya. Please click here.
  • Using the Babylon.JS Maya exporter, choose *.glTF or *.glb as the output file extension. Please click here for details.

(4) Autodesk 3ds Max

Please check Autodesk 3ds’ Documentation for details.

2. Using converting service

You may lose material properties.

3. Using CLI (Converting script library)

The most reliable way to convert to glTF files.

(1) MAC / Linux

  • Download FBX2glTF-darwin-x64.
  • Set Terminal common path:
    • Move to "/usr/local/bin" and add the downloaded item to the bin folder.
  • To set permission, type below in the Terminal.
chmod 755 /usr/local/bin/FBX2glTF
  • Run “FBX2glTF -h” for the test.
    FBX2glTF -h
  • If a help list appears, the setting is done.
  • Go to the file directory where the FBX file you want to convert is located. → Open the terminal and type the below script.
FBX2glTF -i “FBX file's path” -b -v —pbr-metallic-roughness —draco -o “output file path”

(2) Window

  • Download FBX2glTF-window-x64.exe.
  • Open PowerShell in the downloaded folder.
  • Type the below script in the Shell.
./FBX2glTF-window-x64.exe -h
  • If a help list appears, the setting is done.
  • Place the fbx file to convert and “FBX2glTF-window-x64.exe” under the same directory.
  • Open PowerShell in the directory where the fbx file and “FBX2glTF-window-x64.exe” are located. And run the below script.
./FBX2glTF-window-x64.exe -i “fbx file path” -b -v —pbr-metallic-roughness —draco -o “output file path”

(3) Converting *.glTF to *.glb, or vice versa

Click here for converting *.glTF to *.glb, or *.glb to *.glTF using CLI.

Optimization of Edit environment

SQUARS' WebAR 3D content is based on the Three.js WebGL library. This is displayed in real-time by the WebGL Renderer on the user’s screen in the Web browser.
Since WebGL Render uses the GPU(Graphical Processing Unit) of the user's device in real time, the performance of SQUARS’ AR scene depends on each device’s GPU performance. We suggest a guideline to optimize 3D assets without the overload of GPU, considering the performance of commonly used smartphone devices.
*Below are the details of settings for environmental optimization.

1. Model optimization

  • We recommend 10,000 polygons. Since the Quad polygon is subdivided into Tri-polygon on the web, 100,000 to 500,000 Tri-count is recommended. As the number of triangles increases, the scene performance decreases. Performance degradation is more noticeable especially on low-end devices.
  • Use normal maps and ambient occlusion maps to add detail without adding more polygonal geometry.

2. Material assignment

  • Use PBR (Physically Based Rendering) materials that are compatible with WebGL and glTF format.
  • Assign materials to the model using a node-based material editor, such as the one found in Blender or 3DS Max.

3. Texture compression

  • Use texture compression formats such as JPEG that are supported by WebGL.
  • Compress textures to a size that provides good visual quality while keeping the file size small.
  • Less than 1k(1024*1024) jpg image files are recommended.

4. Hierarchy and naming

  • Organize the scene hierarchy into logical groups and name objects and materials appropriately.
  • Group similar objects and materials together for easier management and organization.

5. Animation

  • If the model has animations, make sure they are exported in a compatible format such as FBX or glTF.
  • Bake all animations.

6. Tests

  • Test the model in a WebGL environment, such as Three.js or Babylon.js, to ensure it renders as expected and meets performance requirements.
  • Check for visual artifacts such as seams or artifacts on textures, and fix any issues found.
  • Test the model on different hardware configurations to ensure compatibility with a wide range of devices.

7. File format

  • Use glTF format for the final file export, as it is an open and efficient format for transmitting 3D assets on the web.
  • Use a glTF exporter that is compatible with your 3D modeling software, such as the glTF exporter found in Blender or 3DS Max.
  • As of now (23.02), glTF files can be used only when they are compressed and imported in the zip format, and importing glb files is not supported. We are planning to update the glTF and glb files so that you can check them right away in SQUARS.

Limitations

  • We recommend that the total file size imported into one scene be less than 20MB.
  • No baked point cache animation cannot be converted into glTF format.
  • The UV coordinates of the texture set cannot be different from each other. A texture set of one material always shares only one UV coordinate value.
  • Some Post-processing, such as the bloom effect, is not supported on the WebXR scene.
  • Shaders other than PBR material workflows supported by 3D software are not applicable.
  • Not all specifications supported by the glTF format are supported in the WebXR environment.
    • ClearCoat or Subsurface scattering is supported by the glTF 2.0 Extension, but the glTF exporter does not reflect the settings of the 3D software.
    • There may be some texture sets in the material missing by conversion method or the image file format.
    • Displacement map / Height map are not exported properly. We recommend using the Normal map and AO map instead.
  • Avoid using high-resolution textures, as they increase file size and slow down the rendering.
  • Avoid using lossless image formats such as BMP or TIFF as they increase file size.

Case Guide of Error Fixing

1. The imported model looks too dark.

  • Light Settings Ensure you added light settings. Without lighting the model may not be visible on a scene.
  • Texture lost There may be texture missing when converting a file.
  • Converting problem There may be a problem with file conversion.

2. Transparent parts of the imported model do not look transparent.

  • Texture lost There may be texture missing when converting a file.
  • Converting problem There may be a problem with file conversion.

3. Parts of the imported model are not visible.

  • Normal direction problem Normal direction may be reversed when working on a model and make it invisible. You can fix the problem by ensuring the Double-sided rendering or changing the Normal direction.
  • Converting problem There may be a problem with file conversion.

4. Why do I see only one animation?

  • Converting problem There may be a problem with file conversion.

5. How do I ensure that a glTF file works properly?