How do I properly set a material for a polygon?

CesiumJS
1

I am trying to create a boat wake trail effect by drawing a polygon behind the 3d model of the boat, with the vertices based on an array of the boat's previous positions. The issue I have run into is that I cannot seem to set a material for the polygon.

Here is my function for drawing the polygon based on a set of calculated vertex positions:

<code>
createPathPolygon (name, vertexPositions) {
        var material = Cesium.Material.fromType('Image');
        material.uniforms.image = '/assets/images/clouds/png/cloud-texture-1-original.png'; // to be replaced with water texture...
        
        var pathPolygon = this.viewer.entities.add({
            id : name,
            name : name,
            polygon : {
                hierarchy : {
                    positions : vertexPositions
                },
                material : Cesium.Color.WHITE.withAlpha(0.3) // this works
// material : new Cesium.StripeMaterialProperty({
// evenColor: Cesium.Color.WHITE,
// oddColor: new Cesium.Color(186/255, 194/255, 1),
// repeat: 5
// })
                //material : material // this does not work (path is just solid white)
                //material : '/assets/images/clouds/png/cloud-texture-1-original.png' // this does not work (nothing is displayed)
            }
        });
        
        pathPolygon.polygon.hierarchy = new Cesium.ConstantProperty(new Cesium.PolygonHierarchy(
        vertexPositions));
        
    }
</code>

Also, if anyone has a better idea of how to create this kind of boat wake effect, I'd be interested to hear it. I thought about maybe editing water vertex normals, but I don't know how I'd efficiently find which water vertices are near the entity, and that approach would also require me to find what part of cesium actually does the water animation stuff. I had also considered a "bread crumb" kind of approach in which I just draw a series of textured rectangles behind the boat, but I doubt that would look very good.

Thanks in advance for any help.

2

Hello,

You should be able to set a polygon entity to have an image material by setting the material equal to the path to the image. Here is an example that works in Sandcastle:

var polygon = viewer.entities.add({
polygon : {
hierarchy : Cesium.Cartesian3.fromDegreesArray([-115.0, 37.0,
-115.0, 32.0,
-107.0, 33.0,
-102.0, 31.0,
-102.0, 35.0]),
material : ‘…/images/Cesium_Logo_Color.jpg’
}
});

``

If it’s not working for your example, double check to make sure your paths are correct. If it’s failing to load, you should see a 404 error in the console.

Best,

Hannah

3

As it turns out, depthTestAgainstTerrain seems to have been the issue. Turning it off allowed me to see the textured polygon. I see there's an option to use per point heights, which I figure could fix this issue without me having to permanently disable terrain depth testing.

However, that would require setting the height coordinate of each Cartesian3, and I don't really understand how to do that. I had been assuming until now that the Cartesian3 Z axis was up, but it seems I was probably wrong about that.

If I convert cartographic coords to cartesian using Cartesian3.fromDegrees, does that mean they're in ECEF (Z axis through poles ...?) or are they in local east, north, up coords (Z up as I'd orignally thought)?

4

Yes, Cartesian3 coordinates are in ECEF. You can add a height with var cartesian3 = Cartesian3.fromDegrees(lon, lat, height)

However, if you don’t give the polygon a height, it should conform to terrain by default if. You’ll just need to use perPositionHeight if you want it to float above the terrain.

-Hannah