HLSL circular/spiral 过渡着色器

HLSL circular/spiral transition shader

我正在为 WPF 开发一些着色器,到目前为止,我设法实现了淡出和滑动着色器工作,但是对于这个,我不知道从哪里开始。 有人可以给我一些关于如何解决这个问题的提示吗? 我想要实现的目标如下:

谢谢

在我看来,构建任何复杂效果的最简单方法是将原始效果分解成小部分并将它们加在一起。在您的情况下,效果由 3 个部分组成:

  1. 5 个环依次填充
  2. 每个环从左边逆时针方向填充
  3. 圆环的填充是两端各一个圆

考虑到这一点,您可以分别为每个部分构建解决方案并将结果相加。

我假设会有一个变量 float progress; 从 0 滚动到 1,它决定了转换的进度。

以下是每个部分的一些起点:

对于1.你检查片段的纹理坐标到屏幕中心的距离,将最大距离分成5份。当进度为 0 <= 进度 < 0.2 时,第一个环是可见的,而 0.2 <= 进度 < 0.4 第二个等等。

对于 2. 您检查片段和中心之间的差异向量与左侧向量的角度,例如使用 atan2。在每个部分(例如 0.0-0.2)中,您将舞台的局部进度与角度进行比较以确定可见性,从而使片段以与角度相关的方式出现。

第 3 步可能是最棘手的部分,因为您必须构建进度环末端的中心并计算到片段的距离。如果在当前环厚度之内是可见的。

希望这些快速的想法能为您的效果提供一个粗略的起点!