Iridescence gLTF - Differences between BabylonJS and Khronos Viewer

[bitbybit-dev]

Hi,

I’m working with glTF models that need a strongly pronounced iridescence effect. However, I’ve noticed that BabylonJS renders iridescence differently from the Khronos Viewer - BabylonJS produces a noticeably softer effect using the same parameters. I’d like to understand whether there’s a way to make BabylonJS create the same looking result as in Khronos Viewer.

https://app-store.bitbybit.dev/files/test-forum-2.gltf

I’ve prepared a file that you can load in Khronos Viewer and in BabylonJS Sandbox

Here’s how it looks in Khronos Viewer

iridescenceFactor 5 (larger then max allowed, but the way we want it to look)

Here’s how the same file looks in BabylonJS Sandbox

This particular file has iridescenceFactor set to 5, which is higher than what the specification allows. However, the Khronos Viewer handles this the way we’d like - it exaggerates the effect and still interprets the out-of-range value.

It also seems that the purple and green hues appear in different areas on the same model depending on the viewer.

Even when iridescenceFactor is set to 1, the results in BabylonJS and the Khronos Viewer still differ slightly. Here’s the file:

https://app-store.bitbybit.dev/files/test-forum-iridescence-1.gltf

And here are the visual differences:

Khronos Viewer (still somewhat noticeable):

BabylonJS Sandbox (not sure it’s noticeable at all):

I’d like to understand whether there’s any way to adjust the glTF file so that it produces the same iridescence effect seen in the Khronos Viewer.

Is there a fundamental difference in how the iridescence specification is implemented in the Khronos Viewer compared to BabylonJS?

Any help or advice on this is highly appreciated.

I also tried it on other viewers and while ThreeJS results look similar to BabylonJS, PlayCanvas is doing it in the same way as Khronos Viewer

[echadwick-artist]

I suspect the glTF Sample Viewer and PlayCanvas are not clamping the iridescenceFactor.

The spec doesn’t say anything explicitly about keeping values between 0 and 1. glTF/extensions/2.0/Khronos/KHR_materials_iridescence at main · KhronosGroup/glTF · GitHub

But that’s the usual expectation with these parameters. Because going over 1 typically creates non-physical shading behavior.

[bitbybit-dev]

Thanks Eric, will have to go through that spec to understand it better! I had a theory that BabylonJS cuts off the value from 5 to 1, but I think something else is happening inside the implementation. if I increase iridescenceFactor to 10, BJS does change the looks

That ring effect is also missing, which is a bit strange. Hope @sebavan or others in the community will be able to provide some info on this

[echadwick-artist]

Well, above 1 it’s non-physical behavior, so it’s basically unpredictable.

Also, you have the Clearcoat extension in the material, which substantially reduces the iridescent effect. I would suggest removing that.

Here’s an edited material, using Visual Studio Code (with the glTF Tools extension from Cesium). This uses physically-correct values only, so you won’t see that banding effect. But on the other hand it should look similar in most renderers.

If you use this sample asset as a guide for your settings, you can dial in whatever colors you like:

glTF Sample Viewer

[echadwick-artist]

It would help a lot to see a reference photo of the kind of material you’re trying to replicate.

[bitbybit-dev]

Wow, removing clearcoat did change results substantially. Thanks for pointing that out! I’ll try to get more representative example of the effect and the model

[Evgeni_Popov]

The iridescence implementation in our PBR material is a bit different from Khronos viewer indeed, but the new OpenPBR implementation currently developped by @MiiBond should be a lot closer. See Error in glTF PBR shader · Issue #16840 · BabylonJS/Babylon.js · GitHub

You can try the current OpenPBR implementation (not finalized yet) by setting the useOpenPBR: true option when you load a glTF file.

[bitbybit-dev]

Hi @Evgeni_Popov, thanks a lot for this information, I’m so happy that the team/community/@MiiBond is already working on the solution. I will test it out. Can I assume that this will always remain under the flag due to backwards compatibility? Just thinking whether I should expose this option to users as this affects more gLTF related things.

[bitbybit-dev]

@Evgeni_Popov

useOpenPBR

I enabled this option and this was the rendered result by using the same file:

I totally understand that this is still work in progress, but I do see the ring that starts to resemble the result in Khronos Viewer. I’m not sure where those red spots come from, but I’ll have to re-test when the final feature will be released. At the moment I also notice significant drop in FPS with this option enabled on v8.38.0

[sebavan]

cc @MiiBond