【问题标题】:How do you change the width on an EllipseOutlineGeometry in Cesium map?如何在 Cesium 地图中更改 EllipseOutlineGeometry 的宽度?
【发布时间】:2014-08-19 23:40:36
【问题描述】:

我正在关注沙堡椭圆轮廓几何。我想知道是否有办法使椭圆线的宽度变宽?有使用 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?
        }
    })
}));

【问题讨论】:

  • 实际上,唯一可能的值似乎是 1。更大或更小的值会引发 WebGL 呈现错误。 scene.maximumAliasedLineWidth 参考建议检查 glGet(ALIASED_LINE_WIDTH_RANGE) 但我无法在 Sandcastle 实时编码界面中调用此方法(我从未直接操作过 WebGL)...
  • 我也遇到了 WebGL 错误,只是假设我没有将这个值更改为正确的值。听起来 Matthew Amato 在下面对此进行了整理。

标签: javascript map webgl ellipse cesium


【解决方案1】:

我假设您使用的是 Windows(您马上就会知道原因)。

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

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

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

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

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

http://webglreport.com/ 是一个方便了解您的浏览器正在使用的 WebGL 实现的网站。它可以告诉您是否使用 ANGLE、您的许多功能的最小值和最大值是多少,以及无数其他信息(您可能只关心图形程序员)。

【讨论】:

  • 感谢 Matthew Amato 的精彩解释。我正在使用 Firefox 和 Windows,这解释了我看到的错误和行为。
  • 太棒了。我在 Windows 上使用 Chrome。所以结论是,他想做的事情是不可能的,可惜了。
【解决方案2】:

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

【讨论】:

    【解决方案3】:

    上面的答案都是旧的。

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

    E.2.1 已弃用...功能

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

    如果你只使用 WebGL1 也没关系,浏览器仍然在下面使用相同的系统。

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

    要获得粗线,您需要generate them from triangles

    【讨论】:

      猜你喜欢
      • 2018-05-21
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-03-06
      • 2017-07-23
      • 1970-01-01
      相关资源
      最近更新 更多