WebGL 雾着色器光标交互

WebGL Fog Shader Cursor Interaction

首先我想道歉,但我是学习 GLSL 和着色器的完全新手。没有一个地方可以让你学习所有关于着色语言的知识,所以我研究了很多并检查了人们创造的 examples/experiments 试图尽可能多地学习和理解。

我在网上找到了一个 Fog shader (experiment, the github source code can be found here) 并且看起来很酷,我想了解的是例如我如何在这个着色器中实现鼠标,所以当我将鼠标移到屏幕上时它pushes/moves/disperses 光标周围的雾气,然后在一两秒后它又回来了。我真的不需要有人为我创建完整的代码。我只需要一些指导、解释等...

我是将这些东西实现到顶点着色器还是片段着色器中,因为据我所知(如果我错了请纠正我)片段着色器只决定每个 "pixel/fragment" 的颜色,而顶点着色器好像是定义位置之类的地方?

所以在基础上我想知道如何实现像鼠标这样的交互(我知道如何将鼠标作为制服 x-y 发送到着色器,并进行标准化(转换为 0/1)以便这部分完全不是问题.

很难给出通用的建议。 99% 的应用鼠标交互发生在 GLSL 之外。用 three.js 术语表示,鼠标输入只会操纵各种场景节点的位置和旋转,也许还有 material 设置。这实际上是所有 3d 应用程序的 99% 本机或网络。为了好玩,人们有时会将一些鼠标输入直接放入着色器中。然后由你决定。对于雾计算从鼠标位置到顶点着色器中的顶点的距离。它离鼠标越近,将位置向后或向前或远离鼠标。或者在片段着色器中使用距离变暗。

问题是你要求雾在一两秒后才回来。这是更多的工作,而且在大多数应用程序中更有可能在着色器之外完成。

if.you 真的想在着色器中执行此操作,您可能会使用在对应于鼠标位置的位置绘制圆圈的纹理。每一帧你都会模糊那个纹理,所以它慢慢地变黑。您的顶点着色器将查看该纹理,其中每个顶点都会找到相应的位移。

换句话说,您现在至少需要 3 个着色器。一个画一个圆圈。它不一定是圆形着色器,可以只是一个通用着色器,用于绘制您恰好将圆形数据传递给的三角形。您需要淡化/模糊绘制历史的着色器。你需要雾着色器。

可能还有 20 多种方法可以做到这一点。

相关问答

就我个人而言,我觉得那些尝试在着色器中做尽可能多的事情更多的是挑战自己的极限,而不是务实的。这可能很有趣,对学习也有好处,但很少"best practice"