Hi there,
A little while ago we had a meeting with Jeff Kiah and Alex Paulson from Cesium. This was a very good meet with some interesting information and helpfull tips.
During this we also discussed the current state of Resolution Scaling in Cesium. We have been using this as an option to allow users to get more detail in their project, This was especially helpfull for projects containing Pylons due to the cables being rather thin.
However in the images below I have an example of the resolution scaling actually making things worse.
We don’t know exactly how or why this is happening, we are hoping we can get some more answers/suggestions here.
MSAA 8x with no resolution scaling on 1920x1080 screen
MSAA 8x with resolution scale of 2.0 on a 1920x1080 screen
Hi @Windplanner,
I’m curious if you’re using a device with a retina screen? If you are, instead of increasing the resolution, try setting Viewer.useBrowserRecommendedResolution to false to properly account for scaling.
Hi @Gabby_Getz
This was done one a 1920x1080 normal LCD screen, Cesium does not take the full browser space in our application so what the pixel size of the images is accurate to the area Cesium has for rendering on my screen.
Setting useBrowserRecommendedResolution to false I feel only really does anything if the user has either a screen resolution that is zoomed in/out or the browser itself is zoomed in/out, which in my case isn’t going to happen. I tend to keep everything at 100%
I will add a sandcastle here aswell that shows the quality of the rendering going down when increasing the resolution scaling.
Sandcastle Resolution scale with msaa
It seems like this Sandcastle is similar to the one that you posted in an earlier thread. There, it demonstrated the problem of non-anitialiased (i.e. aliased) lines clearly.
Shortly after that thread was opened, MSAA was implemented (via #9900). And this already seems to solve the original issue: When setting msaaSamples: 8, (as you did in the new sandcastle), the line looks smooth.
It is not entirely clear for me why you still want to set the resolutionScale to a value greater than 1.0. In the old thread, this sounded like an attempted workaround against the aliasing. But with MSAA enabled, such a workaround should not be necessary any more.
The problem with resolutionScale in this case is roughly as follows:
- The canvas has a size of, let’s say 1000x1000 pixels on the screen
- Then,
resolutionScale is set to 2.0
- This means that the rendering will take place in a canvas with 2000x2000 pixels
- But this 2000x2000 pixel canvas is still displayed with 1000x1000 pixels on the screen!
What’s happening in the last step can be imagined as brutally downscaling a 2000x2000 pixel image to 1000x1000, without any form of filtering. This means that some pixels are “lost”. And … some of them are these important pixels that show the power line.
The situation can be slightly improved, by increasing the quality of that “image downscaling”: When setting
viewer.canvas.style.imageRendering = "auto";
then the lines look smooth for resolutionScale=2.0 (with some details depending on the browser).
But for larger resolutionScale values, the problem re-appears again: What’s happening with resolutionScale>1.0 always is a form of “image-downscaling”, and therefore, it will always lose some pixels. Preserving visual quality while downscaling images is actually an art. When downscaling large images into very small ones, image manipulation programs use very sophisticated filters or even “progressive scaling” to keep certain visual details - like thin lines - intact.
Depending on what the exact purpose of setting resolutionScale > 1.0 was, we may be able to figure out a way to accomplish that goal.
