如何在片段着色器中使用可自定义间隙制作多条线

Question

我想要绘制一个图案，其中有多条线由可定制的空间分隔。线之间的间隙可以独立于线的粗细进行控制。挑战！我想避免使用循环，它可以轻松处理这个问题。

例如，使用像

cos()

这样的函数，线之间的间距始终与线的大小成正比，如下图所示：

但是，我尝试让函数的行为更像下面的示例：

但我在实现这一目标时面临一些困难（我的数学水平）。您有什么建议可以帮助我吗？预先感谢您。

Answer 1

根据您的图像，它似乎是水平线之间的 sin() 函数的一部分。
您有一些用户价值：

• sin() 开始之前的起始距离，

  x0

• sin()部分的距离

  ds

• 水平部分的距离

  dh

• 所有零件相对于原点的垂直距离

  vd

目标是一个函数 f(x)，返回适当部分的值。

一个简单的函数可以告诉

x

位于何处：

int f(float x, inout float pos) //returns 0: at initial part,  1: at sin() part,   2: at horizontal
{
   if (x <= x0)
   {
      pos = 0;
      return 0;
   }
 
   pos = x0;  // 'pos' is the 'x' of the beginning of this part
   while (1)
   {
       if (x <= pos + ds)
          return 1;   //sin() part
       pos += ds;
       if (x <= pos + ds + dh)
          return 2;
       pos += dh;
   }
}

我确信有更好、更快的功能。我把它交给你来找出答案。

一旦获得范围，只需计算

y

值。

float y(float x, int type_of_part, float pos)
{
   if (type_of_part==0 || type_of_part==2)
      return vd;

   //sin() needs the horizontal part = PI
   float dr = x - pos; //'x' relative to beginning of sin()
   return vd + sin(dr / ds * PI);
}

我希望你能明白。我请你纠正我的 GLSL 拼写错误。