Faces missing on semi transparent objects at certain angles

Questions
1

I have lego blocks. Most of them are opaque, but some are semi transparent.

For some reason, the semi transparent blocks have missing faces. I have checked the normals on the faces and they are all facing outwards. Models are imported .glb files created in Blender 2.8.

Missing faces

Here are the two materials:

Opaque (all faces visible and works fine):

THREE.MeshStandardMaterial({color: 0xffffff, roughness: .7})

Semi-transparent (some faces missing):

THREE.MeshStandardMaterial({color: 0xffffff, roughness: .7, transparent: true, opacity: .7}))

Iā€™ve tried MeshLambertMaterial and MeshPhongMaterial material types and that makes no difference.

It is the same for all the different shape lego pieces.

The angle of view seems to make a difference. See here with the scene rotated 45 degrees. You can see that the faces nearest us (pointed to with arrow) are now visible:

Missing faces2

Any idea how I solve this please? Thank you!

2

check your camera near and far values. unreasonably large range like 1-100000 when your scene is in 10-20 can create similar bugs.

3

Thank you very much. I did have quite a wide range for the near and far values. So I just changed that as recommended and unfortunately it hasnā€™t solved the issue. Iā€™ve calculated (by watching the objects getting clipped) that the optimal near and far values are 50 and 80 which clips just in front of the scene and just behind it.

Even if I clip more tightly the issue remains:

Missing faces3
Missing faces3823Ɨ480 78 KB

Camera setting is:

this.camera = new THREE.PerspectiveCamera(12, 1000 / 750, 50, 80);

The FOV is intentionally very small by the way because I need the ā€œnobbinsā€ of the blocks to overlap, but donā€™t want an ortho camera. Might that be the cause?

Thank you :slight_smile:

4

Itā€™s in general recommended to set Material.depthWrite to false whenever you set Material.transparent to true. This already happens for all transparent glTF assets you load via THREE.GLTFLoader.

5

Thank you for your response. I have just tried this and unfortunately thatā€™s not helping either. The transparent material is now:

THREE.MeshStandardMaterial({color: 0xffffff, roughness: .7, transparent: true, opacity: .7, depthWrite: false})

Still looks the same:

Missing faces4

Iā€™ll leave this setting in place though as itā€™s recommended. Thank you :slight_smile:

6

holy crap, who came up with that :open_mouth: this is seriously inobvious behavior

7
8

Well, itā€™s not a solution for all cases but in general recommended. Anyway, depth sorting issues are somewhat an unsolved problem right now and possible workarounds use case sensitive. TBH, I donā€™t know how to solve this for you Lego block.

9

OK. Thanks for looking at it anyway. Much appreciated.

10

Doug, did you ever find the reason? I am curious

11

No Iā€™m afraid I didnā€™t. Iā€™m just going to live with it. It seems to be related in some way to being a transparent material at certain camera angles, but beyond that Iā€™m stumped.

12

Drop the jsfiddle link then. Or maybe scene.toJSON() output.

13

Thank you thatā€™s very kind of you. Unfortunately is in a deeply complicated Angular implementation so extacting that would be pretty hard. If you want to have a play with the live thing though you can do so here: https://oodlu.org/share-app/blocs

14

Lol, what do you expect me to do with this:
Screen Shot 2020-04-16 at 14.45.22

I am not on that level :slight_smile:

1 Like
15

Yeah, you wouldnā€™t be able to do anything with that as itā€™s compiled bundles. I just thought you might be interested to see the app. Iā€™m not too worried about solving this so worry not. I appreciate your offer though, thank you :slight_smile:

16

Could this be the reason, you can set ļ¼šmesh.frustumCulled = false

17

Apologies for the delay, Iā€™ve been up to my eyeballs. Thank you for this. I just tried it and unfortunately it didnā€™t help. I appreciate the suggestion though.

18

I have just run into this issue, it happens when I set my blender materials to alpha hashed and move the camera to certain angles.
Are there any new developments on this?
Did you manage to fix it?

19

I just ran into this and I found I could solve it by setting
object.renderOrder = 1
on the THREE.Object3D (thatā€™ll be the Mesh in your case, op).