Investigate visual quality defaults and new API for settings

[jjspace]

Recently we've been making improvements to visual quality within CesiumJS. As part of this process we want to re-evaluate the default settings across the board to hopefully provide a better experience out of the box. We also want to explore a new API that makes it easier for developers to modify the various visual quality settings in one place. We're also looking into the potential to have various of presets with a simple "High, medium, low" type setting like many games have.

Settings to look at

• Resolution
• Antialiasing
  • MSAA
  • FXAA
• Lighting & atmosphere
• HDR
• Dynamic lighting
• Shadows
• Fog
• Post Processing
  • Ambient occlusion
  • Bloom
• Screenspace error

Example use cases to test/target and try and optimize for

• AEC models, higher end static visual quality is more important, not as oriented at intractability
• Google 3d Tiles and photogrammetry examples where intractability matters more, still want good visuals though
• Smaller scale site focused applications?
• Mobile oriented settings? Phones are a different focus and may want different defaults, specifically things like resolution

[yoyomule]

Looking forward to it, Cesium needs to improve the model effect and appropriate performance balance.

[jjspace]

Glad to hear that @yoyomule! We're definitely looking for input from the community through this process. If you have any defaults you use in your applications feel free to share them and your use case so we can keep it in mind.

[jjspace]

I have created an initial sandcastle that consolidates many of the visual quality settings into one location to help with trying many different arrangements to experiment with what makes sense for defaults. I'll be updating this and using it to test various scenarios as we try to narrow in on what settings we want.

[jjspace]

I've been working to condense the various default settings of other 3d rendering engines for the list of settings we're looking at in CesiumJS. It's not 100% complete yet but wanted to start sharing here, may edit more in as needed. At the very least this his a helpful consolidation of links to various docs

Unreal

docs

Settings

Setting	Notes
Resolution
HDR	Disabled by default
Antialiasing	Defaults to TSR (Temporal Super Resolution), 4x MSAA (only applies when also selecting MSAA)
Atmosphere	Multiple scattering methods, Mie and Rayleigh, can't find what settings they use for these by default Defines multiple altitude levels to affect the curve of different factors, these affect the view from space
Fog	Sky atmosphere's height fog and exponential height fog
Lighting
Dynamic Lighting
Shadows	Uses shadow maps by default, options for "virtual shadow maps", ray trace, distance field, and precomputed Settings seem tied to the light sources more than the scene or objects Volumetric fog shadows disabled by default
Post Processing	"Unreal Engine uses some default post processing settings, even if you don't have a placed Post Process Volume in your Level. These default post process settings can be found and configured in the Project Settings in the Rendering > Default Settings section." Need to check in an actual Project what all the defaults are
Ambient occlusion	SSAO as a post processing step, also have DFAO using mesh distance fields, also offer ray traced
Bloom
Screenspace error

The Exponential Height Fog from the atmosphere looks like it could be really nice to increase the visuals of mountainous areas and valleys

Unity

docs, api docs

Settings

"graphics tiers" in the default pipeline

Setting	Notes
Resolution
HDR	Not active in the default pipeline but there's an HDR pipeline included
Antialiasing	On in the default forward rendering pipeline
Atmosphere
Fog
Lighting
Dynamic Lighting
Shadows	uses a shadow map of 1024, 2048, or 4096 by default depending on light type and shadow resolution, must be toggled on for a given mesh
Post Processing
Ambient occlusion	not included by default but can be turned on if not using GI
Bloom	available as a post process option in the universal render pipeline
Screenspace error

BabylonJS

docs

Settings

Default rendering pipeline

Setting	Notes
Resolution
HDR	Seems to only be a setting per texture/material not for the scene as a whole AFAICT
Antialiasing	boolean property of the engine, defaults to false, uses MSAA The "default pipeline" offers MSAA and FXAA, both disabled by default. Without the default pipeline it uses MSAA, not sure on sample size
Atmosphere	Use a Sky Material
Fog	Added through the scene environment, none by default but they have a very simple API for it
Lighting	point, direction, spot, hemispheric lights
Dynamic Lighting
Shadows	shadows don't seem to be specifically on by default but created per light added to the scene if I'm understanding correctly. " All meshes allow light to pass through them unless shadow generation is activated"
Post Processing
Ambient occlusion	Does not seem to be included by default but there is a SSAORenderingPipeline people can use
Bloom	Toggled in default rendering pipeline but it is disabled by default
Screenspace error

ThreeJS

docs

Settings

Setting	Notes
Resolution
HDR	found an example using it but not sure how to toggle it
Antialiasing	off by default, boolean option in WebGLRenderer, MSAA when on, set samples on the same object
Atmosphere
Fog	must be created and added to a scene
Lighting	variety of lights
Dynamic Lighting
Shadows	needs to be toggled on per light, seem to use a shadow map for all of them, default THREE.PCFSoftShadowMap
Post Processing
Ambient occlusion	Seems none included by default but do have addons built in for SSAO and GTAO
Bloom	Same as AO for Bloom
Screenspace error

