1
我目前正在尝试使用THREE.js进入WebGL着色器的主题。我会很感激，如果有人可以给我一些出发点为以下情况：图像上的WebGL自定义着色器流体
我想创建一个类似流体的材料，它与用户鼠标或«流»在它上。 有点像这样 http://cake23.de/turing-fluid.html
我想的背景图像传递给它，作为其中的颜色在«液体调味汁»和其中它们在开始时显示在术语的起点。所以说：我定义了初始图像，然后通过自启动液体流动和用户交互进行转换。
我将如何着手，用我有限的知识：
我创建了一个平面想要的图像作为纹理。 顶部（在图像和相机之间）我创建了一个新的网格（平面也是？），并且此网格应用了一些自定义顶点和片段着色器。 那些着色器应该以某种方式从背后（从图像）采取颜色，然后移动这些顶点遵循一些物理规则...
我意识到上面给出的示例具有unminified代码，但它仍然如此之多，我不能把它分解成简单的术语，我完全理解它。所以我会很感激，如果有人能给我一些简单的概念，作为我的起点。
更多的网页处理这样的事情：
http://www.ibiblio.org/e-notes/webgl/gpu/fluid.htm
https://29a.ch/sandbox/2012/fluidwebgl/
https://haxiomic.github.io/GPU-Fluid-Experiments/html5/
好了，反正感谢每一个环节或引用，每一个基本概念或任何你想分享。
干杯
编辑： 获得了类似的结果（视觉）这样的形象将是巨大的： 