Scene Background Transparent

CesiumJS
1

Hi all,

Great Work! I am looking to remove the background from the scene, in other words make it transparent.

The regular WebGL technique does not work

var gl = canvas.getContext(“experimental-webgl”);
gl.clearColor(0.5, 0, 0, 0.5);
gl.clear(gl.COLOR_BUFFER_BIT);

I went into Scene/Scene to investigate, and removed the backgroundColor from line 462, and tried to implement:

var clear = scene._clearColorCommand;
clear.color.alpha = 0;
clear.color.red = 0;
clear.color.blue = 0;
clear.color.green = 0;
clear.execute(context, passState);

No luck. I believe the alphaBIT is not applied correctly?

Any advice would be greatly appreciated, and please let me know what more info you require.

Thanks! :slight_smile:

2

The problem here is that you need to make sure the Context is created with “alpha” set to true. It’s false by default (I believe for performance benefits).

Here’s a simple Viewer example that does what you want:
var viewer = new Cesium.Viewer(‘cesiumContainer’, {

contextOptions : {

alpha : true

}

});

viewer.scene.skyBox.destroy();

viewer.scene.skyBox = undefined;

viewer.scene.sun.destroy();

viewer.scene.sun = undefined;

viewer.scene.skyAtmosphere.destroy();

viewer.scene.skyAtmosphere = undefined;

viewer.scene.backgroundColor = new Cesium.Color(0, 0, 0, 0);

This assumes you want to get rid of everything but the earth. You can add the sun or skyAtmosphere back in by removing the corresponding line. The skyBox needs to be destroyed however.

If you are not using Viewer, or CesiumWidget; then you can still do this by simply passing the contextOptions to the Scene constructor (second parameter).

var scene = new Scene(canvas, { alpha : true });

Hope that helps!

3

You’re a star thanks. I will look into passing this in CesiumWidget directly tomorrow first thing.

Project is going for Royal Bank of Scotland (RBS) guys. Another step forward for this amazing plugin :wink:

Thanks again! :slight_smile:

4

The canvas options are exposed to both the Widget and the Viewer, so you shouldn’t have any problems.

Scott

5

Does Lorenzo's original update to Scene.js need to be applied for this to work? Using this code, I get a solid green background on my canvas (instead of transparent):

var viewer = new Cesium.Viewer('map', {
      contextOptions : {
              alpha : true
      }
    });
    
    viewer.scene.skyBox.destroy();
    viewer.scene.skyBox = undefined;
    viewer.scene.sun.destroy();
    viewer.scene.sun = undefined;
    viewer.scene.moon.destroy();
    viewer.scene.moon = undefined;
    viewer.scene.skyAtmosphere.destroy();
    viewer.scene.skyAtmosphere = undefined;
    viewer.scene.backgroundColor = new Cesium.Color(0,1,0,0.0);

6

contextOptions changed in b24. Use:

contextOptions : {

webgl : {

alpha : true

}

}

7

Thanks for the quick reply Scott. That worked well until I tried rendering GeoJSON data. Then transparency breaks: http://zebradog.github.io/globe/

Any thoughts?

8

Cool looking link. It looks like you managed to get this working with GeoJSON data as well? Or are you still having problems?

9

Thanks! Loading the data works well, for whatever reason filling the polygons disables the background transparency. Works fine when only the stroke is turned on.

10

I've found a couple of materials break the background effect (the Polyline Glow material, dynamicObjects with transparent colors - e.g. polyline outline color and polygon fill color, setting translucent to true under primitive appearance).

If you set the alpha channel of the polygon material of the dynamic objects to 1.0 then it still works (but at the cost of transparent polygons :-/ ). The default polygon fill material (under defaultPolygon.polygon) has transparency.

Setting the opacity of other items like billboards, or transparency in the color attribute of an extruded rectangle, doesn't seem to break the background transparency either.

11

I just submitted https://github.com/AnalyticalGraphicsInc/cesium/issues/1921 to get this fixed. I’m not sure if it will be in the next release, but hopefully we’ll get to it sooner rather than later.

12

Hi all,

i was using this method to set the transparency of the background and it has been working great.

I tried to update from release 1.9 to 1.10 and now i can't get transparency working. I tried out release 1.11 now too as 1.10 was having some issues when stars and so on were disabled and the issue still persists.

I can't find what has changed that disables this functionality.
Any help would be greatly appreciated!

Kind regards,
Daniel

13

I too am trying to get transparency to work with 1.11 with no success. Here's my current code:

var earthViewer = new Cesium.Viewer('cesiumContainer', {
    webgl: {
        alpha: true
    }
});

