# Lighting problem in 2D and 2.5D view

**URL:** <https://community.cesium.com/t/lighting-problem-in-2d-and-2-5d-view/2624>\
**Category:** CesiumJS\
**Created:** [June 11, 2015, 1:33am UTC](https://community.cesium.com/t/lighting-problem-in-2d-and-2-5d-view/2624 "2015-06-11T01:33:41Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Steven](https://avatars.discourse-cdn.com/v4/letter/s/94ad74/32.png) [@Steven](https://community.cesium.com/u/Steven)\
**Post date:** [June 11, 2015, 1:33am UTC](https://community.cesium.com/t/lighting-problem-in-2d-and-2-5d-view/2624/1 "2015-06-11T01:33:41Z")

</div>

Lighting problem shown in the screenshot attached.

Paste the code below to sandcastle to see the effect:

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var greenRectangle = viewer.entities.add({

name : ‘Green translucent, rotated, and extruded rectangle at height with outline’,

rectangle : {

coordinates : Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),

material : Cesium.Color.GREEN.withAlpha(0.5),

extrudedHeight : 300000.0,

height : 100000.0,

outline : true,

outlineColor : Cesium.Color.GREEN

}

});

viewer.zoomTo(viewer.entities);

![Screen Shot 2015-06-10 at 6.30.14 PM.png](https://global.discourse-cdn.com/cesium/original/1X/334256caa25f326d85cb470041550cf4ff5420f6.png)

![Screen Shot 2015-06-10 at 6.30.30 PM.png](https://global.discourse-cdn.com/cesium/original/1X/6078a78318f2f8da38675b582f6d791951819a21.png)

---

<div class="post-metadata">

**Author:** ![Matt\_Amato](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/matt_amato/32/1993_2.png) [@Matt\_Amato](https://community.cesium.com/u/Matt_Amato)\
**Post date:** [June 11, 2015, 1:26pm UTC](https://community.cesium.com/t/lighting-problem-in-2d-and-2-5d-view/2624/2 "2015-06-11T13:26:09Z")

</div>

This is a known issue on some system/browser combinations, see [https://github.com/AnalyticalGraphicsInc/cesium/issues/2635](https://github.com/AnalyticalGraphicsInc/cesium/issues/2635) for some additional details.

While I hope we can get this fixed soon, there is an easy workaround. Construct the Viewer with orderIndependentTranslucency set to false.

For example:

var viewer = new Viewer(‘cesiumContainer’,{

orderIndependentTranslucency : false

});

orderIndependentTranslucency is a newer algorithm for rendering translucent geometry in 3D. Disabling it will cause Cesium to fall back to more traditional techniques.

---

<div class="post-metadata">

**Author:** ![Steven](https://avatars.discourse-cdn.com/v4/letter/s/94ad74/32.png) [@Steven](https://community.cesium.com/u/Steven)\
**Post date:** [June 11, 2015, 3:31pm UTC](https://community.cesium.com/t/lighting-problem-in-2d-and-2-5d-view/2624/3 "2015-06-11T15:31:02Z")

</div>

[![](https://lh3.googleusercontent.com/-R3prdEQGp_U/VXmplRAGClI/AAAAAAAAABg/Z_zm_C5r45A/s320/Screen%2BShot%2B2015-06-11%2Bat%2B8.26.07%2BAM.png)](https://lh3.googleusercontent.com/-R3prdEQGp_U/VXmplRAGClI/AAAAAAAAABg/Z_zm_C5r45A/s1600/Screen%2BShot%2B2015-06-11%2Bat%2B8.26.07%2BAM.png)

[![](https://lh3.googleusercontent.com/-1BbY_KRXsMs/VXmpiw3LRrI/AAAAAAAAABY/hUXTuLCcpGo/s320/Screen%2BShot%2B2015-06-11%2Bat%2B8.26.35%2BAM.png)](https://lh3.googleusercontent.com/-1BbY_KRXsMs/VXmpiw3LRrI/AAAAAAAAABY/hUXTuLCcpGo/s1600/Screen%2BShot%2B2015-06-11%2Bat%2B8.26.35%2BAM.png)

---

<div class="post-metadata">

**Author:** ![patrick](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/patrick/32/2045_2.png) [@patrick](https://community.cesium.com/u/patrick)\
**Post date:** [June 30, 2015, 11:48am UTC](https://community.cesium.com/t/lighting-problem-in-2d-and-2-5d-view/2624/4 "2015-06-30T11:48:17Z")

</div>

Hi Steven,

[#2635](https://github.com/AnalyticalGraphicsInc/cesium/issues/2635) was just fixed and will be in Cesium 1.11 on Wednesday. However, I think [#1825](https://github.com/AnalyticalGraphicsInc/cesium/issues/1825) is also affecting your case.

Patrick

---

<div class="post-metadata">

**Author:** ![yyingsha](https://avatars.discourse-cdn.com/v4/letter/y/e9bcb4/32.png) [@yyingsha](https://community.cesium.com/u/yyingsha)\
**Post date:** [November 16, 2016, 5:51am UTC](https://community.cesium.com/t/lighting-problem-in-2d-and-2-5d-view/2624/5 "2016-11-16T05:51:04Z")

</div>

Hi, I have tried disabling the OIT in the sandcastle today but it didn't seem to take the shadows away in 2D and 2.5D view. Anyone faced the same problem?

var viewer = new Cesium.Viewer('cesiumContainer',{  
&nbsp;&nbsp;&nbsp;&nbsp;orderIndependentTranslucency : false  
});  
var redRectangle = viewer.entities.add({  
&nbsp;&nbsp;&nbsp;&nbsp;name : 'Red rectangle with outline',  
&nbsp;&nbsp;&nbsp;&nbsp;rectangle : {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;coordinates : Cesium.Rectangle.fromDegrees(-180, -80.0, 180, 80.0),  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;material : Cesium.Color.RED.withAlpha(0.8),  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;outline : true,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;outlineColor : Cesium.Color.RED  
&nbsp;&nbsp;&nbsp;&nbsp;}  
});

---

<div class="post-metadata">

**Author:** ![velven83](https://avatars.discourse-cdn.com/v4/letter/v/ea5d25/32.png) [@velven83](https://community.cesium.com/u/velven83)\
**Post date:** [November 16, 2016, 8:53am UTC](https://community.cesium.com/t/lighting-problem-in-2d-and-2-5d-view/2624/6 "2016-11-16T08:53:25Z")

</div>

Hi,  
I’m having the same issue as well, but for me, it seems to appear as long as the entity’s ‘height’ or ‘extrudedHeight’ property are are being defined. (even if we set the property to 0)

Perhaps,for 2D mode at least, we could ignore these properties?

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

var redRectangle = viewer.entities.add({  
name : ‘Red rectangle with outline’,  
rectangle : {  
coordinates : Cesium.Rectangle.fromDegrees(-180, -80.0, 180, 0.0),  
material : Cesium.Color.RED.withAlpha(0.8),  
outline : true,  
outlineColor : Cesium.Color.RED  
}  
});

var redRectangle2 = viewer.entities.add({  
name : ‘Red rectangle with outline 2’,  
rectangle : {  
coordinates : Cesium.Rectangle.fromDegrees(-180, 0.0, 180, 80.0),  
material : Cesium.Color.RED.withAlpha(0.8),  
height: 0,  
outline : true,  
outlineColor : Cesium.Color.RED  
}  
});

``

 ![lightingCe.png](https://global.discourse-cdn.com/cesium/original/2X/1/13cf253273530ec854b16f135178c1454aafff69.png)

---

<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:** [November 16, 2016, 3:55pm UTC](https://community.cesium.com/t/lighting-problem-in-2d-and-2-5d-view/2624/7 "2016-11-16T15:55:21Z")

</div>

Hello,

The lighting effect your seeing is a known issue that we have written up here: [https://github.com/AnalyticalGraphicsInc/cesium/issues/1825](https://github.com/AnalyticalGraphicsInc/cesium/issues/1825)

The reason it only shows up when you use height or extruded height is because there is a different kind of primitive created behind the scenes when height is specified from when it is not specified. Only the one type seems to be having this problem.

Best,

Hannah
