欢迎光临散文网 会员登陆 & 注册

分享:Cesium添加水面效果

2022-11-03 17:32 作者:地理信息技术杂谈  | 我要投稿

Cesium中内置了水面效果的shader,通过添加图元(Primitive),能够在Cesium的地图上实现水面流动的效果,借助互联网上搜索、并进行了修改。

效果实现

下载了一块水系的geojson数据,因为按照代码,需要根据polygon的坐标进行勾画。关键实现代码:

//_polygonArr 为polygon的坐标

         let waterPrimitive = new Cesium.Primitive({

                allowPicking: false,

                geometryInstances: new Cesium.GeometryInstance({

                    geometry: new Cesium.PolygonGeometry({

                        polygonHierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3

                            .fromDegreesArrayHeights(_polygonArr)),

                        vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,

                    })

                }),

                // 使用内置的水面shader

                appearance: new Cesium.EllipsoidSurfaceAppearance({

                    aboveGround: true,

                    material: new Cesium.Material({

                        fabric: {

                            type: 'Water',

                            uniforms: { 

                                blendColor: new Cesium.Color(0.0, 0.0, 1.0, 0.3), 

                                //设置水面使用的图片,

                                //此图片在Cesium源码Source\Assets\Textures文件夹中

                                normalMap: 'images/waterNormalsSmall.jpg',

                                //频率速度设置

                                frequency: 200.0,

                                animationSpeed: 0.01,

                                amplitude: 10.0

                            }

                        }

                    })

             //frameShader代码也可以根据需要进行修改

                    //                     fragmentShaderSource: 'varying vec3 v_positionMC;\nvarying vec3 v_positionEC;\nvarying vec2 v_st;\nvoid main()\n{\nczm_materialInput materialInput;\nvec3 normalEC = normalize(czm_normal3D * czm_geodeticSurfaceNormal(v_positionMC, vec3(0.0), vec3(1.0)));\n#ifdef FACE_FORWARD\nnormalEC = faceforward(normalEC, vec3(0.0, 0.0, 1.0), -normalEC);\n#endif\nmaterialInput.s = v_st.s;\nmaterialInput.st = v_st;\nmaterialInput.str = vec3(v_st, 0.0);\nmaterialInput.normalEC = normalEC;\nmaterialInput.tangentToEyeMatrix = czm_eastNorthUpToEyeCoordinates(v_positionMC, materialInput.normalEC);\nvec3 positionToEyeEC = -v_positionEC;\nmaterialInput.positionToEyeEC = positionToEyeEC;\nczm_material material = czm_getMaterial(materialInput);\n#ifdef FLAT\ngl_FragColor = vec4(material.diffuse + material.emission, material.alpha);\n#else\ngl_FragColor = czm_phong(normalize(positionToEyeEC), material);\

                    // gl_FragColor.a=0.5;\n#endif\n}\n' //重写shader,修改水面的透明度

                })

            });

//添加水面数据到viewer中

  viewer.scene.primitives.add(waterPrimitive);

效果图:


分享:Cesium添加水面效果的评论 (共 条)

分享到微博请遵守国家法律