before I ask and share I wanna say I’m a newbie in BabylonJS and web 3D topics but love that I struggle and learn 3d concepts with Babylonjs
So I trying to build and implement some scene that is very similar to Nike customize app - click on the customize button and you will see.
I built my playground with the react-Babylonjs library and read almost all the Babylonjs docs
I trying to add the ring model that I export from Rhino 7 as a .glb file (you can see it in the public/3d/diamond.glb folder)
and as a reference to Nike light the scene and add a little bit of bottom shadow
but also add the exact light level from the bottom of the model
I struggle to light the scene specifically the ring model
only when I increase the hemispheric light intensity by more than 100 it lighting but it’s the light to much the ground start to be white, (I using only to show little bit shadow that not implemented yet)
I tried to render another model that was not rendered from my rhino and show that it responded better
I thought maybe its related to the PBR Materials I got from the model but maybe I wrong…
Can someone please help me understand what I’m missing and maybe give me the right direction to implement something close to a Nike reference?
Patrick will certainly be the person to solve all lighting questions I just wanted to add that if you want a light that affects only certain meshes and not others (so, a light that affects the ring but not the ground), you could use the excludedMeshes property of the light: Excluded Meshes | Babylon.js Playground (babylonjs.com)
If you are using PBR Materials, they depend on the IBL lighting to properly work, otherwise they appear as black (as it has nothing to reflect)
Try adding hdr lighting to the scene
Alternatively you can use something like following
material.metallic = 0;
material.roughness = 1;
…which should give you some better result without HDR lighting, but it’s not exactly the perfect usage of the PBR Material.
Basically the soul of PBRMaterials is HDR lighting and you should utilize it to get realistic results. Otherwise there is no point in using it, and you can switch to StandardMaterial instead.
@ozizhakGT, welcome to the community! I’m not super familiar with React, but from what I see in your project you are using a hemisphere light and a Standard Material on your ground mixed with a glb for your ring. The glb file will have a PBRMaterial assigned to all meshes in the file as that is the standard for the format. PBRMaterial expects there to be an Image-Based Light (IBL) as @nogalo alluded to. This is a file that includes HDR values (or values derived from HDR values in some cases) that light the surface of a PBRMaterial in conjunction with any punctual lights (spot, point, directional, hemispheric) lights in the scene. What you are seeing on your mesh is just the hemispheric light - which is a dome that lights only the top and sides of the model in the hemisphere’s default rotation.
As an example so you can see what I mean by IBL, here is a sample scene with metallic and dielectric spheres of varying roughness with only IBL to light it. This is what the Nike is using in their customizer. To expand on the terms metallic and dielectric, in the basic sense metallics are anything that has a metallic surface and dielectrics are anything that is not metallic. So painted metal is a dielectric except where paint is scratched off which would be metallic. In rendering terms, the difference between them is that metallics contribute their base color to the color of specular reflections where dielectrics don’t. You can see this in that example PG by changing the albedoColor in the authored material. As you can see below the metallic spheres on the top are contributing their red color to the specular reflections where the dielectric specular reflections on the bottom are white and ignore the albedoColor:
In terms of designing the lighting for an IBL, you can start with any HDR file like the ones found on Poly Haven. You can even make your own as I did with the default studio lighting which is a 3D model that I rendered out a spherical HDRI to use as an IBL.
You should also use PBRMaterial for the rest of your elements so that you get similar lighting for meshes in the scene. StandardMaterial does not consider IBL light at all. The last thing I would do would be to ditch your hemispheric light as your IBL will handle your lighting around the model. Instead, you would likely want a directional light for shadows. Depending on your art target, your ground may need to divert from the PBR model toward a custom node material, but that is usually to do things like control a highlight on the ground or style the lighting on the ground in a specific way.
I hope this helps, but ping back if you have more questions.
@ozizhakGT, here is one way to do it. This uses the multiply alpha mode to just multiply the ground against the clear color. For this to work we want the material to be unlit and pass white with the shadows multiplied over it. The cheapest way to do this is with a node material since we can just pass a couple of nodes and keep the operations in the shader to a minimum.
Since the color of the material is white, when we multiply this against the clear color (or any other mesh for that matter), it will disappear. The shadows will then multiply over the clear color giving the appearance of a shadow on the clear color.
The other thing to keep in mind is the shadow darkness. You can control that right in the code to set how light/dark the shadows are. However, if you want, you can also color the shadows right in the node material by adding a color with the shadow output. You have a lot of options here. Hope this helps, but ping back with any additional questions.
