Transparent background regression in 1.10 and new

[mramato]

Here's a simple Sandcastle example that uses the scene.backgroundColor property to make a transparent background (with the underlying yellow div showing through). It works in 1.9 but not in 1.10 or 1.11. Multiple users have ran into this problem: forum post.

JS

javascript
var viewer = new Cesium.Viewer('cesiumContainer', {
skyBox : false,
skyAtmosphere : false,
contextOptions : {
webgl: {
alpha: true
}
}
});
viewer.scene.backgroundColor = Cesium.Color.TRANSPARENT;

**HTML**

``` html
<style>
    @import url(../templates/bucket.css);
</style>
<div class="fullSize" style="background-color: yellow;"></div>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>

[santilland]

Hi! Seeing there was not much activity here and i wanted to use a bit newer versions then 1.9 on our services i have been looking for the change that removed this functionality. After quite some looking around i found it! 😄
It seems it got in in around the commit 6413fbe 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 that is why i am pointing it out and not creating a pull request, maybe it has some use that i don't know of.
Would really be happy to see this in the next release because i will be solving this really hacky for our deployment strategy.

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!

[emackey]

@santilland There's no need to hack Cesium.js for a workaround so simple, just set the value after you construct the widget.

viewer.scene.fxaa = false;

(Also, if you were to hack the minified file, !1 is the correct minified version of false, not the number zero.)

Thanks for tracking down a workaround.

[santilland]

Hi! Well that happens for over thinking :D that is a far easier approach of course, thanks for that.

[mramato]

@bagnell since we know it's the fxaa pass, could the problem be that we are not checking if the webGL context was created with alpha:true and creating the framebuffer with the correct options to match? I took a quick look at the code, but it's an area I'm not familiar with so nothing jumped out at me.

[hpinkos]

Once this issue is resolved, check to see if #1921 is fixed.

[Pheater]

I can't get a transparent background with 1.52. Even fix FXAA disabled. There has to be another effect that forces alpha drawing.

//Create the Cesium viewer
var viewer = new Cesium.Viewer('cesiumContainer', {
	
skyBox : false,
skyAtmosphere : false,
baseLayerPicker : false,
homeButton: false,
sceneModePicker: false,
navigationHelpButton: false,
animation: false,
creditsDisplay: false,
timeline: false,
scene3DOnly: true,

 contextOptions : {
        webgl: {
            alpha: true
        }
    }
});
//Set the background of the scene to transparent
viewer.scene.backgroundColor = Cesium.Color.TRANSPARENT;

viewer.scene.fxaa = false;

Is this still being worked on or shall I post a new issue since this isn't related to FXAA any more?

[mramato]

@Pheater thanks for brining this up. I took a quick look at the good news is FXAA is no longer the culprit (plus the way to disable it changed a while ago). Now it's HDR that needs to be disabled. Here's a minimum snippet to get things working:

//Create the Cesium viewer
var viewer = new Cesium.Viewer('cesiumContainer', {
    skyBox : false,
    skyAtmosphere: false,
    contextOptions : {
        webgl: {
            alpha: true
        }
    }
});
//Set the background of the scene to transparent
viewer.scene.backgroundColor = Cesium.Color.TRANSPARENT;

//HDR needs to be disable for transparent backgrounds
viewer.scene.highDynamicRange = false;

And here's a working example with a yellow background: https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/#c=ZVHLbsIwEPyVVS5QidrqlQZUCpV6qKAC1FMujrNJLBw7sh0grfj32oHy6l7sfcyOZ0zp1CBzCK5EmKIVTQVbgTs0idoyc7rDCBTuTn3y1dX6Pd6lU60cEwpNbwA/iQIfdtO+6j0MIWfS4uBcnLhK27pEg7ct7lfg3i1qJ7SyHnfaE2KHaSFvKiGYrEs2BGcavDQOx6s/Dg/PiaJ0ha7TlTK+KYxuVAY67yqWo/Katd/AlK2ZQeW84E4Y6ZrkAppqqYMFJ/ldStbLyXz1OVm+zdeeK7C9z5beJcxs2JsiZMKyVCLkHnxFc/Uae0dZiqKctYpVgi+ZKtBzdjZ5gmgQxda1EsdHkS+iqrVx0BjZJ4Q6rGrpv9HStOEbdIRbGzwIo6nO2mv/LvyPPEgZQotS6t3ZvZj+McWZ2ILIRkl099dJBFwya30nb6RciW9MonFM/fwNTGqWCVUstmgka8NI+TT+OBYJITH16X+U01qmzFxt/AU

[Pheater]

Fantastic. Works great.

[thw0rted]

Thanks for pointing this out. Do you think the docs where alpha is explained (I think at the top of Scene) could be updated to mention this? Alternately (and/or?), maybe a brief mention in the release notes -- helpful to know why my transparent background suddenly wasn't.

Another thought: it wouldn't hurt if viewer.scene.backgroundColor = Cesium.Color.TRANSPARENT automatically turned off any options that would otherwise keep it from actually being transparent.

[lilleyse]

I opened an issue for the recent regression: #7427.

[lilleyse]

@Pheater @thw0rted this was fixed in #7431 and will be in the 1.53 release. It seems like the original issue with FXAA has since been solved too.