opengl-esopengl-es-2.0

Is it possible to draw line thickness in a fragment shader?


Is it possible for me to add line thickness in the fragment shader considering that I draw the line with GL_LINES? Most of the examples I saw seem to access only the texels within the primitive in the fragment shader and a line thickness shader would need to write to texels outside the line primitive to obtain the thickness. If it is possible however, a very small, basic, example, would be great.


Solution

  • Quite a lot is possible with fragment shaders. Just look what some guys are doing. I'm far away from that level myself but this code can give you an idea:

    #define resolution vec2(500.0, 500.0)
    #define Thickness 0.003
    
    float drawLine(vec2 p1, vec2 p2) {
      vec2 uv = gl_FragCoord.xy / resolution.xy;
    
      float a = abs(distance(p1, uv));
      float b = abs(distance(p2, uv));
      float c = abs(distance(p1, p2));
    
      if ( a >= c || b >=  c ) return 0.0;
    
      float p = (a + b + c) * 0.5;
    
      // median to (p1, p2) vector
      float h = 2 / c * sqrt( p * ( p - a) * ( p - b) * ( p - c));
    
      return mix(1.0, 0.0, smoothstep(0.5 * Thickness, 1.5 * Thickness, h));
    }
    
    void main()
    {
      gl_FragColor = vec4(
          max(
            max(
              drawLine(vec2(0.1, 0.1), vec2(0.1, 0.9)),
              drawLine(vec2(0.1, 0.9), vec2(0.7, 0.5))),
            drawLine(vec2(0.1, 0.1), vec2(0.7, 0.5))));
    }
    

    enter image description here

    Another alternative is to check with texture2D for the color of nearby pixel - that way you can make you image glow or thicken (e.g. if any of the adjustment pixels are white - make current pixel white, if next to nearby pixel is white - make current pixel grey).