WebGL: Transparency vs Modeling

Hi Experts and Happy 4th of July!

Has anyone done testing on which is less processor heavy for WebGL - a map with an alpha channel for transparency (in my case just pure black and white) vs modeling.

I am building trussing for an architectural scene and a 10'x12"x12" truss stick modeled is a minimum of 1k tris...pretty heavy for how much I need to add to the scene. But a double side box (a box inside a box, with the inside box inverted) is only 24 tris. Pretty big savings....

But I am curious, based on what I have read, if the saving on the lower tris will be wasted with using transparency maps.

Thanks in advance for any advice,

Troy

 

It depends on how many truss's you will have in your scene, but in general I would say go with modeling them with polygons. Triangles are cheap these days. Since you are using WebGL it is more likely that your performance bottleneck would be in the number of individual objects that are in your scene rather than the number of triangles. There is also download size to consider. You would think that having more tri's would increase the size of your application, but you also have to consider the size of your texture that you would use to make the alpha.

 

Thanks for the quick reply @jRocket!

Totally agree with your logic. But I'm curious if it will save on the overall triangles. I also have close to a 1,000 chairs in the scene (corporate event). So I'm already pushing 600k tris per frame. I've noticed about 500k is the max to stay close up to 60 fps on WebGL.

My tiff with alpha channel is only 1024. So I don't think it will add too much more to my build size.

But that's why I'm asking. To debate the theory...thanks for joining the discussion.

Troy

 

Here is the demo I'm working on for reference before I add the truss:

HTTPS://www.hgroupdemos.com/AVDemo

Considering redoing my chairs using alpha maps also, that would dramatically decrease my poly/tri count.

Thanks again,

Troy

 

If the issue is running into your triangle limit but prefer the polygon version you could always just use both - in terms of both the chairs and the trusses - hi-poly for LOD0 and the low-poly alpha version for LOD1

 

@PlatformSix Hey stranger (and guru)! I'm using LOD on the chairs. But hadn't thought of using alpha maps on the lower LOD. That's a pretty clever idea, if I can match them perfectly.

But overall, do you think Alpha transparency maps are more expensive than poly/tri count?

 

If mip-maps work in WebGL (they may not, there's some warning in console about them), alpha transparency with low poly is the best bet for your project.

Performance isn't a linear resource, so it's difficult to measure poly vs texture fill and sorting across all hardware.

Just make like 1000 200poly planes and put a transparency texture on them and see if the performance is what you need