CesiumGS / cesium

An open-source JavaScript library for world-class 3D globes and maps :earth_americas:
https://cesium.com/cesiumjs/
Apache License 2.0
12.71k stars 3.44k forks source link

Investigate visual quality defaults and new API for settings #12126

Open jjspace opened 3 weeks ago

jjspace commented 3 weeks ago

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

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

yoyomule commented 3 weeks ago

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

jjspace commented 3 weeks ago

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 commented 3 weeks ago

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 commented 2 weeks ago

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](https://dev.epicgames.com/documentation/en-us/unreal-engine/high-dynamic-range-display-output-in-unreal-engine) | Disabled by default | | [Antialiasing](https://dev.epicgames.com/documentation/en-us/unreal-engine/anti-aliasing-and-upscaling-in-unreal-engine) | Defaults to TSR (Temporal Super Resolution),
4x MSAA (only applies when also selecting MSAA) | | [Atmosphere](https://dev.epicgames.com/documentation/en-us/unreal-engine/environmental-light-with-fog-clouds-sky-and-atmosphere-in-unreal-engine) | 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](https://dev.epicgames.com/documentation/en-us/unreal-engine/environmental-light-with-fog-clouds-sky-and-atmosphere-in-unreal-engine) | Sky atmosphere's height fog and exponential height fog | | [Lighting](https://dev.epicgames.com/documentation/en-us/unreal-engine/lighting-the-environment-in-unreal-engine) | | | Dynamic Lighting | | | [Shadows](https://dev.epicgames.com/documentation/en-us/unreal-engine/shadowing-in-unreal-engine) | 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](https://dev.epicgames.com/documentation/en-us/unreal-engine/post-process-effects-in-unreal-engine) | "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](https://dev.epicgames.com/documentation/en-us/unreal-engine/post-process-effects-in-unreal-engine) as a post processing step, also have [DFAO](https://dev.epicgames.com/documentation/en-us/unreal-engine/distance-field-ambient-occlusion-in-unreal-engine) using mesh distance fields, also offer ray traced | | [Bloom](https://dev.epicgames.com/documentation/en-us/unreal-engine/bloom-in-unreal-engine) | | | 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"](https://docs.unity3d.com/Manual/graphics-tiers.html) in the default pipeline | Setting | Notes | | --------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Resolution | | | [HDR](https://docs.unity3d.com/Manual/HDR.html) | Not active in the default pipeline but there's an HDR pipeline included | | Antialiasing | On in the default forward rendering pipeline | | [Atmosphere](https://docs.unity3d.com/Manual/sky.html) | | | Fog | | | [Lighting](https://docs.unity3d.com/Manual/LightingOverview.html) | | | Dynamic Lighting | | | [Shadows](https://docs.unity3d.com/Manual/Shadows.html) | [uses](https://docs.unity3d.com/Manual/shadow-mapping.html) 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](https://docs.unity3d.com/Manual/PostProcessingOverview.html) | | | [Ambient occlusion](https://docs.unity3d.com/Manual/LightingBakedAmbientOcclusion.html) | 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](https://doc.babylonjs.com/features/featuresDeepDive/postProcesses/defaultRenderingPipeline) | Setting | Notes | | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Resolution | | | [HDR](https://doc.babylonjs.com/features/featuresDeepDive/materials/using/HDREnvironment) | 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](https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/skyMat) | | [Fog](https://doc.babylonjs.com/features/featuresDeepDive/environment/environment_introduction#fog) | Added through the scene environment, none by default but they have a very simple API for it | | [Lighting](https://doc.babylonjs.com/features/featuresDeepDive/lights) | point, direction, spot, hemispheric lights | | Dynamic Lighting | | | [Shadows](https://doc.babylonjs.com/features/featuresDeepDive/lights/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](https://doc.babylonjs.com/features/featuresDeepDive/postProcesses/usePostProcesses) | | | Ambient occlusion | Does not seem to be included by default but there is a [SSAORenderingPipeline](https://doc.babylonjs.com/features/featuresDeepDive/postProcesses/SSAORenderPipeline) people can use | | Bloom | [Toggled in](https://doc.babylonjs.com/features/featuresDeepDive/postProcesses/defaultRenderingPipeline#bloom) default rendering pipeline but it is disabled by default | | Screenspace error | |

ThreeJS

docs

Settings

| Setting | Notes | | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Resolution | | | HDR | found an [example](https://threejs.org/examples/webgl_materials_envmaps_hdr.html) using it but not sure how to toggle it | | Antialiasing | off by default, boolean option in [WebGLRenderer](https://threejs.org/docs/index.html#api/en/renderers/WebGLRenderer), MSAA when on, set samples on the same object | | Atmosphere | | | [Fog](https://threejs.org/docs/index.html?q=fog#api/en/scenes/Fog) | must be created and added to a scene | | [Lighting](https://threejs.org/docs/index.html?q=light#api/en/lights/Light) | variety of lights | | Dynamic Lighting | | | [Shadows](https://threejs.org/docs/index.html?q=shado#api/en/lights/shadows/LightShadow) | needs to be toggled on per light, seem to use a shadow map for all of them, default `THREE.PCFSoftShadowMap` | | [Post Processing](https://threejs.org/docs/index.html#manual/en/introduction/How-to-use-post-processing) | | | Ambient occlusion | Seems none included by default but do have [addons built in](https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing) for SSAO and GTAO | | Bloom | Same as AO for Bloom | | Screenspace error | |

ArcGIS

Adjust scene settings—ArcGIS Online Help | Documentation

jjspace commented 2 weeks ago

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 commented 2 weeks ago

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.

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.

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 more than it is affected now and cull tiles more aggressively, we'll want to add an additional uniform which modifies the fog density 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.

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 https://github.com/CesiumGS/cesium/issues/9924, to emphasize it's importance.

lilleyse commented 2 weeks ago

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.