Matching out of the box rendering of Khronos Viewer & ThreeJS

I’m trying to match the look of Khronos Viewer & ThreeJS using Babylon. I prefer the look of ThreeJS the most. I’m not sure this image captures it well enough but there seems to be some differences in lighting and metallic reflections. For this setup I simply loaded the same .glb model and .hdr in each viewer.

Any help is much appreciated!

Hello and welcome!

For clarification of the task I suppose that by Khronos Viewer you mean this - glTF Sample Viewer and for ThreeJS Viewer you mean this - https://gltf-viewer.donmccurdy.com/

As for Babylon - do you use Babylon Viewer in its default configuration? Did you try to load your model into Sandbox and does it look good or bad there?

Thanks for the welcome and fast reply!

Your list is almost correct:

The Babylon Sandbox doesn’t look bad, but it just doesn’t look as good as the others and appears to treat the lighting differently.

Here’s another example to try to simply what I’m seeing. I know it’s very subtle, perhaps Babylon has a default filter or limits hdr resolution?

It is really difficult to provide any reliable answer without having a look at the model itself.
Is it possible?
Did you try this viewer - https://modelviewer.dev/ ?

I’ve found two things thus far.

  • Babylon appears to process the hdr to a lower resolution
  • As per the reply to the post linked below, I tried to set hardware scaling for a local development test and I think it may have helped just the slightest. Things still don’t quite match though.
scene.getEngine().setHardwareScalingLevel(1 / window.devicePixelRatio);

I’m a new user so I don’t appear to be able to upload files. Here’s a link to the hdr and glb if you care to play with them.

https://file.io/ItE65Sj9a2xl

Here is the PG - https://playground.babylonjs.com/#MHTA13#11
(for the environment texture there used .env file converted from your HDR file which I put to https://dl.dropbox.com/s/qfpwwldalctmu17/directional.hdr).
If you want to use HDR directly - see here Using An HDR Environment For PBR | Babylon.js Documentation

Your Three.js code uses postprocess (tonemapping at least), so I added to the PG rendering pipeline and separate postprocess to play with Inspector.

1 Like

Here is what I’ve got at glTF Sample Viewer with your model and HDR file -

From Model Editor

Note that fxaa is applied two times in your PG as you enabled it in the default rendering pipeline.

1 Like

Thanks for all the help! I appreciate the fast responses and engagement. I loaded in a few other models and decided that I’m happy with the settings as they because with some materials Babylon looks better. I think the main difference is coming from the resolution of the hdr lighting. I also ended up disabling the hardware scaling as it was causing performance issues on mobile.

If you are aiming at mobiles you may also note that your HDR file has size more than 75 Mb; .env file is less than 500 Kb.

No doubt, it’s actually quite impressive how good things look when you think about the size difference between the two.