Three.js: FBX loader problem with transparency

Created on 23 Jun 2017  路  6Comments  路  Source: mrdoob/three.js

Description of the problem

When importing FBX, some transparency information is lost.

Using the FBX loader example from Threejs.org site, just loading different model. Model at pearl_walk.fbx to http://webglworkshop.com/fbx/standing_idle.fbx

Looks like this
image

Should look like this (from PlayCanvas) Note: PlayCanvas uses "Alpha to coverage"
image

or this (from SketchFab)
image

Three.js version
  • [ ] Dev
  • [x] r65
Browser
  • [x] All of them
OS
  • [ ] All of them
  • [x] Windows
  • [ ] macOS
  • [ ] Linux
  • [ ] Android
  • [ ] iOS
Bug

Most helpful comment

I've tested this with the latest dev version and the transparency map is now loaded correctly.

There's still some issues (the black cutting off part of her hair and hair cutting off her shirt), which I was able to nearly completely fix by setting parameters.alphaTest to ~0.4.

I'm not sure that this should be added to the loader though - it might be something that is more model specific and should be left up to the user.

pearl

All 6 comments

I am having the very same problem here with another FBX file. I cannot use transparency on my model

And I am facing this output on the console

FBXLoader.js:542
THREE.FBXLoader: Unknown texture application of type "TransparentColor, skipping texture.

FBXLoader.js:542
THREE.FBXLoader: Unknown texture application of type "SpecularColor, skipping texture.

Yes, FBXLoader.js doesn't manage some options, like transparency.

I ended up adding alphaTest to parseParameters function of FBXLoader:

function parseParameters( properties, textureMap, childrenRelationships ) {

      var parameters = {};

      if (properties.TransparentColor && properties.TransparentColor.value === 1) {

         parameters.alphaTest = 0.3;

      }
      ...

It works ok with use of PNG for maps.

I have a fix that work perfectly for make human export, maybe it will fix this too ! I will make a PR as soon as possible

I added support for several more material parameters and map types in #12317

@CarlBateman can you test with the latest dev version of FBXLoader and see if this problem is fixed?

Ok i didn't see mine, @looeee would/could you add this one, or need i do a new PR ? It manage transparency map like models from make human:

case 'TransparencyFactor':
case ' "TransparencyFactor':
    parameters.map = textureMap.get( relationship.ID );
    parameters.transparent = true;
    break;

I've tested this with the latest dev version and the transparency map is now loaded correctly.

There's still some issues (the black cutting off part of her hair and hair cutting off her shirt), which I was able to nearly completely fix by setting parameters.alphaTest to ~0.4.

I'm not sure that this should be added to the loader though - it might be something that is more model specific and should be left up to the user.

pearl

Was this page helpful?
0 / 5 - 0 ratings