How to add animation to the above code?
A simple approach is to add both 3D objects to the scene. The first is rendered opaque, the second one fully transparent. You then perform simple alpha blending. That means you lower the opacity for the curve and increase it for the extruded mesh over a certain amount of time.
I’m not sure what you mean, having a spline and geometry blending like @Mugen87 explained or animating the extruded spline?
Animate the extruded spline
The implementation isn’t designed for re-generating it in realtime, it will most likely crash the process at some point with all the memory allocated too quickly.
If you mean having the extrusion grow from nothing - why not draw the whole thing and then use clipping to reveal it?
https://threejs.org/examples/webgl_clipping.html
Then add a square cap where the clipping occurs.
The clip does not affect the surrounding mesh?, the actual situation is that there are many similar lines of various shapes next to it.
I saw this grid generated
It won’t crash immediately and depends on the complexity and your device. Internally a lot objects are created and dropped. I wouldn’t recommend it, but you can try if it works for you.
Remember to call geometry.dispose() on the old before creating a new.
1 Like
@wenrenqiang
https://jsfiddle.net/prisoner849/snyqgmke/
It doesn’t modify the build in real time. It disposes geometry and assigns a new created one.
@prisoner849 : Would this work to create ribbon water? Do you have small example of ribbon water using this demo you post?
Could you add more details on this? I haven’t heard anything about such ribbon or such water.
Clipping can be local, using renderer.localClippingEnabled and material.clippingPlanes, but clipping by plane will not work when the curve turns back.
Another hack that may come useful, is to manipulate geometry.renderGroups dynamically. That will work per vertex and, as a consequence, per face.
As an extension or alternative to this, you could add a custom attribute float extrusionDistance to the geometry, probably easiest by adapting ExtrudedGeometry. Then add custom clipping by interpolated varying float vExtrusionDistance in the fragment shader, according to a uniform float visibleExtrusionDistance, or even calculate clipping in the vertex shader and interpolate it to get a smooth blend-in.
Edit: Or you can have a per-vertex opacity attribute (or hijack a vertex color channel, but you will need to customize the shader anyway) that is initially 0 for all vertices, but gets filled up sequentially during animation, either smoothly or one vertex per frame. I think this will work fine with the vertex order that is generated by ExtrudedGeometry.
@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.localClippingEnabledandmaterial.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/
does anyone have example of ribbon water?