GLSL片段着色器-绘制简单的粗曲线

Question

我试图在片段着色器中绘制一条非常简单的曲线，其中有一个水平部分，一个过渡部分，然后是另一个水平部分。看起来如下：

我的方法：

而不是使用贝塞尔曲线（那样会使厚度变得更复杂），我尝试采取捷径。基本上，我只需要使用一个平滑步骤即可在水平线段之间过渡，从而获得不错的曲线。为了计算曲线的粗细，对于任何给定的片段x，我都会计算y并最终计算线上应为（x，y）的坐标。不幸的是，这并不是计算到曲线的最短距离，如下所示。

下面是一个图表，可能有助于了解我遇到的功能。

// Start is a 2D point where the line will start
// End is a 2d point where the line will end
// transition_x is the "x" position where we're use a smoothstep to transition between points

float CurvedLine(vec2 start, vec2 end, float transition_x) {

  // Setup variables for positioning the line
  float curve_width_frac = bendWidth; // How wide should we make the S bend
  float thickness = abs(end.x - start.x) * curve_width_frac; // normalize 
  float start_blend = transition_x - thickness;
  float end_blend = transition_x + thickness;

  // for the current fragment, if you draw a line straight up, what's the first point it hits?
  float progress_along_line = smoothstep(start_blend, end_blend, frag_coord.x); 
  vec2 point_on_line_from_x = vec2(frag_coord.x, mix(start.y,end.y, progress_along_line)); // given an x, this is the Y

  // Convert to application specific stuff since units are a little odd
  vec2 nearest_coord = point_on_line_from_x * dimensions;
  vec2 rad_as_coord = rad * dimensions;

  // return pseudo distance function where 1 is inside and 0 is outside
  return 1.0 - smoothstep(lineWidth * dimensions.y, lineWidth * 1.2 * dimensions.y, distance(nearest_coord, rad_as_coord));

  // return mix(vec4(1.0), vec4(0.0), s));
}

因此，我熟悉给定的线段或线段，计算到该线的最短距离，但是我不太确定如何使用此弯曲段来解决。任何建议将不胜感激。