Add example to show and test normals and tangents

[erikdubbelboer]

This shows that normals and tangents are not used correctly in both WebGL2 and WebGPU.

See #5735 See also https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/NormalTangentTest

Front with WebGL2 is correct:

Back with WebGL2 has the wrong reflection on the right, it should be upside down.

WebGPU normals are wrong, but out of scope to fix in this pull request.

I confirm I have read the contributing guidelines and signed the Contributor License Agreement.

[erikdubbelboer]

I tried to find a way to fix these issues but I'm not sure where to start. Should this be fixed in the GLB parser or in somewhere else? If anyone can point me in the right direction I can try and fix the issues in this pull request as well.

[slimbuck]

Oh that's interesting. I never realised our lighting basis is wrong on the back faces. (We were aware of WebGPU issues though). Thanks for pointing this out!

[erikdubbelboer]

@slimbuck if you point me in the right direction, I can try and fix it. Are the normals and tangents calculated at a specific place? I couldn't easily find it as I'm not familiar enough with the source yet.

[slimbuck]

I would have expected backfaces to be handled by this bit of code here: https://github.com/playcanvas/engine/blob/main/src/scene/shader-lib/programs/lit-shader.js#L989

The actual tangents and binormals are calculated in this shader chunk: https://github.com/playcanvas/engine/blob/main/src/scene/shader-lib/chunks/lit/frag/TBNderivative.js

[erikdubbelboer]

I have fixed the calculations for both WebGL and WebGPU. I have also fixed the WebGPU version looking so weird, this was caused by setting mipmaps: true on the envAtlas.

[mvaligursky]

I'd be definitely great to have this example as a test for normals / tangents.

[erikdubbelboer]

I have rebased the example on main with the new examples refactor. What needs to happen to get this merged now?

[willeastcott]

Thanks for doing that, @erikdubbelboer - we'll take another look ASAP! 😄

[mvaligursky]

It seems the description only shows 'before' state, but not 'after' state - could you please update it.

[slimbuck]

Hi @erikdubbelboer,

Looking at the changes, I think it makes sense to handle twoSidedLighting in just one place - after dTBN has been calculated.

This is probably best done in a new shader chunk. So I went ahead and implemented this approach in https://github.com/playcanvas/engine/compare/main...slimbuck:erik-normals-and-tangents.

Could you take a look and let me know what you think? This approach also means we probably fix the case where TBNObjectSpace.js is used.

If you're happy with this I can push directly to your branch?

Thanks!

[erikdubbelboer]

@slimbuck great, I have merged your changes.

@mvaligursky I think this pull is ready now.