The Confusion in Reading the Source Code of the Edge-Curve Package

[ouzhou]

I want to understand how to create a Bezier curve. As far as I understand, it involves creating two triangles between two points to form a rectangle. The width of the rectangle is the distance between the two points, and the height is determined by the position of the control point. Then, pixels outside the curve are discarded using a shader function.

Is my understanding correct?

[jacomyal]

Hi @ouzhou,

You understood perfectly :)

The function to get the distance between the pixel and the Bézier curve is a bit tough, and I shamelessly copied it from @Yomguithereal's sigma-experiments.

Also, the fact that the segment joining both nodes is one rectangle's side causes a bug, since sometimes there are pixels on the other side on this segment that should be colored as well, when the edges are too large:

[ouzhou]

What optimizations has Sigma made for anti-aliasing in WebGL? For example, does it double the overall canvas size and then scale it down to 1 using CSS?

Question: Besides using mix for anti-aliasing, does node-circle have any other anti-aliasing optimizations?

in src/rendering/programs/node-circle/frag.glsl.ts

void main(void) {
  float border = u_correctionRatio * 2.0;
  float dist = length(v_diffVector) - v_radius + border;
 
  float t = 0.0;
  if (dist > border)
    t = 1.0;
  else if (dist > 0.0)
    t = dist / border;

  gl_FragColor = mix(v_color, transparent, t);
}

[jacomyal]

For anti-aliasing, we only use mix. Doubling the overall canvas size for anti aliasing would be too expansive in our case. We only do it to handle high devicePixelRatio devices.