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:
scene.getEngine().setHardwareScalingLevel(0.5)
This will increase the rendering resolution
@Deltakosh
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.
still related to same issue 
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()
@Deltakosh,
How do i calculate the hardware scaling factor to be applied on resize? .Is it like (1/window.devicePixelRatio)
Exactly
@Deltakosh Well that’s not working.
We will need more info:) does it work with 0.5? Also a repro on a live webpage will help a lot
@Deltakosh
https://staging-reports.gamezop.com/anandu/index.html
Try this link .This is how my game should work ideally.
https://staging-reports.gamezop.com/dibyanshu/index.html.
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)
@Deltakosh,
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?
https://doc.babylonjs.com/api/classes/babylon.engine#constructor
@Deltakosh,
Ok thanks
You should also try to turn on the canvas antialiasing:
it seems to be false in your setup
@sebavan,
Can you explain what difference that will make .
Thanks
Anti-aliasing=screenspace filtering. This will improve blurriness
Also did you try with adaptToDeviceRatio set to true?