Performance [WebGL]: 2D Sprite Mesh Type Import Settings - Tight vs. FullRect

I've published the beta version of a WebGL game and am currently working on optimzing the loading times and the general performance. I've noticed that Unity by default imports sprites using a Tight Mesh, resulting in a immense number of triangles within the scene (see figure A).

[/IMG]
Fig A: Mesh Type Import "Tight", Shaded Wireframe​

This seems extremely inefficient by sheer numbers of triangles. The same scene with a Full Rect mesh type import settings does look like this:

Fig B: Mesh Type Import Settings "Full Rect", Shaded Wireframe​

I guess the second version is drawing a lot of uneccesary alpha pixels, but the number of triangles were reduced by 96.5%.

My questions:

1. From a general performance perspective: For a 2D game, which Mesh Type import is the better option?
2. Especially for WebGL: Which version is the better option?

 

In general I'd say full rect plus make sure you're using alpha clipping. But vertex counts mean far less than batch counts, as WebGL can handle millions of verts in a scene on a modern laptop easily.. unless you're targeting WebGL 1 (which is now deprecated), vertex counts on phones/tablets matter much more than on laptops or desktops.

 

How do I make sure to use "alpha clipping"?

 

In material properties, see the effect of it below - it's up to you how much to clip, but basically try to clip as much as looks good for the particular sprite. For a flare sprite like in the image, you basically would want something like 0.001.. but for some stuff even 0.5 looks great (like for a sprite with a border etc.).

The less pixels being rendered the better for performance, especially for transparent materials.. and even a threshold of 0.001 can avoid a ton of rendering but still look almost as good as not being clipped at all.

 

Usually overdraw is a worse performance drain than complex geometry, so Tight is better.

You may want to use the Custom Outline tool of the Sprite Editor to fix the especially egregious cases where Tight produces overly complex geometry.

 

I could be mistaken - always good to learn something new. For my next project I'll be sure not to write it off so quickly. My assumption has been that 20m triangles using tight vs. 1m with rect+clip wasn't even comparable.. possibly a dumb assumption, but it made sense to me in my limited wisdom

I've also been under the impression that alpha clipping was for the purpose of mitigating overdraw in addition to using tighter geometry, and that for triangles with transparency, it's best to aim for the least number possible (granted, an opaque shader might be all that's needed in this case, but the hit is still relevant to the topic). I've also been thinking the main purpose of tight was for trying to pack as many things as possible into the same sheet (for projects where bandwidth or storage considerations are a priority).

I'd suggest trying both approaches and a combination and go with whatever works best for your scene.

+1

 

I don't think OP's scene has anywhere near 1m tris let alone 20m. I have scenes that are similar. For me, it's all <100K tris for several times overdraw savings when Tight is on.

I would be curious what the # is for OP and whether it's in the ballpark of being a bottleneck. Meanwhile, in the scene you can see some overlapping semi-transparent light beams / atmosphere which I suspect are causing several times overdraw which I would focus on for being a potential bottleneck.

I don't doubt that full rect + clip may be better in some situations: you note particles. I'm sure "it depends."

 

If you want lower vertex count with complex shape sprite and don't want use full-rect mesh.
You can try increase extrude edge a bit higher.