WebGL normal map issue


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.

Thanks again!

What format is the model in? And can you share a model that has this problem?

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

Loading the model into three.js caused the mannequin to put it’s hand into the pocket?

If you could somehow mimic the same position/angle/light it would be much more obvious what is going on.

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.


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

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

Well, webgl is what you make of it.

I like that unicorn hoodie :grin:

I’ll send you the hoodie in your size if you’re able to tell how to fix our issue :smiley:

This looks like a resolution depended issue to me. The normal details in the map seem be too fine in order to be used without precision errors.

But also notice the texture size of it, it is 2058x2048 instead 2048x2048, in this case THREE will resize it.