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

Question

我目前正在尝试使用THREE.js深入研究WebGL着色器的主题。如果有人能为我提供以下方案的起点，我将不胜感激：

我想创建一种类似流体的材料，它可以与用户鼠标交互，也可以“流动”。 有点像这样 http://cake23.de/turing-fluid.html

我想将背景图像传递给它，作为“液体酱”中显示哪些颜色以及它们在开头的位置的起点。所以说：我定义了初始图像，然后通过自发的液体流动以及用户交互进行转换。

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

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

我意识到上面给出的例子有明确的代码，但仍然是如此，我无法真正将其分解为更简单的术语，我完全理解。所以如果有人能给我一些简单的概念作为我的起点，我真的很感激。

更多页面解决了这样的问题：

http://www.ibiblio.org/e-notes/webgl/gpu/fluid.htm

https://29a.ch/sandbox/2012/fluidwebgl/

https://haxiomic.github.io/GPU-Fluid-Experiments/html5/

好吧，无论如何，感谢每个链接或参考，每个基本概念或您想要分享的任何内容。

干杯

编辑： 获得与此图像类似的结果（视觉上）会很棒：

Answer 1

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

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

• 魔术真的存在于着色器中，大多数是在碎片着色器中开始理解如何编写它们以及它们如何工作可能是一件好事。这个链接是一个好的开始。 shader tutorial

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

• 也许，这可以帮到你一点点。 Raindrop simulation

如果你发现了更多相关内容，请告诉我。

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

祝你好运