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 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.
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)
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).
It has the boolean parameter forceSetSize which prevents early returns, although IDK if it will help in this case.
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.
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.