Water effects and animation

235 views
Skip to first unread message

a1941...@gmail.com

unread,
Nov 25, 2018, 9:16:34 AM11/25/18
to cesium-dev
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;
}

Omar Shehata

unread,
Nov 26, 2018, 10:32:16 AM11/26/18
to cesium-dev
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:

wzc339...@gmail.com

unread,
Nov 26, 2018, 9:34:03 PM11/26/18
to cesium-dev
在 2018年11月26日星期一 UTC+8下午11:32:16,Omar Shehata写道:
How to add reflection to water primitive ? Need to create a reflect camera?

Omar Shehata

unread,
Nov 27, 2018, 3:55:20 PM11/27/18
to cesium-dev
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.

Chingiz Bakhishov

unread,
Oct 23, 2019, 4:46:45 PM10/23/19
to cesium-dev
This is very helpful Omar! Thank you for all your help!

Omar Shehata

unread,
Oct 27, 2019, 7:13:54 PM10/27/19
to cesium-dev
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/
Reply all
Reply to author
Forward
0 new messages