Iridescence support

[sebavan]

So cool to say we now support iridescence in PBR Material, PBR in NME, gltf loader and serializer

sebavan

You can find more in the doc: Mastering PBR Materials | Babylon.js Documentation

[mawa]

Fantastic! Already bookmarked and it won’t take long before I will want to make use of it. Thanks for your work on that.

[Anupam_Das]

great work team, we really need this feature for an upcoming project so the timing was perfect. We appreciate you thank you!

[JCPalmer]

I am hooking iridescence up in the Blender exporter, and a couple of observations / questions.

First, in the doc linked above (edit: the one to open a new tab), the PG in the body, https://playground.babylonjs.com/#FEEK7G#7, is for clear coat not iridescence. The one in the list on the right, should replace it.

I was going to use 3 custom material properties, shown in green

I figure that a non-zero value for intensity, will also turn it on. Same for the thickness’es to be written, but I do not really understand what this in the doc means

By Default, the thickness will be used as a fixed value equal to the maximum thickness.

[sebavan]

@RaananW could you check for the doc ? it seems to be the right link in the md, not sure why the wrong one is there ?

[sebavan]

About the thickness, it means that without a thickness texture, only the max value is used and considered to be the actual thickness.

With a texture, the value in the g channel (between 0 and 1) is used to compute thickness as an interpolation between min and max thickness.

[ecoin]

This is incredible news!!! I’ll definitely be among the first to implement it in production! Can’t wait for Lumen too when it comes time!

[RaananW]

Is there a wrong playground link? Should be this, right - PBRMetallicRoughnessMaterial | Babylon.js Playground (babylonjs.com) ?

It’s an issue with next that was not yet resolved. I will see what I can do to override this.

[RaananW]

The issue is now resolved (updated dependencies on our doc repo)

[bitbybit-dev]

Hi @sebavan

This isn’t directly related to BabylonJS, but I’m looking for an example Blender file that contains an iridescence material which can be correctly exported using the glTF exporter.

Maybe you have a link or tutorial on how to set up such a material? I’m not very experienced with Blender materials, and I followed a video tutorial, but the iridescence effect doesn’t appear in the exported glTF.

Do I need to bake the material to textures, or is it necessary to manually edit the glTF and add something like "extensions": { "KHR_materials_iridescence": { ... } }?

[sebavan]

This is a pretty good question but I am Blender Dumb maybe @PirateJC or @PatrickRyan would know ?

[bitbybit-dev]

Thanks! No problem - I get it, this isn’t a Blender forum after all.
Still, if anyone has any advice, it would be really helpful. I managed to get something working by manually adding the iridescence parts to the glTF JSON, but it’s hard to achieve a predictable visual result that way.

[bitbybit-dev]

As I did not really find simple way to export Iridescence from Blender directly I wanted to share the approach that sort of works. If anyone will know a better approach - please share it.

Here’s old but useful video from Eric Chadwick on the topic:

Exploring the Artistic Frontier: Unleashing Creativity in 3D Models with glTF and PBR

This tutorial is based on 3DS max, but the Blender should work the same way. The idea is to bake iridescence texture in Cycles renderer (if needed) and export non-binary gLTF file. Then open gLTF in VSCode, install gLTF preview extension from Cesium, which also has BabylonJS preview tab. Then it’s easy to add things like:

"extensionsUsed": [
        "KHR_materials_iridescence"
],

and then in materials that use iridescence add things like:

"extensions": {
         "KHR_materials_iridescence": {
                    "iridescenceFactor": 1,
                    "iridescenceTexture": {
                        "index": 1
                    },
                    "iridescenceThicknessTexture": {
                        "index": 1
                    },
                    "iridescenceThicknessMinimum": 600,
                    "iridescenceThicknessMaximum": 900
          }
}

If texture or an image is not included in textures property - you have to add it too. It’s also important to make sure that texture and image indexes are used correctly and are consistent within that file.