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:
- Fabric_Matte
- Fabric_Shiny
- Fabric_Silk/Satin
- Fabric_Velvet
- Leather
- Metal
- Plastic
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.
-Mac M1 Users: Texture maps may be flipped when exporting with Unified UV Coordinates enabled in Clo 7.1.
-Topstitching in versions older than Clo 7.1: The backside of topstitching will bake to the front of the garment during Unified UV Coordinate exports. See our Topstitching section for recommendations to avoid this.
Welcome to the CLO3d Export Guide!
We recommend exporting Clo assets as GLBs with Unified UV Coordinates enabled.
Unified UV Coordinates bake the seamline shadows into the textures for a more realistic visual and allows you to control the number of UV Spaces used (which is important if you’re bringing the exported assets into an AR environment).
Alternatively, if desired, you can perform a standard GLB export.
Here’s the same asset exported with Unified UVs and without.
Unified UV Coordinates Export
Standard Export
You can see the biggest difference between the two export methods are:
· Seamline shadow visibility
· Texture Quality
A complete Pros and Cons of both export options are listed below.
Unified UV Coordinates Export
The Unified UV Coordinates export uses UV spaces.
Pros | Cons |
Seamline Shadows are Visible. | UV Editor must be set up before exporting. |
UV spaces used can be specified as well as texel density per piece. This is critical if bringing into AR environments. | Texture quality is naturally decreased on export depending on amount of UV Spaces used and texture specified in export settings. |
If backside of fabric is different, additional steps are needed to prepare the UV Editor. |
Standard Export
The standard export is a tiled texture export.
Pros | Cons |
Texture Quality is extremely high and compresses well. | Seamline Shadows are not visible. |
If backside of fabric is different, no additional action is needed. | Can’t control the UV Spaces. |
Additional step of setting up the UV Editor is not required. |
The below guide outlines steps to export with Unified UV Coordinates enabled because we think it’s important to see the seamlines clearly.
We recommend that a few file preparation steps are completed prior to exporting the file for high-quality exports and optimized outputs.
We also developed a VNTANA Clo Plug-in to easily export, upload, and optimize your assets.
Please download our Clo Plug-in here.
Let’s dive into it!
File Preparation
We’ve outlined our recommendations for preparing the pattern, fabrics and materials, sewing, topstitching, puckering, trims, and the UV Editor.
Pattern
Clo allows you to Freeze, Deactivate, and Archive pattern pieces. Be sure all unused pattern pieces are deleted prior to export. If they’re not deleted, they will be present in the exported geometry and can contribute to higher poly count and file sizes.
Fabrics / Materials
To preserve texture quality in the export and the optimized asset, it’s highly recommended to use power of 2 textures. That means image dimensions of 1K, 2K, 4k, etc. We prefer 1K or 4K textures with a dpi of 300.
Be sure all fabrics include a Texture, Normal, and Roughness Map. Roughness can also use a value input. Both are acceptable but Roughness Maps are preferred.
Here’s an example Clo Fabric following our recommendations
Note: Clo does not currently support the glTF extensions that would enable users to export parameters like sheen and clear coat.
Another thing you can do to help your textures out in optimization is to bump the Normal Map Intensity up to between 50-100. The higher intensity makes the embossed detail raised off the surface. A lower intensity will have the detailing closer to the surface. Normal maps do not change the geometry (like a Displacement map). They only mimic height and depth.
Roughness, Reflection Intensity, & Normal Maps
You may notice that the exported fabrics in your GLB are too shiny, too matte, or perfect. If the fabrics are too shiny or matte, you will need to adjust the Roughness and or Reflection Intensity.
Below you’ll see an overview of the values ranging from 0 to 100. We’ve included the normal map as well because sometimes you may need to adjust its intensity too.
Map | Value of 0 | Value of 100 |
Roughness | Gloss
| Matte
|
Reflection Intensity | Matte
| Gloss
|
Normal | No Detail
| Max Detail (Also applies to –100)
|
Roughness and Reflection Intensity Recommendations
If you are using a custom roughness map, we recommend setting the roughness value to 50 and adjusting the reflection intensity based on how glossy your fabric needs to be. A value of 50 will preserve the roughness values in the custom map. A low reflection intensity is matte, a high reflection intensity is glossier.
If you choose to use the Clo’s roughness values without the supporting map, we recommend for matte fabrics like cotton, jersey, fleece, linen, ribs, wool etc. to start with a roughness value of 50 or higher and a reflection value 10 or lower. For fabrics that require a semi-gloss like leather, ripstop, nylon etc., we recommend starting with a roughness value of 50 or below and a reflection intensity value of 50 or above. For fabrics that require a high-gloss like silk, taffeta, satin etc., we recommend a roughness value of 10 of below and a reflection intensity of 90 or above.
Substance Materials
If using Substance materials, be sure to adjust the texture size of the fabric within the Property Editor as needed. By default, the texture size imports as 1K.
Sewing
Ensure all pattern pieces are sewn properly and fully simulated prior to exporting.
We like to use the below Sewing settings to ensure the seamline shadows are visible on export.
3D Seamline
· Intensity: 50
· Thickness (in): 0.08
Don’t forget to change the Sewing Line Type to Turned as needed for pocket openings, turnback pieces, etc.
Topstitching
We recommend adjusting some of the topstitching sewing within Clo’s Standard ISO Topstitching Library. Below are the settings we like to use to ensure the topstitching is clearly visible.
Additionally, we change our topstitching type from OBJ to Texture.
This helps with the performance of Clo, especially when using a coverstitch, and it reduces the amount of exported geometry.
Topstitching Settings:
· Topstitching Type: Texture, NOT Obj.
· Offset: Adjust as needed based on spec sheets
· Stitch Count: 1
o We’ve noticed that topstitching with front and back stitches will export with the back stitch baked onto the front of the garment. To avoid this, remove all back stitches.
o 
· Set the Length (SPI): adjust as needed
· Space (in): adjust as needed
· Thread Thickness (Tex): 80 – 150
· Configuration, Face: Front
· 3D: Off
o It’s acceptable to turn 3D on however, if on we recommend using a normal intensity of 1-50 and the default thickness value.
Puckering
If using Puckering, the intensity specified will only export correctly in Clo 7.0 or higher during a Unified UV Coordinates export. You will not see this detail expressed in a Standard GLB export.
Trims
Trims can easily get lost in Clo’s 3D space. Be sure that all trims included in the file are attached or positioned accurately on or around the garment.
If trims are lost in 3D space, they will export in the geometry and create scale issues.
An easy way to check for unwanted trims is by selecting each trim listed within the Scene List. If you don’t see the trim highlighted in 3D space when selected, it is probably an extra, unnecessary trim that should be deleted.
Here’s an example of a trim lost in space.
UV Editor
The UV Editor MUST be set up prior to exporting as a GLB with Unified UV Coordinates enabled.
If the backside of your fabric is different from the front, the pattern pieces with that fabric assigned will need to be duplicated and positioned within the UV Editor as well.
We recommend:
1. If the backside of the fabric is different than the front of the fabric:
a. Select the pattern pieces with that fabric assigned.
b. Right-click and select “Layer Clone Under”.
c. Position the pattern pieces in the 2D where desired.
d. Duplicate your fabric.
e. Swap the front texture maps with the back texture maps.
f. Assign the duplicated fabric to the cloned pattern pieces.
g. Re-simulate the 3D.
2. Toggle to the UV Editor Mode.
3. Right-click within the UV Editor window and select “Reset UV to 2D Arrangement”.
4. Arrange all pattern pieces so they fit within the desired amount of UV spaces.
a. The starting UV Space is the square with the green Y axis and red X axis.
b. BE SURE when scaling pattern pieces down they are all scaled together. If they are not scaled together the texture resolution across different pattern pieces will be different.
c. Be sure pattern pieces do not overlap with each other and the black lines of the UV Space square.
i. If pieces overlap each other and/or the UV Space border, you may see texture issues within your exported GLB.
Once all pattern pieces are arranged, it is acceptable to scale smaller pattern pieces larger if the texture quality on those pieces is blurry.
Note: The texture quality exported in the GLB is dependent on:
· The original texture maps used in the fabrics (we recommend power of 2 textures).
· The amount of UV spaces used within the UV Editor.
· The texture size specified in the export window (we recommend 4K).
Recommended UV Spaces Per Garment Type
The chart below outlines the recommended UV spaces to be used per garment type. However, if you are bringing the exported asset into an environment with specific requirements related to the number of UV spaces, please follow those requirements when setting up your UV spaces in Clo.
Garment Type | # of UV Spaces |
T-Shirt | 1 |
Long Sleeve Shirt | 1-2 |
Pants | 1-2 |
Jacket | 2-3 |
Dress | 2 |
Collared Shirt | 2-3 |
Hoodie | 2 |
Skirt | 1-2 |
Sweater | 2 |
Exporting
Unified UV Coordinates Export
Use the following export settings within Clo to export a GLB with Unified UV Coordinates enabled.
File > Export > glTF 2.0 (GLB)
Note: It is acceptable to export at a higher texture size however, for the best-optimized file results, we recommend exporting with 4K because the textures will compress better to a lower size. 8K textures do not compress to 4K or 1K textures easily.
Standard Export
If desired, use the below settings for a standard GLB export from Clo, without Unified UV Coordinates enabled.
Avatars
When exporting a 3D garment with the avatar, additional steps will need to be performed in an additional 3D software (we use Blender), to prepare the asset for uploading to VNTANA Platform.
These steps only need to be performed when exporting with the Clo default avatar.
Instructions:
· Import the exported Clo GLB into Blender.
o Note: when exporting from Clo, if the accessory was added as an avatar, ensure that the “All Avatars” property is enabled within the export window.
· Adjust the position of the objects as needed.
· If the bones of the rig/ armature are in the way, toggle to the Viewport Overlays dropdown menu and turn off “Bones”.
· Select each object individually within the Scene Outliner and Apply the modifier to ensure the avatar and accessories position and dimensions are locked into place.
· Select all components.
· Navigate to Mesh -> Apply -> All Transforms
o This step will lock in the positions of the moved objects.
· Export as GLB
· Under the Geometry property, ensure that Apply Modifiers is enabled.
Note: If a trims position has changed during VNTANA optimization, you will need to Freeze/ Apply All Transforms to the affected trims before uploading to VNTANA Platform. Follow the Avatar steps outlined above to prevent trims from shifting during optimization.
Limitations & Recommendations
Sherpa and Fur
Real-time rendering does not support sherpa and fur. This is because real-time rendering does not support displacement maps. Our recommendation is to increase the intensity of your normal map to achieve the sherpa visual. Since we’re using a normal map the sherpa will not stand away from the cloth.
For fur, there is a tedious workaround. You can generate a texture from the fibers for the fur that could be applied to the area where the fur should be. You can tweak the texture maps to mimic fur, but there will be inconsistencies. The biggest issue with fur is that it adds a lot of volume and is very fibrous. You can create a mesh to approximate the volume and then use the material created to apply to it. That would only give you the volume. Unfortunately, we will not be able to get the “fuzz” that fur creates.