Transparent globe base color

CesiumJS
1

I'm attempting to get a long string of points that circles the globe to show through to the other side of the globe. So I'm attempting to make the globe baseColor transparent. So far, I can change the color the baseColor just fine but it doesn't go transparent as it seems to suggest it would. How can I make the globe baseColor transparent to be able to see points through the globe.

var viewer = new Cesium.Viewer('cesiumContainer',{
        imageryProvider: false,
        baseLayerPicker: false
    });
   
var scene = viewer.scene;
viewer.scene.globe.baseColor = Cesium.Color.TRANSPARENT;
//viewer.scene.globe.baseColor = Cesium.Color.fromAlpha(Cesium.Color.RED, 0.5);

var points = scene.primitives.add(new Cesium.PointPrimitiveCollection());

var numPoints = 10000;

var tempLat = 0;
var tempLon = 0;
var alt = 0;
for (var i = 0; i < numPoints; i++){
    tempLat += .1;
    tempLon += .1;
    alt += 1000;
    if (tempLat > 90){
        tempLat = 0;
        tempLon = 0;
        alt = 0;
    }

    points.add({
        position : Cesium.Cartesian3.fromDegrees(tempLon, tempLat, alt),
        show : true,
        color: Cesium.Color.YELLOW,
        pixelSize: 10
    });
}

Using Windows 10, using Chrome and Firefox and Cesium 1.39.

2

Hey Michael,

The reason it’s not transparent is because the first pass of the cesium globe doesn’t render with blending on. You can change that in the cesium code by adding:

blending : BlendingState.ALPHA_BLEND

to the renderstate definition here:

https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Scene/GlobeSurfaceTileProvider.js#L377-L385

I don’t know if that’s a permanent solution, but it should work for your use case for the time being :wink:

Jason

3

Thanks for the info Jason. That does indeed make the globe "look" transparent and I can see the skyBox through the globe but the points themselves are not visible through the globe. Funny enough that is still the case even when I get rid of the globe completely using

viewer.scene.globe.show = false;

There is still a phantom sphere floating in space with a bunch of points that are encircling it and are completely invisible if you rotate the points out of view.

4

This is probably the occluder which is designed specifically to prevent objects from showing through the globe.

It doesn’t look like there’s any API for this but if you’re already hacking the source, you could try taking that out.

https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Scene/Scene.js#L1351