Anisotropy Issues - Worse on Mac OS

Bugs
1

Hi

We seem to have an issue using Anisotropy and it causing strange artefacts in rendering
We are creating velvet effect materials and came across this issue.

We first spotted it on Mac OS both on chrome and safari and the problem is worse still on mac but it’s also on windows.

Problems

  • small dots appear on the material (Mac only)
  • artefacts appear where more condensed geometry areas (windows and Mac but worse on mac)

We created 2 playgrounds

Anisotropy enabled - https://www.babylonjs-playground.com/#FS3SF2#1
Anisotropy disabled - https://www.babylonjs-playground.com/#FS3SF2#2

Appreciate any help on this

Tagging
@Marcin_Zamelski @mimeeq3d_milosz

2

adding @Cedric

3

Hi @mimeeq3d_neal

I’ve tested on safari MacOS11.3.1 / Safari 14.1 and I didn’t spot anything strange to me.
Are you using webgl1 or 2?
Can you share some screenshots with highlighted rendering glitches?

4

Hey @Cedric
Thanks for jumping to the rescue

yes we are using webGL2
this appears also on ios devices also, iPad and iPhone which is WebGL 1.0 (if I am not mistaken) but seems this is not directly related to the version or os but is worse on mac os for sure

Here is a video showing the issues Anisotropy Issues
I was talking but must have had the microphone input disabled but I think the video still shows everything. I show it first in our app environment and then in the playground at the end.

Our production app is still running 4.10 but in the playground, it is the same on 4.2 and 4.10 anyway

My particular mac is an M1 chip but as I said its also on windows 10 and chrome and ios devices

5

Now I know what to look precisely, I can repro :slight_smile:

As you said, the issue is more visible on MacOS but visible as well on Chrome, Edge and Firefox on Windows.
Setting anistropic intensity to 0 and the black pixels are still visible.
I checked rendered normals and it seems fine.
Removing the anisotropic texture doesn’t fix it.
But I’ve also found that enabling Realtime filtering fixes the rendering. Any idea what can be the cause @sebavan @Evgeni_Popov ?

@mimeeq3d_neal I guess you use an IBL texture, can you provide its link ?

6

Sounds like a weird divide by zero or smthg similar, @Evgeni_Popov might have a good idea for this one ?

7

As Cedric, I can not repro with your playground so it might only impacts some GPUs but not all of them.

8

That’s correct, uploading here in a zip
environment_studio.env.zip (191.4 KB)

9

It seems it is a known problem of the cotangent frame computation: see the comment from Zagolski in the comment section of Followup: Normal Mapping Without Precomputed Tangents | The Tenth Planet (we are using the computations described in this article to compute the tangent/bitangent).

Indeed, your uvs are very closed to each others in the areas that exhibit the problems and there’s not enough precision to compute a sensible tangent vector. As a workaround, you could try to provide your own tangents with the model geometry, in addition to the position/uv.

Here’s a closup with the tangents displayed on the right:

https://www.babylonjs-playground.com/#FS3SF2#4

We can see in this PG that enabling Realtime filtering does not fix the problem, it only changes a bit the colors on the left, but the right part remains the same.

3 Likes
10

thanks for the reply @Evgeni_Popov , I will discuss that with the team tomorrow as its over my head

11

We tried a few things on this and came to the conclusion of using real-time filtering which was added in 4.2 does stop the behavioural problem, be it that it reduces the shimmer/falloff effect more than we would like but we feel it the easiest and most suitable resolution in this case… thank you all for the help and messages. @Evgeni_Popov @Cedric :muscle: :sunglasses:

4 Likes