transparent gltf sorttype

[andreasplesch]

Speaking of glTF assets, I posted an issue last year: [https://github.com/x3dom/x3dom/issues/1127]> (https://github.com/x3dom/x3dom/issues/1127). In x3d files, we could add sorttype='transparent' to the Appearance to explicitly tell x3dom that it is transparent. But, what about glb/gltf file?

Originally posted by @microaaron in https://github.com/x3dom/x3dom/issues/1166#issuecomment-944893668

[andreasplesch]

In this example https://jsitor.com/BMq83d3cu

the glTF transparency is correctly applied. @microaaron, do you have another example to help reproduce a problem ? It is important to set the alphaMode in the glTF.

[microaaron]

Yes, some modeling tools couldn't set the alphaMode automaticly during exporing glTF file. That cause the ploblem.

[andreasplesch]

Thanks. The glTF loader sets the sorttype to transparent if the alphaMode is BLEND:

https://github.com/x3dom/x3dom/blob/master/src/util/glTF/glTF2Loader.js#L438

This should work but if necessary it may be possible to modify the sorttype after loading the Inline, by finding the generated Appearance node.

[microaaron]

Is there any way to determine the drawing sequence like <Appearance sortKey='1' sortType='transparent'> ? https://jsitor.com/JGUNnL1cv

[andreasplesch]

Yes, I think this is possible. The glTF gets translated to a shape inside the inline. You can modify the Appearance node inside the the inline:

https://jsitor.com/Q1Mc7RPHm

[andreasplesch]

Transparency affecting other parts of its geometry tend to not work very well in x3dom. There are a few things to try:

Sometimes it may be ok to turn off two-sided rendering by setting solid to true:

https://jsitor.com/Q1Mc7RPHm

For better results it can work to try turning off depth testing with depthMode, and/or trying a different blendMode:

https://jsitor.com/jjq-AEqwP

srcFactor='src_alpha_saturate' seemed to work better in this case.

[microaaron]

Thanks a lot.