Three.js WebGL自定义着色器图像上的流体

我目前正试图深入探讨使用THREE.js的WebGL着色器的主题。如果有人能给我以下场景的一些起点，我将不胜感激：

我想创建一个类似流体的材质，它要么与用户鼠标交互，要么在其上显示“流动”。 有点像这样

我想给它传递一个背景图像，作为“液体酱汁”中显示颜色的起点，以及它们在起点的位置。也就是说：我定义了初始图像，然后通过自启动的液体流动和用户交互进行转换

以我有限的知识，我将如何继续：

我用想要的图像作为纹理创建了一个平面。 在顶部（在图像和相机之间），我创建了一个新网格（也是平面？），这个网格应用了一些自定义顶点和片段着色器。 这些着色器应该以某种方式从后面（从图像）获取颜色，然后按照一些物理规则移动这些顶点

我意识到上面给出的示例有未统一的代码，但仍然太多了，我无法将其分解为更简单的术语，我完全理解。因此，如果有人能给我一些简单的概念，作为我的出发点，我会非常感激

更多页面介绍如下内容：

不管怎样，谢谢你的每一个链接或参考，每一个基本概念或任何你想分享的东西

干杯

编辑： 获得类似于此图像的效果（视觉效果）将非常好：

---

我正试图完成类似的事情。我经常上网。寻找任何我可以使用的提示。到目前为止，我的结论是：

• 尝试使用three.js支持自己

• 神奇之处在于着色器，主要是片段着色器。了解如何编写它们以及它们如何工作可能是一件好事。这个链接是一个好的开始

• 了解流体的动态（自然/真实）行为可能很有价值。（方程式）

• 也许，这也能帮你一点忙

如果你在这方面有更多的发现，请告诉我

我发现这个着色器已经创建。也许，它们中的任何一个都可以帮助你，而不必强迫你学习很多东西

祝你好运