ArcGIS

Adjust scene settings—ArcGIS Online Help | Documentation

[jjspace]

Given that CesiumJS is a bit more targeted at an "end user" developer than a lower level "game engine" developer I spent a bit of time exploring the examples provided from ThreeJS and Babylon to see what actual applications generally have on for inspiration around ours. I found some settings that were pretty universally turned on.

First is antialiasing. Basically every example that's not just a wireframe or a model in the void has this turned on. Even though it's off by default in most of the engines listed above I think having it on is a good thing we should change. We can shift between FXAA and various levels of MSAA but I think our default should include it.

Second, many examples also turned on shadows in some capacity in both engines. I think this would definitely be good to have on for better visuals out of the box however our current shadows can look questionable. I think this is something we probably want to include only in the higher level of settings or for more static oriented use cases like AEC models for taking pictures. This is also the sort of thing that I think works better in applications that are a bit more focused on smaller areas or models specifically. I think it's not as useful/impactful on large area use cases

Other settings like HDR, tone mapping and more niche effects like depth of field only seemed to be turned on occasionally when it benefited the specific example or the example was meant to specifically highlight how to use those parts of the API. I think we could consider these in a "higher than default" level preset.

One thing I already discussed with Gabby is the fog/atmosphere settings. many of the three and babylon examples are very small scale and didn't need it but the default atmosphere in Unreal looks way better than ours. I think we could (and should) definitely tweak the settings and parameters of ours to have more impact for uses that view the whole, or large portions of, the globe.

[ggetz]

Thanks @jjspace! As we talked about offline:

MSAA

This sounds like a gimme. Let's go ahead and enable 4x by default.

When we have a "high end" or "low end" preset, we might modify the number of samples or even disable for the low end.

• Turn on MSAA by default

HDR

Let's see about exposing tonemapping. This seems like it could be a great visual benefit, but it's not easily configurable right now. The Tonemapper enum are marked a private, and I couldn't find a reason for this. Making these public would allow for users to simply set the tonemapping as followed:

viewer.scene.postProcessStages.tonemapper = Cesium.Tonemapper.REINHARD;

We should also add a extend the existing HDR Sandcastle example with a dropdown for the different types of tonemapping, and link it from the ref docs.

The curve fitting for the existing tonemapper also seems off. Color tend to desaturate and light colors are dimmed. This is actually the opposite of what many tonemappers do, especially filmic ones: They target higher contrast and a wider color gamut. To avoid breaking existing apps, I would recommend we create a new tonemapper to do so. Upon investigation, I think our default exposure is off. It's assumed to be 1.0 when auto-exposure is not enabled. exposure should probably be exposed, and should default to a value lower than 1.0.

Once that's done, we can probably turn on HDR by default, if not on the high end.

• Implement PBR Neutral Tonemapper
• Use it by default instead of ACES for models and atmosphere
• Expose tonemapping options and exposure in the public API
• Use the PBR Neutral Tonemapper by default for HDR
• Atmosphere seems really bright when HDR is on. Check to make sure we're not accidentally doubly applying tonemapping for the atmosphere when HDR is on. Maybe verify if this issue was present with ACES tonemapping or not.
  • investigated, no obvious reasoning, opened Atmosphere gets too bright with HDR turned on #12240

Atmosphere & fog

Comparing our atmosphere with both Unreal and Google Earth, we can probably go more aggressive on the visual density of fog. Since we don't want to affect the screen space error more than it is affected now and cull tiles more aggressively, we'll want to add an additional uniform which modifies the fog density (visuals-only) further. Then, we'll want to set that to the best default.

Looking into those examples, we may also want to tweak the value of the Rayleigh Scale Height default to be a bit more aggressive as well.

Exponential height fog looks great, but we'll probably not want to implement it right now. Let's open a new issue.

• Open an issue for exponential height fog - Implement Exponential Height Fog #12239
• Tweak default Rayleigh Scale Height to be consistent with the appearance of atmosphere in Unreal and Google Earth
• Implement a new property for scaling visual-only fog density, and implement it for the globe and 3D Tiles.

Shadows

While we want to have shadows turned on by default, our currently implementation isn't up to par. Let's mention this in an existing issue, probably #9924, to emphasize it's importance.

[lilleyse]

I don't think it's worth enabling scene-wide HDR unless we did PBR everywhere (globe, primitives, etc). Right now it's just models that do PBR and they already do HDR + tonemapping internally.

I like the idea of checking out other tonemappers though. PBR Neutral Tonemapper seems really promising. We should consider switching to this by default for models and scene-wide HDR.

[jjspace]

Atmosphere seems really bright when HDR is on. Check to make sure we're not accidentally doubly applying tonemapping for the atmosphere when HDR is on. Maybe verify if this issue was present with ACES tonemapping or not.

I looked into this a bit and with some help from @ggetz sanity checking my findings there's no clear reasoning for this. I've opened #12240 to follow up on this in the future.