[Solved] Weird issue with transparency and flipped normals

Questions
1

Hi guys,

I have an issue. I created 3D models in Blender, and import them from GLB files (binary GLTF) format. All objects are constructed the very same way. They contain:

  1. a body
  2. an outline, which is same as body, just scaled up slightly, and all normals flipped
  3. extras (if any additional shapes are required)

When I select an object, I made it so that the outline color is set to red.

Now, when the object is transparent (all materials have opacity < 1 and object has transparent = true), I would expect all objects to look like the one on the left/right. Logically, when the object is transparent, you’d see the outline part behind it (which is red).

I have no idea how the middle object has the outline visible only around the edges (the body is transparent with opacity < 1.0). I would actually love to have that effect, even though it’s some sort of a bug that I don’t understand. I’m not changing depthWrite, not specifically sorting anything, all objects have the 3 elements I listed above. Yet, two of ~7 models I made show the outline literally around the edge - which is awesome, but is counter to what I would expect.

This is a pretty big project (stackdraft.io), I don’t have a jsfiddle, but I was hoping someone might give me a clue what might be going on. I even looked at the GLTF exported json to compare if the materials somehow differ. I also looked at the objects from top and around, to see if perhaps the outline was placed differently in relation to the body (it’s not, they’re centered, outline is always bigger).

34

This is how they look colored blue, with the left and center one selected (when not transparent).

20

Thanks for any ideas you may have.

PS I should mention that, when the objects are not transparent, the outline shows correctly near the visible edges (“around” the object).

2

Hi!
Just a thought. Do all the objects have the same hierarchy?
Like:

mainObject
    body
    outline
    extras

and not

mainObject
    outline
    body
    extras

To be honest, I don’t know what the real hierarchy of your objects, just compare it between of those which look correctly and those which don’t.

1 Like
3

Hi! Thank you for replying! Yes, here’s the hierarchy (all have the same):

48

Because Blender could have sorted them alphabetically, I inspected GLTF - the order under the “nodes” key preserves “Model” before “Outline” in both the valid and “broken” models.

I am very stuck :frowning: and losing hope. There has to be a solution to this…

PS Note that face culling is on by default, so the rendering order should not matter - the outline has normals pointing inwards, so the “front” faces (closer to the viewer) are not visible. The transparent objects are red, because you can see through the body part and you see the outline (far from the viewer). How the hell is a transparent body seemingly opaque in the middle model… Seemingly, because you can clearly see the floor grid.

4

After trying to fix this + researching for a couple of hours, I found this thread (that I’ve read at least twice before already) and understood it applies to me.

Key quote:

But in your case, you have two spheres that are in the same location, and hence are equidistant from the camera. That is the problem – which one to render first; it is a toss-up.

I moved the body part slightly back, and it works as expected.

EDIT: Initially here I said I moved the body part relative to the outline in blender. Truth is, they share the center, so it’s literally a toss-up which one gets rendered first.

To sum up - either use renderOrder programmatically or place the body further from the camera. Probably the first one, since the scene could be rotated.

To quote different part of that thread:

Transparency in WebGL is tricky.

Cheers

EDIT2: Setting renderOrdrer = 1 on the outline part (so it gets rendered first, before the body) solved the problem.

18
18900Ă—414 38 KB

2 Likes