Comment on page
3D Standard File Guide
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.
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 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 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.
Blender's particle system and cached vertex animation are not exported.
- 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.
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.
All you need to do is choose gltf as the output format.
- Using the Babylon.JS Maya exporter, choose *.glTF or *.glb as the output file extension. Please click here for details.
You may lose material properties.
The most reliable way to convert to glTF files.
- 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”
- 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”
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.
- 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.
- 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.
- 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.
- Organize the scene hierarchy into logical groups and name objects and materials appropriately.
- Group similar objects and materials together for easier management and organization.
- If the model has animations, make sure they are exported in a compatible format such as FBX or glTF.
- Bake all animations.
- 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.
- 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.
- 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.
- 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.
- Texture lost There may be texture missing when converting a file.
- Converting problem There may be a problem with file conversion.
- 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.
- Converting problem There may be a problem with file conversion.
- You can get assistance from a few sites to see if your glTF file runs properly. Please check the links below:
Last modified 5mo ago