# Polyline material problem

**URL:** <https://community.cesium.com/t/polyline-material-problem/34018>\
**Category:** CesiumJS\
**Created:** [July 24, 2024, 12:37am UTC](https://community.cesium.com/t/polyline-material-problem/34018 "2024-07-24T00:37:59Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![guanzheyuan](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/guanzheyuan/32/22977_2.png) [@guanzheyuan](https://community.cesium.com/u/guanzheyuan)\
**Post date:** [July 24, 2024, 12:37am UTC](https://community.cesium.com/t/polyline-material-problem/34018/1 "2024-07-24T00:37:59Z")

</div>

viewer.entities.add({  
polyline: {  
positions: cartesians,  
clampToGround: true,  
width: 3,  
material: new Cesium.PolylineDashMaterialProperty({  
color: Cesium.Color.WHITE,  
gapColor: Cesium.Color.BLACK,  
phase: 10.0,  
}),  
},  
})

 ![WechatIMG252](https://global.discourse-cdn.com/cesium/original/3X/0/c/0ceb7fd116ff3986afd5cd96dac77e9f4998ec47.jpeg)  
I have provided a screenshot with two lines, both of which are black and white spaced at a ratio of 1:1

1. The first line is a straight line with no other points in the middle, so its black-white ratio is 1:1.
2. The second line is a broken line, and there are other points in the middle. The problem is that the ratio of black to white is unbalanced.  
May I ask how to solve this problem, so that the black and white ratio of the second line can be consistent?

---

<div class="post-metadata">

**Author:** ![Kevin\_Ring](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/kevin_ring/32/2003_2.png) [@Kevin\_Ring](https://community.cesium.com/u/Kevin_Ring)\
**Post date:** [July 24, 2024, 3:17pm UTC](https://community.cesium.com/t/polyline-material-problem/34018/2 "2024-07-24T15:17:55Z")

</div>

It looks like you’re using CesiumJS (not Cesium for Unity), so I’ve moved your post to the CesiumJS forum.

---

<div class="post-metadata">

**Author:** ![guanzheyuan](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/guanzheyuan/32/22977_2.png) [@guanzheyuan](https://community.cesium.com/u/guanzheyuan)\
**Post date:** [July 25, 2024, 12:49am UTC](https://community.cesium.com/t/polyline-material-problem/34018/3 "2024-07-25T00:49:20Z")

</div>

Wow, I’m sorry it’s my fault. Thank you very much for your help

---

<div class="post-metadata">

**Author:** ![Gabby\_Getz](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/gabby_getz/32/7838_2.png) [@Gabby\_Getz](https://community.cesium.com/u/Gabby_Getz)\
**Post date:** [July 25, 2024, 2:10pm UTC](https://community.cesium.com/t/polyline-material-problem/34018/4 "2024-07-25T14:10:10Z")

</div>

Hi @guanzheyuan,

I believe each line segment’s dashes are treated independently and in screenspace, which may explain the effect your seeing. However, I’m having trouble reproducing this exact issue with arbitrary positions. Could you please provide your full code example?

---

<div class="post-metadata">

**Author:** ![guanzheyuan](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/guanzheyuan/32/22977_2.png) [@guanzheyuan](https://community.cesium.com/u/guanzheyuan)\
**Post date:** [July 26, 2024, 1:28am UTC](https://community.cesium.com/t/polyline-material-problem/34018/5 "2024-07-26T01:28:42Z")

</div>

> [@guanzheyuan](#):
>
> viewer.entities.add({  
> polyline: {  
> positions: cartesians,  
> clampToGround: true,  
> width: 3,  
> material: new Cesium.PolylineDashMaterialProperty({  
> color: Cesium.Color.WHITE,  
> gapColor: Cesium.Color.BLACK,  
> phase: 10.0,  
> }),  
> },  
> })

Thank you for replying to me。  
This is the implementation code。  
I want to solve this problem by making the skin color of the second line the same ratio as that of the first line。  
viewer.entities.add({  
polyline: {  
positions: cartesians,  
clampToGround: true,  
width: 3,  
material: new Cesium.PolylineDashMaterialProperty({  
color: Cesium.Color.WHITE,  
gapColor: Cesium.Color.BLACK,  
phase: 10.0,  
}),  
},  
})

---

<div class="post-metadata">

**Author:** ![Marco13](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/marco13/32/2757_2.png) [@Marco13](https://community.cesium.com/u/Marco13)\
**Post date:** [July 26, 2024, 1:34pm UTC](https://community.cesium.com/t/polyline-material-problem/34018/6 "2024-07-26T13:34:55Z")

</div>

> > I’m having trouble reproducing this exact issue with arbitrary positions. Could you please provide your full code example.
> 
> This is the implementation code。

A “full code example” usually refers to a Sandcastle, which can be used to quickly look at the issue. In your case, the most important part would be the `cartesians` that you are using to create the polyline.

But here’s an example with some made-up positions that already shows the effect:

> **[Cesium Sandcastle](https://sandcastle.cesium.com/index.html#c=jVNda9swFP0rwk8OGDlfK8F1QxN3bGMpKyx0D/MeVPsmEZUlI8kJbsl/r6T4I2QZ7MHo6txzz7nSlTPBlUZ7CgeQ6A5xOKAEFK0K/OwwP/Uyt08E14RykKk3uE15yjcVzzQVHGUSiIaVyfkZkdqwCVcD9J5y1Ahj4JpqCgqTPPddAqFSsJqZogg1gIUUtZIqQr1S0GYzRopyLb5IUfE8QlpW0OUONNe7CE06oDAtSUpYdH6kp8bygajdY0N4kqIEqWu/68I4CSZk1FYldod/ff22/hz0nC0pkyu05WqRfD+j5cZqBXxru7uZ4mGXOg6a8OjWo73Uo73XzE2kP//CjKW1aMEJ3khRPMBWAqiFlKT2f4+GAZrOAjRx6x+rd3Uyi9P4Lm2W/2ljm7VWn8zn4rGJR+4Mo6mDXXjTo7MOHQ87dDzu0VmHTpxwyv/d/fLUffOu3oQo1sK/eGWW4gVerHTNYN5e+D0tSiE1qiTzMQ41FCUz+ip8qbJX0DhTrtBS4/C8NM7pHtH87sqfYN+kUiazqRj7Sd8g9eZxaPh/lTJBcsq3P/YgGaktbTear04gxjgOzfZ6pRaCvRB5ofwB)**
>
> The Cesium Sandcastle provides an interactive environment for testing Cesium code.

> I believe each line segment’s dashes are treated independently and in screenspace, which may explain the effect your seeing.

This indeed seems to be the case: The `dashLength` is 64, and when carefully moving the view, one can see the effect:

![Cesium Polyline Dash](https://global.discourse-cdn.com/cesium/original/3X/e/4/e476c1081cad5d3b90462e65ad9e5a6dfcd664ec.gif)

The pattern is applied to each _segment_, independently. Depending on the structure of the segments, this means that there could basically be a sequence of segments that all have “a length of `63.999` in screen space”, which would cause the whole polyline to be rendered in white (without a pattern).

* * *

@guanzheyuan

1. You used some `phase` option there - this does not exist for `PolylineDashMaterialProperty`. Maybe you meant `dashLength`
2. You should _not_ open multiple threads to ask the same question - [Problem with polyline material](https://community.cesium.com/t/problem-with-polyline-material/33877)

---

<div class="post-metadata">

**Author:** ![Marco13](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/marco13/32/2757_2.png) [@Marco13](https://community.cesium.com/u/Marco13)\
**Post date:** [July 26, 2024, 1:50pm UTC](https://community.cesium.com/t/polyline-material-problem/34018/7 "2024-07-26T13:50:01Z")

</div>

You might actually come pretty close to the desired goal with a `CheckerBoardMaterialProperty`:

> **[Cesium Sandcastle](https://sandcastle.cesium.com/index.html#c=jVPBjtMwEP0VK6dUqhySLqgK2Yo2IEAUgUQFB8LBTaZbC8eOxk6rLuq/YztJw5YicYhsP79582Y8KZXUhhw4HAHJPZFwJDlo3tb0q8fCIij9OVfSMC4Bi2DyspCF3LWyNFxJUiIwA2t7F5YMjWUzqSfkVyEJKb18Y5W7FBSk4YaDpqyqQk8hpFHiJGx4SnrAQZo7cZ2SUXM63JaC1c1GvUXVyiolBlu43B15ZfYpmfXA2a9nZ9mq0iEVra1l5Ew8rTnfQ/kTcKsYVh97xmdUDaA5DW7hADJXQmF6iXIn+u3d+82bPquqqluU1XqZf+gpCI1tW/ok+1BpEibPpiSejN7PruNdM8d+LK3569AZ3aGqX8MDAuglIjuF32Mrdjefkplffzi9m2+27B72Os3qP9M4sy7Vc/v5fWL3sa8hvvOw374Y0fkFdfX2aJKM6PyCzrxwIf/tftW57+fsUal6o8KrqXOUYBpk2pwELIaRecXrRqEhLYqQ0shA3Qirr6Nta6fB0FLrbn4IyaI/Q7OKHwiv7m/8I25GtbY3u1aIL/wRimCRRZb/V6hQrOLy4dMBULCTo+3jxboDKaVZZI+3I41SYsvwSvk3)**
>
> The Cesium Sandcastle provides an interactive environment for testing Cesium code.

This is _not_ in screen space, however. (The screen space _will_ raise some questions in any case).
