Cesium实战(二十)区域水面特效

Cesium实战(二十)区域水面特效

今天和朋友聊到区域水面特效,他们想做一个区域的水面特效,比如一条河,一个湖泊,通常关于动态的,我第一个想法都是glsl,于是上网搜了一下,确实有高手使用glsl实现的,另外,还发现cesium可以快速的实现水面特效,而且,官方例子里面还有示例,官方示例库确实是宝藏。

cesium-water-01

本文来自Sandcastle中官方示例 Materials,网页加载后选择Misc中Water选项,放大后可看到效果 

全球水面效果

把示例里面的代码摘出来

//全球
var worldRectangle = viewer.scene.primitives.add(new Cesium.Primitive({
    geometryInstances : new Cesium.GeometryInstance({
        geometry : new Cesium.RectangleGeometry({
            rectangle : Cesium.Rectangle.fromDegrees(-180, -90, 180.0, 90.0),
            vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
        })
    }),
    appearance : new Cesium.EllipsoidSurfaceAppearance({
        aboveGround : true,
        material : new Cesium.Material({
            fabric : {
                type : 'Water',
                uniforms : {
                    specularMap:'earthspec1k.jpg',
                    normalMap:'waterNormals.jpg',
                    frequency: 10000.0,  //频率
                    animationSpeed: 0.1,//动画速度
                    amplitude: 1.0      //振幅    
                }
            }
        })
    }),
    show : true
}));

可以看到这里用了Primitive来实现,之前的文章有用过Primitive(Cesium实战(十二)使用Primitive替代entity),Primitive分两个部分,一个是 geometryInstances,用于构建形状,一个是 appearance,用于构建渲染效果

效果如下: 

区域水面效果

于是下一步构建区域水面效果就好说了,修改Primitive的geometryInstances,这里构建一个polygon

var polygon = viewer.scene.primitives.add(new Cesium.Primitive({
    geometryInstances : new Cesium.GeometryInstance({
        geometry : new Cesium.PolygonGeometry({
                polygonHierarchy : new Cesium.PolygonHierarchy(
                Cesium.Cartesian3.fromDegreesArray([
                        111.48894522023063,32.55843610413914,111.48869238776277,32.55602570974643,111.49004745721604,32.5548361448687,111.49250635559537,32.5526581917131,111.49401017612676,32.55129837476868,111.49557557543416,32.549965127681524,111.49805874806115,32.550219820173126,111.49881935514881,32.550823388219456,111.49893286824275,32.55195597852755,111.4983164393889,32.5535655841798,111.49817521853979,32.554570336381104,111.49914284747027,32.55554277243855,111.49967950821859,32.555814392110264,111.50062151969038,32.556517275179836,111.50149914222958,32.55731250438687,111.50207800636986,32.55757396515373,111.50386396090245,32.55781206769338,111.50391371888884,32.559650818164926,111.50077307397399,32.56013340913413,111.49625702141412,32.560250133340446,111.49171532588734,32.560183453792156,111.48920373670329,32.56015020231049,111.48844043918616,32.55981856869106,111.48743657311691,32.55945303779285,111.48760383414758,32.55863069835514,111.48812831262538,32.55837951411848
                    ])
                ),
            vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
        })
    }),
    appearance : new Cesium.EllipsoidSurfaceAppearance({
        aboveGround : true,
        material = new Cesium.Material({
            fabric : {
                type : 'Water',
                uniforms : {
                    normalMap:'waterNormals.jpg',
                    frequency: 10000.0,
                    animationSpeed: 0.01,
                    amplitude: 50
                }
            }
        })
    }),
    show : true
}));

viewer.camera.flyTo({
    destination : Cesium.Cartesian3.fromDegrees(111.488945,32.558436, 15000.0)
});

效果如下:

祝愿大家在新的一年里:

身体健健康康,家庭和和睦睦,

万事顺顺利利,生活甜甜蜜蜜!

新年快乐!永远快乐!

2 thoughts to “Cesium实战(二十)区域水面特效”

发表评论

电子邮件地址不会被公开。 必填项已用*标注