Instanced Line Rendering
Native line rendering in WebGL leaves a lot to be desired. There’s inconsistency in the implementation, so you can’t trust that the line width you want will be available to you, for example. It’s also missing some pretty important features, like line joins and caps. For these reasons, quite a bit of work has been done to implement custom line rendering - summarized expertly by Matt Deslauriers in his excellent piece “Drawing Lines is Hard”.
Still, there’s one piece of the WebGL native line rendering that I rather like - the data structure. All you need to ship to the GPU are the vertices in your line segments or line strip - so one or two vertices per line segment. It’s easy to reason about and efficient to create, ship to the GPU, and update. With that in mind I’d like to present another line rendering technique for your consideration: instanced line rendering. It’s not quite as simple as native line rendering, but it’s very close, it’s very fast, and it’s a lot more flexible and featureful.
In this post, I’m going to review native line rendering, then present a few implementations of instanced line rendering, including one implementation that allows you to render a line, complete with caps and joins, in a single draw call.
