Constant color regardless of lighting?

Please refer to this Playground from another user: Link.

Note that depending on the camera angle, the diffuse color of the blue health bar is affected by lighting.

How can we make the health bar’s blue color constant regardless of lighting? Thank you :smiley:

One way of doing that would be to set their emissive color instead of diffuse color, and have the light exclude them when rendering:

https://www.babylonjs-playground.com/#3HQSB#17

That’s a simple and effective solution :sunglasses:

3 Likes

Awesome, thank you, @RaananW! :stuck_out_tongue:

You can also disable lighting on the materials:

    healthBarMaterial.disableLighting = true;
    healthBarContainerMaterial.disableLighting = true;

and remove:

    light.excludedMeshes = [healthBar,healthBarContainer]

You will get the same shader code in the end, so it’s up to you to choose one method over the other (it’s sligthly easier to use the disableLighting property if you have multiple lights in your scene, as you won’t need to exclude your objects from all the lights, or if you have numerous objects you want to exclude from lighting that share the same material).

5 Likes

Thank you so much, @Evgeni_Popov :smile:

Thanks for introducing a great feature!

However, if I add dsiableLighting, shadow is also gone :frowning:

Is there any other way of keeping shadow and having the material with the color I want?

Thanks!

As @RaananW suggested, you can use the emissive color for that but don’t add the mesh into the excludedMeshes array.

1 Like

Don’t you mean like this? but I can’t get the ground to be the same color as the scene.

I was suggested with another solution using ShadowOnlyMaterial and it seems like an easy and a perfect solution except that it is not working on my react project for some reason :frowning:

I keep getting this message Attempted import error: 'ShadowOnlyMaterial' is not exported from '@babylonjs/core'.

[EDIT]

I have fixed them all now. Here is what I did

Thanks for your answer!!

2 Likes