首页 > 其他分享 >Cesium进阶学习一、Primitive

Cesium进阶学习一、Primitive

时间：2024-10-08 10:50:47浏览次数：10  
标签：Primitive const 进阶 normal geometry Cartesian3 Cesium new

一、primitive简介

	1、概念：[Primitive](https://cesium.com/learn/cesiumjs/ref-doc/Primitive.html) 是Cesium中用于绘制几何图形的另一个重要的接口，相对于[Entity](https://cesium.com/learn/cesiumjs/ref-doc/Primitive.html)来说，它更接近渲染引擎底层，主要面向图形开发人员，意味着使用Primitive来绘制几何图形需要您具备一定的图形开发知识。

	2、引用示例
	在场景中添加 Entity 是通过viewer.entities.add方法，而添加Primitive则是通过viewer.scene.primitives.add方法。下面创建一个圆几何，通过Primitive添加到场景：

  const circle = new Cesium.CircleGeometry({
      center: Cesium.Cartesian3.fromDegrees(110.0, 30.0, 500),
      radius: 200.0
  });
  const geometry = Cesium.CircleGeometry.createGeometry(circle); 
  const instance = new Cesium.GeometryInstance({
      geometry: geometry, 
  });

  viewer.scene.primitives.add(new Cesium.Primitive({
      geometryInstances: instance,
      appearance: new Cesium.MaterialAppearance({
          material: new Cesium.Material({
              fabric: {
                  type: "Color",
                  uniforms: {
                      color: Cesium.Color.BLUE
                  }
              }
          })
      })
  }));

3、总结

一个Primitive实例必须设置geometryInstances和appearance两个属性,才能正确地在场景中显示出来。geometryInstances代表要显示的几何形状，而appearance则代码该几何的外观样式。
为什么要有两套绘制图形的接口：
1、Entity是Cesium封装的比较高级的绘图接口，主要面向普通的开发人员，即使您没有任何图形开发知识，您也能使用Entity在场景中快速绘制各种几何形状。
2、Primitive是Cesium封装的更低级绘图接口，绘图方式更接近渲染引擎底层，但又不至于直接使用WebGL底层的绘图接口,其主要面向图形开发人员。
3、使用Primitive的第一大优势是提供了GeometryInstance 即几何实例化的技术，在渲染大量静态数据时很有用，能够减少CPU开销，充分利用GPU的性能。
4、使用Primitive的第二大优势是提供了顶点着色器和片元着色器的编程接口，可以充分发挥您的图形开发技术。

二、primitive的构成

1、Primitive 主要由以下两部分构成：Geometry 几何形状，用于定义Primitive显示的几何形状；Appearance 外观，用于决定Primitive的着色或渲染。
2、通俗来说Geometry就是骨架，而Appearance就是皮肤。一个 Primitive 可以包含多个Geometry，但是只能有一个Appearance，比如下面的代码通过一个Primitive创建10个Geometry：

let p = [110.0, 30.0];
    let instances = [];
    for (let i = 0; i < 10; i++) {
        const instance = new Cesium.GeometryInstance({
            geometry: new Cesium.EllipseGeometry({
                center: Cesium.Cartesian3.fromDegrees(p[0], p[1]),
                semiMinorAxis: 2000.0,
                semiMajorAxis: 2000.0,
                height:1000*i
            })
        });

        instances.push(instance);

    }

    viewer.scene.primitives.add(new Cesium.Primitive({
        geometryInstances: instances,
        appearance: new Cesium.EllipsoidSurfaceAppearance({
            material: Cesium.Material.fromType('Color')
        })
    }));

在这里插入图片描述

3、每个Geometry是通过GeometryInstance来进行实例化的，通过GeometryInstance对Geometry进行实例化，通过GeometryInstance对Geometry进行实例化，同一个Geometry可以被实例化多次。这对于展示大量数据时很有用，比如有100万个BoxGeometry需要被显示，我们只需要创建一个BoxGeometry，然后通GeometryInstance来设置每一个的大小、位置、颜色等。代码效果如下：

 	let p = [110.0, 30.0];
    let instances = [];
    let boxGeometry = Cesium.BoxGeometry.fromDimensions({
         dimensions: new Cesium.Cartesian3(100, 100, 100)
    })
    for (let i = 0; i < 1000000; i++) { 
        const instance = new Cesium.GeometryInstance({
            geometry: boxGeometry,
            modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(p[0] + Math.random() , p[1] + Math.random()  , 200+Math.random()*100))//通过modelMatrix设置不同的位置

        });
        instances.push(instance);
    }
    viewer.scene.primitives.add(new Cesium.Primitive({
        geometryInstances: instances,
        appearance: new Cesium.EllipsoidSurfaceAppearance({
            material: Cesium.Material.fromType('Color')
        })
    }));

在这里插入图片描述

