Opengl 如何写一个“"；“质感呼吸”；GLSL中的着色器？

我正在制作一款2d小游戏，在互联网上搜索与之无关的东西时，我发现了这段视频： 我真的很喜欢。我想要它

作者概述了这一过程： 这种效应是通过计算源的矢量导数产生的 然后沿结果轴应用迭代平流。A. 二级标量场控制以及 平流并允许一系列有趣的效果，包括脉冲， 挥手和呼吸

我的理解是：计算一个梯度场，然后在相应向量的方向和大小上移动像素。我猜时间是向量大小的乘数

所以，我想，我在头脑中理解了这个过程，但由于我是GLSL的新手，而且通常是着色器，我不知道如何编写代码

到目前为止，我是这样看待代码大纲的： 迭代图像，用某种边缘检测算法产生的向量填充矩阵。 再次遍历图像，并按矢量幅值*时间置换所有像素

几个具体问题： 就性能而言（当然是在普通PC上），这会起作用吗

是否可以使用简单的边缘检测算法（检查附近的8个像素，比较它们之间的差异，并将其作为大小，向量的方向将由差异最大的2个像素之间的角度决定）

如何置换像素？我想象移动一个像素会在它所在的地方留下一个空白，或者，如果我克隆这个像素，会有很多奇怪的叠加，图像会变差

编辑： 我刚刚意识到在一个过程中做会更好：计算向量，然后立即移动像素。你觉得怎么样

我想，我用错了，把它看作是迭代

这是我到目前为止得到的密码。它很简单，只沿+x轴进行

uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;
varying vec2 vTexCoord;
uniform sampler2D u_texture; //diffuse map

void main( void ) {



vec2 pos = vec2(1,0);
vec4 px1 = texture2D(u_texture, vTexCoord+(pos/resolution));
vec4 dif =  px1 - texture2D(u_texture, vTexCoord);


vec4 color = texture2D(u_texture, vTexCoord+(vec2((dif.r+dif.g+dif.b)*time,0)/resolution));


    gl_FragColor = vec4(color.xyz,1.0);

//gl_FlagColor = color;
}

现在我只需要为其余的轴做这个。效果实际上看起来像它应该做的

我为Y轴做了这个，这就是我得到的，我如何修复这些瑕疵，所以看起来颜色实际上是扩展的，而不是简单的移动

---

（着色器仅应用于背景图像）

您需要像GLSL中的函数式程序员那样思考。你不需要迭代任何东西；您提供的函数在给定适当的输入后，将提供输出的一部分。GPU处理在适当情况下应用该功能的问题。根据特定于供应商的扩展，输入需要与输出完全不同，因此输入是不可变的。GPU还可以组织输出到的位置

所以，不，你不会重复任何东西。你不能编写一个着色器来选择它要输出到哪里，只选择它要输出的内容

---

你可能想研究的是，这在很大程度上扭转了问题。对于每个输出P，您将查找对其有贡献的颜色来自何处的记录。由于您可以自由采样输入（性能问题除外），因此您可以收集适当的输出。

对我来说似乎有点高级，但我会阅读它并尽我所能，谢谢！你可能还应该点击谷歌搜索“斯塔姆的平流”；它有点旧，但Gamasutra有一篇文章可能很有用：对不起，但没有任何链接帮助我：/可能是因为我的理解水平不够。：“当然，普通PC”在2014年对我来说似乎不是一件可以定义的事情。我最好的猜测是去年智能手机的平均价格。