在Cesium地图中如何改变EllipseOutlineGeometry的宽度？

问题描述 投票：5回答：3

我是按照沙堡椭圆轮廓几何学来做的。 我想知道是否有办法让椭圆线的宽度变宽？ 有一些使用宽度属性使多条线变宽的例子，但似乎没有办法使椭圆OutlineGeometry对象变宽。沙堡的例子在最后有一个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?
        }
    })
}));
javascript map webgl ellipse cesium
3个回答
12
投票

我假设你使用的是Windows系统（你马上就会知道为什么）。

简单的答案，为什么 scene.maximumAliasedLineWidth 总是返回1是因为那是你的网络浏览器允许的最大值。 这也是为什么当您使用大于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。

一个方便的网站可以了解你的浏览器所使用的WebGL实现情况。http:/webglreport.com. 它可以告诉你，如果你使用的是ANGLE，你的许多功能的最小值和最大值是什么，以及无数的其他信息（如果你是一个图形程序员，你可能只关心）。

0
投票

我在Windows上使用Firefox。我去了 http:/webglreport.com 并确认了这些值。但我在渲染线条较粗的多边形（MultiGeometry）时没有任何问题。问题只出在多边形上。

0
投票

上面的答案是旧的。

从2017年初开始，Chrome和Firefox都运载了WebGL2。为了支持WebGL2，他们必须使用OpenGL 3.3 "核心 "配置文件或更高版本。"核心 "配置文件中这样写道

E.2.1 废弃的...... 特性

  • 宽线--LineWidth值大于1.0时，会产生一个 "宽线"。INVALID_VALUE 错误。

如果你只用WebGL1确实没关系，浏览器下面还是用同样的系统。

换句话说，在大多数情况下，自2017年以来，桌面上根本很少支持粗线条。OpenGL ES规范没有这条线，所以你有可能在Android和iOS以及类似的设备上获得粗线条，但基本上你应该认为你不能

为了得到粗线条，你需要 由三角形生成

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.