How do you change the width on an EllipseOutlineGeometry in Cesium map?

Question

I am following the sandcastle ellipse Outline Geometry. I am wondering if there is anyway to make the ellipse line width wider? There are examples of making a polyline wider using the width attribute but there does not seem to be a way to make an ellipseOutlineGeometry object. The sandcastle example has a lineWidth setting at the end but changes to this do not seem to affect the width of the ellipse outline.

sandbox code:

// Create the ellipse geometry.  To extrude, specify the
// height of the geometry with the extrudedHeight option.
// The numberOfVerticalLines option can be used to specify
// the number of lines connecting the top and bottom of the
// ellipse.
ellipseOutlineGeometry = new Cesium.EllipseOutlineGeometry({
    center : Cesium.Cartesian3.fromDegrees(-95.0, 35.0),
    semiMinorAxis : 200000.0,
    semiMajorAxis : 300000.0,
    extrudedHeight : 150000.0,
   rotation : Cesium.Math.toRadians(45),
   numberOfVerticalLines: 10
});
// Create a geometry instance using the ellipse geometry
// created above.
var extrudedEllipseOutlineInstance = new Cesium.GeometryInstance({
    geometry : ellipseOutlineGeometry,
    attributes : {
        color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.WHITE)
    }
});

// Add both ellipse outline instances to primitives.
 primitives.add(new Cesium.Primitive({
    geometryInstances : [ellipseOutlineInstance, extrudedEllipseOutlineInstance],
    appearance : new Cesium.PerInstanceColorAppearance({
        flat : true,
        renderState : {
            depthTest : {
                enabled : true
            },
             lineWidth : Math.min(2.0, scene.maximumAliasedLineWidth)  //changes here dont seem to affect the actual size?
        }
    })
}));

Answer 1

I'm going to assume you are on Windows (You'll know why in a minute).

The simple answer as to why scene.maximumAliasedLineWidth always returns 1 is because that's the maximum value allowed by your web browser. This is also why there is an error when you use values greater than 1. Of course this answer only leads to more questions; so here's a more detailed response.

The WebGL specification states that implementations support a minimum line width of 1; and there is no requirement to support line widths greater than 1. In practice, all OpenGL drivers support values greater than 1; and I'm sure that the hardware you are currently using does as well. However, all major WebGL implementations on Windows do not actually use OpenGL.

Chrome and Firefox both use a library known as ANGLE (Almost Native Graphics Layer Engine) which implements WebGL on Windows via DirectX. ANGLE is considered a conformant implementation in it's own right. Since ANGLE chooses to only support a line width of 1 (I won't go into why); that means that both Chrome and Firefox are incapable of drawing wider lines on Windows (driving you and many other developers crazy in the process).

Internet Explorer 11 takes a similar approach, though they don't use ANGLE and instead have their own custom DirectX based implementation. What's worse is that while they only claim to support a line width of 1; The browser itself always draws thick lines (that look to be between 3-5 pixels wide) instead. So in IE it's impossible not to have thick lines.

Implementation on other platforms; whether it's Android, iOS, or Mac OS, do not have this problem. Your origin code snippet will draw lines with a thickness of 2 on those platforms and 1 on Windows.

A handy site for learning about the WebGL implementation your browser is using is http://webglreport.com/. It can tell you if you're using ANGLE, what your min and max values for many features are, and a myriad of other information (that you may only care about if you're a graphics programmer).