Jump to content

Low quality rendering in Chrome


Recommended Posts


I've faced situation when Chrome suddenly has started to render 3D in a very low quality ("pixelized").

This has happened only on my local web server and only with Chrome.

IE, FF on Local Web => OK

Chrome on BabylonJS playground => OK

Chrome on Local Web => Low quality

I've cleaned cookies and local data storage in Chrome, but that did not helped.

Is there any way to restore normal rendering?

Thank you in advance!

Link to comment
Share on other sites


The problem is in a the combination: Chrome on my machine accessing that particular local web. The same code on remote host is OK in the same Chrome. The strange thing that it was OK, but at one point o time quality has been "switched" to low and I can't put it back.

My worries - if this will happen with one of the customers, what is the workaround or a solution?

Looks like Bablylon has marked my local site as low-performance one and erroneously forced low quality rendering. But this is just my thoughts.

Thank you for tip anyway.

Link to comment
Share on other sites

Hi @Deltakosh

Here is the screenshot:


You can see the code behind and compare quality here:


or just the good quality:


NOTE: the same browser (Google Chrome) shows perfectly on remote site, but low quality locally. It was OK, but after series of local tests quality suddenly started to be like on the screenshot.

Edited by tiflis
adding image...
Link to comment
Share on other sites

  • 2 months later...

I am also getting very low quality rendering in Chrome.

To me, it doesn't look like an anti-aliasing issue. Rather, it seems to me that the WebGL drawing canvas is way too small and therefore loses resolution when expanded into a larger screen area.

I checked the element dimensions while my program is running, and it seems to me they are about 1/2 too small both vertically and horizontally. This means that the WebGL drawing canvas is about 1/4 the size it should be.

It appears to me that this sizing problem goes all the way up the DOM to the "body" element. For example, Chrome says that the body and canvas height are 506 pixels, when they both are actually about 1000 pixels high (1080 pixels minus the application task bar).

I have width and height set at 100% on all the major elements -- including the HTML body and canvas -- so something is not sizing the body or the BabylonJS canvas correctly.

Link to comment
Share on other sites

I did some further checking, and here is what I found.

On my 1920x1080 monitor, a full-quality WebGL drawing canvas would be about 942 pixels high (after accounting for the application task bar and the browser menu).

Here is what my drawing area height is on three browsers with Windows 10:

  • Firefox: 755 pixels
  • Opera: 754 pixels
  • Chrome: 506 pixels

It seems to me that on all three browsers, there is some quality degradation as the smaller canvas gets expanded onto the larger screen, and it is worse on Chrome than the others.

It should be said that this type of reduced-canvas optimization could be intentional in many circumstances to achieve a high frame rate. For instance, if I run the BabylonJS scene optimizer, the drawing canvas height on Chrome goes to 253 pixels. So I wonder whether there may be unwanted optimization at some level.

Link to comment
Share on other sites

Another update: I was able to do some testing on a Mac, and I was unable to reproduce the problem on Mac OS X.

From any BabylonJS program, a line like this gives the size of the drawing canvas:

console.log(engine.getRenderWidth() + "," + engine.getRenderHeight());

I tried this on Mac OS X using Safari, Firefox, and Chrome, and in all three cases the results were the expected 1920x1080 pixels (give or take a bit for menus, page tabs, etc.).

On my Windows, the render target starts off smaller than the screen -- something like 1536x755 in Firefox and Opera. In Chrome the drawing canvas can be much smaller, like 1025x506, which leads to very poor quality graphics. 

Link to comment
Share on other sites

Hi Deltakosh and Dad72,

I was able to determine that the Windows machine I am working on was set to magnify the screen by 125%. So many of the numbers I listed in previous posts were a function of the operating system settings. (When this happens, you are projecting a diminished WebGL render canvas onto a larger screen size, so there is a decrease in graphics quality.)

Irrespective of the system settings, the issue with Chrome is still pertinent. Even at normal (100%) screen scaling, the WebGL drawing canvas can be 1/3 too small both vertically and horizontally. If this happens, it means that the render canvas in Chrome is only about 45% the size it should be, and therefore the graphics quality is poor.

I am seeing the same thing happen in Microsoft's Edge browser, but not in Opera or Firefox.

Dad72: I just tried engine.resize(). No effect, but thanks.

Link to comment
Share on other sites

Okay I think I might have found the problem. It seems to me it relates to the internal screen magnification of each browser.

Here's what you do to see this:

  1. Open a BabylonJS app in a browser.
  2. Start pressing the browser's command to zoom in (e.g., CTRL+).
  3. What you should see is that the BabylonJS graphics don't move on the screen, but the render quality keeps getting worse and worse. This is because the "zoom" command is decreasing the size of the WebGL render canvas. The graphics don't move on the screen because typically a BabylonJS program covers the entire browser window, regardless of the size of the WebGL render target.

This also works in reverse!

 If you zoom out (e.g., CTRL-) you are making the render canvas larger and larger. This causes over-precision in the drawing, and eventually you will see the frame rate drop off dramatically.

If this is indeed the issue, it might be helpful to have BabylonJS maintain a constant render canvas size irrespective of a browser's screen magnification. This would be similar to using "engine.resize();" when a user changes the size of the browser window.

Link to comment
Share on other sites

Following up on my last post, it is easy to see what I am talking about by using the BabylonJS playground. The attached image shows how the render quality becomes degraded after I select the “zoom” feature in a browser by pressing CTRL+.

Both versions are the same size on the monitor. But the second picture is of lower quality because the browser zoom reduces the size of the WebGL drawing canvas from 1455x1080 to 485x360 pixels.

This implies that the rendering quality of a BabylonJS program might depend on browser magnification settings that people use for other reasons (like making reading text larger).



Link to comment
Share on other sites

  • 1 year later...
On 8/22/2017 at 1:11 PM, Deltakosh said:

This can be compensated by setting engine.setHardwareScalingLevel(2)

engine.setHardWareScaling just seems to make my canvas smaller, not sure if thats intended but are there any other ways to change quality of something?

Or is that intended, or am I doing something wrong?

Defines the hardware scaling level. By default the hardware scaling level is computed from the window device ratio. if level = 1 then the engine will render at the exact resolution of the canvas. If level = 0.5 then the engine will render at twice the size of the canvas.

just noticed, it is intended, how does that actually help though, if It increases quality but makes the screen much smaller why use it at all, smaller screen is much worse than a quality boost.  

I don't understand.

Link to comment
Share on other sites

  • 5 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...