GLTF export face direction issue

Questions
, ,
1

I’m having weird issues exporting a model from Three.js and having it appear properly in PowerPoint. When exported to gltf and imported into PowerPoint it looks like this:

image
image1754×892 588 KB

I’ve set and unset these flags on the export and nothing changes:
let options = {

  •   binary: true,*

  •   forcePowerOfTwoTextures: true,*

  •   onlyVisible: true,*

  •   embedImages: true,*

  •   forceIndices: true,*

}

But when i run it through the GLTF online converter by Lewy here: https://blackthread.io/gltf-converter/ with nothing but ‘embeded images’ turned on, it then works in PowerPoint without issue:

image
image1080×684 357 KB

I’m at a complete dead end as to how to fix this :frowning:

2

I’ve done some more digging and found that it seems to have something to do with alpha transparencies. When blend mode is set to ‘mask’ in the gltf file, the model comes into PowerPoint and displays without issue (unless there are any transparencies on the texture). When alpha blend mode is ‘blend’, that’s where the issue are seen.

3

Hm - could it be that your materials are set to transparency, just with opacity equal 1?

Could be an unhandled edge case here, since the material isn’t really transparent. :point_up:

4

Thanks for the response, I’ve been digging around in exactly that spot and changing things on my materials. When I turn transparency off altogether, everything is fine, and the alphaMode becomes blend, however I have other semi-transparent materials that then have no transparency.
It seems to be an issue with PowerPoint and how they’re choosing to display models with transparencies, they don’t seem to have a way to sort faces with transparent materials and that’s what’s causing the issue. So it’s a choice between full transparency on a pixel, or no transparency on a pixel. Quite sucky.

ADDED: oh so you’re saying that if opacity on the material is set to 1.0 but it has transparency that will cause issues??

5

Yep, seems like that if misses that case. Could be a good idea to file an issue on github and link this thread (kinda late to look into it rn, adding this edge case may also be impossible because of textures with transparency or something, so it’s probably up for discussion on github.)

1 Like
6

yeah cheers, I just dropped the opacity a bit on the overall texture so it was slightly see-through and it still came in broken:

image
image834×632 251 KB

The thing is, this mesh is made from combining geometry of all the individual faces together, previously they were all separate. When they were all separate, there was still some minor depth fighting on some edges but they were mostly all working, so the issue only happening when i tried to combine them (shrug)

7

Note that it’s best to keep transparent and non-transparent objects separate. If you merge them, many engines will run into sorting issues. In three.js you can maybe work around that by changing depthWrite, but that setting won’t export to Powerpoint so I would tend to assume depthWrite=false there, for anything marked as transparent (whether it’s actually got opacity<1 or not).

1 Like
8

thanks for the tip donmccurdy, that’s helpful to know. Unfortunately for the way I’m exporting, the texture can’t be split up. It all works just fine when i upload it to SketchFab, just not in PowerPoint, so I might need to create an option in the app I’m building to have an ‘Export with semi-transparency’ and ‘Export without semi-transparency’ option.
In PowerPoint, their renderer doesn’t seem to be able to deal with “alphaMode”: “BLEND”, whereas SketchFab’s viewer has this figured out.

9

Ok. Be aware that a lot of renderers will have the same issue as PowerPoint here, including three.js in some situations. Having “alphaMode: BLEND” applied to a lot of opaque triangles within a mesh can break depth testing. Sketchfab might be doing alpha hashing or something more clever.

2 Likes
10

Super helpful, thanks for the insight