ParticleContainer to plot networks

[Renato Fabbri]

need to plot networks with thousands of nodes and tenths of thousands of edges (or hundreds of thousands of edges). My guess is that using a ParticleContainer for the nodes and another for the edges is a pretty nice shot. Came up with this routine:

function plotNet () {
  const nodes = [ // each entry is the position of a node, for example:
    [130, 200],
    [230, 350],
    [50, 100],
    [500, 100]
  ]
  const edges = [ // each entry is the node indexes of the edge, for example:
    [0, 1],
    [0, 3],
    [1, 2],
    [1, 3],
    [2, 3]
  ]
  function plotNet (nodes, edges) {
    nodes.forEach(n => mkNode(n))
    edges.forEach(e => mkEdge(nodes[e[0]], nodes[e[1]]))
  }
  function mkNode (pos) {
    const circle = new PIXI.Sprite(circleTexture)
    circle.x = pos[0]
    circle.y = pos[1]
    circle.anchor.x = 0.5
    circle.anchor.y = 0.5
    nodeContainer.addChild(circle)
  }
  function mkEdge (pos1, pos2) {
    const line = new PIXI.Sprite(lineTexture)
    const dx = pos2[0] - pos1[0]
    const dy = pos2[1] - pos1[1]
    const length = (dx ** 2 + dy ** 2) ** 0.5
    line.scale.set(length / 1000, 1)
    const angle = Math.atan2(dy, dx)
    line.rotation = angle
    line.x = pos1[0]
    line.y = pos1[1]
    edgeContainer.addChild(line)
  }
  const nodeContainer = new PIXI.ParticleContainer(10000, {
    scale: true,
    position: true,
    rotation: true,
    alpha: true
  })
  const edgeContainer = new PIXI.ParticleContainer(10000, {
    scale: true,
    position: true,
    rotation: true,
    alpha: true
  })

  const myLine = new PIXI.Graphics()
    .lineStyle(1, 0xff0000)
    .moveTo(0, 0)
    .lineTo(1000, 0)

  const myCircle = new PIXI.Graphics()
    .beginFill(0xffffff)
    .drawCircle(0, 0, 5)
    .endFill()

  const app = new PIXI.Application()
  document.body.appendChild(app.view)
  const circleTexture = app.renderer.generateTexture(myCircle)
  const lineTexture = app.renderer.generateTexture(myLine)
  app.stage.addChild(edgeContainer)
  app.stage.addChild(nodeContainer)
  plotNet(nodes, edges)
}

which seems to work fine. Regarding speed, would you suggest something or that is how it is done?

Edited November 23, 2020 by Renato Fabbri

[Renato Fabbri]

I am starting to assume this is in fact how it is done. Any other channel through which I can ask about it?

[ivan.popelyshev]

My current approach for those thing is to build your own mesh with special AA shader  I sent you an apology invitation to pixijs slack

[Renato Fabbri]

I am guessing that AA shader would be "Antialiasing" shader. No clue to how that would be and why it would be a good approach. Any direction here?
I just accepted your invitation. Thank you!