Low quality rendering in Chrome

[tiflis]

Hi,

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!

[Nesh108]

@tiflis, can you try to spin up a webserver on that machine and access it from another computer via Chrome? If this works then the problem is related to the Chrome on that machine.

[tiflis]

@Nesh108,

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.

[Nesh108]

@tiflis Look into `webgl.min_capability_mode` flag (set it to false) and let me know  

[GameMonetize]

I woul also like to see screenshots to understand what is going on

[tiflis]

Hi @Deltakosh

Here is the screenshot:

You can see the code behind and compare quality here:

https://tiflis.000webhostapp.com/

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 June 5, 2017 by tiflis
adding image...

[GameMonetize]

This is REALLY strange

[tiflis]

@Deltakosh

I would appreciate your support.

@Nesh108

If I understood correctly, webgl.min_capability_mode is a Gecko flag, not BablylonJS. Could you please get me hint how to check/set it?

Thank you!

[Nesh108]

@tiflis apparently that flag is Firefox-only. But I guess you could find the culprit either in "chrome://gpu" or "chrome://flags" and see if something is disabled (maybe try to restore to default).

[Quant3D]

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.

[Quant3D]

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.

[Quant3D]

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. 

[GameMonetize]

Hello! Do you have a link where you reproduce the issue on your chrome?

[Dad72]

Have you tried using engine.resize(); After loading the scene. This resize the scene to the size of the canvas.

It is an idea

[Quant3D]

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.

[Quant3D]

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.

[Quant3D]

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).

 

[GameMonetize]

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

[DylanD]

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.

[Guest]

It will make is smaller because the resolution is twice bigger

Check here: https://www.babylonjs-playground.com/#BVK9I0#3

and there in comparison (no scaling): https://www.babylonjs-playground.com/#BVK9I0#1

[DylanD]

both of those are just a all white scene  I dont know if it just didn't load or something went wrong ? 

Should it be scaling back up to the regular size of my canvas?  

[Guest]

Nope just wait:) for some reasons our CDN is dead slow recently.

with a smaller mesh: https://www.babylonjs-playground.com/#BVK9I0#4 vs https://www.babylonjs-playground.com/#BVK9I0#5

[ekor]

setTimeout(() => { engine.resize(); }, 0);

Fixed this issue for me.