4、我们还可以通过对GeometryInstance设置一些属性来进行Geometry的识别，当一个Primitive中装载有多个Geometry时，我们在鼠标交互的时候如果希望知道拾取到的是那个Geometry，那么就可以通GeometryInstance设置一个id，这样我们就知道拾取到的是哪个Geometry。代码效果如下：

	let p = [110.0, 30.0];
	let instances = [];
	let boxGeometry = Cesium.BoxGeometry.fromDimensions({
    dimensions: new Cesium.Cartesian3(100, 100, 100)
	})
	for (let i = 0; i < 1000; i++) {
	    const instance = new Cesium.GeometryInstance({
	        geometry: boxGeometry,
	        modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(p[0] + Math.random(), p[1] + Math.random(), 200 + Math.random() * 100)),
	        id: "BoxGeometry" + i
	    });
	    instances.push(instance);
	}
	viewer.scene.primitives.add(new Cesium.Primitive({
	    geometryInstances: instances,
	    appearance: new Cesium.EllipsoidSurfaceAppearance({
	        material: Cesium.Material.fromType('Color')
	    })
	}));
	new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas).setInputAction(e => {
	    let pick = viewer.scene.pick(e.position);
	    console.log(pick);
	}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

在这里插入图片描述

5、需要注意的是，因为一个Primitive只能设置一个Appearance，所以当一个Primitive装载有多个Geometry时，这些Geometry只能具有相同的外观。我们可以通过PerInstanceColorAppearance类型的外观为每个Geometry实例设置一个颜色。代码效果如下：

let p = [110.0, 30.0];
	let instances = []; 
	let boxGeometry = Cesium.BoxGeometry.fromDimensions({
	    dimensions: new Cesium.Cartesian3(100, 100, 100)
	})
	for (let i = 0; i < 100; i++) {
	    const instance = new Cesium.GeometryInstance({
	        geometry: boxGeometry,
	        modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(p[0] + Math.random() / 10, p[1] + Math.random() / 10, 200 + Math.random() * 100)),
	        attributes: {
	            color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromRandom({ alpha: 1 }))
	        }
	    });
	    instances.push(instance);
	}
	viewer.scene.primitives.add(new Cesium.Primitive({
	    geometryInstances: instances,
	    appearance: new Cesium.PerInstanceColorAppearance({
	        flat: true,
	        translucent: false
	    })
	}));

在这里插入图片描述

三、primitive的优缺点

1、优点：性能好，使用Primitive可以将多个Geometry合并为一个大的Geometry减少CPU的开销，更充分利用GPU。合并过程使用WebWorker不影响UI响应。灵活度高，Primitive由Geometry和Appearance构成，我们可以单独修改它们。可编程性强，可以操作顶点着色器和片元着色器，还可以自定义渲染。

2、缺点：使用更为复杂，需要编写更多的代码，需要更多的图形学知识。组合图形对于动态数据不是很友好，比如使用Primitive组合多个Geometry时无法更新Geometry。

3、综合对比：通过Entity和Primitve分别创建100万个Box进行性能测试，帧率相差很大。海量数据的应用必选primitive

Entity创建Box：

	viewer.entities.add({
	     position: Cesium.Cartesian3.fromDegrees(110.0, 30.0, 500),
	     box: {
	         dimensions: new Cesium.Cartesian3(500.0, 500.0, 500.0),
	         material:Cesium.Color.BLUE
	     }
	 })

在这里插入图片描述

Primitive创建Box：

	const box = Cesium.BoxGeometry.fromDimensions({
	     dimensions: new Cesium.Cartesian3(500.0, 500.0, 500.0)
	 });
	 const geometry = Cesium.BoxGeometry.createGeometry(box);
	 const instance = new Cesium.GeometryInstance({
	     geometry: geometry,
	     modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(110.0, 30.0, 500)),
	 });
	 viewer.scene.primitives.add(new Cesium.Primitive({
	     geometryInstances: instance,
	     appearance: new Cesium.MaterialAppearance({
	         material: new Cesium.Material({
	             fabric: {
	                 type: "Color",
	                 uniforms: {
	                     color: Cesium.Color.BLUE
	                 }
	             }
	         })
	     })
	 }));

在这里插入图片描述

四、Primitive的分类
Cesium中除了Primitive类以外，还有一些以Primitive结尾的类，这些类的使用方式和Primitive类似，可以将其视为Primitive的同类。

1、GroundPrimitive：贴地Primitive，将几何图形贴地显示，适用于平面类型的Geometry， 比如CircleGeometry、PolygonGeometry、RectangleGeometry。贴地Primitive即是将图形从上往下贴，可以通过classificationType属性设置贴的目标类型。

在这里插入图片描述
在这里插入图片描述

2、ClassificationPrimitive：分类Primitive，将几何体贴模型高亮显示，适用于体类型的Geometry 比如BoxGeometry、 CylinderGeometry，也适用于设置拉伸后的平面类型的Geometry。分类Primitive常用于高亮显示模型，比如倾斜模型的分层单体化或者分户单体化就可以使用该类来实现。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3、GroundPolylinePrimitive：贴地线，仅用于GroundPolylineGeometry

在这里插入图片描述

4、PointPrimitive：点，不直接new 而是通过下方的PointPrimitiveCollection .add方法 添加

在这里插入图片描述

5、PointPrimitiveCollection：点集合

在这里插入图片描述

6、VoxelPrimitive

在这里插入图片描述在这里插入图片描述

7、DebugCameraPrimitive：相机可视化，常用于调试一个相机的相关参数

在这里插入图片描述
在这里插入图片描述
五、Primitive的几何类型

官方分类，总共有12种，并且每一种都有对应的边线模式的Geometry类型

在这里插入图片描述
在这里插入图片描述

1、BoxGeometry 盒子几何，比如长方体、正方体创建一个盒子，我们通常是通BoxGeometry.fromDimensions()方法，而不是new BoxGeometry()，因为fromDimensions可以直接设置盒子的长宽高。BoxGeometry没有提供设置位置的属性，所以我们需要通过GeometryInstance的modelMatrix属性将其定位到地球上正确的位置。

const box = Cesium.BoxGeometry.fromDimensions({
	    dimensions: new Cesium.Cartesian3(500.0, 500.0, 500.0)
	});
	const geometry = Cesium.BoxGeometry.createGeometry(box);
	const instance = new Cesium.GeometryInstance({
	    geometry: geometry,
	    modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(110.0, 30.0, 500)),
	});
	viewer.scene.further/primitives.add(new Cesium.Primitive({
	    geometryInstances: instance,
	    appearance: new Cesium.MaterialAppearance({
	        material: new Cesium.Material({
	            fabric: {
	                type: "Color",
	                uniforms: {
	                    color: Cesium.Color.BLUE
	                }
	            }
	        })
	    })
	}));

在这里插入图片描述

2、CircleGeometry 圆几何，CircleGeometry通过center属性设置定位，但是高度需要通过height属性来设置

