Wobble drop with water texture

Questions
1

Hi!

Is something like this possible with threejs?
Of course simplified … like a dropping ball with a wobble effect (with water-like texture later on).

I’m pretty sure it is, but failed searching for the correct plugins & where to start.
Would be awesome if you could drop some links - so i can get into it :slight_smile:

Greetings!

2

You could try the physics library for this https://threejs.org/examples/#webgl_physics_volume

2 Likes
3

thanks, thats something for the start :blush:
more input welcome ofc!

1 Like
4

Im not entirely sure (correct me if Im wrong), as I haven’t tried this effect myself, but I think it is achievable with some combination of a physics library and refraction/reflection cubemapping with MeshStandardMaterial. Examples that you might find useful:
https://threejs.org/examples/?q=refl#webgl_materials_cubemap_balls_reflection
https://threejs.org/examples/?q=refrac#webgl_materials_cubemap_balls_refraction
(Fyrestar’s link to ammo.js above)

Im sure experienced users will have more details about this though.

1 Like
5

thanks a lot!

will have a look - really good information for me as a beginner using threejs :slight_smile:

Ofc any further input appreciated :slight_smile:

6

That droplet in the video does look like it’s modeled as a soft body, you can even see the characteristic stiffness in how concavity straightens itself out. It’s very possible that they even use Bullet for that (Ammo.js is a cross-compilation of Bullet). So if you go with Ammo, like in the example that @Fyrestar has linked - you will likely extremely similar results. When it comes to caustics - that’s a different ball game all together, and faking it is always awkward, but some basic refractions might give you pleasing looking results. Caustics are just there when you use path tracing renderer, but in rasterizing pipeline, like how most real-time rendering engines work today it’s a very hard problem to solve.

7

thanks a lot guys so far!!

Just getting started and got an issue i cant fix - tried so many things (like different geometries etc) and searched so hard but nothing helped so far …

https://jsfiddle.net/mwgrtfhp/ i want this ball to stay at the same position on the x and z axis
so it just will fall down and dont move to left/right/front/back

any recommendations ? maybe you can push me into the right directions (and also the ball)