How to achieve quality like with Three.js

Hello guys,

I am glad that my babylon skills improve more and more. Even though I am pretty happy with my current rendering results I often see Three.js examples which seem to be more realistic and sharp. Since I love this community I want to stay with babylon and achieve equal or better results with this api.

Scene:
To compare both I used a plane with a brushed silver material which has a normal with text and logo on it. The environmental texture is the same of course. And the scene has no light.

Model:
https://rawcdn.githack.com/samevision/static/d2d8f65603e0dd83d1a1dba44a3553393452804d/models/normaltest/test.gltf

Three Viewer (disable light in gui):
https://gltf-viewer.donmccurdy.com/

PG:
https://playground.babylonjs.com/#MHTA13#3

You can see that in babylon it is hard to read the text and the logo is very pixelated. In Three all edges are sharp and the text is easy to read.

In my pg I tried to improve the quality with sharpening and anti aliasing but that leads to even worse results. How am I able to get this quality?

I appreciate your help as always (:

Best

Does not look like anything to do with quality. Look closer. One is showing one side and the other the reverse.

To start make sure that you are culling back faces to make sure you are comparing apples to apples.

Correct not a back face issue, or the words would be reversed. It is early. Some is just handled differently. Probably normals. On tablet, so this is about all I can peck.

You’re right. I had to rotate the environmental 90 degrees. I updated the PG, now both are apples :wink:

https://playground.babylonjs.com/#MHTA13#4

But anyway that’s not the problem here. The quality in Three is way better. I would love to get something like this in babylon.

I can see a small difference in the lighting.
Maybe the light is different from that used in Babylon (more spectacular, for example)

These are ideas

Both scenes don’t have lights. The light comes from the environmental texture. It’s true that it’s different on the images above, but that is caused by the rotation of the environmental texture. I adjusted it in the PG. So the setup is completely the same.

Would this be closer from what you seek:

https://playground.babylonjs.com/#MHTA13#5

I tried don s viewer but seeing weird artifacts as well:

Would be great if you could highlight exactly which part is looking wrong for you ?

Unfortunately not. I am looking for the sharpness quality. These both images show it pretty well. With Babylon it’s very blurred, especially if you look at the object from some distance. The screenshots were taken with the exact same resolution.

Babylon: (I took this screenshot with your adjustments)
Screenshot 2020-07-27 at 16.25.42

Three:
Screenshot 2020-07-27 at 16.26.14

The resolution seems quite different to me could you point me to your page with the comparison. I really want to tackle this one as something is definitely wrong here ?

I am also thinking if you rely on Don viewer that it adapts to dpi and we do not in Babylon by default as most cases focus on perf.

You could then do the same with:

scene.getEngine().setHardwareScalingLevel(1 / window.devicePixelRatio);

https://playground.babylonjs.com/#MHTA13#7

3 Likes

It is the same as in don’s viewer:

In the PG, i only get blurry result (like your pictures) when zooming quite a bit out.
https://playground.babylonjs.com/#MHTA13#8

Thank you very much. That did the trick. It looks so beautiful!!

Is it possible to keep some performance while adapting to dpi?

You still have perf, but less as the gpu obviously needs to render way more pixels.

Always a tradeoff unfortunately :slight_smile:

That’s true. It’s still amazing what’s possible in browsers these days.

I am thinking about how to present the best result to users depending on their hardware capabilities. It would be sad if someone who is able to render a high quality scene has to view it with the performance based configuration. Are there approaches to allow this?

Maybe a function that captures the fps and adapts the configuration to achieve the best quality result while keeping the fps above 50 or something like this.

That would be very interesting.

Hi. You can use scene optimizer Use SceneOptimizer - Babylon.js Documentation

1 Like

Thanks for that link. I will give it a try. (Y)

Most of the time we are cpu bound so increasing the device ratio should not be a bug deal. And you can always change it down if you detect that fps is lower than 30fps for instance