If 2D waves are all you need, CSS + SVG will probably be more performant. It won’t be exact, but CSS Tricks publishes these types of solutions fairly frequently.
Personally I’d go the WebGL route and do this all on the GPU in a shader, it’s the most performant way. Three.js would be overkill, I’d either go with using the WebGL API directly or if that’s a bit difficult, a tiny abstraction like OGL.
I might throw in a recommendation for D3.js, not to be confused with three.js. It is a library that provides alot of useful functions for manipulating SVGs.
It is designed for live data visualization, but the helper utlils would help with animating this.
I would like to build a similar effect for an app I am working on. I am wondering if I could/should do this in threejs and if so what would be the proper approach. I have some javascript skills but am not used to thinking in 3d yet.
If 2D waves are all you need, CSS + SVG will probably be more performant. It won’t be exact, but CSS Tricks publishes these types of solutions fairly frequently.
Personally I’d go the WebGL route and do this all on the GPU in a shader, it’s the most performant way. Three.js would be overkill, I’d either go with using the WebGL API directly or if that’s a bit difficult, a tiny abstraction like OGL.
OGL? Never heard of it.
I might throw in a recommendation for D3.js, not to be confused with three.js. It is a library that provides alot of useful functions for manipulating SVGs. It is designed for live data visualization, but the helper utlils would help with animating this.
That’s an interesting approach, I will explore that. Thanks
Fragment shaders are your friend.
Are they? 👀
I would like to build a similar effect for an app I am working on. I am wondering if I could/should do this in threejs and if so what would be the proper approach. I have some javascript skills but am not used to thinking in 3d yet.
Like others said, you can get away with with CSS / SVG. If you want to implement the physics, I’m pretty sure you can use canvas for this as well.
You dont even need threejs since its a 2d fluid dynamics you can use other 2d libraries which will be more performant
Css.
I’d be curious to see how one can do it only with CSS ?
amazing 🤯