# Game becomes blurry and slow,when including viewport params in html file **URL:** \ **Category:** Questions\ **Created:** [December 26, 2018, 6:40am UTC](https://forum.babylonjs.com/t/game-becomes-blurry-and-slow-when-including-viewport-params-in-html-file/439 "2018-12-26T06:40:38Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![madclaws](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/madclaws/32/242_2.png) [@madclaws](https://forum.babylonjs.com/u/madclaws)\ **Post date:** [December 26, 2018, 6:40am UTC](https://forum.babylonjs.com/t/game-becomes-blurry-and-slow-when-including-viewport-params-in-html-file/439/1 "2018-12-26T06:40:38Z")
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). ```auto ``` This viewport is fine: ```auto ``` Any idea guys.Its urgent.please help. ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [December 26, 2018, 8:39am UTC](https://forum.babylonjs.com/t/game-becomes-blurry-and-slow-when-including-viewport-params-in-html-file/439/2 "2018-12-26T08:39:04Z")
Did you try compensating with engine.setHardwareRenderingScale: ``` scene.getEngine().setHardwareScalingLevel(0.5) ``` This will increase the rendering resolution ---
**Author:** ![madclaws](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/madclaws/32/242_2.png) [@madclaws](https://forum.babylonjs.com/u/madclaws)\ **Post date:** [December 26, 2018, 8:43am UTC](https://forum.babylonjs.com/t/game-becomes-blurry-and-slow-when-including-viewport-params-in-html-file/439/3 "2018-12-26T08:43:03Z")
@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 ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [December 26, 2018, 8:46am UTC](https://forum.babylonjs.com/t/game-becomes-blurry-and-slow-when-including-viewport-params-in-html-file/439/4 "2018-12-26T08:46:13Z")
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 ---
**Author:** ![madclaws](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/madclaws/32/242_2.png) [@madclaws](https://forum.babylonjs.com/u/madclaws)\ **Post date:** [December 26, 2018, 8:47am UTC](https://forum.babylonjs.com/t/game-becomes-blurry-and-slow-when-including-viewport-params-in-html-file/439/5 "2018-12-26T08:47:22Z")
@Deltakosh .Same issue occurs when game go fullscreen using fullscreen api.🤔 ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [December 26, 2018, 8:48am UTC](https://forum.babylonjs.com/t/game-becomes-blurry-and-slow-when-including-viewport-params-in-html-file/439/6 "2018-12-26T08:48:48Z")
still related to same issue 🙂 Resolution ---
**Author:** ![madclaws](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/madclaws/32/242_2.png) [@madclaws](https://forum.babylonjs.com/u/madclaws)\ **Post date:** [December 26, 2018, 8:51am UTC](https://forum.babylonjs.com/t/game-becomes-blurry-and-slow-when-including-viewport-params-in-html-file/439/7 "2018-12-26T08:51:12Z")
@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? ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [December 26, 2018, 8:54am UTC](https://forum.babylonjs.com/t/game-becomes-blurry-and-slow-when-including-viewport-params-in-html-file/439/8 "2018-12-26T08:54:33Z")
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() ---
**Author:** ![madclaws](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/madclaws/32/242_2.png) [@madclaws](https://forum.babylonjs.com/u/madclaws)\ **Post date:** [December 26, 2018, 9:49am UTC](https://forum.babylonjs.com/t/game-becomes-blurry-and-slow-when-including-viewport-params-in-html-file/439/9 "2018-12-26T09:49:41Z")
@Deltakosh, How do i calculate the hardware scaling factor to be applied on resize? .Is it like (1/window.devicePixelRatio) ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [December 26, 2018, 11:16am UTC](https://forum.babylonjs.com/t/game-becomes-blurry-and-slow-when-including-viewport-params-in-html-file/439/10 "2018-12-26T11:16:12Z")
Exactly ---
**Author:** ![madclaws](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/madclaws/32/242_2.png) [@madclaws](https://forum.babylonjs.com/u/madclaws)\ **Post date:** [December 26, 2018, 11:17am UTC](https://forum.babylonjs.com/t/game-becomes-blurry-and-slow-when-including-viewport-params-in-html-file/439/11 "2018-12-26T11:17:34Z")
@Deltakosh Well that’s not working.☹ ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [December 26, 2018, 11:18am UTC](https://forum.babylonjs.com/t/game-becomes-blurry-and-slow-when-including-viewport-params-in-html-file/439/12 "2018-12-26T11:18:52Z")
We will need more info:) does it work with 0.5? Also a repro on a live webpage will help a lot ---
**Author:** ![madclaws](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/madclaws/32/242_2.png) [@madclaws](https://forum.babylonjs.com/u/madclaws)\ **Post date:** [December 26, 2018, 11:41am UTC](https://forum.babylonjs.com/t/game-becomes-blurry-and-slow-when-including-viewport-params-in-html-file/439/13 "2018-12-26T11:41:30Z")
@Deltakosh [https://staging-reports.gamezop.com/anandu/index.html](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](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. ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [December 26, 2018, 12:03pm UTC](https://forum.babylonjs.com/t/game-becomes-blurry-and-slow-when-including-viewport-params-in-html-file/439/14 "2018-12-26T12:03:19Z")
Did you turn on the hardware scaling on 2nd one? (I’m on my phone and travelling until 1/7) ---
**Author:** ![madclaws](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/madclaws/32/242_2.png) [@madclaws](https://forum.babylonjs.com/u/madclaws)\ **Post date:** [December 26, 2018, 12:07pm UTC](https://forum.babylonjs.com/t/game-becomes-blurry-and-slow-when-including-viewport-params-in-html-file/439/15 "2018-12-26T12:07:03Z")
@Deltakosh, Okay now hardware scaling is on on second link.Try it ,if you are free. ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [December 26, 2018, 12:14pm UTC](https://forum.babylonjs.com/t/game-becomes-blurry-and-slow-when-including-viewport-params-in-html-file/439/16 "2018-12-26T12:14:24Z")
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](https://doc.babylonjs.com/api/classes/babylon.engine#constructor) ---
**Author:** ![madclaws](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/madclaws/32/242_2.png) [@madclaws](https://forum.babylonjs.com/u/madclaws)\ **Post date:** [December 26, 2018, 12:15pm UTC](https://forum.babylonjs.com/t/game-becomes-blurry-and-slow-when-including-viewport-params-in-html-file/439/17 "2018-12-26T12:15:32Z")
@Deltakosh, Ok thanks ---
**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\ **Post date:** [December 26, 2018, 1:55pm UTC](https://forum.babylonjs.com/t/game-becomes-blurry-and-slow-when-including-viewport-params-in-html-file/439/18 "2018-12-26T13:55:01Z")
You should also try to turn on the canvas antialiasing: ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/1X/ebf3ee8088367f133cd0265b4146db00ac85d6fd.png) it seems to be false in your setup ---
**Author:** ![madclaws](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/madclaws/32/242_2.png) [@madclaws](https://forum.babylonjs.com/u/madclaws)\ **Post date:** [December 26, 2018, 1:56pm UTC](https://forum.babylonjs.com/t/game-becomes-blurry-and-slow-when-including-viewport-params-in-html-file/439/19 "2018-12-26T13:56:36Z")
@sebavan, Can you explain what difference that will make . Thanks ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [December 26, 2018, 3:18pm UTC](https://forum.babylonjs.com/t/game-becomes-blurry-and-slow-when-including-viewport-params-in-html-file/439/20 "2018-12-26T15:18:41Z")
Anti-aliasing=screenspace filtering. This will improve blurriness Also did you try with adaptToDeviceRatio set to true? [Next page](https://forum.babylonjs.com/t/game-becomes-blurry-and-slow-when-including-viewport-params-in-html-file/439.md?page=2)