Three.js: Skinned mesh with normal map lighting distortions

[madisjanno]

Description of the problem

I have a flat mesh with skeletal animations and a normal map. When bones are rotated from the default position and alter the faces, the normals from the map seem to get distorted creating visible edges between triangles.

This occurs with both MeshStandardMaterial and MeshPhongMaterial.

Live preview: https://madisjanno.github.io/ProceduralCreatures/

Three.js version

• [x] r87
• [x] dev

Browser

• [ ] All of them
• [x] Chrome
• [x] Firefox
• [ ] Internet Explorer

OS

• [ ] All of them
• [x] Windows
• [ ] macOS
• [ ] Linux
• [ ] Android
• [ ] iOS

[Mugen87]

Can you please provide a version without a normal map applied?

[madisjanno]

Without the normal map, all normals point towards (0,0,1).

I tried setting the normals to (0,1,0)

There are no lighting discontinuities.

A similar setup with a normal map pointing towards (0,1,0) and regular normals being (0,0,1)

Has really bad discontinuities.

[WestLangley]

Sorry, we are not going to debug your app. You will need to provide a simple example.

Try applying your normal map to a tessellated PlaneGeometry.

[madisjanno]

I put together a much shorter example here: https://jsfiddle.net/1d1hafg2/2/

Example of what I would expect: https://jsfiddle.net/rv54moep/1/

[makc]

it's almost as if material.shading is set to THREE.FlatShading by default. do we even still have this shading property?

[Mugen87]

@makc It's Material.flatShading now.

[makc]

@Mugen87 setting that to true nukes the material entirely https://jsfiddle.net/rv54moep/2/

[pailhead]

You cannot render normal maps with three.js the way you want to. Three does no averaging of the tangents so i think for the purposes of normal mapping it is as if you had FlatShading always set.

Pretty much the only thing you can do is:

Try applying your normal map to a ~tessellated~ PlaneGeometry.

_(it doesn't have to be tessellated actually, but yeah, a flat surface is the only thing that can be normal mapped with three)_

This is not a bug, this is a feature. Three.js has been designed to work this way.

I've made an example that illustrates this issue:

http://192.241.199.119:8080/dev/testwp/

Notice how using a different normal mapping method works. It's hard to tell if the seams exist even in problematic places (like where uvs meet and such). It's all very continuous and smooth.

As soon as you flip to three.js you start seeing triangles everywhere.

[madisjanno]

This is not a bug, this is a feature.

What is the upside of this design?

[pailhead]

I'm not sure i'm not aware of any, i hope others pitch in.

It's probably not a lot of code, and it all happens in the shader so it's somewhat self contained. This is the least you can do, in order to say "three.js can render normal maps".

It may also fail in places where you don't have derivatives but you could render normal maps perfectly fine with provided tangents.

I really think it would be beneficial to document this behavior. I think it would have saved some time here:

Sorry, we are not going to debug your app. You will need to provide a simple example.

There would be no need to provide a different example nor debug the app if this were known behavior.

[pailhead]

Some upsides I thought of:

1. You don’t need to provide any extra tangent information. (Saves some memory and such), makes it simple.

2. It works really well on THREE.PlaneGeometry, so for effects like brick walls it does the job probably better than alternatives.

But its as you can see, fairly limited.

edit

I just looked it up, the non derived tangent space got nuked in r64, which was late 2013.

You can override this behaviour though, but it's not easy.

[pailhead]

I think I need to correct myself, I don’t actually quite fully understand how this breaks down but the lee head looks decent. But it’s worth investigating and writing up some conclusions. It depends a lot on the normal map. Also if your geometry is heavily tessellated it may reduce this issue, but this kinda defeats the purpose of normal maps.

[WestLangley]

@madisjanno Your normal map is specifying normals which are tangent to the surface.

Closing. You can reopen if you can clearly demonstrate a three.js bug.