Help with model not rendering correctly

For some reason the screen always renders above the taskbar, I’ve made sure nothing is wrong with the .glb file so I’m 99% it’s something in the code that I’ve missed.

As you can see the taskbar gets cut off.

To be honest I’m not sure what’s wrong, I’ve been trying to fix this for around a week now and I’ve gotten nowhere, I’ve put the github repo in my bio if someone could take a look at the code that would be amazing.

How :eyes:? Does the model render correctly in gltf-viewer?

No it doesn’t, that means it’s the files fault then right? I swear there’s nothing with blender but I guess I’ll check again.

Blender rendering engine is quite very different than three.js renderer - that includes the render order calculations and alpha blending. Could you share a screenshot of how the model looks in Blender, and a separate one showing configuration of the material alpha hashing on the screen material?

2 Likes

Here’s the Blender screenshot but I don’t know what you mean by ‘configuration of the material alpha hashing’ I’m still quite new to Blender :sweat_smile:

In Blender’s material tab, with the screen selected, look for the Blend mode setting and make sure it’s set to “Opaque” (not “Alpha Blend”). Same for anything that doesn’t strictly need to be transparent.

Well they were set to alpha blend and I set them to opaque instead, however the problem still persists. Got any other ideas?

Had a look at your code, looks like you need to turn on depthWrite on the taskbar material.

You can intercept it in the material.traverse on line 70. Just chuck in something like “if material.name == ‘Working_MoniterScreen_Taskbar’” and then override material.material.depthWrite to true.

p.s. I’d suggest renaming the variable “material” to “mesh” or “object” to better represent what it is.

The problem is the alpha blending, no doubt about that. This is what causes sorting issues and disables depthWrite. You can check the material list in https://gltf.report/ and see several with alpha blending enabled, or run the script below and re-export to fix the issue.

for (const material of document.getRoot().listMaterials()) {
	material.setAlphaMode("OPAQUE");
}

2 Likes

Ahh thank you @donmccurdy!

I was trying to figure out how to prevent this in future, didn’t know alpha blending in Blender related to depthWrite in three.js. Is this documented anywhere? I couldn’t find info about it when trying to answer the OP’s question.

YOU FIXED IT!!! :pray: Thank you so much! I added what you suggested and changed the name to object.

1 Like

That’s interesting. I did change the alpha-blending to opaque in blender (forgot to push the change to Github sorry) but it didn’t fix it.

In my experience it usually gives best results to disable depthWrite for “transparent” materials, so GLTFLoader (and most glTF viewers I’ve checked) do that automatically. There are some situations where you’d want to keep the transparency but disable depthWrite. But when a material is marked as transparent but doesn’t actually contain any transparency, as was the case here … things can go badly, in more ways than this. :slight_smile:

1 Like