Glare of glass

[Methew5]

Hi.
I want to implement a material like glass with glare.
Manipulations with roughness and reflection doesn't not suit my needs.
When I set roughness to 0, I have a reflection, but with a standard texture (figure below). It looks really strange :)
I think I need to replace this texture for a more realistic result, but I have no idea how to implement this.
Maybe there is an easier way to implement such material?

[ThomasGorisse]

Are you trying to make a mirror or a transparent glass?
I'm not a material expert but here is what I use:

• Transparent = Transmission to 100% overs to 0. Since Filament handles the khr_materialTransmission extension, you can use it for great rendering instead of using alpha.
• Mirror = Metallic near to 100 + some little roughness. I think.

Looks like a cooking list but it works for me.

If you want a 3D designer (which I don't pretend to be) cooking secret, for the texture, just introduce some noise texture resources to make it more photo realistic.

[Methew5]

I'm trying to make a transparent glass with glare.
Could you give example of using transmission and other, please?
Now I'm creating a transparent material with white color (using MaterialFactory) and apply roughness and reflectance to material of renderableInstance

[ThomasGorisse]

You can have a look at this sample: logo_filament-v1.0.2.zip

It comes from this discussion: Filament logo 3D Model

Here is the result:

[Methew5]

It looks pretty cool, but how can I apply this kind a material to a custom model at runtime?

[ThomasGorisse]

You have 2 choices:

1. Since the Sceneform ‘MaterialFactory‘ is a wrapper of Filament 'Material.Builder‘, clone this repo and make MaterialFactory involve with the latest version of Filament.
   If you do so, it would be very helpful for over users to make a Pull Request.
2. Define multiple materials in Blender inside your glb and make your Renderable instance switching them.

The first one can be useful if you want a variable (not just switching) material for a non glTF mesh. Even if you can also ‘setParameters‘ on a glTF model.

[Methew5]

In the second case I can't apply this because of using RendererDefinition, am I right?

[ThomasGorisse]

You can change the glTF material parameters like this:

RenderableInstance modelInstance = modelNode.getRenderableInstance();
modelInstance.getMaterial().setInt("baseColorIndex", 0);

You can have a look at RealityCore Material extension here: MaterialInstance.kt for a non exhaustive list of possible parameters.

[ThomasGorisse]

Please use the master version for your tests since it fixes the getMaterial() (#79)

[Methew5]

@ThomasGorisse
Maybe there is a way to make the material completely transparent, but leave the reflection effect using SceneForm or .mat files?

[ThomasGorisse]

It's more a physical question maybe answered in Filament Material Guide but from what I think, the reflection effect could not be completely transparent since it would not be visible.

Send some screenshots or examples of what you want to achieve here if you want some help.

[Methew5]

I want to archieve glare of glass effect like this but using flat model, or like this
It is so sad to realize that this cannot be done by standard instruments :(

[ThomasGorisse]

You should ask the question on the Filament repo to know what material extension is supported to achieve the result you want.

[Methew5]

When I set vertices' normals to Vector3.back(), then extra light disappears.
It looks like kludge, but actually works for me :)

[ThomasGorisse]

It would be awesome if you could share your work on a sample/material.

Some new material extensions are now handled by Filament and could be added to your sample later.

Would you make a Pull Request with it to share your research with others ?

Thanks

[ThomasGorisse]

If you wrote it in Kotlin, it would be even more useful to have a first Kotlin sample!

[Methew5]

Done

[ThomasGorisse]

Awesome.
I'll try to have a look at the PR as soon as I can.

[romainguy]

@ThomasGorisse Note that if you don't use a glTF file you can use alpha directly. glTF's alpha uses Filament's FADE blend mode, but that's not the default;

[ThomasGorisse]

@romainguy Do you confirm that there is no other way than applying a new blend: fade Material to the gltf renderable instance concerned transmission > 0entities at runtime?

Can't find any material.setBlendMode() at the java level.

[romainguy]

Fade vs regular blend affects how the shader works, so no there's no runtime toggle. You need to swap the material.

[ThomasGorisse]

Am I missing something or is it mystic that it actually works Without swapping or modifying any material parameter on the emulator?

But not (as we would except for a default non fade blend) on a pixel 4a:

[romainguy]

I don't understand, what does the blend mode have to do with this? My point was simply that glTF kind of messed up the concept of alpha. According to the glTF spec, when you set alpha to 0.5, both the diffuse and specular components are semi-transparent, which is obviously not how glass, etc. behaves. It's what Filament's fade mode replicates. Filament's transparent blend mode on the other hand applies alpha to the diffuse component only and leaves the specular component as-is. To do the same with glTF you have to use the transmission extension which is much, much more expensive (but allows to create rough transmission).

Not sure what the problem is on Pixel 4 but it's probably unrelated. You should at the very least see the camera stream correctly.

[ThomasGorisse]

OK. Sorry for the big misunderstanding here. My fault, I globally understood that the fade blend mode was not identifiable with the gltf so we had to force it to tell Filament it must use fade.

It's maybe because of our different spoken languages ;-)

Anyway, a bad for a good, It made me go more deeply in the Sceneform materials part and I figured out that a lot of material parameters are not handled actually.

Since the final goal is to let SDK users handle it directly via Filament Material I don't think I will update them right now.

BUT, If anyone @Methew5 or @grassydragon or @RGregat wants to do it:
You have to:

• Get the materials from this Filament gold mine :
  https://github.com/google/filament/tree/24b88219fa6148b8004f230b377f163e6f184d65/samples/materials
• .filamat them with the last master version and copy to assets/materials
• Modifiy the MaterialFactory

[RGregat]

The GiantPanda glb model is working

[RGregat]

I reexported DragonAttenuation.glb with Blender 2.93.1, first the Dragon and Backdrop in separate files and then both together.
I was able to load in the separated models. The reexport of both models in one file worked only for the backgroundSceneView and not transparentSceneView. On the transparentSceneView the models popped up and then the view turned to gray.

[ThomasGorisse]

Interesting.
Can you send me the .glb s ?

[RGregat]

I have sent you an Email.
For testing I load the models like this

CompletableFuture<ModelRenderable> dragon = ModelRenderable
    .builder()
    .setSource(this, Uri.parse("models/dragon.glb"))
    .setIsFilamentGltf(true)
    .setAsyncLoadEnabled(true)
    .build();

CompletableFuture<ModelRenderable> backdrop = ModelRenderable
    .builder()
    .setSource(this, Uri.parse("models/backdrop.glb"))
    .setIsFilamentGltf(true)
    .setAsyncLoadEnabled(true)
    .build();


CompletableFuture.allOf(dragon, backdrop)
    .handle((ok, ex) -> {
        try {
            Node modelNode1 = new Node();
            modelNode1.setRenderable(dragon.get());
            modelNode1.setLocalScale(new Vector3(0.3f, 0.3f, 0.3f));
            modelNode1.setLocalRotation(Quaternion.multiply(
                Quaternion.axisAngle(new Vector3(1f, 0f, 0f), 45),
                Quaternion.axisAngle(new Vector3(0f, 1f, 0f), 75)));
            modelNode1.setLocalPosition(new Vector3(0f, 0f, -1.0f));
            backgroundSceneView.getScene().addChild(modelNode1);

            /*Node modelNode2 = new Node();
            modelNode2.setRenderable(backdrop.get());
            modelNode2.setLocalScale(new Vector3(0.3f, 0.3f, 0.3f));
            modelNode2.setLocalRotation(Quaternion.multiply(
                Quaternion.axisAngle(new Vector3(1f, 0f, 0f), 45),
                Quaternion.axisAngle(new Vector3(0f, 1f, 0f), 75)));
            modelNode2.setLocalPosition(new Vector3(0f, 0f, -1.0f));
            backgroundSceneView.getScene().addChild(modelNode2);*/

            /*Node modelNode3 = new Node();
            modelNode3.setRenderable(dragon.get());
            modelNode3.setLocalScale(new Vector3(0.3f, 0.3f, 0.3f));
            modelNode3.setLocalRotation(Quaternion.axisAngle(new Vector3(0f, 1f, 0f), 35));
            modelNode3.setLocalPosition(new Vector3(0f, 0f, -1.0f));
            transparentSceneView.getScene().addChild(modelNode3);*/

            Node modelNode4 = new Node();
            modelNode4.setRenderable(backdrop.get());
            modelNode4.setLocalScale(new Vector3(0.3f, 0.3f, 0.3f));
            modelNode4.setLocalRotation(Quaternion.axisAngle(new Vector3(0f, 1f, 0f), 35));
            modelNode4.setLocalPosition(new Vector3(0f, 0f, -1.0f));
            transparentSceneView.getScene().addChild(modelNode4);
        } catch (InterruptedException | ExecutionException unused) {

        }
        return null;
});

modelNode1 + modelNode2: 👍
modelNode1 + modelNode2 + modelNode3: 👍 but with short flicker on the transparentSceneView during the start
modelNode1 + modelNode2 + modelNode4: 👎 view turnes to gray
modelNode1 + modelNode4: 👍
modelNode2 + modelNode4: 👍 but with short flicker on the transparentSceneView during the start
modelNode2 + modelNode3 + modelNode4: 👎
modelNode3 + modelNode4: 👍 but with short flicker on the transparentSceneView during the start

[ThomasGorisse]

Thanks for testing all this!!!

Can you make some very quick Screenshots for the Filament Team?

I don't know how it is possible that the sample works with a transparent blend mode but it does????

getHolder().setFormat(transparent ? PixelFormat.TRANSLUCENT : PixelFormat.OPAQUE);
renderer.getFilamentView().setBlendMode(transparent ? View.BlendMode.TRANSLUCENT : View.BlendMode.OPAQUE);