How to render Graphic rect by instanceGeometry

[pencil_love]

I learned to use PIXI.Mesh( ) and PIXI.Geometry().addAttribute (instance:true) to render instanceMesh

I want to render  many  similar graphics, And I want to improve informace by use instanceBuffer(to keep the Drawcall 1).

Can I addAttribute on graphics.geometry(graphicsGeometry),and pass it to Mesh or Graphics？When I pass graphicsGeometry to Mesh's first argument.the VSCode tell me geometry is not == GraphicsGeometry.

[ivan.popelyshev]

GraphicsGeometry adds its attributes in constructor. Later, you can set "instanced" of those attributes. That leaves only one problem: which algorithm will fill extra attribute with translationMatrix, and other stuff that is usually an uniform. You have to make your own shader and batcher for graphics in that case. I can help you next weekend if you start this thing.

[ivan.popelyshev]

As a reference, here is what i do when i need to draw many bars: https://github.com/gameofbombs/pixi-candles/blob/master/src/Bars.ts . 

[ivan.popelyshev]

@ShukantPal explain what we have for instanced batchers please?

[pencil_love]

9 minutes ago, ivan.popelyshev said:

GraphicsGeometry adds its attributes in constructor. Later, you can set "instanced" of those attributes. That leaves only one problem: which algorithm will fill extra attribute with translationMatrix, and other stuff that is usually an uniform. You have to make your own shader and batcher for graphics in that case. I can help you next weekend if you start this thing.

I remember that threejs use four vector4 attributes and compose them in vertex shader.

 

[ivan.popelyshev]

If you draw only rects, then you can try to use pixi-candles thingy. If you make extra step, you can modify its buffer to hold different rects. Are your rects rotated relatively to each other?

[pencil_love]

Just now, ivan.popelyshev said:

If you draw only rects, then you can try to use pixi-candles thingy. If you make extra step, you can modify its buffer to hold different rects. Are your rects rotated relatively to each other?

THANKS for Reply. I just want different position;

[Shukant Pal]

We don't have instancing in the core batch renderer right now. I never completed @pixi-essentials/instanced-renderer either.

For instancing GraphicsGeometry, you would probably add a translationMatrix attribute that is equal to the world transform of each Graphics instance being drawn. You would essentially buffer the translationMatrix using Matrix.toArray into a Float32Array instanced attribute.

Your vertex shader then would multiply this translationMatrix to the incoming points before the projectionMatrix. The rest of the shader would be the same as the default.