Does pixi.js call gl.drawArrays for each sprite in the scene?

[eguneys]

I am trying to learn how to render 2d sprites using webgl. I use this to render a single quad:

 

  let positions = [
    -1, 1,
    -1, -1,
    1, -1,
    -1, 1,
    1,-1,
    1, 1
  ];

  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

 

 Now I want to render more sprites, do I have to setup positions like this for each sprite and call `gl.drawArrays`?

[ivan.popelyshev]

 

Stuff that you wrote is defining Geometry. You can define PIXI Geometry for meshes. For sprites its different: consecutive sprites are added to dynamic geometry.

https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/batch/AbstractBatchRenderer.js

It actually batches consecutive sprites, graphics and meshes in the same drawcall. Here's how to make your own shader that uses this: https://www.pixiplayground.com/#/edit/wDkRfBh_mws1~L3IZkKC6

 If graphics or mesh is bigger than BATCHABLE_SIZE, then it will be handled without batching by binding its geometry : https://github.com/pixijs/pixi.js/blob/dev/packages/mesh/src/Mesh.js#L253