Frosted Glass / Half-transparent materials in gltf

[Bersaelor]

Hey there,

I recently discovered some amazing advancements in Three.js, with regards to half transparent / frosted materials using the newly available transmission/thickness/iOR & clearcoat values.
Example pic:

(Created using this three.js demo)
So far, I was only able to achieve this effect in Renderer like Blender's Cycles, it's amazing how performant the Three.js renderer is in the browser and how realistic it looks.

Now, I also looked through the gltf 2.0 specifications for similar parameters, atm the best I can do is using the alpha channel of the baseColor and set the alphaMode to BLEND. Thats how we used to do it.

Are there any options that model-viewer would render that I currently am not aware of?
Or are there any advancements in the pipeline with regard to transmission/ frosted materials?

[elalish]

Oh, in fact those were added to three.js in order to support the new glTF extensions, which are ratified now. Check out this post for some more info on using them.

[elalish]

In short, they are all already supported by model-viewer: https://modelviewer.dev/fidelity/#khronos-DragonAttenuation