Drawing thousands of lines in WebGL or Canvas

I am trying to draw thousands of lines between nodes, and the line positions are constantly changing (i.e. consider a node being dragged while connected to thousands of children by these lines).

Below is a simplified example of an issue I have. When drawing several thousands of lines in WebGL or Canvas, the rendering takes a long time (up to a second or more). For each line that needs to be updated, I clear the PIXI.Graphics object and then redraw it from scratch.

I was wondering if there is a way to improve this by batching the draw to WebGL somehow. Ideally the render time could be reduced significantly, so I could draw up to 100,000 lines in less than a second.

Warning: It may crash your browser tab - lower the number of objects to below 20,000 if this happens.



var container = new PIXI.Container(),
i,
renderer = PIXI.autoDetectRenderer(1000, 1000);
renderer.backgroundColor = 0xFFFFFF;
document.body.appendChild(renderer.view);
for (i = 0; i
`



Pure JavaScript/WebGL/Canvas improvements are useful as well (Pixi is not required).

As a first step instead of 20k graphics objects containing each a single line use a single graphics object and put the 20k lines in it



var container = new PIXI.Container(),
i,
renderer = PIXI.autoDetectRenderer(1000, 1000);
renderer.backgroundColor = 0xFFFFFF;
document.body.appendChild(renderer.view);

line = new PIXI.Graphics();
line.lineStyle(1, 0x888888, 1);
for (i = 0; i
`



PIXI will then batch all those lines into a single buffer and draw it using a single draw Elements command.

StackExchange Code Review Q#110224, answer score: 4