Water effects and animation

CesiumJS
1

Anxious, I would like to ask you, I want to use the geometry with water, but need to modify the shape of the geometry to make an animation, cesium has the way to use the entity to complete the water effect, or how to add animation to the PolygonGeometry. I hope to give me a method. Thank you.
Here is my code

    var Polygon1 = viewer.scene.primitives.add(new Cesium.Primitive({
        geometryInstances : new Cesium.GeometryInstance({
            geometry : new Cesium.PolygonGeometry({
                height:225,
                perPositionHeight:true,
                polygonHierarchy : new Cesium.PolygonHierarchy(
                    Cesium.Cartesian3.fromDegreesArray([ 106.4064348832185,29.81790653456957,106.4065351693805,29.81795172326908,106.4066721067451,29.81801532757933,106.4067767871413,29.81811023207252
                    ])
                ),
                vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
            })
        }),
        appearance : new Cesium.EllipsoidSurfaceAppearance({
            aboveGround: true,
        }),
        show : true
    }));
function applydjk_WaterMaterial(primitive, scene) {
        primitive.appearance.material = new Cesium.Material({
            fabric : {
                type : 'Water',
                uniforms : {
                    normalMap:'water.jpg',
                    frequency: 1000.0,
                    animationSpeed: 0.001,
                    amplitude: 40
                }
            }
        });
        primitive.appearance.translucent=true;
    }

2

Are you thinking of animating the vertices of the geometry you created to have a wave-like effect? If so, I think all you need is to define a custom vertex shader, which you can do in Cesium by creating and setting a custom Appearance:

https://cesiumjs.org/Cesium/Build/Documentation/Appearance.html

3

在 2018年11月26日星期一 UTC+8下午11:32:16，Omar Shehata写道：

Are you thinking of animating the vertices of the geometry you created to have a wave-like effect? If so, I think all you need is to define a custom vertex shader, which you can do in Cesium by creating and setting a custom Appearance:

https://cesiumjs.org/Cesium/Build/Documentation/Appearance.html

On Sunday, November 25, 2018 at 9:16:34 AM UTC-5, a1941...@gmail.com wrote:Anxious, I would like to ask you, I want to use the geometry with water, but need to modify the shape of the geometry to make an animation, cesium has the way to use the entity to complete the water effect, or how to add animation to the PolygonGeometry. I hope to give me a method. Thank you.
Here is my code
var Polygon1 = viewer.scene.primitives.add(new Cesium.Primitive({
geometryInstances : new Cesium.GeometryInstance({
geometry : new Cesium.PolygonGeometry({
height:225,
perPositionHeight:true,
polygonHierarchy : new Cesium.PolygonHierarchy(
Cesium.Cartesian3.fromDegreesArray([ 106.4064348832185,29.81790653456957,106.4065351693805,29.81795172326908,106.4066721067451,29.81801532757933,106.4067767871413,29.81811023207252
])
),
vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
})
}),
appearance : new Cesium.EllipsoidSurfaceAppearance({
aboveGround: true,
}),
show : true
}));
function applydjk_WaterMaterial(primitive, scene) {
primitive.appearance.material = new Cesium.Material({
fabric : {
type : 'Water',
uniforms : {
normalMap:'water.jpg',
frequency: 1000.0,
animationSpeed: 0.001,
amplitude: 40
}
}
});
primitive.appearance.translucent=true;
}

How to add reflection to water primitive ? Need to create a reflect camera?

4

Yeah you would need to write a custom fragment shader, render the scene to a framebuffer, and then use that as a look up texture on your water surface.

You might find more resources by googling for “WebGL Water Reflections”, or finding an implementation in an engine that you can try to port over. It’s not a trivial task to do this from scratch if you’re not familiar with WebGL/rendering pipelines.

1 Like
5

This is very helpful Omar! Thank you for all your help!

6

Glad you found that helpful!

If you end up making a water effect in a public application, it’d be great to post about it here! It would even be very nice to have a guest blog on how it was done, kind of like this wind blog that was also a result of a discussion on the forum: https://cesium.com/blog/2019/04/29/gpu-powered-wind/

7

Hi, can you elaborate this please?
I’m setting a mirror camera for the reflection image, but don’t know how to get a texture out of it for the water surface.
Is there a Cesium API like RenderTarget in three.js to help me achieve this or the only way is through raw WebGL APIs?