How to draw boxes with translucent

CesiumJS
1

Hi,
I want to show grid data by 3D.
When I draw BoxGeometry with translucent, even set alpha to 0.9, it is too transparent.
like this,


front cell(green) seems to be drawn over by backward cells( red, blue ),
It's hard to see...
Any ideas??

code is follwing:

  var alpha = 0.9; // <----!!!
  
  var data = [
    { lon:80.0, lat:20.0, val:15000, color:{r:0.0,g:1.0,b:0.0,a:alpha} },
    { lon:80.1, lat:20.0, val:20000, color:{r:0.0,g:1.0,b:0.0,a:alpha} },
    { lon:80.2, lat:20.0, val:12000, color:{r:0.0,g:1.0,b:0.0,a:alpha} },
    { lon:80.0, lat:20.1, val: 7000, color:{r:1.0,g:0.0,b:0.0,a:alpha} },
    { lon:80.1, lat:20.1, val: 8000, color:{r:1.0,g:0.0,b:0.0,a:alpha} },
    { lon:80.2, lat:20.1, val: 9000, color:{r:1.0,g:0.0,b:0.0,a:alpha} },
    { lon:80.0, lat:20.2, val: 3000, color:{r:0.0,g:0.0,b:1.0,a:alpha} },
    { lon:80.1, lat:20.2, val: 5000, color:{r:0.0,g:0.0,b:1.0,a:alpha} },
    { lon:80.2, lat:20.2, val: 4000, color:{r:0.0,g:0.0,b:1.0,a:alpha} }
  ];
  
  var sizex = 10000;
  var sizey = 10000;
  
  for( var i=0; i<data.length; i++ ){
    
    var geometry = Cesium.BoxGeometry.fromDimensions({
      vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
      dimensions : new Cesium.Cartesian3( sizex, sizey, data[i].val )
    });
    
    var position = Cesium.Cartesian3.fromDegrees( data[i].lon, data[i].lat );
    var point3d = new Cesium.Cartesian3( 0.0, 0.0, data[i].val/2 );
    var translation = Cesium.Transforms.eastNorthUpToFixedFrame( position );
    var matrix = Cesium.Matrix4.multiplyByTranslation( translation, point3d, new Cesium.Matrix4() );
    
    var instance = new Cesium.GeometryInstance({
      geometry: geometry,
      modelMatrix: matrix,
      attributes: {
        color : new Cesium.ColorGeometryInstanceAttribute( data[i].color.r, data[i].color.g, data[i].color.b, data[i].color.a )
      }
    });
    
    var primitive = new Cesium.Primitive({
      geometryInstances: instance,
      
      appearance: new Cesium.PerInstanceColorAppearance({
                
            translucent: true, // <----!!!
              })
      
    });
    
    viewer.scene.primitives.add( primitive );

2

Hello,

For this particular case, I think you want to disable order independent translucency. You can pass in a parameter to the viewer to disable it:

var viewer = new Cesium.Viewer(‘cesiumContainer’, {
orderIndependentTranslucency: false
});

``

Best,

Hannah