CODEWITHSUNDEEP
javascriptdictionarywebglellipsecesiumjs
spartikus
spartikus

Reputation: 2912

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

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?
        }
    })
}));

Upvotes: 7

Views: 4661

Answers (3)

user128511
user128511

Reputation:

The answers above are old.

Since the beginning of 2017 Chrome and Firefox both shipped WebGL2. In order to support WebGL2 they had to use the OpenGL 3.3 "core" profile or higher. The "core" profile says this

E.2.1 Deprecated ... Features

  • Wide lines - LineWidth values greater than 1.0 will generate an INVALID_VALUE error.

It does matter if you only use WebGL1, the browser still still use the same system underneath.

In other words, for the most part, thick lines are rarely supported on desktop at all since 2017. The OpenGL ES spec doesn't have that line so it's possible you can get thick lines on Android and iOS and similar devices but basically you should assume you can't

To get thick lines you'll need to generate them from triangles

Upvotes: 0

Michael Deutch
Michael Deutch

Reputation: 11

I'm using Firefox on Windows. I went to http://webglreport.com/ and confirmed those values. But I'm rendering polylines (MultiGeometry) with thicker lines without any problems. The problem is only with polygons.

Upvotes: 1

Matthew Amato
Matthew Amato

Reputation: 2022

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).

Upvotes: 17

Related Questions