I realize transparency is a tricky issue in WebGL/three.js. I was wondering if there any tricks I can use to get around those issues in my specific case.
I am doing a visualization app and would like to try and use transparency. I immediately bumped up against the transparency challenge:
I am rendering a spaghetti-like buffered tube geometry. I am using a texture and opacity map to isolate regions of solid and transparent sections.
Is there any way I can take the triangle list and explode it into unconnected triangles as separate objects that I then render with transparency? Just a thought.
I’m afraid handling each triangle as a separate render item will kill your performance since the amount of draw calls is directly related to the amount of triangles. Draw calls are an expensive operation you want to minimize.
Right. Would it be possible to use my alpha map as a discard map in the fragment shader? The idea here is to treat the tube as solid and just discard fragments below the alpha map threshold. So a binary decision. All I really want to do is preserve the solid tube section and ignore the rest. I can then just draw the rest as a splined line. Would that work?
