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. :slight_smile:

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. :slight_smile:

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

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

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. :confused: Maybe I drank too many mugs of “fortified” egg nog, eh?

3 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