const circle = new Cesium.CircleGeometry({
	  center: Cesium.Cartesian3.fromDegrees(110.0, 30.0, 500),
	  radius: 200.0,
	  height:500
	});
	const geometry = Cesium.CircleGeometry.createGeometry(circle);
	const instance = new Cesium.GeometryInstance({
	  geometry: geometry,
	});
	viewer.scene.further/primitives.add(new Cesium.Primitive({
	  geometryInstances: instance,
	  appearance: new Cesium.MaterialAppearance({
	      material: new Cesium.Material({
	          fabric: {
	              type: "Color",
	              uniforms: {
	                  color: Cesium.Color.BLUE
	              }
	          }
	      })
	  })
	}));

在这里插入图片描述

CircleGeometry设置拉伸高度后也可以看做是一个圆柱，拉伸高度是指从当前圆的高度拉伸到那个高度，比如当前圆的高度为500，设置拉伸高度为100，那么就是从上往下拉伸。

	const circle = new Cesium.CircleGeometry({
	     center: Cesium.Cartesian3.fromDegrees(110.0, 30.0, 500),
	     radius: 200.0,
	     height:500,
	     extrudedHeight:100
 	});

在这里插入图片描述

3、CorridorGeometry 带宽度的线几何，也有人称为走廊，坐标中的z值会被忽略，如果需要设置高度，需要通过height属性设置。

	const circle = new Cesium.CorridorGeometry({
	 positions: Cesium.Cartesian3.fromDegreesArrayHeights([110.0, 30.0,1000, 110.1, 30.0,1000, 110.1, 30.1,1000]),
	 width: 1000,
	 height:1000,
	});
	const geometry = Cesium.CorridorGeometry.createGeometry(circle);
	const instance = new Cesium.GeometryInstance({
	 geometry: geometry,
	}); 
	viewer.scene.further/primitives.add(new Cesium.Primitive({
	 geometryInstances: instance,
	 appearance: new Cesium.MaterialAppearance({
	     material: new Cesium.Material({
	         fabric: {
	             type: "Color",
	             uniforms: {
	                 color: Cesium.Color.BLUE
	             }
	         }
	     })
	 })
	}));

在这里插入图片描述

可以通过cornerType属性设置转角样式

在这里插入图片描述

设置拉伸高度后，更有立体感

	const circle = new Cesium.CorridorGeometry({
	  positions: Cesium.Cartesian3.fromDegreesArrayHeights([110.0, 30.0,1000, 110.1, 30.0,1000, 110.1, 30.1,1000]),
	  width: 1000,
	  height:1000,
	  extrudedHeight:100
	});

在这里插入图片描述

4、CylinderGeometry 椎体几何，可用于圆柱、圆锥、截头圆锥。

	//圆柱：
	const cylinder = new Cesium.CylinderGeometry({
	 length: 1000,
	 topRadius: 500,
	 bottomRadius: 500,
	});
	const geometry = Cesium.CylinderGeometry.createGeometry(cylinder);
	const instance = new Cesium.GeometryInstance({
	 geometry: geometry,
	 modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(110.0, 30.0, 500)),
	});
	viewer.scene.further/primitives.add(new Cesium.Primitive({
	 geometryInstances: instance,
	 appearance: new Cesium.MaterialAppearance({
	     material: new Cesium.Material({
	         fabric: {
	             type: "Color",
	             uniforms: {
	                 color: Cesium.Color.BLUE
	             }
	         }
	     })
	 })
	}));

在这里插入图片描述

	//椎体：
	const cylinder = new Cesium.CylinderGeometry({
	 length: 1000,
	 topRadius: 0,
	 bottomRadius: 500,
	 slices:4 //标识四棱锥
	});
	const geometry = Cesium.CylinderGeometry.createGeometry(cylinder);

在这里插入图片描述

5、EllipseGeometry 椭圆几何，EllipseGeometry和CircleGeometry很相似，但是可以设置长半径和短半径。

const ellipse = new Cesium.EllipseGeometry({
	     center: Cesium.Cartesian3.fromDegrees(110.0, 30.0, 500),
	     semiMajorAxis: 500.0,
	     semiMinorAxis: 1500.0,
	     height: 300,
	 });
	 const geometry = Cesium.EllipseGeometry.createGeometry(ellipse);
	 const instance = new Cesium.GeometryInstance({
	     geometry: geometry, 
	 });

	 viewer.scene.further/primitives.add(new Cesium.Primitive({
	     geometryInstances: instance,
	     appearance: new Cesium.MaterialAppearance({
	         material: new Cesium.Material({
	             fabric: {
	                 type: "Color",
	                 uniforms: {
	                     color: Cesium.Color.BLUE
	                 }
	             }
	         })
	     })
	 }));

在这里插入图片描述

椭圆也可以设置拉伸高度

const ellipse = new Cesium.EllipseGeometry({
	     center: Cesium.Cartesian3.fromDegrees(110.0, 30.0, 500),
	     semiMajorAxis: 500.0,
	     semiMinorAxis: 1500.0,
	     height: 300,
	     extrudedHeight:800
	 });

在这里插入图片描述

6、EllipsoidGeometry 椭球体几何

const ellipsoid = new Cesium.EllipsoidGeometry({ 
	     radii: new Cesium.Cartesian3(1000.0, 800.0, 500.0)
	 });
	 const geometry = Cesium.EllipsoidGeometry.createGeometry(ellipsoid);
	 const instance = new Cesium.GeometryInstance({
	     geometry: geometry, 
	     modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(110.0, 30.0, 500)),
	 });

	 viewer.scene.further/primitives.add(new Cesium.Primitive({
	     geometryInstances: instance,
	     appearance: new Cesium.MaterialAppearance({
	         material: new Cesium.Material({
	             fabric: {
	                 type: "Color",
	                 uniforms: {
	                     color: Cesium.Color.BLUE
	                 }
	             }
	         })
	     })
	 }));

