I’m working on a some clothing models that are supposed to be used with WebGl and we had some issues implementing the models into the engine. We’ve tried a lot of things but haven’t ruled out much of what may be causing this. What we arrived at really is a compromise more than a fix - lowering the intensity of the normal map, but I hardly think that’s a solution for this so I’m hoping that someone might have a better answer.
Here’s a screen shot side by side of how the model looks in marmoset toolbag and how it looks in marmoset - left and how it looks in webgl - right.
If you’d have any answer on this we’d be really grateful, we’ve been struggling with this for some time now. Both version have improved in the meantime but I’m porting a screenshot from where the problem was at it’s worst.
So, let me know what suggestions or question you may have.
It’s possible that either Marmoset is not exporting the normalScale you have set, or you are using a file type/engine version that doesn’t respect the normalScale setting.
As mentioned above, need to say which file format and which version of ThreeJS you are using.
The model is in .OBJ and .MTL for the materials. The files are not exported from marmoset but from 3ds max and substance painter. And using .png for the textures. Textures are exported from Substance Painter.
There’s really no way we can help you unless you share a model. It doesn’t have to be the full model, even just a cube with the material applied that demonstrates the issue would work.
If possible also include the 3ds max file.
Alternatively, try exporting as FBX instead and see if that works better.
Here’s the progress so far what we’ve been working on. We’ve already eliminated the avatar and jeans as we couldn’t get those to show correct: http://test12.webgldeveloper.pro
Other than this, it is my understanding that three.js is simply incapable of rendering a baked normal map. This would explain the seam on the left sleeve in the right screenshot. But i might be wrong. Would love to see the actual normal map.
EDIT
Actually, since a piece of garment comes with seams in real life, it makes sense to hide the UV seams in this area. So, this particular mesh/texture combination does not suffer too much from the limitations of three.js
Some less obvious artifacts do appear though:
Because it’s not just a normal map of the fabric texture, but actually has some folds and curvature, you start seeing these discontinuities, making the triangles stick out.
I also think it’s generally a tricky thing to scale the normal map if it is baked. It makes sense for brick mapped on a wall, not this.
This is the original model we had the issues with. Any advice on how to fix this would be really appreciated! http://test14.webgldeveloper.pro
When I look at this example: https://threejs.org/examples/#webgl_materials_skin
the textures and lighting look so realistic. So what I’m looking to achieve is actually possible. And the model looks really good in 3dmax, but for some reason it looks messed up in WebGL
