How to simulate water splashing in a specific direction using Three.js and GLSL? Is it possible?

Questions
1

I want to achieve an effect like the image attached, but in 3D space using Three.js:

8c92c7216624079.678348b66cf64
8c92c7216624079.678348b66cf641200×1600 251 KB

Did anyone ever do that? Thanks!

1 Like
2
  1. Pre-modeled Approach
  • Sculpt or simulate the fluid shape in a 3D tool (e.g., Blender). You can do a fluid simulation or hand-model the swirling splashes.
  • Export it as a high-poly mesh (e.g., .glb).
  • Import into Three.js with GLTFLoader.
  • Apply high-quality PBR materials (using MeshStandardMaterial or similar).
  • Use a well-lit environment (e.g., EnvironmentMap, HDRI) for realistic reflections and shading.
  1. Procedural/Shader-based Approach
  • Generate a custom geometry for the splashes using a signed distance field or a parametric shape.
  • Deform it with noise or displacement in a fragment/vertex shader for a dynamic swirl look.
  • Still rely on physically-based shading and environment maps for realism.
  • This is more complex to implement but allows real-time animation of fluid-like shapes.
1 Like