Inverted colors / night mode

CesiumJS
1

Hello,

Are there plans / thoughts to allow rendering the globe with all colors
inverted in order to create a 'night mode' effect?

Is the postprocessing hook branch usable? Is it going to be merged in
master? Is it expected that mixing primitives and filters result in a black
screen? (See Sandcastle example below).

If post processing filters are not usable, does that mean modifying
- GlobeFS.glsl to handle imagery textures;
- Appearance and Material fragments with colors like
  PerInstanceFlatColorAppearanceFS.glsl;
- Label glyphs regeneration;
- Something for Billboard images/canvas.

Is there interest for such a feature?

Sandcastle example:

var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;
var primitives = scene.primitives;

// Create a simple polygon
var polygon = primitives.add(new Cesium.Polygon({
    positions : Cesium.Cartesian3.fromDegreesArray([
         -72.0, 40.0,
         -70.0, 35.0,
         -75.0, 30.0,
         -70.0, 30.0,
         -68.0, 40.0])
}));

function setFilter(scene, filter, uniforms) {
    scene.customPostProcess = new Cesium.CustomPostProcess(filter, uniforms);
}

// Comment to make it work
setFilter(scene, Cesium._shaders.PassThrough);

2

Hi Guillaume,

Have you seen the NASA night lights imagery, e.g., that is referenced in the imagery tutorial? You may be able to use this with disabled lighting and perhaps a small tweak to the fragment shaders for lighting.

It will be at least a few months before I expect we’ll be able to focus on the postprocessing branch to get it into master. In the meantime, I can’t speak to the exact state of it, but I know at least Doarama is using it.

Patrick

3

Hi Guillaume,

The postprocess-hook branch has been updated to Cesium 1.2. It sounds like you’ve already found the Sandcastle demo. I’ve just made a change to it so it should now work with the polygon.

https://github.com/AnalyticalGraphicsInc/cesium/commit/6b4232f04c94ebe0e2986056588e130817638a6b

Chris

4

Hi Patrick and Chris,

Thank you for your replies.

Disabling OIT indeed fixed the issue.

Post processing filters look very promising and is the perfect match for
a global 'inverted colors' effect.

Guillaume

5

I have no idea if it’s the best solution, but I achieved what I had in mind by directly setting the css filter of the canvas using jQuery…

$canvasElement.css(“filter”, “invert(100%) hue-rotate(180deg)”);

(filter settings after: javascript - change openlayers map color (dark and light style) - Stack Overflow)
It does scupper atmospheric effects, but works otherwise. Hope that helps someone out there.