Poor antialias result on 3D object

Hi,

I'm trying to display 3D objects with a good antialiasing filter, but that does not seem to be successful.

See the first example "3D Models" in the sandcastle, select "Hot Air Balloon" and unzoom a little bit. You'll notice that the wires are not antialiased at all.

The parameter viewer.scene.context.antialias is set to true though.

Is there any way to improve the antialiasing filter for that case?

Thank you.

Dorian.

Cesium 1.50
Chrome 70

Have you tried turning on fxaa?

https://github.com/AnalyticalGraphicsInc/cesium/blob/master/CHANGES.md#deprecated-hourglass_flowing_sand-1

1 Like

No, I hadn’t, here is the result. Left with FXAA enabled, right with FXAA disabled.

image.png

The result is much better with FXAA enabled (it was enabled by default during my experiments), but there is still sharp steps on the thin parts of the model (the strings).

How could that be improved?

Thanks,

Dorian.

It looks like the the FXAA values are hardcoded in the shader:

https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Shaders/PostProcessStages/FXAA.glsl

You can try to edit the source to change those values and see if you get an improvement. If you do, it might be worth exposing those as parameters that users can tweak. I think an easier way to test it might be to set up a post process stage and copy the source of that shader and modify it (see the post process examples on Sandcastle).

If you make some progress please continue to post your results back here!

I have tried to change the values of the 3 parameters of the FXAA in the source (which is an implementation of FXAA 3.11 from NVIDIA):

const float fxaaQualitySubpix = 0.5; // Default: 0.5 Raise to increase amount of blur

const float fxaaQualityEdgeThreshold = 0.125; // Default 0.125 Lower the value for more smoothing

const float fxaaQualityEdgeThresholdMin = 0.0833; // Default 0.0833 Lower the value for more smoothing

I could get the smoother result with 0.9999, 0.0001 and 0.00001 for those parameters, but still not good enough since the thin lines and edges are substantially aliased.

I have also checked that the quality preset is set to the highest value (“EXTREME QUALITY”) by setting FXAA_QUALITY_PRESET = 39 (already done in Cesium source). If set to FXAA_QUALITY_PRESET = 15, the result is more blurry, which is not that bad!!

// OPTIONS

// -----------------------------------------------------------------------

// 10 to 15 - default medium dither (10=fastest, 15=highest quality)

// 20 to 29 - less dither, more expensive (20=fastest, 29=highest quality)

// 39       - no dither, very expensive

I’ll try to embed another implementation or tweak this one deeper.

Dorian.

Disabling useBrowserRecommendedResolution makes the biggest difference to me. I think it’s the same as setting viewer.resolutionScale = window.devicePixelRatio so either one does the trick. Then setting scene.postProcessStages.fxaa.enabled helps even slightly more.

4 Likes

You made my day! By disabling useBrowserRecommendedResolution our text in billboards with SVGs is now crisp and readable! Thanks for sharing this.