How to get uniform light in the objects?

Hi, I am trying to apply uniform light and shadow for both sides of my box, but I am not able to do that.
If you can see my example.
https://www.babylonjs-playground.com/#SK5XDX#1
The left side of the box is darker and the right side of the box is lighter.
How can I get both sides of the box with the same light intensity?
I tried HemisphericLight, and two DirectionalLight but not a good result.

Hi R! Itâ€™s likely that you forgot about hemi-lightâ€™s .groundColor feature, which is essential in uniform lighting with a hemisphericLight.

https://www.babylonjs-playground.com/#SK5XDX#3

(see line 12)

I also turned-off the specular â€śshineâ€ť from the hemi-lightâ€¦ in line 13.

It looks fairly evenly-lit, right?

When mesh are evenly-lit, they lose some â€śshading definitionâ€ťâ€¦ which makes our eyes/brains work very hardâ€¦ to interpret what we are seeing. I added some edgesRenderingâ€¦ to make some lines on the edgesâ€¦ bring back some definition. You can de-activate it by changing line 15 to false.

Want to dive-in a bit deeper? Babylon.js Playground

There, we are going to activate shadows from Directional-light1, and Spot-light2, but if we allow those two lights to shine on our torusâ€¦ they will kill its even-lighting, and make it be brighter on the right-side (the lights-side).

So, here, I used a DIFFERENT methodâ€¦ a mesh.material methodâ€¦ called .emissiveColor. You can think-of material.emissiveColor as â€śself-illuminationâ€ťâ€¦ so it is SURE to be â€śevenâ€ť (consistent on all sides).

Light3, a hemi-light, is set to OFF. The MASSIVE height and width of directional lights (light1) is what is lighting the ground. It causes the mountains to have a dark and light sideâ€¦ giving them excellent definition and realism. The spot light2 circle is also seen on the groundâ€¦ looking correct.

Why, you ask, does the directionalLight and the spotLight NOT affect the up-light side of the torus?

Itâ€™s because of lines 55 and 56. We sayâ€¦ â€śHey spot and dir lightsâ€¦ please donâ€™t shine-on (donâ€™t affect the colors-of) my torusâ€ť. Like any nice BJS scene, it obeys our wishes.

One would expectâ€¦ that if you donâ€™t allow the two â€śshadow-generating lightsâ€ť to change the colors of your torus, that they could NOT cause torus to cast a shadow, but as you can seeâ€¦ we have two nice shadows on the ground. So you can exclude meshes from a light, yet still have that light/mesh cast shadows. Pretty nice, eh?

I also added a .diffuseTexture to torus.materialâ€¦ in line 52â€¦ and guess what. Our torus is STILL evenly lit, textured or not. That is because of line 51â€¦ the emissive color setting. It causes the TEXTURE to be evenly-lit, too. material.emissiveColor and material.diffuseTexture are partners, here. Try changing to a different color in line 51 and re-run. See how the emissiveColor is sort-of providing the back-lighting for diffuseTexture?

Between excluding the torus from light1 and light2, and self-illuminating torus.material.emissiveColorâ€¦ our torus is evenly lit, even with two shadow-generating lights aimed at its right-side. Nice, huh? And we didnâ€™t even need a hemi-light or itâ€™s groundColor.

In webGL and other computer graphicsâ€¦ lights == colors. In the above playgroundâ€¦ the uniform/even coloring of emissiveColor == uniform lighting. You can evenly-light a mesh in BJS, even if the scene has NO lightsâ€¦ by using a material.emissiveColor.

NOTE: EmissiveColors donâ€™t actually project light. It will not cast light on another nearby mesh/material, and it will not cast shadows or cause any other kind of shading. Contrary to the name, emissiveColors donâ€™t really â€śemitâ€ť anything.

I hope I have been helpful. Happy new year, if applicable.

Man, thank for your detailed explanation. I am not sure but did you shared the correct example link?

heh. Well, I donâ€™t usually make that mistake, but apparently I did. Youâ€™re right, thatâ€™s not the correct playground link. I canâ€™t find the correct one. Maybe I never saved it. hmm.

I made a new PG and fixed the link â€¦ https://www.babylonjs-playground.com/#SK5XDX#3. Good catchâ€¦ sorry about that. Maybe I drank too many mugs of â€śfortifiedâ€ť egg nog, eh?

2 Likes

Oh man!!
thanks for your time. Following your guidelines i finally got want i needed.
Here is the example.

https://www.babylonjs-playground.com/#SK5XDX#4

bytheway.
I am building an open source game as example, here is the link if you want to see the progress.
https://rollrodrig.github.io/rolling-ball-3d-webgl/?v=23423

Thanks !

4 Likes