Custom appearance

CesiumJS
1

Hello,

I want to implement (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.

2

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

Then you want to add the material to Material.js: 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

3

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?