# How to draw boxes with translucent

**URL:** <https://community.cesium.com/t/how-to-draw-boxes-with-translucent/4329>\
**Category:** CesiumJS\
**Created:** [July 7, 2016, 1:40am UTC](https://community.cesium.com/t/how-to-draw-boxes-with-translucent/4329 "2016-07-07T01:40:47Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![kaaunna](https://avatars.discourse-cdn.com/v4/letter/k/50afbb/32.png) [@kaaunna](https://community.cesium.com/u/kaaunna)\
**Post date:** [July 7, 2016, 1:40am UTC](https://community.cesium.com/t/how-to-draw-boxes-with-translucent/4329/1 "2016-07-07T01:40:47Z")

</div>

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,

> **[sample01.png](https://drive.google.com/file/d/0BwROz459C5btOUhUbVlVOFo4X3c/view)**
>
> Google Drive file.

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

code is follwing:

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

---

<div class="post-metadata">

**Author:** ![hannah](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/hannah/32/4509_2.png) [@hannah](https://community.cesium.com/u/hannah)\
**Post date:** [July 7, 2016, 2:37pm UTC](https://community.cesium.com/t/how-to-draw-boxes-with-translucent/4329/2 "2016-07-07T14:37:12Z")

</div>

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