earthViewer.scene.skyBox.destroy();
earthViewer.scene.skyBox = undefined;
earthViewer.scene.sun.destroy();
earthViewer.scene.sun = undefined;
earthViewer.scene.skyAtmosphere.destroy();
earthViewer.scene.skyAtmosphere = undefined;
earthViewer.scene.moon.destroy();
earthViewer.scene.moon = undefined;
earthViewer.scene.backgroundColor = new Cesium.Color(0,0,0,0);

All objects are being successfully destroyed, but the background colour persists despite setting its alpha to 0.

14

This is definitely a bug. Thanks for the report. I wrote up an issue for it here: https://github.com/AnalyticalGraphicsInc/cesium/issues/2866

For the record, the correct way to do what you want these days is to use the below code (this also gets rid of sun/moon). It works in 1.9 but seems to have broken with 1.10 and 1.11. Notice the webGL parameter is to contextOptions, not directly under the general options object.

var viewer = new Cesium.Viewer(‘cesiumContainer’, {

skyBox : false,

skyAtmosphere : false,

contextOptions : {

webgl: {

alpha: true

}

}

});

viewer.scene.backgroundColor = Cesium.Color.TRANSPARENT;

15

Ah, thanks for responding so quickly. I'll have to grab a 1.9 version until that's patched then.

16

Thank you too from my side for the quick reaction and setting up the issue on github, i will monitor it and see when i can migrate to the newest cesium version.

Kind regards!

17

Hi!

I think i found the cause of the regression, i commented on the created thicket:
https://github.com/AnalyticalGraphicsInc/cesium/issues/2866

Here also quickly as text:
At some point in the file Source/Scene/Scene.js this was changed:
this.fxaa = true; (line 482 in release 1.12)
from false to true.
Changing it back resolves the problem, not sure what else it could do though.

If you want to change this directly in the minified build Cesium.js file, you can replace "this.fxaa=!0" with "this.fxaa=0".

Kind regards,
Daniel

18

How would I remove the earth as well in all but a subarea, like only render the earth inside a bounding volume, or rectangle or ellipse?
Thanks, -Adrienne

19

Here’s a complete example of creating a partially transparent globe as well as background so you can only render the earth inside a specified rectangle with the page background showing through everywhere else: https://gist.github.com/mramato/efbadbd638c32407efde You can try it out with Sandcastle

Let me know if you run into any problems or have any questions.

20

בתאריך יום שישי, 26 ביולי 2013 בשעה 02:39:16 UTC+3, מאת Lorenzo Campanis:

You're a star thanks. I will look into passing this in CesiumWidget directly tomorrow first thing.

Project is going for Royal Bank of Scotland (RBS) guys. Another step forward for this amazing plugin :wink:

Thanks again! :slight_smile:

The problem here is that you need to make sure the Context is created with "alpha" set to true. It's false by default (I believe for performance benefits).

Here's a simple Viewer example that does what you want:

var viewer = new Cesium\.Viewer\('cesiumContainer', \{

    contextOptions : \{
        alpha : true
    \}
\}\);

viewer\.scene\.skyBox\.destroy\(\);

viewer\.scene\.skyBox = undefined;
viewer\.scene\.sun\.destroy\(\);
viewer\.scene\.sun = undefined;
viewer\.scene\.skyAtmosphere\.destroy\(\);
viewer\.scene\.skyAtmosphere = undefined;

viewer\.scene\.backgroundColor = new Cesium\.Color\(0, 0, 0, 0\);

This assumes you want to get rid of everything but the earth. You can add the sun or skyAtmosphere back in by removing the corresponding line. The skyBox needs to be destroyed however.

If you are not using Viewer, or CesiumWidget; then you can still do this by simply passing the contextOptions to the Scene constructor (second parameter).

var scene = new Scene(canvas, { alpha : true });

Hope that helps!

Hi all,

Great Work! I am looking to remove the background from the scene, in other words make it transparent.

The regular WebGL technique does not work
var gl = canvas.getContext("experimental-webgl");
gl.clearColor(0.5, 0, 0, 0.5);
gl.clear(gl.COLOR_BUFFER_BIT);

I went into Scene/Scene to investigate, and removed the backgroundColor from line 462, and tried to implement:

var clear = scene._clearColorCommand;
clear.color.alpha = 0;

clear\.color\.red = 0;
clear\.color\.blue = 0;
clear\.color\.green = 0;

clear.execute(context, passState);

No luck. I believe the alphaBIT is not applied correctly?

Any advice would be greatly appreciated, and please let me know what more info you require.

Thanks! :slight_smile:

--

You received this message because you are subscribed to the Google Groups "cesium-dev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to cesium-dev+...@googlegroups.com.

For more options, visit https://groups.google.com/groups/opt_out.

How can I rid of the earth too? just show an entity on a black background?