Reducing draw calls for sprites in a 3D scene

[Jake_Johnson]

Hey all,

Curious what the workflow is for optimizing sprites in a 3D scene. Obviously when it comes to 3D objects in a scene you have options like batch groups, lower amounts of materials, frustum culling etc…

What should I be doing for animated sprites that are in a 3D scene? I’m using sprites to simulate a crowd in stadium seating and am pasting the same sprites around a lot. It’s not using an insane amount of draw calls for a pretty good effect but was just curious if there is any optimization I should/could be doing since this is for low-end mobile devices

[yaustar]

You can use hardware instancing for a crowd effect like this.

Hardware Instancing | Learn PlayCanvas and engine example: https://playcanvas.github.io/#/graphics/hardware-instancing

Let’s assume there are 3 frames for the animation and 300 crowd people.

You would have 100 instances of frame 1 as a plane with a material, 100 instances of frame 2 and 100 instances of frame 3.

Then you would swap them around to simulate sprite animation. ie move frame 2 instance positions to where frame 1 instances are, frame 3 to frame 2 and frame 1 to frame 2.

[Jake_Johnson]

Thanks for the response. I’ll try to implement this.

In the documentation you linked it says:

“Each instance of the mesh can have a different limited amount of state (for example, position or color).”

It gives the example of position and color as attributes that can differ between objects. Is there a complete list of what can differ between meshes?

Also in your example… would that shake out to 3 draw calls added to the scene? 1 per frame?

Thanks again!

[Leonidas]

With hardware instancing you can have unique position, rotation and scale per instance just by filling the array buffer showed in the example.

There is also space for a 4th attribute without adding a new vertex buffer, but still you will need to write a custom shader to use that (e.g. for diffuse color). If you are determined to have more attributes, that’s doable with a custom vertex buffer.

Here is a related post about custom colors per instance using HW instancing:

Hardware instancing and color

Hi, I’m building a football stadium with thousands of moving plane primitives in the stands, that comprise a card stunt system. Each one will be coloured with a single colour, and will basically act like a pixel in an image, and when assembled together, they’ll recreate that image. I also want to be able to change the image, so in a “wave”, cards will gradually flip around and change to a new colour to reveal a new image within a second or two. I’m using hardware instancing, as explained here:…

[yaustar]

@Jake_Johnson

Also in your example… would that shake out to 3 draw calls added to the scene? 1 per frame?

In theory, yes