How could I create realistic wall colours and shadows, like the example attached image marked with red arrow?
I tried to play with light but couldn’t create similar effects, for example I created a light shadow for ceiling like
var lightCeiling = new BABYLON.HemisphericLight("lightCeiling", new BABYLON.Vector3(-0.5, 1.5, 0), scene);
lightCeiling.intensity = 0.9;
lightCeiling.specular = new BABYLON.Color3.FromHexString("#efeede");
lightCeiling.groundColor = new BABYLON.Color3.FromHexString("#f5f8e8");
lightCeiling.diffuse = new BABYLON.Color3.FromHexString("#b1aea7");
and applied with
lightCeiling.includedOnlyMeshes.push(ceilingMesh); //ceilingMesh doesn't have any material attached.
In fact to achieve what you want you need to use an technique called Shadow Mapping which consist in create an material, and its mapping, for simulate the shaded areas on walls, ceilings, etc.
Thanks @NRA , @Vinc3r tutorial is great but I have an issue, I have a huge scene which is not created in any 3d software, I just created few parts in blender with my limited knowledge of blender, the meshes ( walls, floor) I need shadow, are created with BABYLON.CreateBox or BABYLON.CreateGround functions, Than I have used lights provided by Babylon. is there something I can do with only using Babylon’s functions?
In this two links below, of sections in BJS docs, you can find all the ways to achieve direct shadows in Babylon JS. Including how to optimize it for performance questions, the main concern that shadow mapping technics try to solve.
I forgot that are another way to achieve a kind of shadow named AO, Ambient Occlusion, which you can see in the link below. But this one uses too much resources impacting the performance and only works in WebGL2.
Merci…I looOo0ovve you @Deltakosh , I will setup a PG after cooking ( yes I cook too xD), This is actually last step with lighting to complete my scene, I have tried so many things, I will add what I tried in PG…Thankss
Thank you @NRA, I actually tried all those above, but couldn’t get the desired result, let me actually add a PG later for you to see
@Deltakosh here I have created a minimal PG for what I have come up after reading a lot, It is a big hall but I created a small one for PG, It looks cartoonish instead like the images I posted above. https://playground.babylonjs.com/#XPAPNF#2
I even used PBR materials earlier, but I am targeting also mobile user so its not feasible option, also I need to target WebGL 1, so can’t use cascaded map or ssao rendering pipeline.
@Dshah_H in your case, you definitely need to use a light map. Maybe @PatrickRyan would have a nice nme based idea but I doubt it for a cheap mobile friendly version.
@Dshah_H, unfortunately the global illumination you showed in the sample images from your original post can only be achieved with ray tracing. The image below shows what is really happening to demonstrate how to achieve realistic shadows. You can see on the ground in front of the bench legs that there is reflected light bouncing off the floor. Also on the left side of the left leg, you can see that the shadow is not one tone, there is light bouncing off the floor to lighten the shadow on that side, but as you get toward the floor line the contact shadows are darker.
The image was taken from another thread about lightmaps and how to use them in Babylon.js, but they need to be baked in a tool with a ray tracer. The reason is that global illumination takes into account all of the bounces and scatters of light rays to create realistic soft shadows, but more importantly light that is reflecting from one surface to another. From your original examples, the chair shadows cast on the wall do not look like a straight projection of the volume of the chair because bounced light from the floor, the ceiling, the table, and the other chairs are breaking up the shadow:
And if you are targeting a feature phone and your scene will be static (the position of the light never changes in the room) you may want to just bake the shadow map into the albedo color of the model and render the material with an emissive texture and forget about lighting the scene with IBL or punctual lights.
However, you will need to have the entire model in Blender and light it as you would want before baking out the light maps. The only way to get realistic bounce light is to have all of your objects in the scene for that bounce to happen.
Unfortunately, there really isn’t another way to do this right now in engine in real time. And especially if you are targeting WebGL1 and feature phones.
Thank you @PatrickRyan , I have done some basic stuff in blender, like created those objects you see in above PG, unwrap few stuff, and I think I will be able to create this entire scene in blender. It would be my first time to play with this light thing. If I understood correctly I have to back lights like explained in this video ? https://www.youtube.com/watch?v=F73WLkm0Qm0
if so, I have a confusion, I have a very huge scene and texture of light map I will use will fit in 1024x1024 tile image or do I have to create different materials for each object?
@Dshah_H, you can do it one of two ways. You will either bake out a scene lightmap, and in that case you will have one texture that holds all the shadows, which may be too low-resolution if you are able to walk through the environment.
If your scene is static and the lighting won’t change, I would suggest baking the shadows out per object and applying them right to the base color of the material and then render them as emissive textures. This will have the benefit of keeping the shadow textures and mesh textures at the same resolution but will also remove the need for lights all together for the environment which means less lighting calculation in your scene and a faster scene for low-end devices.
This won’t work if you need IBL, but it sounds like you aren’t going to include that in your file.
RTX exactly