Is there a way to achieve animation effects?

@prisoner849 : Ribbon water is where you can edit water plane in such a manner as to create a stream of water say going down a mountain side by using the technology you have provided in order to manipulate the position of the water’s vertices and shaping the water into the same shape as the landscape so you do not have to use a water plane.

An example is in cry engine :

Yes you can do this, though there are no intersections or such handled. I’ve made a spline network system for this specifically. If you only need to let the end and start go off the map or be a closed loop it should be enough though.

Other than that you can try fade off the caps, but any overlapping is usually problematic without logarithmic depth buffer since it quickly causes depth fighting (flickering).

@Fyrestar : do you have example of such effect on water?

If only there was a way to grab each of the water’s vertices & do with that EXACTLY what we’re doing with the above jsfiddle demo.

Clipping can be local, using renderer.localClippingEnabled and material.clippingPlanes , but clipping by plane will not work when the curve turns back.

That’s a great point. I thought there would be a catch.
Of course, you could just break the object up into non-clashing sections, I guess how difficult that would be depends on the path and how it varies in each case - coding a generalised solution for every shape would be very tricky.

Another solution would be to use subtractive geometry - like csg.js, though I have a feeling that it’s not designed for animation. I don’t know. More info here: https://evanw.github.io/csg.js/

swing or stroll?

does anyone have example of ribbon water?

@Aerion
Take a look at this topic Create a curved plane surface which dynamically changes its size and posts from @hofk there.

Gonna make a new thread for this.

1 Like

Is there a demo?

Csg dynamically subtracted? Does it not get stuck?

https://jsfiddle.net/p79jwsL8/

@qifei
Are you trying to create a trail behind your object? If so - there are better ways to do that.

Something like this?

Thank you.

We tried several approaches (realtime geometry creation / manipulation) to solve a similar problem - at least I believe it’s similar :thinking: :point_right: the logo-animation on our freshly released (micro)website :point_right: https://cream.gmbh :grin: (we’ll showcase it here in the discourse soon).

The only thing that performed smooth enough for a complex geometry such as our curvy logo (especially on mobile devices), was animating the transparent material’s alpha-map.

1 Like

use localClipping can growing animation

Did you use a VideoTexture for the alpha map?

No, just by tweening a specific (in our case “x”) offset value of the texture (alphaMap), see three.js docs & three.js docs
:point_up: The 3d-model needs to have a proper UV-layout for this.

1 Like

That is a good solution. With the proper setup of alphaMap and geometry UVs (crammed together in one half of the [0,1] interval on either U or V, I guess), the only update you have to do during animation is a single uniform, which will be updated anyway as a consequence of the presence of a texture (actually, the texture and associated uniforms must also be considered costs of this method).

Is there not something called morphtargets that would be good to mention here.
https://threejs.org/docs/#api/en/core/Geometry.morphTargets
Otherwise you need a procedural way to regenerate the mesh per frame or pre-generate the mesh data for switching to per-frame.