WebGL雾着色器光标交互

时间:2018-07-12 11:20:54

标签: glsl webgl shader

首先,我要道歉,但是我是学习GLSL和着色器的新手。没有一个地方可以让您全面了解着色语言,因此,我进行了大量研究,并检查了人们尝试学习和理解的示例/实验。

我在网上找到了一个Fog shader(实验,可以在here上找到github源代码),看起来真的很酷,例如,我想了解的是如何在内部实现鼠标此着色器,因此,当我将鼠标移到屏幕上时,它会推动/移动/分散光标周围的雾,然后在1或2秒钟后返回。我真的不需要有人为我创建完整的代码。我只需要一些指示,说明等...

我是否将这些东西实现到顶点着色器或片段着色器中,因为据我了解(如果我错了,请纠正我)片段着色器仅决定每个“像素/片段”的颜色,而顶点着色器似乎定义位置等的地方?

因此,从根本上讲,我想知道如何实现像鼠标这样的交互(我知道如何将鼠标作为制服xy发送到着色器,并进行规范化(转换为0/1),所以这部分根本不是问题。 / p>

1 个答案:

答案 0 :(得分:0)

很难给出一般性建议。对于99%的应用程序,鼠标交互发生在GLSL之外。用three.js术语来说,鼠标输入只能操纵各种场景节点的位置和旋转以及可能的材质设置。这实际上是所有3d本机或Web应用程序的99%。出于娱乐目的,人们有时会直接将一些鼠标输入放入着色器中。然后由您决定。对于雾计算顶点着色器中从鼠标位置到顶点的距离。越靠近将位置向后或向前或远离鼠标推。或在片段着色器中使用距离来变暗。

问题是您要求雾只能在一两秒钟后再出现。在大多数应用程序中,这需要做更多的工作,而且更有可能在着色器之外完成某些工作。

如果真的要在着色器中执行此操作,则可能会使用一种纹理,将其绘制到与鼠标位置相对应的圆上。每帧您都会使该纹理模糊,从而使其慢慢淡化为黑色。您的顶点着色器将查看该纹理,在该纹理中,每个顶点都会找到其对应的位移。

换句话说,您现在至少需要3个着色器。一个画一个圆圈。它不必是圆形着色器,而可以是绘制将碰巧将圆数据传递给的三角形的通用着色器。您需要使着色历史模糊/模糊的着色器。并且需要雾着色器。

可能还有20种方法可以实现这一目标。

相关问答

Creating a smudge/liquify effect on mouse move that continuously animates back to the original state using webgl

我个人认为,尝试在着色器中尽可能多地进行操作的人更多是要挑战自己而不是务实。那可能很有趣,也很有益学习,但是很少是“最佳实践”