How to shear a cylinder entity (or a cone, actually)

1. A concise explanation of the problem you’re experiencing.

I’m writing an app using CesiumJS that are used by non-powered gliders (e.g. paragliders). When standing on a mountain, I’d like to know what places I can reach with my current glide angle. I’m showing this to the user by displaying a half-transparent cone (a cylinder with zero width at the top) with a specific angle. The user then can work out where to land or if a specific landing field can be reached. This works without problems so far.

Now I want to take wind speed and direction of the overall wind into account. My first though would be to rotate the cone around the top tip, but for steeper angles it shows that this is the wrong approach. I think it’s more correct when I transform the cone and shear it in the wind direction:

The page shows how to construct the matrix, but I can’t find a way to apply it to an entity. See my current code below.

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

My current code looks like this:

I add a cylinder entity. In the lines you can see my previous approach, specifying a quaternion as orientation to rotate the cone. I’d like to shear the cylinder, though.

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

See my explanation in 1.

4. The Cesium version you’re using, your operating system and browser.

Currently using CesiumJS 1.66.


Does anyone have an idea how to do that? Do I have to write my own geometry object that generates cylinder points that are already sheared?

Regards, Michael