将三个方向的半径设置为相等的值后得到的就是一个正球体
const ellipsoid = new Cesium.EllipsoidGeometry({ 
     radii: new Cesium.Cartesian3(1000.0, 1000.0, 1000.0)
 });

在这里插入图片描述

7、RectangleGeometry 矩形几何，我们一般会从一个点集中获取一个Rectangle即这些数据的外包矩形

let positions = [
     [108.95959, 34.220223, 435],
     [108.95922, 34.220054, 435],
     [108.959141, 34.219439, 435],
     [108.959754, 34.219573, 435],
     [108.959572, 34.21978, 435]
 ]
 positions = Cesium.Cartesian3.fromDegreesArrayHeights([].concat.apply([], positions));

 const rectangle = new Cesium.RectangleGeometry({ 
     rectangle: Cesium.Rectangle.fromCartesianArray(positions),
     height: 20.0
 });
 const geometry = Cesium.RectangleGeometry.createGeometry(rectangle);
 const instance = new Cesium.GeometryInstance({
     geometry: geometry,
 });

 viewer.scene.further/primitives.add(new Cesium.Primitive({
     geometryInstances: instance,
     appearance: new Cesium.MaterialAppearance({
         material: new Cesium.Material({
             fabric: {
                 type: "Color",
                 uniforms: {
                     color: Cesium.Color.BLUE
                 }
             }
         })
     })
 }));

RectangleGeometry也可以设置拉伸高度，变成体
const rectangle = new Cesium.RectangleGeometry({ 
     rectangle: Cesium.Rectangle.fromCartesianArray(positions),
     height: 20.0,
     extrudedHeight:100
 });

在这里插入图片描述
在这里插入图片描述

8、PolygonGeometry 多边形几何

let positions = [
     [108.95959, 34.220223, 435],
     [108.95922, 34.220054, 435],
     [108.959141, 34.219439, 435],
     [108.959754, 34.219573, 435],
     [108.959572, 34.21978, 435]
 ]
 positions = Cesium.Cartesian3.fromDegreesArrayHeights([].concat.apply([], positions));

 const polygon = new Cesium.PolygonGeometry({
     polygonHierarchy: new Cesium.PolygonHierarchy(positions) 
 });
 const geometry = Cesium.PolygonGeometry.createGeometry(polygon);
 const instance = new Cesium.GeometryInstance({
     geometry: geometry,
 });

 viewer.scene.further/primitives.add(new Cesium.Primitive({
     geometryInstances: instance,
     appearance: new Cesium.MaterialAppearance({
         material: new Cesium.Material({
             fabric: {
                 type: "Color",
                 uniforms: {
                     color: Cesium.Color.BLUE
                 }
             }
         })
     })
 }));

多边形几何有两种方式设置其高度，第一种是启用顶点数组中的高度值
const polygon = new Cesium.PolygonGeometry({
     polygonHierarchy: new Cesium.PolygonHierarchy(positions) ,
     perPositionHeight:true
 });
第二种是设置height属性，这种方式会将所有点的高度设置为统一的值
const polygon = new Cesium.PolygonGeometry({
     polygonHierarchy: new Cesium.PolygonHierarchy(positions) ,
     height:300
 });
PolygonGeometry也可以设置拉伸高度
const polygon = new Cesium.PolygonGeometry({
  polygonHierarchy: new Cesium.PolygonHierarchy(positions) ,
     height:300,
     extrudedHeight:200
 });

在这里插入图片描述
在这里插入图片描述

9、PolylineGeometry 线几何

let positions = [
     [108.95959, 34.220223, 20],
     [108.95922, 34.220054, 33],
     [108.959141, 34.219439, 22],
     [108.959754, 34.219573, 43],
     [108.959572, 34.21978, 23]
 ]
 positions = Cesium.Cartesian3.fromDegreesArrayHeights([].concat.apply([], positions));

 const polyline = new Cesium.PolylineGeometry({
     positions: positions,
     width: 10.0
 });
 const geometry = Cesium.PolylineGeometry.createGeometry(polyline);
 const instance = new Cesium.GeometryInstance({
     geometry: geometry,
 });

 viewer.scene.further/primitives.add(new Cesium.Primitive({
     geometryInstances: instance,
     appearance: new Cesium.PolylineMaterialAppearance({
         material: new Cesium.Material({
             fabric: {
                 type: "Color",
                 uniforms: {
                     color: Cesium.Color.BLUE
                 }
             }
         })
     })
 }));

PolylineGeometry需要使用专门的PolylineAppearance外观。PolylineGometry支持传入顶点颜色，实现渐变样式。
let positions = [
     [108.95959, 34.220223, 20],
     [108.95922, 34.220054, 33],
     [108.959141, 34.219439, 22],
     [108.959754, 34.219573, 43],
     [108.959572, 34.21978, 23]
 ]
 let colors = [
     Cesium.Color.RED,
     Cesium.Color.GREEN,
     Cesium.Color.BLUE,
     Cesium.Color.YELLOW,
     Cesium.Color.WHITE

 ];
 positions = Cesium.Cartesian3.fromDegreesArrayHeights([].concat.apply([], positions));

 const polyline = new Cesium.PolylineGeometry({
     positions: positions,
     width: 10.0,
     colors: colors,
     colorsPerVertex: true
 });
 const geometry = Cesium.PolylineGeometry.createGeometry(polyline);
 const instance = new Cesium.GeometryInstance({
     geometry: geometry,
 });

 viewer.scene.further/primitives.add(new Cesium.Primitive({
     geometryInstances: instance,
     appearance: new Cesium.PolylineColorAppearance({
         translucent: false
     })
 }));

在这里插入图片描述
在这里插入图片描述

10、PolylineVolumeGeometry 按2D形状拉伸的折线，也可以称为管道。创建PolylineVolumeGeometry需要先创建它的切面形状，computeCircle方法用于创建一个圆形的切面形状。

let positions = [
    [108.95959, 34.220223, 20],
    [108.95922, 34.220054, 20],
    [108.959141, 34.219439, 25]
]

