5

我正在关注沙堡椭圆轮廓几何。我想知道是否有办法使椭圆线的宽度变宽?有使用 width 属性使多段线变宽的示例,但似乎没有办法制作 ellipseOutlineGeometry 对象。沙堡示例的末尾有一个 lineWidth 设置,但对此的更改似乎不会影响椭圆轮廓的宽度。

沙箱代码:

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

3 回答 3

13

我假设你在 Windows 上(你马上就会知道为什么)。

关于为什么总是返回 1 的简单答案scene.maximumAliasedLineWidth是因为这是您的网络浏览器允许的最大值。这也是为什么当你使用大于 1 的值时会出错的原因。当然这个答案只会导致更多的问题;所以这里有一个更详细的回应。

WebGL 规范声明实现支持最​​小线宽 1;并且没有要求支持大于 1 的线宽。实际上,所有 OpenGL 驱动程序都支持大于 1 的值;而且我确信您当前使用的硬件也可以。但是,Windows 上的所有主要 WebGL 实现实际上并不使用 OpenGL。

Chrome 和 Firefox 都使用称为ANGLE(几乎是原生图形层引擎)的库,它通过 DirectX 在 Windows 上实现 WebGL。ANGLE 本身就被认为是一种符合要求的实现。由于 ANGLE 选择只支持 1 的线宽(我不会解释为什么);这意味着 Chrome 和 Firefox 都无法在 Windows 上绘制更宽的线条(在此过程中让您和许多其他开发人员发疯)。

Internet Explorer 11 采用了类似的方法,尽管它们不使用 ANGLE,而是拥有自己的基于 DirectX 的自定义实现。更糟糕的是,虽然他们只声称支持 1 的线宽;浏览器本身总是画粗线(看起来在 3-5 像素宽之间)。所以在 IE 中不可能没有粗线。

在其他平台上实施;无论是Android、iOS,还是Mac OS,都没有这个问题。您的原始代码片段将在这些平台上绘制粗细为 2 的线条,在 Windows 上绘制粗细为 1 的线条。

http://webglreport.com/是学习浏览器所使用的 WebGL 实现的便捷站点。它可以告诉您是否使用 ANGLE、您的许多功能的最小值和最大值是多少,以及无数其他信息(如果您是图形程序员,您可能只关心这些信息)。

于 2014-08-20T13:04:16.973 回答
0

我在 Windows 上使用 Firefox。我去了http://webglreport.com/并确认了这些值。但我用更粗的线渲染折线(MultiGeometry)没有任何问题。问题仅在于多边形。

于 2015-10-19T20:09:49.897 回答
0

上面的答案是旧的。

自 2017 年初以来,Chrome 和 Firefox 都发布了 WebGL2。为了支持 WebGL2,他们必须使用 OpenGL 3.3“核心”配置文件或更高版本。“核心”配置文件说明了这一点

E.2.1 已弃用...功能

  • 宽线 - LineWidth 值大于 1.0 将产生INVALID_VALUE错误。

如果您只使用 WebGL1,这并不重要,浏览器仍然使用相同的系统。

换句话说,在大多数情况下,自 2017 年以来,桌面几乎不支持粗线。OpenGL ES 规范没有这条线,所以你可以在 Android 和 iOS 以及类似设备上得到粗线,但基本上你应该假设你不能

要获得粗线,您需要从三角形生成它们

于 2020-06-10T14:05:46.853 回答