Antialiased lines

[Neil H]

I was wondering if it was valuable to people that lines in WebGL be anti-aliased.

I have done this on my own branch of StageXL (which has deviated quite a bit from the released version).

I wanted anti-aliased lines, as well as support for the AS3 GraphicsStroke.scaleMode : String (Specifies the stroke thickness scaling).

I ended up changing all line drawing to antialiased (though not the fill -- for that, just draw the border of the fill with a line) using the following idea:

https://blog.mapbox.com/drawing-antialiased-lines-with-opengl-8766f34192dc

I ended up creating a GraphicsStrokeAntialiased that featured expandable lines with the extra 'signed normalized distance from center' vertex information necessary for the antialiasing.  The line thickness can be determined at draw time, and applied when the vertices are added to the vertex buffer for the new antialiased triangle shader program.  At draw-time, the actual scaling factor is also necessary to get the gradient thickness for the antialiasing.

Making the 'scaleMode' also work in 2D was easy, except it messed up the co-ordinates for gradients.  I don't draw lines with gradients anyway, so it didn't matter to me.

I don't think this caused much of a slow-down, and I get both antialiased lines, and the ability to decouple the line thickness from my zoom.  I did run into a couple of snags in the the way the inheritance for Mesh was done, but I just made changes as necessary.

The results look identical to the 2D context.

[Andrew Lugg]

I would be interested to see the code behind this, do you have a link to your github repo?

I am doing some updates to StageXL, and would be interested to see the changes that you have done.

[Neil H]

I would love to contribute to this project publicly, but that's not likely to happen.  My company doesn't have any history of open source contributions.  Perhaps one day I can convince them they should. 

The link I provided will give a hint about how to do this, but it took a few weeks to code all the end caps and details.