positions = Cesium.Cartesian3.fromDegreesArrayHeights([].concat.apply([], positions));

function computeCircle(radius) {
    const positions = [];
    for (let i = 0; i < 360; i++) {
        const radians = Cesium.Math.toRadians(i);
        positions.push(new Cesium.Cartesian2(radius * Math.cos(radians), radius * Math.sin(radians)));
    }
    return positions;
}

const geometry = new Cesium.PolylineVolumeGeometry({
    polylinePositions: positions,
    shapePositions: computeCircle(2)
});
const instance = new Cesium.GeometryInstance({
    geometry: geometry,
});

viewer.scene.further/primitives.add(new Cesium.Primitive({
    geometryInstances: instance,
    appearance: new Cesium.MaterialAppearance({
        material: new Cesium.Material({
            fabric: {
                type: "Color",
                uniforms: {
                    color: Cesium.Color.BLUE
                }
            }
        })
    })
}));

在这里插入图片描述

11、SphereGeometry 球体几何，球体几何和椭球体几何差不多

let sphere = new Cesium.SphereGeometry({
    radius: 100.0, 
});
const geometry = Cesium.SphereGeometry.createGeometry(sphere);
const instance = new Cesium.GeometryInstance({
    geometry: geometry,
    modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(110.0, 30.0, 500)),
});

viewer.scene.further/primitives.add(new Cesium.Primitive({
    geometryInstances: instance,
    appearance: new Cesium.MaterialAppearance({
        material: new Cesium.Material({
            fabric: {
                type: "Color",
                uniforms: {
                    color: Cesium.Color.BLUE
                }
            }
        })
    })
}));

在这里插入图片描述

12、WallGeometry 墙体几何

let positions = [
    [108.95959, 34.220223, 50],
    [108.95922, 34.220054, 50],
    [108.959141, 34.219439, 50],
    [108.959754, 34.219573, 50],
    [108.959572, 34.21978, 50]
]

positions = Cesium.Cartesian3.fromDegreesArrayHeights([].concat.apply([], positions));

const wall = new Cesium.WallGeometry({
    positions:positions
});
const geometry = Cesium.WallGeometry.createGeometry(wall);

const instance = new Cesium.GeometryInstance({
    geometry: geometry,
});

viewer.scene.further/primitives.add(new Cesium.Primitive({
    geometryInstances: instance,
    appearance: new Cesium.MaterialAppearance({
        material: new Cesium.Material({
            fabric: {
                type: "Color",
                uniforms: {
                    color: Cesium.Color.BLUE
                }
            }
        })
    })
}));

在这里插入图片描述

除了上面12个基础的Geometry类型外，还有下面几种Geometry

a、FrustumGeometry&FrustumOutlineGeometry截椎体几何，常结合相机Camera来使用
b、GroundPolylineGeometry专门用于贴地线的几何，结合GroundPolylinePrimtive使用
c、PlaneGeometry&PlaneOutlineGeometry平面几何
d、CoplanarPolygonGeometry&CoplanarPolygonOutlineGeometry用于共面多边形的几何，PolygonGeometry绘制共面多边形可能会发生崩溃的可能，但是CoplanarPolygonGeometry不会。

六、Primitive自定义几何

Cesium自带的Geometry类型已经很丰富了，但有时也避免不了需要定义自己的Geometry类型。自定义Geometry类型，可以通过Cesium.Geometry类实现，这个类的构造函数如下：

在这里插入图片描述

1、attributes Geometry的顶点数据，包括位置、法线、纹理坐标等 
2、further/primitiveType 图元类型，点、线、三角形等，默认为三角形 
3、indices 顶点的索引 ，
4、boundingSphere 包围盒，包围盒用于剔除当前视椎体外的图形

我们以实现一个四棱锥为例，介绍如何定义自带的Geometry类型，四棱锥在Cesium内置的Geometry中已经有实现，可以通过创建CylinderGeometry设置边数为4，顶部半径为0，这里我们只是介绍如何去实现自定义类型的方法。比如：

在这里插入图片描述

第一步、 获取四棱锥的顶点数据
我们先看一下四棱锥的结构，四棱锥共5个面，4个测面，1个顶面。4个测面都是三角形，顶面是一个正方形，因为在图形渲染中没有正方形的概念，所以我们要将其拆分为2个三角形，所以一个四棱锥总共有4+2=6个三角形。每个三角形有3个点，所以一个四棱锥有3x6=18个顶点。虽然按照上面分析的一个四棱锥有18个顶点，但是我们可以看得出来其实很多点是重复的，我们可以通过索引的方式重用顶点，那么此时四棱锥应该只剩下5个顶点，如下图所示：
在这里插入图片描述

我们按照在原点建模的方式，设四棱锥的中心点位于坐标原点，半径为1，我们对每个点进行标号，那么此时可以得出下图的结果：
在这里插入图片描述

将坐标点存储到一个数组中

const positions = new Float64Array([
        0,0,-1,// 0
        1,-1,1,// 1
        -1,-1,1,//2
        -1,1,1,// 3
        1,1,1,//  4
])

第二步、 计算索引
有了顶点数据，我们就可以获取索引了，我们按照一定的顺序组织索引值。

const indices = new Uint16Array([
        0, 1, 2,//前
        0, 2, 3,//左
        0, 3, 4,//后
        0, 4, 1,//右
        1, 3, 2,//上
        1, 4, 3,//上
    ]);

第三步、 获取包围盒
如果包围盒计算不正确，可能会出现看不到渲染结果的情况，因为Cesium场景渲染会剔除掉当前视椎体外即看不到的图形（大多数渲染引擎应该都这样）。Cesium中的BoundingSphere类提供了fromVertices方法可以直接从顶点数组中获取包围盒对象。
let boundingSphere=Cesium.BoundingSphere.fromVertices(positions);

有了顶点、索引、包围盒后我们就可以创建Geometry了，完整代码如下：

