cesium着色器学习系列1-Geometry对象

参照网页的一些demo可知,primitive就是对geometry的二次封装。

primitive需要指定geometryInstance属性和appearance属性,因此脱离entity和primitive来实现图元的渲染,则需要构造geometry和appearance。

首先来看geometry,查阅API可知有四个属性

attributesGeometryAttributes Attributes, which make up the geometry's vertices.
primitiveTypePrimitiveTypePrimitiveType.TRIANGLESoptionalThe type of primitives in the geometry.
indicesUint16Array | Uint32Array optionalOptional index data that determines the primitives in the geometry.
boundingSphereBoundingSphere

 

GeometryAttributes中一共有6个属性

bitangent: bitangent属性(标准化),用于凹凸映射等切线空间效果。//暂未明白如何使用

color :  顶点坐标的颜色

normal : 法线,通常用于光照  //暂未明白如何使用

position :顶点位置属性

st :纹理坐标

tangent :正切属性(规范化),用于凹凸映射等切线空间效果。  //暂未明白

先打开primitiveType 可以发现,其实这里面的type与webgl原生的draw type就完全一致

以上六个属性均由GeometryAttribute构造生成,GeometryAttribute的API为:

componentDatatypeComponentDatatype optionalThe datatype of each component in the attribute, e.g., individual elements in values.
componentsPerAttributeNumber optionalA number between 1 and 4 that defines the number of components in an attributes.
normalizeBooleanfalseoptionalWhen true and componentDatatype is an integer format, indicate that the components should be mapped to the range [0, 1] (unsigned) or [-1, 1] (signed) when they are accessed as floating-point for rendering.
valuesTypedArray optionalThe values for the attributes stored in a typed array.

componentDatatype:数据类型

componentsPerAttribute:每个元素取的value中的个数,可理解为webgl中的步长

normalize:是否归一化

values:坐标数组

indice就不用说了,索引坐标,索引position。

boundingSphere:

包围球,查看API可发现有响应的多种方式生成。

根据以上知识:构造三角扇。

var p1 = Cesium.Cartesian3.fromDegrees(120.6822, 50.9247, 10);
var p2 = Cesium.Cartesian3.fromDegrees(120.6822, 38.9247, 10);
var p3 = Cesium.Cartesian3.fromDegrees(133.6822, 38.9247, 10);
var p4 = Cesium.Cartesian3.fromDegrees(133.6822, 50.9247, 10);
var positions = new Float64Array([
    p1.x, p1.y, p1.z,
    p2.x, p2.y, p2.z,
    p3.x, p3.y, p3.z,
    p4.x, p4.y, p4.z
]);
var colors = new Float32Array([
    1.0, 0.0, 0.0, 1.0,
    0.0, 1.0, 0.0, 1.0,
    1.0, 1.0, 0.0, 1.0,
    1.0, 1.0, 1.0, 1.0
]);
var geometry = new Cesium.Geometry({
    attributes: {
        position: new Cesium.GeometryAttribute({
            componentDatatype: Cesium.ComponentDatatype.DOUBLE,
            componentsPerAttribute: 3,
            values: positions
        }),
        color: new Cesium.GeometryAttribute({
            componentDatatype: Cesium.ComponentDatatype.FLOAT,
            componentsPerAttribute: 4,
            values: colors
        })
    },
    //索引
    indices: new Uint16Array([
        0, 1, 2,  //第一个三角形用的坐标点
        1, 2, 3  //第二个三角形用的坐标点
    ]),
    //绘制类型
    primitiveType: Cesium.PrimitiveType.TRIANGLE_FAN ,
    boundingSphere: Cesium.BoundingSphere.fromVertices(positions)
});
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,您想了解有关自定义几何体的内容,我很乐意为您解答。首先,让我们了解一下什么是几何体。 在Cesium中,几何体是由一些点、线和三角形组成的图形。几何体可以在地球上显示各种形状的物体,如建筑、飞机、汽车等。Cesium提供了一些内置的几何体,如BoxGeometry、CylinderGeometry、SphereGeometry等,但是有时候我们需要展示一些特殊形状的物体,这时候就需要自定义几何体了。 下面是一个简单的自定义几何体的例子: ```javascript var geometry = new Cesium.Geometry({ attributes: { position: new Cesium.GeometryAttribute({ componentDatatype: Cesium.ComponentDatatype.DOUBLE, componentsPerAttribute: 3, values: new Float64Array([ 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 1.0, 0.0, 0.0, 1.0, 0.0 ]) }) }, indices: new Uint16Array([ 0, 1, 2, 0, 2, 3 ]), primitiveType: Cesium.PrimitiveType.TRIANGLES }); ``` 这个例子中,我们创建了一个由四个点组成的矩形,并用这些点的索引定义了两个三角形。这个几何体可以用来在地球上显示一个矩形。 接下来,让我们逐步了解这个例子中的代码。首先是Cesium.GeometryAttribute。 Cesium.GeometryAttribute是几何体属性的容器。在这个例子中,我们定义了一个名为position的属性,它有三个分量:x、y和z。这个属性使用的数据类型是Cesium.ComponentDatatype.DOUBLE,表示每个分量有一个双精度浮点数。componentsPerAttribute表示每个属性有几个分量。在这个例子中,每个属性都有三个分量。最后,我们用一个Float64Array数组来定义这个属性的值。 接下来是indices,它定义了几何体使用哪些点来组成三角形。在这个例子中,我们定义了两个三角形,每个三角形使用三个顶点。在indices数组中,我们用顶点在attributes数组中的索引来定义每个三角形。 最后,我们定义了几何体的primitiveType,它表示几何体的类型。在这个例子中,我们使用的是三角形类型,所以primitiveType为Cesium.PrimitiveType.TRIANGLES。 希望这个例子可以帮助您更好地理解自定义几何体的实现。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值