Alpha issues in GLTF with multiple meshes

Questions
1

three.js 153

I am working on something where the hair is composed of several (4-7) meshes, each with its own alpha setup and as you can see from the clip, as you rotate the model, there are visual artifacts.

The models are authored in Blender for a non-web application so I don’t have a whole lot of input and as such, am hoping are three.js settings I can engage that will help.

I have tried experimenting with object.material.side and object.material.depthWrite without much success.

FWIW, dragging the GLTF onto a selection of the web based GLTF Viewers also exhibit the same kind of visual glitches, albeit different for each - this one has the least artifacts.

Any suggestions as to which of the many alpha/transparency related settings I should experiment with?

This is what it is supposed to look like (for some angles, it looks okay):
correct

2

Can you use material.alphaTest instead of material.transparent here? That’d be equivalent to choosing “Alpha Clip” in Blender.

Use of alpha blending (e.g. transparent=true) comes with a ton of tricky sorting issues, so it’s ideal to avoid that if you can.

3

Thank you for that insight - I’ll ask the content creator what value they use for Alpha Clip and propagate that into three.js with alphaTest. Trying some arbitrary values at the lower/upper end of the range seemed to make things worse but it’s a place to start.

FWIW, I tried the model again in your web based GLTF viewer and there are very few artifacts - maybe I can also learn something from that source.

Thank you.

4

At the moment, these two viewers are using different versions of three.js:

There will likely be some difference between the two, as a result of recent changes. If you prefer the result in r151 I believe there should be ways to recreate that in more recent three.js versions, by specifying object sort order.

5

Understood and thank you.

I just updated the version of three.js I was using from 152 to 153 and noticed some minor visual differences in this issue - seems like alpha sorting is a tricky problem to get right.

6

FWIW, the combination of settings for the material I ended up with and seemed to work best was:

object.material.alphaToCoverage = true;
object.material.depthWrite = true;

Not satisfying but I believe it’s a hard problem to solve empirically .

2 Likes