const positions = new Float64Array([
        0,0,-1,// 0
        1,-1,1,// 1
        -1,-1,1,//2
        -1,1,1,// 3
        1,1,1,//  4
    ]);
    const indices = new Uint16Array([
        0, 1, 2,//前
        0, 2, 3,//左
        0, 3, 4,//后
        0, 4, 1,//右
        1, 3, 2,//上
        1, 4, 3,//上
    ]);
    let boundingSphere=Cesium.BoundingSphere.fromVertices(positions);
    let m = Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(110.0, 30.0, 10));
    let geometry = new Cesium.Geometry({
        attributes: {
            position: new Cesium.GeometryAttribute({
                componentDatatype: Cesium.ComponentDatatype.DOUBLE,
                componentsPerAttribute: 3,
                values: positions
            }) 
        },
        indices: indices,
        further/primitiveType: Cesium.PrimitiveType.TRIANGLES,
        boundingSphere:boundingSphere
    });

    const instance = new Cesium.GeometryInstance({
        geometry: geometry,
        modelMatrix: m,
        attributes: {
            color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
        }
    });

    viewer.scene.further/primitives.add(new Cesium.Primitive({
        geometryInstances: instance,
        appearance: new Cesium.PerInstanceColorAppearance({
            translucent: true
        })
    }));

因为我们几何的顶点是基于原点的，所以需要创建一个矩阵将其转换到地球的表面上来。虽然几何体的渲染结果是正确的，但是看起来有点别扭，因为菱角不分明，这是因为我们没有为Geometry的顶点设置正确的法线。
在这里插入图片描述

第四步、Primitive自定义几何设置法线。我们知道，在图形学中顶点的法线是所有与它有关的面的法线的加和的单位化向量。如下图所示：
在这里插入图片描述

红色点的法线是与其相关的三个面的法线的和，那么要计算这个点的法线，首先得先计算这三个面的法线，整个计算过程虽然不难，但是却很麻烦。每个顶点的法线计算之所以很麻烦，是因为计算每个顶点的法线都必须先计算其相关的面的法线。根据作者经验，按照上述方法计算出每个顶点正确的法线后，显示的结果还是与没有法线差别不大。这是因为我们使用索引的方式共享了顶点，四棱锥是有6个三角面共18个顶点，现在我们这5个具有法线的顶点通过索引的方式最后还是拆为了18个点，四棱锥的角比较尖锐，每个面的法线差别很大，所以这5个点的法线不能作为其在每个面上的点的法线。针对四棱锥这种角比较尖锐，每个面法线差别很大的情况，这里正确的做法是取消索引的方式共享顶点，按照每个三角面3个顶点来构造Geometry顶点数据，这样我们求取每个三角面每个顶点的法线，渲染出来的结果才会理想。

接下里修正坐标数组

	const positions = new Float64Array([
         // //前
        0, 0, -1,//  0
        1, -1, 1,//  1
        -1, -1, 1,// 2
        //左
        0, 0, -1,//  0 
        -1, -1, 1,// 2
        -1, 1, 1,//  3
        // //后
        0, 0, -1,//  0 
        -1, 1, 1,//  3
        1, 1, 1,//   4
        // //右
        0, 0, -1,//  0 
        1, 1, 1,//   4
        1, -1, 1,//  1
        //上
        1, -1, 1,//  1
        1, 1, 1,//   4
        -1, 1, 1,//  3
        //上
        1, -1, 1,//  1
        -1, 1, 1,//  3
        -1, -1, 1,// 2

  ]);

然后计算每个顶点的法线，现在每个顶点的法线就是其所在三角形的法线，我们以前一个面为例，如下图：
在这里插入图片描述

计算一个三角形的法线n，即为这个三角形内a向量与b向量的叉乘

let c_0 = new Cesium.Cartesian3(0, 0, -1);
	let c_1 = new Cesium.Cartesian3(1, 1, 1);
	let c_2 = new Cesium.Cartesian3(-1, 1, 1);
	let d1 = Cesium.Cartesian3.subtract(c_1, c_0, new Cesium.Cartesian3());
	let d2 = Cesium.Cartesian3.subtract(c_2, c_0, new Cesium.Cartesian3());
	let normal = Cesium.Cartesian3.cross(d1, d2, new Cesium.Cartesian3());
	normal = Cesium.Cartesian3.normalize(normal, new Cesium.Cartesian3());
	normals = [];
	normals.push(
	    normal.x, normal.y, normal.z,
	    normal.x, normal.y, normal.z,
	    normal.x, normal.y, normal.z
	);

