Material-anisotropic example visual difference

[mvaligursky]

We have existing Material-anisotropic example. Now that the anisotropy implementation was modified in #7668, the example looks differently, which needs to be investigated. Two issues:

1. The example calls material.anisotropy = ((2 * x) / (NUM_SPHERES_X - 1) - 1.0) * -1.0; which uses the deprecated API, and needs to be adjusted to use the new API
2. Visually, I would hope the example to still somehow look visually similar to what it was before, but it seems the low aniso and low roughness looks very different (left bottom corner).

before: https://playcanvas.vercel.app/#/graphics/material-anisotropic

now: https://engine-ege9es532-playcanvas.vercel.app/#/graphics/material-anisotropic

Note that I adjusted the camera to see the whole scene better:

I see that this example looks as expected: https://engine-ege9es532-playcanvas.vercel.app/#/graphics/anisotropy-strength
And so perhaps the conversion of the old deprecated value to new value needs adjustment?

pinging @emadurandal

[emadurandal]

Regarding the material-anisotropic example, it is impossible to completely approach the same visual as before.

As I mentioned in #7668 (comment), the previous implementation and this KHR_materials_anisotropy compliant implementation differ in how the roughness affects the anisotropy.

Simply put, in the previous implementation, the lower the roughness, the weaker the anisotropy, and the higher the roughness, the stronger the anisotropy. The current implementation is the opposite: the lower the roughness, the stronger the anisotropy, and the higher the roughness, the weaker the anisotropy.

In the https://engine-ege9es532-playcanvas.vercel.app/#/graphics/anisotropy-strength example, the direction of anisotropy (rotation) is consistently lateral, and the reflected landscape is stretched horizontally and does not change much. So it would appear fine.

In material-anisotropic example, Changing the value of the previous parameter StandardMaterial.anisotropy will change the direction as well as the magnitude of the anisotropy. This change in the direction of anisotropy is the key point this time, and in this example environment map, the change in appearance is more intense when the anisotropy changes in the vertical direction. In the new implementation, the smaller the roughness, the greater the anisotropy, so it is even more so.

Unfortunately, this is not something that can be addressed by a conversion from old deprecated value to new value.
(I thought the PR was merged with an understanding of this tradeoff …)

If we change the handling of roughness in the shader code and change the implementation so that the anisotropy is weaker when roughness is small and the anisotropy is more effective the larger the roughness is, as in the previous implementation, the visual may be similar to before. However, that would not be KHR_materials_anisotropy compliant anisotropic behavior.

If the problem is that the appearance of this material-anisotropic example has changed so much from the previous one that users may be surprised, it might be a idea to recreate this example differently in the first place.

[mvaligursky]

Trying to investigate.

I downloaded this HDR image:
https://polyhaven.com/a/table_mountain_1

I then drag and drop the lamp followed by this image to babylon's viewer https://sandbox.babylonjs.com/ and get this:

When I use our prefiltered skydome from the same HDR file

I get this:

Note the yellow line, that's what I'm worried about. I'm not sure where this comes from, but there is a chance this is anisotropy related (but could be something else).

[emadurandal]

That's because of the directional light (I think I copied the clearcoat example) I didn't dare remove the directional light because I thought it would be necessary to check how it works with Punctual Light.
If you comment out the directional light, that yellow line will disappear.

[emadurandal]

When comparing Babylon.js and IBL, you need to make sure that the IBL direction matches in both.
When I checked with Khronos Render Fidelity, the code to adjust and match the IBL direction in each library was in the viewer of each library.

[mvaligursky]

Ok that makes sense, the directional look gave it this strange sharp line.
I did a small updates to examples, but otherwise all seems great, thanks!