用三个JS和自定义着色器在同一SIN波路径上扭曲多个网格

发布于 2025-01-25 13:59:28 字数 270 浏览 3 评论 0原文

我试图在同一正弦波上具有多个图像/网格的效果。我可以单独扭曲所有,但是当然它们不是同步的。

在顶点着色器中,我有此行的简单失真:

pos.z += sin(pos.y);

我的想法是使sin浪潮独立于pos.y值并替换它具有类似于当前位置y在我所有图像高度的位置y。

我的另一个想法是只有一个网格并粘贴上面的每个图像,但是我不确定这是一个好练习,还是根本可以起作用。

我将为如何实施这一点提出任何建议。

谢谢!

Im trying to create an effect where I have multiple images/meshes on the same sine wave. I can distort all separately, but of course they are not in sync.

In the vertex shader I have this line for the simple distortion:

pos.z += sin(pos.y);

My Idea would be to make the sin wave independent from the pos.y value and replace it with something like the current position y in the height of all of my images.

My other Idea would be to have only one mesh and paste every image on it, but I am not sure if it is a good practice or if that would work at all.

I would be greatful for any suggestion on how to implement this.

Thanks!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

滥情哥ㄟ 2025-02-01 13:59:28

是的,这是可能的。请参阅此示例,显示了同步中的4个相邻网格。您必须调整某些值才能使它们全部同步。目前,我只能以45度增量的指示这样做。但是您可以使用多个不同的幅度和频率波。

该示例是使用Trix.js代码来执行动画的,但是我能够使用着色器复制其中的一些。

让我知道您是否仍然需要帮助。

Yes, this is possible. See this example, which shows 4 adjacent grids in sync. You have to adjust certain values to put them all in sync. At present, I had been able to do so only in directions of 45 degree increments. But you can use multiple waves of varying magnitudes and frequency.

The example was created using three.js code to perform the animation, but I have been able to replicate some of this using a shader.

Let me know if you still need help.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文