Pixelated Low Resolution Camera View

Questions
1

I’m trying to resolve an issue or at least figure out potential causes. I won’t be able to share a playground since the assets and project in general cannot be shared, but I can provide some screenshots.

I’m building an application where we can visualize high poly models, however when first loading these models, the camera seems to appear very low resolution and the model itself looks fuzzy and has some pretty bad aliasing as shown here:

Screenshot 2024-04-16 at 12.52.20
Screenshot 2024-04-16 at 12.52.20904×1120 33.6 KB

The weird thing is, when I resize the window, it seems to clear out and looks perfectly clear afterward including subsequent imports.

Screenshot 2024-04-16 at 12.54.08
Screenshot 2024-04-16 at 12.54.08958×1106 41.3 KB

This was after opening up the console in Chrome. Just adjusting the size of the canvas a little bit in either direction allows the resolution to look clear. Why is this happening? As far as I know the size of the canvas should not cause model to appear fuzzy. This only happens once and I will note that in this application I first create the scene with a camera and lighting initially, but then import the models using an event system which may happen much later. I don’t know if importing the models well after the scene is created could be causing this issue.

2

I had a similar problem, setting the width of the canvas in HTML to 100% solved it

1 Like
3

I’ve tried that as well, and the problem still seems to persist so I’m not sure what else to look at. Anyone know what is actually causing this? Is it a camera issue? I have similar projects with a similar layout and this is the first time I’ve seen it get distorted like that without any change to the window size.

I’m going to try to redesign the layout to see if that fixes the issue, but I’d like to know why the canvas size would affect the camera. As far as I know you can have a much smaller canvas to display the 3d aspects, while part of a larger page.

4

Ok so I think I found out my issue and it took me a while to figure it out but it makes sense. So in my application I can toggle between the 3d Babylon scene and a 2D web overlay. Initially the web overlay is enabled, but the canvas for the 3d scene is “disabled” as I set the display mode to “none” when it’s not being used.

I tested this by seeing if loading the 3d side first, even for just a second would still cause the issue and it worked fine. So I was not giving Babylon enough time to properly setup the scene with the canvas enabled. I’ll mark @JPKyzzor’s answer as the solution since this was essentially the fix, I just needed to troubleshoot further for my specific case.

5

just use engine.resize(true); after the scene is loaded. This should solve your problem. Unless I misunderstood the question.

scene.onReadyObservable.addOnce(() => {
    engine.resize(true);
});
2 Likes
6

Thanks, I don’t know why I didn’t think of that. I usually add that when checking if the window has been resized. I added that in and it works as expected. This allows me to keep the same setup I had before then when I import the model it’s ready to go regardless of the previous canvas size.

1 Like