其他顶点的法线以同样的方式求取，完整代码如下：

 let c_0 = new Cesium.Cartesian3(0, 0, -1);
	 let c_1 = new Cesium.Cartesian3(1, 1, 1);
	 let c_2 = new Cesium.Cartesian3(-1, 1, 1);
	
	 let d1 = Cesium.Cartesian3.subtract(c_1, c_0, new Cesium.Cartesian3());
	 let d2 = Cesium.Cartesian3.subtract(c_2, c_0, new Cesium.Cartesian3());
	 let normal = Cesium.Cartesian3.cross(d1, d2, new Cesium.Cartesian3());
	 normal = Cesium.Cartesian3.normalize(normal, new Cesium.Cartesian3());
	
	
	 normals = [];
	 normals.push(
	     normal.x, normal.y, normal.z,
	     normal.x, normal.y, normal.z,
	     normal.x, normal.y, normal.z
	 );
	 c_1 = new Cesium.Cartesian3(-1, 1, 1);
	 c_2 = new Cesium.Cartesian3(-1, -1, 1);

	 d1 = Cesium.Cartesian3.subtract(c_1, c_0, new Cesium.Cartesian3());
	 d2 = Cesium.Cartesian3.subtract(c_2, c_0, new Cesium.Cartesian3());
	 normal = Cesium.Cartesian3.cross(d1, d2, new Cesium.Cartesian3());
	 normal = Cesium.Cartesian3.normalize(normal, new Cesium.Cartesian3());
	 normals.push(
	     normal.x, normal.y, normal.z,
	     normal.x, normal.y, normal.z,
	     normal.x, normal.y, normal.z
	 );
	
	 c_1 = new Cesium.Cartesian3(-1, -1, 1);
	 c_2 = new Cesium.Cartesian3(1, -1, 1);

	 d1 = Cesium.Cartesian3.subtract(c_1, c_0, new Cesium.Cartesian3());
	 d2 = Cesium.Cartesian3.subtract(c_2, c_0, new Cesium.Cartesian3());
	 normal = Cesium.Cartesian3.cross(d1, d2, new Cesium.Cartesian3());
	 normal = Cesium.Cartesian3.normalize(normal, new Cesium.Cartesian3());
	 normals.push(
	     normal.x, normal.y, normal.z,
	     normal.x, normal.y, normal.z,
	     normal.x, normal.y, normal.z
	 );
	
	 c_1 = new Cesium.Cartesian3(1, -1, 1);
	 c_2 = new Cesium.Cartesian3(1, 1, 1);
	
	 d1 = Cesium.Cartesian3.subtract(c_1, c_0, new Cesium.Cartesian3());
	 d2 = Cesium.Cartesian3.subtract(c_2, c_0, new Cesium.Cartesian3());
	 normal = Cesium.Cartesian3.cross(d1, d2, new Cesium.Cartesian3());
	 normal = Cesium.Cartesian3.normalize(normal, new Cesium.Cartesian3());
	 normals.push(
	     normal.x, normal.y, normal.z,
	     normal.x, normal.y, normal.z,
	     normal.x, normal.y, normal.z
	 );
	
	 normals.push(
	     0, 0, 1,
	     0, 0, 1,
	     0, 0, 1,
	 );
	
	 normals.push(
	    0, 0, 1,
	    0, 0, 1,
	    0, 0, 1,
	 );

因为顶部两个三角形的6个顶点的法线其实是固定的z向量，所以我们直接写为(0,0,1)，将法线传入Geometry，最后完整的代码：

const positions = new Float64Array([
         // //前
        0, 0, -1,//  0
        1, -1, 1,//  1
        -1, -1, 1,// 2
        //左
        0, 0, -1,//  0 
        -1, -1, 1,// 2
        -1, 1, 1,//  3
        // //后
        0, 0, -1,//  0 
        -1, 1, 1,//  3
        1, 1, 1,//   4
        // //右
        0, 0, -1,//  0 
        1, 1, 1,//   4
        1, -1, 1,//  1
        //上
        1, -1, 1,//  1
        1, 1, 1,//   4
        -1, 1, 1,//  3
        //上
        1, -1, 1,//  1
        -1, 1, 1,//  3
        -1, -1, 1,// 2
 	]);
	 let c_0 = new Cesium.Cartesian3(0, 0, -1);
	 let c_1 = new Cesium.Cartesian3(1, 1, 1);
	 let c_2 = new Cesium.Cartesian3(-1, 1, 1);
	
	 let d1 = Cesium.Cartesian3.subtract(c_1, c_0, new Cesium.Cartesian3());
	 let d2 = Cesium.Cartesian3.subtract(c_2, c_0, new Cesium.Cartesian3());
	 let normal = Cesium.Cartesian3.cross(d1, d2, new Cesium.Cartesian3());
	 normal = Cesium.Cartesian3.normalize(normal, new Cesium.Cartesian3());
	
	
	 normals = [];
	 normals.push(
	     normal.x, normal.y, normal.z,
	     normal.x, normal.y, normal.z,
	     normal.x, normal.y, normal.z
	 );
	
	
	 c_1 = new Cesium.Cartesian3(-1, 1, 1);
	 c_2 = new Cesium.Cartesian3(-1, -1, 1);
	
	 d1 = Cesium.Cartesian3.subtract(c_1, c_0, new Cesium.Cartesian3());
	 d2 = Cesium.Cartesian3.subtract(c_2, c_0, new Cesium.Cartesian3());
	 normal = Cesium.Cartesian3.cross(d1, d2, new Cesium.Cartesian3());
	 normal = Cesium.Cartesian3.normalize(normal, new Cesium.Cartesian3());
	 normals.push(
	     normal.x, normal.y, normal.z,
	     normal.x, normal.y, normal.z,
	     normal.x, normal.y, normal.z
	 );
	
	 c_1 = new Cesium.Cartesian3(-1, -1, 1);
	 c_2 = new Cesium.Cartesian3(1, -1, 1);
	
	 d1 = Cesium.Cartesian3.subtract(c_1, c_0, new Cesium.Cartesian3());
	 d2 = Cesium.Cartesian3.subtract(c_2, c_0, new Cesium.Cartesian3());
	 normal = Cesium.Cartesian3.cross(d1, d2, new Cesium.Cartesian3());
	 normal = Cesium.Cartesian3.normalize(normal, new Cesium.Cartesian3());
	 normals.push(
	     normal.x, normal.y, normal.z,
	     normal.x, normal.y, normal.z,
	     normal.x, normal.y, normal.z
	 );
	
	 c_1 = new Cesium.Cartesian3(1, -1, 1);
	 c_2 = new Cesium.Cartesian3(1, 1, 1);
	
	 d1 = Cesium.Cartesian3.subtract(c_1, c_0, new Cesium.Cartesian3());
	 d2 = Cesium.Cartesian3.subtract(c_2, c_0, new Cesium.Cartesian3());
	 normal = Cesium.Cartesian3.cross(d1, d2, new Cesium.Cartesian3());
	 normal = Cesium.Cartesian3.normalize(normal, new Cesium.Cartesian3());
	 normals.push(
	     normal.x, normal.y, normal.z,
	     normal.x, normal.y, normal.z,
	     normal.x, normal.y, normal.z
	 );
	
	 normals.push(
	     0, 0, 1,
	     0, 0, 1,
	     0, 0, 1,
	 );
	
	 normals.push(
	    0, 0, 1,
	    0, 0, 1,
	    0, 0, 1,
	 );
	
	 const indices = new Uint16Array([
	     0, 1, 2,
	     3, 4, 5,
	     6, 7, 8,
	     9, 10, 11
	 ]);
	 let m = Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(110.0, 30.0, 10));
	 let geometry = new Cesium.Geometry({
	     attributes: {
	         position: new Cesium.GeometryAttribute({
	             componentDatatype: Cesium.ComponentDatatype.DOUBLE,
	             componentsPerAttribute: 3,
	             values: positions
	         }),
	         normal: new Cesium.GeometryAttribute({
	             componentDatatype: Cesium.ComponentDatatype.FLOAT,
	             componentsPerAttribute: 3,
	             values: new Float64Array(normals)
	         })
	     },
	     // indices: indices,
	     primitiveType: Cesium.PrimitiveType.TRIANGLES,
	     boundingSphere: Cesium.BoundingSphere.fromVertices(positions),
	 });
	
	 const instance = new Cesium.GeometryInstance({ 
	   geometry: geometry,
	     modelMatrix: m,
	     attributes: {
	         color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.BLUE) 
	     }
	 });
	
	 viewer.scene.primitives.add(new Cesium.Primitive({
	     geometryInstances: instance, 
	
	     appearance: new Cesium.PerInstanceColorAppearance({
	        translucent: false 
	     })
	 }));

