Game becomes blurry and slow,when including viewport params in html file

Hi guys,
Finally finished our first game with babylon.js.But there is one issue regarding the viewport tag in .html file.
This viewport is lagging(blurry and slow).

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, minimal-ui" />

This viewport is fine:

<meta name="viewport" content="user-scalable=0, minimal-ui" />

Any idea guys.Its urgent.please help.

Did you try compensating with engine.setHardwareRenderingScale:


This will increase the rendering resolution

Thanks.But why should i set hardware scaling by default?.I mean can you explain to me why game becomes blurry,when i set width=device-width in viewport

This is related to DPI (number of inches per pixel) which relates to rendering resolution.

You can inspect your canvas and get width and height to see the difference

@Deltakosh .Same issue occurs when game go fullscreen using fullscreen api.:thinking:

still related to same issue :slight_smile: Resolution

@Deltakosh .Okay
1.So setting hardware scale is the only way to fix this issue?
2.Is there any way to set our game’s canvas resolution like in phaser engine,
3.When i inspect .html ,i found that at first CANVAS will have random resolution,on full screen it is changing to 720*1280.
4.Or is there any way to rerender scene with new resolution?

the setHardwareScalingLevel is the way for you to restore the resolution to the value you want by multiplying the current canvas size by a factor (1/level)

Other option is to manually set canvas.width and canvas.height and call engine.resize()

How do i calculate the hardware scaling factor to be applied on resize? .Is it like (1/window.devicePixelRatio)


@Deltakosh Well that’s not working.:frowning_face:

We will need more info:) does it work with 0.5? Also a repro on a live webpage will help a lot

Try this link .This is how my game should work ideally.
And this link is with fullscreen.You can see that meshes got blurred and ball speed on dragging left/right is slow.

Did you turn on the hardware scaling on 2nd one? (I’m on my phone and travelling until 1/7)

Okay now hardware scaling is on on second link.Try it ,if you are free.

I will but not before early January
In the meantime can you try to initialize your engine with adaptToDeviceRatio set to true?

Ok thanks

You should also try to turn on the canvas antialiasing:

it seems to be false in your setup

1 Like

Can you explain what difference that will make .

Anti-aliasing=screenspace filtering. This will improve blurriness

Also did you try with adaptToDeviceRatio set to true?

1 Like