Weird Shading / Lines when using Normal Maps

Hello everyone,
though I’m sure, that I can’t be the first to encounter this issue, I couldn’t find any solutions in this forum.

When I use a normal map on any Asset in PC, the material shows these weird line artifacts where the edges are on the mesh:

For reference, this is how it is supposed to be (Blender Eevee):

As the mesh looks fine without a normal map, I assume that the problem lies with the map and not with the normals / tangents are exported on the mesh

The map all by itself also seems to be fine:

I used the new Basis compression on the map, but this still occurs when using Legacy compression or even none at all.

Has anyone got a solution for this problem?

Common errors I already considered / rooted out:

  • the normal map format is +X +Y +Z / OpenGL standard
  • the mesh was triangulated before baking
  • I tried different normal and tangent settings for the fbx exporter → has absolutely no effect
  • I tried different normal map file formats (tga, jpeg, etc)

Does it look fine without Basis?
When compressing with Basis, has Normals been ticked?

Edit: actually I saw you post that you have tried without.

Is the original texture dimensions a power of two?

Yes, the original texture is power of two

Hmm… would you be able to make the model and texture accessible for people to take a look please?

It’s almost as if the texture has been flipped or mirrored?

Perhaps try to export the model to glb file and test it around in different viewers - that could be useful to test if the problem is in the model or PlayCanvas rendering.

playcanvs https://playcanvas.com/viewer
threejs https://gltf-viewer.donmccurdy.com/
babylon https://sandbox.babylonjs.com/

@yaustar

Here’s the fbx and the normal map:

@mvaligursky

Thanks for the tip!
The threejs viewer also has the same issue, so I assume it’s more of a general WebGL-problem.
When I use glb and export the mesh’s normals AND tangents (a setting which seems to have no effect in fbx files), it works fine (screenshot from playcanvas viewer):

Here’s the glb is used along with the embedded normal map:

Now the question remains: what do I do with this knowledge? I cannot use glb in PC, can I? And besides, there has to be a better solution than re-uploading all my meshes as a different file format…

You can, it does require some workarounds and you can’t see in the Editor view which is probably not useful for you. https://developer.playcanvas.com/en/tutorials/loading-gltf-glbs/

Thanks for the files, hopefully someone will be able to take a look at it.

You can , it does require some workarounds and you can’t see in the Editor view which is probably not useful for you.

This is sadly not an option for my project.
As a work-around I tested .obj and .dae as well, to no avail.
What I recon is that there seems to be a difference in how glb/gltf handles exported tangents and how fbx, obj and dae do - or at least Blender’s exporter handles these formats differently.

I’ve added your FBX and normal map to the scene and it looks fine to my eyes?

Could you share a reproducible as project so that we can see the issue as you are seeing it please? Perhaps that will give us some clues

Sure, here’s the link:
https://playcanvas.com/editor/project/758739

I just created the Project, and this is how it looks like for me:

(I just quickly ripped the skybox from OrangeRoom to increase the contrast - maybe went a bit overboard there, sorry ;))

1 Like

I’m going to add this to the GitHub repo issues as I’m personally at a lost on what it could be.

1 Like

did you click on the import basis?

and have you tried reversing the green channel of your normal texture

@Will_Viewtek

While it is true that I hadn’t imported Basis in my shared Debug project, the artefacts doesn’t seem to be caused by the compression. Even when I use Legacy or no compression, the issue still occurs.

Flipping the G channel sadly didn’t do the trick either: