NodeMaterial - Fix DoubleSided and BackSided NormalMap flipped

[sunag]

https://raw.githack.com/sunag/three.js/dev-node-sides/examples/webgl_materials_nodes.html

Fixes #17383

[Mugen87]

When opening your live link, the normal map still looks flipped. However, if I switched to BackSided and then back to FrontSided, it looks good. Is this the intended behavior?

[sunag]

@Mugen87 I forgot to define the default side, the default side is DoubleSided and not FrontSided.

[sunag]

My issue is that apparently in non NodeMaterial too DoubleSided and FrontSided have different results rendering the front face only?

[sunag]

I think that it should be < 0.0?

three.js/src/renderers/shaders/ShaderChunk/normalmap_pars_fragment.glsl.js

Line 44 in 84f9c51

if( dot( NfromST, N ) > 0.0 ) {

[sunag]

Seems that @bhouston explained better the cause here:
http://hacksoflife.blogspot.com/2009/11/per-pixel-tangent-space-normal-mapping.html?showComment=1522254677437#c5087545147696715943

[sunag]

@arobertson0 @Mugen87 Seems correct now?

[WestLangley]

@sunag

To test, remove the lid and bottom like so:

teapot = new TeapotBufferGeometry( 15, 18, false, false );

so you can see what is happening.

FrontSide should be extruded; BackSide should be indented.

DoubleSide should be extruded on the front and indented on the back.

/ping @donmccurdy

[sunag]

Hmm @WestLangley seems that BackSide issue in NodeMaterial is related with this:

three.js/src/renderers/WebGLRenderer.js

Line 2264 in 2d7c0b4

if ( material.side === BackSide ) uniforms.normalScale.value.negate();

[sunag]

Maybe should be we move this to the shader?

[sunag]

Anyway, this seems to fix DoubleSided fliped normal in front-face in core shader?

[WestLangley]

Double-sided materials with a normal map are broken in the core shader. Breakage occurred in #17158 (confirmed).

The breakage is easily-seen in webgl_decals.html. Make the following change in the example, and the decals will become inverted:

var material = decalMaterial.clone();
material.side = THREE.DoubleSide; // add this

/ping @JordyvanDortmont
/ping @donmccurdy (to confirm desired behavior)

[WestLangley]

@sunag Whether the triangle is front-facing is a separate issue from whether the geometry and or UVs are mirrored. All we need is a test to replace gl_FrontFacing.

[WestLangley]

@sunag Oops. I did not realize you proposed a change to the core shader in this PR. I also proposed #17586.

[Mugen87]

I also proposed #17586.

I think it's better to have a single PR and use a uniform solution in normalmap_pars_fragment.glsl.js and NormalMapNode.js . I've tested both approaches and both fix the issue in webgl_materials_nodes.

@mrdoob Which one do you prefer? I suggest to update this PR with your desired solution and close #17586.

[sunag]

I liked the PR of @WestLangley, I suggest merge the PR of @WestLangley first and after I fix any conflicts of this PR for NodeMaterial.

[WestLangley]

@sunag Done!

[sunag]

The approach used currently to BackSided is incompatible with NodeMaterial and a bit more hard to implement. I think in leave this fix to another PR.

three.js/src/renderers/WebGLRenderer.js

Line 2264 in 2d7c0b4

if ( material.side === BackSide ) uniforms.normalScale.value.negate();

[JordyvanDortmont]

I'm sorry for breaking the normals for double-sided materials!

I tested both PRs on a GTX 1070 and I see differences between the two PRs suggested. One is related to the DoubleSide issue, and another is related to BackSide.

While I was writing this, this PR has changed, so I'll describe the current behaviour of this PR.

The normals are flipped for DoubleSide when use node material is unchecked, so the teapot is indented on the front instead of extruded. Is this the case for you as well?

The normals flip when webgl_materials_node is set to BackSide and you check/uncheck use node material. I think @sunag mentions this here: #17584 (comment) and here: #17584 (comment)

When the DoubleSide issue is resolved, I'll test the PR on an Adreno GPU.

[sunag]

I was thinking of fix BackSided using shader, but with node seems easier... I will commit this fix.

[sunag]

The normals are flipped for DoubleSide when use node material is unchecked, so the teapot is indented on the front instead of extruded. Is this the case for you as well?

My live example is only for nodematerial, the core was fixed in WestLangley PR #17586.

[sunag]

I think it is ready to merge?

[arobertson0]

I think it is ready to merge?

Looks great. As you said, this matches #17586. Thanks for the fix.

[mrdoob]

Thanks!