Low quality rendering in canvas until the inspector is opened?

Everything worked perfectly and without my knowingly updating anything it stopped working as before. Basically i have video textures associated with incoming streams that get mapped to planes and then display in the canvas at various positions. I added a sphere and a box for good measure to keep things honest and ensure that my 3D objects were in the same space as the video textures. The streams are reasonably high res and it all looked perfect.

I loaded it again after shutting down (there were no updates that i am aware of) and now the canvas displays EVERYTHING in ultra low quality, anti-alisasing is completely shot, everything is jagged, the whole thing looks as if it is has been scaled up from 80x60 postage stamp.

Checked all the source, no git changes, nothing changed. Browser, no updates. Eventually i loaded the inspector to see if i could figure anything out and lo and behold the act of loading the inspector fixes the issue. All of a sudden itā€™s all hi-res and perfect as before. Closing the inspector it stays that way?

Now perhaps, whatever the inspector did to fix this is what i might now myself need to doā€¦or itā€™s a bug?

Hey @tez welcome to the forums !

Hmm perhaps the Inspector is causing a window resize event and somehow your initial resolution is not getting set correctly ?

Could you try resizing the window after your app has loaded and see if that also fixes the issue ?

2 Likes

Hey br-matt, in parallel to your response I was thinking along the same lines and explicitly went and fixed the size of the canvas using .width and .height. Seems style.width/height in css was not enough. Iā€™m going to chalk this down as not a bug. It appears my canvas which used to be 1280x720 was of a much smaller size on startup. Iā€™m not sure why it used to work, strange, Iā€™d like to say nothing changed, except i know computers well, so probably everything changed.

Thanks for your input :slight_smile:

1 Like

Iā€™m having this exact Problem. When the Inspector is open, the quality is great if i remove it everything looks blurry until i resize the window (canvas).

Do you know how i could fix this? I donā€™t know what else to try.

Iā€™m using Babylon in a react component and doing all the setup in a useEffect fn for now if this could give clues

Edit: Is there a way to manually force a resize? I can call engine.resize() but this doesnā€™t do anything if the window didnā€™t resize (the onAfterResizeObservale isnā€™t triggered)

1 Like

Hey there, try passing true to engine.resize() to force the canvas width and height to be set and the observables to be triggered. :slight_smile:

Try to add at the end of your script:

        window.addEventListener("resize", function () {
                engine.resize();
        });

The resize Method doesnā€™t accept any parameters.

I already have this in my script, this works only when i manually resize the window

Usually it means that in the beginning the size of your canvas is not defined.

I created a minimal app on Stackblitz to reproduce the problem. When the App is first loaded there is a slight highlight on the Box and the box is blurry, as soon as i resize the application window the highlight gets stronger (the way it should be).

If anyone could take a look:

Thank you all for the effort. :slight_smile:

Cc @Evgeni_Popov to see if he can have a look:)

It will not happen if you change % to px values.

It has the boolean parameter forceSetSize which prevents early returns, although IDK if it will help in this case. :slightly_smiling_face:

EDIT: aah, I see now youā€™re using version 4.2.0 which didnā€™t have that resize parameter. I would try using the current version and see if upgrading fixes the issue.

I tried it, but it still happens. Here the Stackblitz: React Ts (forked) - StackBlitz

With this, i canā€™t resize the canvas so its stuck like that forever

In your example
style={{ width: 583, height: 292, outline: 'none' }}

Correct
style={{ width: '583px', height: '292px', outline: 'none' }}

Usually the reason is that canvas are rendered for the DOM element which dimensions are not set yet.

For me, after dragging the window the highlight becomes stronger as desired, like you said. But I also found that just commenting out the lines that set blurHorizontalSize and blurVerticalSize to 0 makes it look that way from the outset, without the need to resize the window.

PS hereā€™s a PG version of the repo. Just uncomment lines 15 and 16 to recreate the issue where the window needs to be dragged to fix the highlight.
https://playground.babylonjs.com/#N0BY0M#1

EDIT: on resize if these values are 0, then theyā€™re set to 1, the default value, which seems to be why dragging the window fixes the issue.

1 Like

Hereā€™s a PR that will fix the problem:

3 Likes

Thank you! Removing it fixed that behaviour i was experiencing.

2 Likes