到这primitive的进阶学习告一段落，能掌握这些再加上primitive的源码就能完全掌握。

标签：Primitive,const,进阶,normal,geometry,Cartesian3,Cesium,new
From： https://blog.csdn.net/weixin_43700915/article/details/142751883

相关文章

  • Python 高级绘图：从基础到进阶的可视化实践
    在Python中，我们可以使用多种库来进行绘图，其中matplotlib是一个非常强大的绘图库。以下将介绍一些高级的绘图技巧和代码实现：绘制简单折线图importmatplotlib.pyplotaspltx=[1,2,3,4,5]y=[2,4,6,8,10]plt.plot(x,y)plt.xlabel('X轴')plt.ylabel('Y轴')plt......
  • 【艾思科蓝】Python数据分析与可视化实战：从入门到进阶
    【IEEE出版|会后3-4个月EI检索】第三届云计算、大数据应用与软件工程国际学术会议(CBASE2024）_艾思科蓝_学术一站式服务平台更多学术会议请看：学术会议-学术交流征稿-学术会议在线-艾思科蓝 目录引言一、Python数据分析入门1.Python数据分析环境搭建2.数据读取与预......
  • 昇思MindSpore进阶教程--使能图算融合
    大家好，我是刘明，明志科技创始人，华为昇思MindSpore布道师。技术上主攻前端开发、鸿蒙开发和AI算法研究。努力为大家带来持续的技术分享，如果你也喜欢我的文章，就点个关注吧正文开始图算融合是MindSpore特有的网络性能优化技术。它可以通过自动分析和优化现有网络计算图逻......
  • 【进阶OpenCV】 （3）--SIFT特征提取
    文章目录sift特征提取一、基本原理二、特点三、代码实现1.函数方法2.检测图像中的关键点3.绘制关键点4.计算关键点描述符5.输出特征坐标点总结sift特征提取SIFT（Scale-InvariantFeatureTransform，尺度不变特征变换）特征检测是一种在图像处理和计算机视觉领域广......
  • 昇思MindSpore进阶教程--下沉模式
    大家好，我是刘明，明志科技创始人，华为昇思MindSpore布道师。技术上主攻前端开发、鸿蒙开发和AI算法研究。努力为大家带来持续的技术分享，如果你也喜欢我的文章，就点个关注吧正文开始昇腾芯片集成了AICORE和AICPU等计算单元。其中AICORE负责稠密Tensor和Vector运算，AICPU负责......
  • JS进阶 1——作用域、解构、箭头函数
    JS进阶1——作用域、解构、箭头函数1.作用域局部作用域分为：函数作用域和块作用域函数作用域：在函数内部声明的变量只能在函数内部被访问块作用域：被{}包裹的代码成为代码块，代码块内部声明的变量外部将有可能无法访问var声明的不会产生块作用域全局作用域：<scri......
  • 关于出四则运算题的进阶可视化解答
    `importjavax.swing.;importjavax.swing.border.TitledBorder;importjava.awt.;importjava.awt.event.ActionEvent;importjava.awt.event.ActionListener;importjava.util.HashSet;importjava.util.Random;importjava.util.Scanner;classQuizFrameextendsJ......
  • Python函数进阶：让你的代码更优雅的秘密武器
    引言你是否曾在编写Python代码时感到困惑，尤其是在处理函数时？你并不孤单！根据一项调查，超过70%的开发者在学习Python时都曾遇到过函数的各种难题。想象一下，如果你能掌握一些高级用法，像装饰器、匿名函数、可变参数和关键字参数等，你的代码将会变得多么优雅和高效！在这篇文章中，我们将......
  • AWK进阶教程：精通match函数，让字符串搜索游刃有余！
    AWK中的match函数允许你在字符串中搜索模式。在本教程中，你将学习如何使用awkmatch函数，基于匹配结果执行条件处理，并遍历字符串中的多个匹配项。语法和用法awkmatch函数的基本语法是:awk'{if(match($0,pattern))print$0;}'filename这里，$0表示整行输入，pat......
  • 【python进阶攻略10】异常、lambda表达式
    异常异常处理是一种艺术，一旦你掌握，会授予你无穷的力量。我将要向你展示我们能处理异常的一些方式。最基本的术语里我们知道了try/except从句。可能触发异常产生的代码会放到try语句块里，而处理异常的代码会在except语句块里实现。这是一个简单的例子：try:file=open(......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99