【问题标题】:WebGL Fog Shader Cursor InteractionWebGL 雾着色器光标交互
【发布时间】:2018-07-13 10:38:54
【问题描述】:

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

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

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

所以基本上我想知道如何实现像鼠标这样的交互(我知道如何将鼠标作为制服 x-y 发送到着色器,并规范化(转换为 0/1),这样那部分就不是问题了。

【问题讨论】:

    标签: glsl webgl shader


    【解决方案1】:

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

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

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

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

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

    相关问答

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

    就我个人而言,我觉得那些试图在着色器中尽可能多地做的事情更多是在挑战自己的极限而不是务实。这可能会很有趣并且有利于学习,但它很少是“最佳实践”

    【讨论】:

    • 非常感谢,这是非常详细的解释,老实说,它给了我一些学习/研究的方向。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-07-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多