In order to do 3D on the web you have to have GLB/glTF files with real-time PBR materials. In Clo you can use:
You cannot use pre-rendered materials as these require physics that are only inside of Clo and do not work on the web. The materials that do not work on the web (whether in VNTANA’s viewer or others) are:
- Fur (Render Only)
- Gem (Render Only)
- Glass (Render Only)
- Glitter (Render Only)
- Iridescence (Render Only)
- Light (Render Only)
- Skin (Render Only)
If you use these and try to export a GLB, you will see errors. This applies to any web application (eCommerce, AR, social media, etc), not just the VNTANA platform.
Welcome to the CLO3d Export Guide! Below you will find two ways to export your garment.
Most of the time your garment will require the Standard Export. There are a few instances in which you will need to use the Unified UV Coordinates Export – including the use of Puckering, High-Fidelity Materials, Complex Graphic Transparency, and Multiple Texture Transforms.
Please refer to the guides below to determine which Exporter works best for your garments.
Table of Contents
File Set Up
Before sending your files to export, please check the following setting
- Select all of your topstitching in the Object Browser → Change from OBJ to Texture
- File → Export → glTF 2.0 (GLB)
Depending on your project, some export settings may change
Setting Up Unified UV Coordinates
This setting should be used for:
- Garments with Puckering applied
- It is recommended to reduce the strength of your puckering before exporting, this setting strengthens puckering intensity dramatically.
- Garments with High-Fidelity Materials
- Garments with Multiple Texture Transforms
- Garments with Graphics with Complex Transparency
Please determine if you need this process first by reading the information listed below. The Unified UV Coordinates Exports process is located at the bottom.
Multiple Texture Transforms
You’ll be able to determine if you have a garment with Multiple Texture Transforms by clicking on your material in the Object Browser on the right side of the CLO3d window, then viewing the Property Editor information directly below that.
In this example, the values of the Texture and Normal maps do NOT match. Therefore, a garment with these parameters would need to use a Unified UV Coordinates Export.
In this example, the values of the Texture and Normal maps MATCH. Therefore, a garment with these parameters would NOT need to use a Unified UV Coordinates Export.
If you have determined your garment has Multiple Texture Transforms, please continue with the directions below on Unified UV Coordinates Export. Otherwise, you can refer back to the Standard Export.
Graphics with Complex Transparency
In this example, you can see through the graphic to the checkered background. This kind of graphic would need to use a Unified UV Coordinates Export.
In this example, you cannot see any of the checkered background through the image. This kind of graphic would not need to use a Unified UV Coordinates Export.
If you’ve determined that the graphic you are using is similar to the red image above, please continue with the directions below on Unified UV Coordinates Export. Otherwise, you can refer back to the Standard Export directions.
Corrections Process for the Back Side of Materials
If your garment requires unique information on the back side of your pattern pieces (including heat seals or material that does not match the front face) please complete this step before continuing with the Unified UV Coordinates Export guide below.
Please note that this step is only necessary for a garment using Unified UV Coordinates. Garments using the Standard Export will not need this step.
- Determine which pieces will need additional information on the back side. You will not necessarily need to duplicate every pattern piece.
- Right-click on the piece in the 2D Window → Select Layer Clone (Under)
- Place your cloned pattern pieces off to the side
- Navigate to your UV Editor Window
- Place your pattern pieces within the 0-1 Space, make sure you are able to see both your original pattern piece and your duplicated piece. They often rest on top of each other in this window.
If your garment has a back side of the material that needs to be shown:
- Copy your original fabric in the Object Browser space
- Apply the applicable maps (Texture, Normal, Roughness, Metalness) from the back side of your copied material to the front of the copied material.
- Assign your cloned pattern pieces to the new material
If your garment has graphics placed on the back side of your pattern piece:
- Delete the graphic from the original pattern piece
- Re-place the graphic on the Cloned Pattern piece on the Front Side
Unified UV Coordinates Export
- Navigate to the UV Editor Window on the top right of your CLO window
- Arrange all your pattern pieces within the 0-1 space.
Often times, pattern pieces get lost on the grid. To avoid any issues, right click on the grid. Select Zoom Extents All. The hot key for this is ) . Drag your pattern pieces to the (0,0) coordinates.
|Item||Expected # of Quadrants|
|Short Sleeve Shirt||1|
|Long Sleeve Shirt||2|
If you are trying to maximize material detail, scale the pattern pieces together so that they fill up as much of the 0-1 space as possible using multiple quadrants.