How deep in the heirarchy can transparency go?

Questions
1

Is the “Mesh” entity the deepest level at which transparency can exist?
Any chance of making selected triangles in BufferGeometry transparent?

Best,

OLDMAN

2

Technically speaking, Mesh can’t be transparent. It’s only the Material that’s assigned to the Mesh that can (materials specify how things are displayed, so it’s their role to determine whether or not something is transparent.)

Making specific triangles transparent is possible by using UV mapping combined with .alphaMap, simple custom shaders, or .vertexColors.

3

Do try to keep opaque and transparent materials separate, though. You’ll avoid a lot of subtle sorting problems if you don’t put opaque triangles in the transparent render pass.

4

Just out of curiosity… Does this convention still apply once we would be using the WebGPU renderer?

5

Yes, it’s true for all rasterizing renderers, regardless of the graphics API. A path-tracing renderer (like three-gpu-pathtracer) would avoid sorting issues, and WebGPU is better-suited for path tracing than WebGL.

Certain techniques like order-independent transparency (OIT) can also reduce the problem. It’s costly in WebGL, but perhaps the cost comes down in WebGPU.

tl;dr - WebGPU does not automatically solve these issues, but does give three.js a better toolkit and more options to mitigate them in the future.

1 Like