Cesium's water flow model

About Primitives.

Primitive and Entity are generally translated into primitives and entities. Primitives are closer to the bottom layer. Entities are encapsulated advanced objects that are easier to use. Generally speaking, the use of Primitive is relatively cumbersome. Compared with Entity, users need to initialize more objects by themselves, including appearance, geographic information, etc., but because of this, it is much more convenient to add materials to Primitive, because the appearance part of the geometry can be directly manipulated. .

How to make more simulated water

So since we want to simulate an effect that is more biased towards real flowing water, of course it will be more convenient to use primitive objects.

Here is an official example that you can refer to: Portal

From the example, we can see that the focus of imitating the water flow effect is the material file and our basic property settings for the material.

The following picture material is the material material given in the official example, which can be saved and used directly.

Water Flow Model Making

① Define the material

const material = new Cesium.Material({
    
    
      fabric: {
    
    
        type: "Water",
        uniforms: {
    
    
          // baseWaterColor: new Cesium.Color(64 / 255.0, 157 / 255.0, 253 / 255.0, 0.5),
          normalMap: '/static/waterNormals.jpg',
          frequency: 8000.0, // 控制波数的数字。
          animationSpeed: 0.02, // 控制水的动画速度的数字。
          amplitude: 5.0, // 控制水波振幅的数字。
          specularIntensity: 0.8, // 控制镜面反射强度的数字。
        }
      }
    })

②Definition primitive

Note that areaArr is a one-dimensional array of [longitude, latitude, height, longitude...], and the shape of primitive will draw different water flow shapes according to different data.

let primitives = new Cesium.Primitive({
    
    
      geometryInstances: new Cesium.GeometryInstance({
    
    
        geometry: new Cesium.PolygonGeometry({
    
    
          polygonHierarchy: new Cesium.PolygonHierarchy(
            Cesium.Cartesian3.fromDegreesArray(areaArr)
          ),
          vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
          extrudedHeight: parseFloat(10),
          height: parseFloat(10)
        }),
      }),
      appearance: new Cesium.EllipsoidSurfaceAppearance({
    
    
        material: material
      }),
    })

③Add primitive to viewer

this.viewer.scene.primitives.add(
      primitives
    );