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 Pack UVs 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 to avoid potential export errors.
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.
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:
Semi-transparent Fabrics: If your semi-transparent fabrics are not exporting correctly that means the transparency slider was probably used to achieve the correct visual in VStitcher. Unfortunately, the transparency value is not maintained during export. Please refer to our guide below to export and correct in Blender: Browzwear Fabric Transparency Guide.
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.
If you notice that a recolored trim has been exported with the wrong color, please follow our current workaround (below) to recolor the trim correctly in Blender: Browzwear 3D Trim Texture Export Post Processing
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 with the below settings.
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 with 1 texture map for each channel (Diffuse, Normal, Roughness, Metallic).
This feature does not work for any files containing 3D trims.
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 Fabric Transparency Guide
When exporting garments from VStitcher that include semi-transparent garments follow the below guidelines.
At this time, semi-transparent garments do not export accurately from VStitcher. We’ll review file preparation steps, export settings, and post-processing steps in Blender to prepare the garment with proper transparency for real-time rendering.
Let’s dive into it!
Fabric File Preparation
Export Settings
Fabric Blender Edits
To achieve semi-transparent fabrics, we will need to edit the materials of the exported garment in Blender at this time. Another 3D modeling software can be used, but we prefer Blender.
Within Blender, we’ll have to edit the Blend Mode and adjust the Alpha Channel within the materials. Please follow the steps outlined below.
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 a pattern piece that needs to be adjusted to a semi-transparent material.
- Toggle to the Material Properties and Settings section. Within these settings we’ll change the Blend Mode from Opaque to Alpha Blend.
- In the material graph, adjust the Alpha Channel to the correct transparency value, between 0 – 1.
We used 0.6 for this piece. Back in the Material Properties, select the second material listed and repeat steps 4 – 5.
VStitcher exports two materials per pattern piece. One material represents the front of the pattern piece, and the other material represents the back of the pattern piece.- Repeat steps 4 – 6 for all pattern pieces that should be semi-transparent.
- Once the garment is adjusted accordingly, it 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.
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.
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.
- 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.