# Custom appearance

**URL:** <https://community.cesium.com/t/custom-appearance/4317>\
**Category:** CesiumJS\
**Created:** [July 5, 2016, 1:23pm UTC](https://community.cesium.com/t/custom-appearance/4317 "2016-07-05T13:23:15Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![sharth23](https://avatars.discourse-cdn.com/v4/letter/s/6a8cbe/32.png) [@sharth23](https://community.cesium.com/u/sharth23)\
**Post date:** [July 5, 2016, 1:23pm UTC](https://community.cesium.com/t/custom-appearance/4317/1 "2016-07-05T13:23:15Z")

</div>

Hello,

I want to implement ([https://postimg.org/image/pvrwxnrn5/](https://postimg.org/image/pvrwxnrn5/)) 2 types of polylines in Cesium for my project. But i didnt found any guide how to create custom appearance for Cesium. Can someone explain, what should i do for it?

Thanks.

---

<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 5, 2016, 2:21pm UTC](https://community.cesium.com/t/custom-appearance/4317/2 "2016-07-05T14:21:49Z")

</div>

Hello,

You will have to implement a custom polyline material for those types. Here are code examples for the polyline outline material:

The first step would be to create a glsl shader: [https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Shaders/Materials/PolylineOutlineMaterial.glsl](https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Shaders/Materials/PolylineOutlineMaterial.glsl)

Then you want to add the material to Material.js: [https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Scene/Material.js#L1379-L1394](https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Scene/Material.js#L1379-L1394)

Then you should be able to use the material on a polyline:

var viewer = new Cesium.Viewer(‘cesiumContainer’);  
var polylines = viewer.scene.primitives.add(new Cesium.PolylineCollection());

var widePolyline = polylines.add({  
positions : Cesium.PolylinePipeline.generateCartesianArc({  
positions : Cesium.Cartesian3.fromDegreesArray([-105.0, 40.0,  
-100.0, 32.0])  
}),  
material : Cesium.Material.fromType(Cesium.Material.PolylineOutlineType, { //replace PolylineOutlineType with the name of your new type  
outlineWidth : 4.0 // This is where you set any attributes you use in the material uniforms  
}),  
width : 10.0  
});

``

It’s a bit more work to hook this up to the Entity API. Once you get this working, let me know and I can help you get that working also.

Take a look at the Build Guide in our contributors documentation for help with making changes and building the code.

Best,

Hannah

---

<div class="post-metadata">

**Author:** ![sharth23](https://avatars.discourse-cdn.com/v4/letter/s/6a8cbe/32.png) [@sharth23](https://community.cesium.com/u/sharth23)\
**Post date:** [July 11, 2016, 1:05pm UTC](https://community.cesium.com/t/custom-appearance/4317/3 "2016-07-11T13:05:35Z")

</div>

Thanks for u reply Hannah.

Can u help me with algorithm for shader for polyline like this:  
\_\_|¯¯|\_\_|¯¯|\_\_|¯¯|\_\_|¯¯|\_\_|¯¯|\_\_ (sorry for ascii graphics)

For drawning polyline like this we cant just discard values as for dashed lines, we need to draw our pattern \_\_|¯¯|\_\_ (which depends on some information as period, width etc.) and use it like 2d texture or i dont know. So can u suggest any ideas how to do this?