Avoid getting blurriness objects at a certain distance

Questions
1

First of all, my question might sound stupid (and I apologize for that)…

I’m currently doing a pool game (which is not the first time and I’m posting about it :sweat_smile: here in the forum) and I’m facing an issue about the visual quality. My game is a mix between 2d and 3d. The camera is above the table and it takes all the scene view.

The game is meant to be played on mobile. The resolution of the canvas is 390 x 844. In order to see the entire table, the camera is positioned like this :

this.camera = new UniversalCamera('sceneCamera', new Vector3(0, 40, 0), this.scene)
this.camera.setTarget(new Vector3(0, 0, 0))

The table and the balls are positioned at around 0 in the Y axe. The issue is that even if all my textures are high quality, the entire game is kind of blurry. However, when I approach the camera, the elements because much clearer (which of course, make sense…). So basically, I’m kind of stocked because I need to see everything but in order to do that, I need to put my camera a bit far.

The discussion is opened if you have any reflextion/suggestion to have better quality.

2

You probably need to use engine.setHardwareScalingLevel(x) where x will be the inverse of the dpi you want let s say 0.5 if you want a 2x DPI

1 Like
3

Is there a way to achieve that result without doing engine.setHardwareScalingLevel(x) because it increase the canvas size as well. I would like to stay the same size.

4

It is possible, you need to apply css to fix the visible size and then setHardwareScalingLevel with change the width/height to ensure the pixel density is respected.

5

What do you mean by that?

At the moment, the canvas is created into a div which take all the screen view of my device. Then I put this.engine.setHardwareScalingLevel(0.5) to have a better resolution but the canvas is now way way too big. I don’t really have any access to the css because the game is on a tier platform.

6

your css should correct that basically the css size need to fill the container and the actual canvas size will be twice as big.

You can see an example in the playground Babylon.js Playground

1 Like