【Cesium】水浪

 

 

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Use correct character set. -->
        <meta charset="utf-8" />
        <!-- Tell IE to use the latest, best version. -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
        <meta name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
        <title>Cesium Viewer</title>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <link rel="stylesheet" href="CesiumViewer.css" media="screen" />
    </head>
    <body style="background: #000">
        <div id="cesiumContainer" class="fullWindow"></div>
        <!-- <div id="loadingIndicator" class="loadingIndicator"></div> -->
        <!-- <script src="CesiumViewer.js" type="module"></script> -->
    </body>
    <script src="../../Build/Cesium/Cesium.js"></script>
    <script>
        var viewer = new Cesium.Viewer("cesiumContainer");
        //多边形，可以具有空洞或者拉伸一定的高度
        function createPrimitives(scene) {
            var primitive = new Cesium.Primitive({
                geometryInstances: new Cesium.GeometryInstance({
                    geometry: new Cesium.PolygonGeometry({
                        polygonHierarchy: new Cesium.PolygonHierarchy(Cesium
                            .Cartesian3.fromDegreesArray([
                                130.0, 30.0,
                                150.0, 30.0,
                                150.0, 10.0,
                                130.0, 10.0
                            ])
                        ),
                        ///extrudedHeight:10000,
                        height: 5,
                        vertexFormat: Cesium.EllipsoidSurfaceAppearance
                            .VERTEX_FORMAT

                    })
                }),
                appearance: new Cesium.EllipsoidSurfaceAppearance({
                    aboveGround: false
                })
                // ,appearance: new Cesium.EllipsoidSurfaceAppearance({
                //     material: Cesium.Material.fromType('Checkerboard')
                // // })
                // appearance: new Cesium.PerInstanceColorAppearance()
            });
            return primitive
        }

        function drawByLocal() {
            var scene = viewer.scene;

            //---------------水体-----------------------------------------------------------
            var orangePolygon = viewer.entities.add({
                name: 'Orange polygon with per-position heights and outline',
                polygon: {
                    hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([
                        130.0, 30.0, 1110,
                        150.0, 30.0, 1110,
                        150.0, 10.0, 1110,
                        130.0, 10.0, 1110
                    ]),
                    extrudedHeight: 0,
                    perPositionHeight: true,
                    fill: true,
                    //        material : Cesium.Color.AQUA.withAlpha(0.5),
                    outline: true,
                    outlineColor: Cesium.Color.AQUA
                },
            });
            viewer.zoomTo(viewer.entities);
            //---------------------------水面--------------------------------------------- 
            var primitive = createPrimitives(scene);
            primitive.appearance.material = new Cesium.Material({
                fabric: {
                    type: 'Water',
                    uniforms: {
                        // specularMap: "img/waterNormals.jpg",
                        normalMap: "img/waterNs.png",
                        frequency: 100.0,
                        animationSpeed: 0.01,
                        amplitude: 1.0,
                    },
                }
            });
            scene.primitives.add(primitive);
            // viewer.entities.removeAll();
        }


        //绘制水面波浪效果
        function drawWater() {

            viewer.camera.flyTo({
                destination: Cesium.Cartesian3.fromDegrees(140, 20, 6000000.0),
                orientation: {
                    heading: Cesium.Math.toRadians(0.0), //默认朝北0度，顺时针方向，东是90度
                    pitch: Cesium.Math.toRadians(-90), //默认朝下看-90,0为水平看，
                    roll: Cesium.Math.toRadians(0) //默认0
                }
            });

            var waterFace = [
                130.0, 30.0, 0,
                150.0, 30.0, 0,
                150.0, 10.0, 0,
                130.0, 10.0, 0
            ];
            var waterPrimitive = new Cesium.Primitive({ 
                geometryInstances: new Cesium.GeometryInstance({
                    geometry: new Cesium.PolygonGeometry({
                        polygonHierarchy: new Cesium.PolygonHierarchy(
                            Cesium.Cartesian3.fromDegreesArrayHeights(waterFace)), 
                    })
                }),
                // 可以设置内置的水面shader
                appearance: new Cesium.EllipsoidSurfaceAppearance({
                    aboveGround: false
                })
            });
            waterPrimitive.appearance.material = new Cesium.Material({
                fabric: {
                    type: 'Water',
                    uniforms: {
                        normalMap: "http://127.0.0.1:2141/Apps/CesiumViewer/img/waterNs.png",
                        frequency: 100.0,
                        animationSpeed: 0.01,
                        amplitude: 1.0
                    }
                }
            });
            waterPrimitive.appearance.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.scene.primitives.add(waterPrimitive);


        }

        function drawWater2() {

            viewer.camera.flyTo({
                destination: Cesium.Cartesian3.fromDegrees(140, 20, 6000000.0),
                orientation: {
                    heading: Cesium.Math.toRadians(0.0), //默认朝北0度，顺时针方向，东是90度
                    pitch: Cesium.Math.toRadians(-90), //默认朝下看-90,0为水平看，
                    roll: Cesium.Math.toRadians(0) //默认0
                }
            });

            viewer.scene.globe.depthTestAgainstTerrain = false;
            var waterFace = [
                130.0, 30.0, 
                150.0, 30.0, 
                150.0, 10.0, 
                130.0, 10.0
            ];

            var polygon = new Cesium.PolygonGeometry({
                polygonHierarchy: new Cesium.PolygonHierarchy(
                    Cesium.Cartesian3.fromDegreesArray(waterFace)
                )
            });
            var geometry = Cesium.PolygonGeometry.createGeometry(polygon);

            var waterPrimitive = new Cesium.Primitive({
                show: true, // 默认隐藏
                allowPicking: false,
                geometryInstances: new Cesium.GeometryInstance({
                    geometry: geometry
                })
            })

            waterPrimitive.appearance = new Cesium.EllipsoidSurfaceAppearance({
                // aboveGround: false
            });

            waterPrimitive.appearance.material = new Cesium.Material({
                fabric: {
                    type: 'Water',
                    uniforms: {
                        normalMap: "http://127.0.0.1:2141/Apps/CesiumViewer/img/waterNs.png",
                        frequency: 100.0,
                        animationSpeed: 0.01,
                        amplitude: 10.0
                    }
                }
            })
            waterPrimitive.appearance.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.scene.primitives.add(waterPrimitive);
        }

        function drawWaterInstance() {
            var rectangleInstance = new Cesium.GeometryInstance({
                geometry: new Cesium.RectangleGeometry({
                    rectangle: Cesium.Rectangle.fromDegrees(-140.0, 30.0, -100.0, 40.0),
                    vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
                }),
                id: 'rectangle',
                attributes: {
                    color: new Cesium.ColorGeometryInstanceAttribute(0.0, 1.0, 1.0, 0.5)
                }
            });
            var ellipsoidInstance = new Cesium.GeometryInstance({
                geometry: new Cesium.EllipsoidGeometry({
                    radii: new Cesium.Cartesian3(500000.0, 500000.0, 1000000.0),
                    vertexFormat: Cesium.VertexFormat.POSITION_AND_NORMAL
                }),
                modelMatrix: Cesium.Matrix4.multiplyByTranslation(Cesium.Transforms.eastNorthUpToFixedFrame(
                    Cesium.Cartesian3.fromDegrees(-95.59777, 40.03883)), new Cesium.Cartesian3(0.0, 0.0,
                    500000.0), new Cesium.Matrix4()),
                id: 'ellipsoid',
                attributes: {
                    color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.AQUA)
                }
            });
            viewer.scene.primitives.add(new Cesium.Primitive({
                geometryInstances: [rectangleInstance, ellipsoidInstance],
                appearance: new Cesium.PerInstanceColorAppearance()
            }));

        }


        setTimeout(function() {
            // drawByLocal()
            // drawWater();
            drawWater2();
            // drawWaterInstance();
        }, 3000)
    </script>
</html>

 

posted @ 2021-08-23 21:42  咸鱼翻身  阅读(526)  评论(0)  编辑  收藏  举报