In order to do 3D on the web you have to have GLB/glTF files with real-time PBR materials. In Browzwear you can use:
- Metallic
- Roughness
- Diffuse
- Normal
You cannot use pre-rendered materials as these require physics that are only inside of Browzwear and do not work on the web. The materials that do not work on the web (whether in VNTANA’s viewer or others) are:
- Displacement Maps (Ray Trace Only)
- Subsurface Scattering
- Specular
- Specular Tint
- Fur
If you use these and try to export a GLB or upload a native Browzwear file to VNTANA, you will see errors. This applies to any web application (eCommerce, AR, social media, etc), not just the VNTANA platform.
Welcome to the Browzwear Export Guidelines!
We recommend exporting Browzwear assets as GLB files. In this guide, we’ll walk you through our recommended file preparation steps, export settings, and limitations to be aware of.
We’ve developed a VNTANA Browzwear Plug-in to easily export, upload, and optimize your assets.
Please download our Browzwear Plug-in here: 
Integrations: Browzwear VStitcher | VNTANA
We’ve also created our own custom VNTANA Export Settings preset that can be downloaded and imported into your Export window. Alternatively, you can export manually following our guidelines below.
Please Download This Link Below:
VStitcher 2022.1 or higher is recommended.
Note: If you require a 3D export that uses 1 0-1 space, please use the Single UV Layout For All Pattern Pieces – Squarae (0-1) – Optimize 2D Space (Pack UV’s) setting in VStitcher 2022.2.
Let’s dive into it!
File Preparation
Please refer to Browzwear’s best practices documentation for file preparation and 3D apparel creation. The below file preparation steps support successful GLB exports and assist in improving assets for real-time rendering.
Pattern
Browzwear allows you to turn pattern pieces on and off in 3D. Be sure to delete all unused pieces instead of turning them off in 3D. If these unused pattern pieces are not removed from the file they might export as geometry in the exported file.
Fabric / Materials
To preserve texture quality in the export and the optimized asset, it’s highly recommended to use power of 2 textures with 300 dpi. That means image dimensions of 1K, 2K, 4k, etc.
The minimum recommended texture size is 700px x 700px at 300dpi or 5cm x 5cm at 300 dpi. Browzwear recommends 5cm x 5cm at 600 dpi.
Be sure all fabrics include a Texture, Normal, and Roughness Map.
Here’s an example Browzwear Fabric following our recommendations:
Troubleshooting Fabrics in Export
If your exported GLB garment fabric is incorrect or not as detailed as desired, please reference our below recommendations:
Roughness or Metallic Maps: If your roughness or metallic maps are not exporting, check that your specular value is above 0 (.1 -1).
If your roughness map is still not exporting, check that the intensity is above 0. A value of 1 will honor your original map and its values. A value between .1-.99 will change the value of the original map by reducing it’s intensity.
Substance Materials
By default, Substance Materials are set to 2048px x 2048px with 72 DPI in VStitcher 2022.1 and 2022.2. This is our recommended size and dpi.
In earlier versions, they are set to 1024px x 1024px with 72 DPI. This is not something that can be changed within the program. To ensure a higher texture quality, please upgrade to 2022.1 or higher.
Trims
Follow Browzwear’s best practices for adding trims to your garment.
We recommend updating to VStitcher 2023.1.1 to ensure recolored trims export correctly.
If you’re using an older version of VStitcher you might notice that recolored trims do not maintain their color on export. If this applies to you please follow our current workaround to recolor the trim correctly in Blender: Browzwear 3D Trim Texture Export Post Processing (located below)
Artwork
Follow Browzwear’s best practices for adding artwork to your garment.
Please note that the following Substance Artwork Effects do not export to the GLB format. The artwork will export as it appears in Browzwear’s 3d viewport. A VRay render will not accurately depict the correct artwork application that will be displayed in real time rendering.
High Density
Puff Print
Emboss
Exporting
Standard Export
For a standard VStitcher export, we recommend exporting as a GLB with Single UV Layout Per Piece with the below settings.
If greater texture detail is desired please see our Detailed Fabric Export Notes section below to see how to calculate the correct DPI to export with.
Navigate to File -> Export -> Select Binary (glb) (glb) from file format list -> Save
- Format: GLB
- Geometry:
- Garment Inside*
- Garment Thickness
- Scale: x0.01
- Textures:
- Baked Textures
- PNG
- DPI: 120
- UV:
- Single UV Layout Per Piece
- Keep Proportions (0-1)
- glTF Settings:
- Alpha Mode: Mask
- PBR Material: Metallic/ Roughness12
*If possible, turn off Garment Inside to help reduce the amount of geometry and materials generated when exporting. We will be able to optimize the asset even more if these items are reduced on export.
Do not turn off Garment Inside if interior details that need to be visible.
Exporting Semi-Transparent Fabrics
If you are using semi-transparent fabrics be sure that you use these settings on export.
Garment Inside: off
Alpha Mode: Mask or Blend
Mask is great when you are using a materials that have full transparent sections, like a mesh.
Blender is great when you are using the Opacity slider within the fabric.
Detailed Fabric Export Notes
To ensure maximum detail is maintained in our exported asset, it is important to aim for exported texture dimensions as close to 4K (4096x4096px) as possible without exceeding those dimensions (textures above 4K will not optimize well to 4K or lower). To achieve this, you can use our formula below to find the best export DPI value that will produce texture dimensions close to 4K.
To calculate the estimated export texture size you will need to multiply the largest dimension of the largest pattern piece (Pattern Size; PS) by the pixels per inch (PPI) or the pixels per centimeter (PPCM). PPI is the same value as DPI however, PPCM is the conversion of export DPI into CM. This will give us the exported texture size.
Formula if working in inches → PS x PPI = Texture Size
Formula if working in centimeters → PS x PPCM = Texture Size
We’ve converted the export DPI value to PPI and PPCM, so you can use our chart below to find the right export value to produce texture dimensions closest to 4K. Our recommended export DPI is 120, so you can use 120 PPI or 47 PPCM as your starting point.
Let’s walk through an example using centimeters:
Find the largest dimension of the largest pattern piece. PS = 50cm.
Look at the conversion chart below and find the PPCM for our recommended export DPI, which is 120. PPCM = 47.
Multiply PS by PPCM -> 50 x 47.
This gives us our texture size. The estimated texture dimensions of our exported asset at 120 DPI will be 2K. This is an acceptable texture size.
50 x 47 = 2,350 x 2,350px
But let’s try to get closer to 4K textures.
Our largest pattern dimension is 50cm. PS = 50cm.
Let’s try an export DPI of 200. According to the conversion chart below the PPCM for an export DPI of 200 is 79. PPCM = 70
Multiply these values. 50 x 70.
Our texture dimensions will be much closer to 4K. Using an export DPI value of 200 will produce higher-quality textures that will optimize well.
50 x 70 = 3,950×3,950px
Let’s walk through an example using inches:
Find the largest dimension of the largest pattern piece. PS = 26.5inch.
Look at the conversion chart below and find the PPI for our recommended export DPI, which is 120. PPI = 120.
Multiply PS by PPCM -> 26.5 x 120.
This gives us our texture size. The estimated texture dimensions of our exported asset at 120 DPI will be 3K. This is an acceptable texture size.
26.5 x 120 = 3,180 x 3,180px
5. If we multiple by 150DPI, this will get us much closer to 4K.
26.5 x 150 = 3,975 x 3,975px
DPI Conversion Chart:
Exported DPI | Pixels per IN (PPI) | Pixels per CM (PPCM) |
50 | 50 | 20 |
72 | 72 | 28 |
92 | 92 | 36 |
100 | 100 | 39 |
120 | 120 | 47 |
140 | 140 | 55 |
160 | 160 | 63 |
180 | 180 | 71 |
200 | 200 | 79 |
220 | 220 | 87 |
240 | 240 | 94 |
250 | 250 | 98 |
260 | 260 | 102 |
280 | 280 | 110 |
300 | 300 | 118 |
320 | 320 | 126 |
340 | 340 | 134 |
350 | 350 | 138 |
Pack UVs Export
To use the Pack UVs feature, you must be using VStitcher version 2022.2. The pack UVs feature will take the pattern pieces you’ve assembled in the 2D window and optimize their layout to fit in 1 0-1 space.
This feature is ideal for anyone that requires 1 0-1 space and an atlas texture or 1 texture set (Diffuse, Normal, Roughness, Metallic).
-This will also not work for files that require the Garment Inside setting to be turned on as this will produce 2 texture sets.
-Users also do not have control over the size of the pattern pieces within the 0-1 space. We can’t control the texel density resulting in loss of fidelity for small details (i.e. logos).
Limitations
Sherpa & Fur Recommendations
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.
Browzwear 3D Trim Texture Post-Processing
At this time, garments containing 3D trims that are colored something other than white or black, do not export properly using the GLB exporter. They will be exported with a different color than what was intended. In this guide, we’ll review how to edit the trims in Blender to prepare the garment for real time rendering.
Browzwear Viewer
Exported GLB
Please follow the below guide to correct this error.
Let’s dive into it!
Trim Blender Edits
To fix the button color issue, we will need to edit the 3D trims in Blender. Another 3D modeling software can be used, but we prefer Blender.
Import the .glb into Blender.
- Toggle to the Shading Mode and turn on Shaded view. Shading Mode allows you to edit the materials and the Shaded View allows you to see the materials accurately in the 3D viewport.
- Select the trim that needs to be adjusted.
- Navigate to the Material Properties tab on the right hand side. You may find several materials under the hierarchy window. Select one material and notice which piece is highlighted.
- Select the Base Color and find the Hex tab.
You will need to navigate back to VStitcher to find the correct value. You can find that by simply selecting the trim, opening the color, and copying the value listed after the ” # “.
- After copying the value from VStitcher, navigate back to Blender. Paste the value under the Hex tab. The color of the trim will update.
- Repeat steps 3-6 for any additional trims.
- Once the trims have been adjusted accordingly, the garment is now ready to export.
Navigate to File → Export → glTF 2.0 (.glb/ .gltf) and proceed to export the garment as a glTF Binary (.glb) file.
This GLB can be uploaded to VNTANA Platform.
