@TiagoSilvaPereira, there were a few things that I needed to drill down on. The first was the mesh itself. When I looked at the mug, the mesh around the handle was not manifold and the geometry flow isn’t super clean. It’s also UVed with a lot of cuts where we don’t need them. I quickly merged vertices to make it manifold and did a quick unwrap so that we could smooth the normals and prevent any seam artifacts in the render. Here is the original:
This is the repaired version. I didn’t take the time to rework the edge flow as it would have been faster to rebuild it:
Notice the seams are hidden under the handle and inside the mug to deemphasize them. The other thing I noticed from the assets is that your skybox texture is a LDR (low dynamic range) 8 bit image. This is problematic for two reasons. The first is that the image does not contain any values over 1.0 which means that there really is no light coming from the image. The other issue is that this image would be in gamma color space, rather than linear which is what is needed for IBL.
I downloaded a similar environment from HDRI Haven so that I could illustrate what is happening. The only issue is that the environments from HDRI Haven often are super high in contrast pushing 22 EVs. So I did need to pull down the brightest pixels by 5 EVs. There is another thread on this that explains how I went about reducing the offending pixels and why so I won’t go into it here.
What I will illustrate is the range of values in an HDR image as well as your LDR image:
This is the info panel from Lys which is a good way to illustrate how large the values get. This is post EV reduction because the original was in the hundreds of thousands for max value. This will screw up the spherical harmonics and cause the render to be way off. The statistics from the skybox you were using looks like this:
This angle is looking out the window which should have the brightest pixels in your image, but the max value in each channel is only 1.0. To take advantage of the environment for your light, you need to convert the HDR image into a precomputed DDS. The reason is that we need to create a mip chain so that the roughness level of the material can fetch the correct mip texture for the light computation.
With a standard LDR image, you don’t get the mip chain, spherical harmonics, or any of the other things that the PBR rendering pipeline needs. You also need to call the IBL slightly different than you were calling it in your playground:
BABYLON.CubeTexture.CreateFromPrefilteredData("link/to/DDS", scene);
This sets up the engine to know that there is the mip data to supply all of the information that the PBRmaterial expects. I did disable the analytical lights in the scene because you won’t need them for what you showed as an example. If you want to add a ground plane to catch shadow you will want to add a directional light and cull the mug mesh from the directional light. The reason is that the directional light will cast the shadow, but you don’t need the light information on the mug mesh itself. The setup for PBR shadows is the same as for the standard material.
So here is the final render with the IBL correctly configured and the updated playground for you:
https://www.babylonjs-playground.com/#B1M547#1
Hope this helps and is clear. If you have any other questions, please feel free to grab me.