I’m building 3D App Mockup, animation platform; I’ve spent a great deal of time tweaking various settings to enable the rendering of models in reasonably high quality. One of which was the addition of IBL textures to the scene. (converted to .env files) After having tried several, I noticed that the reflection of the IBL Texture off reflective (PBR) textures like Glass and Metal seem to be jagged and/or distorted for some reason.I’ve tried setting the IBL texture’s anisotropicFilteringLevel, to no avail. What could be the root cause of this issue? Here’s a link to a video of a pre-production build of the animation platform, you’ll note the issue form 0:25 seconds onwards, as I pan the camera around the mesh, any reflections from the IBL Texture that are picked up, appear to be distorted: Watch distorted-hdr-ibl-reflections | Streamable
Note: I’ve posted a video rather than a playground link as the scene is quite complex, there is a ton of logic necessary to produce the scene depicted in the video. Perhaps I could distil a reproduction of the issue, in the playground, down to just the loading of the model, cameras, lights/shadows config, HDR IBL loading, etc, if absolutely necessary, but even this will likely be quite time consuming to arrive at an exact 1:1 replication of these things in the scene.
I should say I have tried multiple files and I get the same issue. I’m generally getting the raw HDR files from: HDRIs: Studio • Poly Haven then I’m converting them to .env files using the standard Babylon tool: Babylon.js Texture Tools There doesn’t appear to be any ability to configure parameters for how the HDR should be converted in the tool. Perhaps the files from Polyhaven are not quite compatible?
Thanks @Evgeni_Popov I’ve switched to the .env file you provided. In the linked video you will note that the problem still persists. The reflections generally seem to be of poor quality, they appear to be oversized blobs of colour. In this video I try zooming in and out as well as panning round the mesh as I did prior and the artefacts are still present: Watch distorted-hdr-ibl-reflections-2 | Streamable
Something looks off and not similar to what we usually experience, a repro would really help. You can try glb files in the sandbox to see the difference there. I am wondering if it could be related to the normals of the model ? could you share it as well ?
I’ve tried several different models, obtained from SketchFab, including, most recently, a mirror to get a better look at the reflections. Most of the models are exported form Blender and other 3D Modelling programs that use a right-hand coords system. Thus I call: this.scene.useRightHandedSystem = true; as part of the scene setup process. Other than that I’m loading the models as-is. I’ll try to put together a repro in the playground.
I found the source of the error. In my scene I set the camera’s field of view (FOV) to a lower value, to allow the camera to zoom in very close on meshes in the scene without the mesh being clipped. Currently I set it to 0.1 rather than the default, which I believe is 0.8. This causes the HDR IBL texture to also be scaled up to the point where it becomes distorted. Is there a way to prevent this?
I’ve put together a playground which reproduces the “error”. Simply uncomment the FOV setting and you’ll note the HDR IBL reflection in the mirror mesh becomes distorted: https://www.babylonjs-playground.com/#CGA05F#671
Thanks @Evgeni_Popov for taking a look. As noted in the playground, the scale of the (reflected) IBL texture appears to be inversely proportional to the FOV of the camera. That is, the smaller the I set the FOV the more enlarged the IBL Texture appears to be in the reflection. @sebavan and @PatrickRyan can you folks perhaps provide any insight into what may be causing this? Here is the playground link again for easy reference:https://www.babylonjs-playground.com/#CGA05F#672
@Deltakosh I don’t suppose you know what could account for this issue i.e the FOV settings enlarging the HDR IBL reflections in the scene and perhaps how one might mitigate against it: https://www.babylonjs-playground.com/#CGA05F#672
ok it worked!
But to be honest I 'm not sure what to look for Besides the fact that the object is rendered farther I did look at the reflection and they looked the same
Can you share a screenshot of what I need to look at
@Evgeni_Popov : The IBL reflection code use a reflect internally so it is in world space ? I try to understand how the camera projection matrix will influence that
@Deltakosh Yes, but you’re looking at the back semi-reflective part of the mirror. If you spin the mesh round to the fully reflective part of the mirror you will note the reflective issue I mentioned.
@Deltakosh Check this playground out, I’ve enlarged the mesh (when FOV setting is disabled) to make the reflections more visible. You will see that the reflections render as expected when the FOV is not set but are enlarged when the FOV is set. The smaller the FOV the greater the IBL texture is enlarged: https://www.babylonjs-playground.com/#CGA05F#675 NB: As mentioned prior, if you spin the mirror mesh round to the front, so that the fully reflective part of the mirror is facing forward, the problem will be much easier to spot. That’s why I picked mirror TBH.
Besides the fact that the object is rendered farther I did look at the reflection and they looked the same
