three.js: FBXLoader: Partial transparent maps doesn't work

Description of the problem

When loading a FBX file ( succubus.zip, it is the original file, no export ) via FBXLoader transparent parts of a map isn’t taken into account.

The map, opened in Gimp so you can see the transparent parts, hair + feathers: unbenannt3

What it should look like Sketchfab unbenannt

What it really looks like (my viewer): unbenannt2

The problem can be worked around with when applying following code on every mesh the FBXLoader creates:

            ((obj as THREE.Mesh).material as THREE.Material).transparent = true;
            ((obj as THREE.Mesh).material as THREE.Material).side = THREE.DoubleSide;
            ((obj as THREE.Mesh).material as THREE.Material).alphaTest = 0.5;

But of course I don’t want this code to be applied on every mesh because AFAIK transparency and alpha testing costs quite a bit of performance, especially if it isn’t needed…

I am willingly to make a PR if I would know how to fix this.

One possible solution is that we would have to check ONLY the PART of the image being used per mesh if there is any transparency and if there is some then setting the transparent parameter on the material.

@Kyle-Larson @takahirox since you both wrote this Loader, do you have any idea? @Mugen87 @donmccurdy you both are pretty active on loader issues/PRs probably you could help here too? 😉

Three.js version

[ x ] r88

Browser

All of them

OS

All of them

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 16 (4 by maintainers)

Most upvoted comments

@Mugen87 I do the same as you. But just found the culprit… it is the “alpha” property on the WebGLRenderer. If it is set to “true” the white silhuette appears…

cnspaha on Nov 13, 2017

@looeee glTF sets alphaMode as one of BLEND, MASK, or OPAQUE. Another property, alphaCutoff, corresponds to three.js’s alphaTest. But (per KhronosGroup/glTF#1158) alphaCutoff is only used in MASK mode, not BLEND, and so the format technically does not allow what Sketchfab is trying to do here. That may be an oversight that needs to be corrected in a future glTF version…

https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md#alpha-coverage

donmccurdy on Nov 20, 2017

@cnspaha I’ve just done this:

loader.load( 'models/fbx/succubus.fbx', function( object ) {

	object.traverse( function( o ) {

		if ( o.isMesh === true ) {

			o.material.alphaTest = 0.5;
		
		}

	} );
           
	scene.add( object );

} );

Mugen87 on Nov 13, 2017

There’s an enum AlphaSource in FBX, unfortunately the documentation is as usual pretty sparse (documentation as comments here):

{ 
    eNone, // no alpha         
    eRGBIntensity,  //RGB Intensity (computed).
    eBlack // Alpha channel. Black is 100% transparency, white is opaque          
};

I wonder if eBlack could be used to indicate alpha test is needed?

EDIT: tested with a few models including this one, and I can’t find any where this enum is actually set… so I guess we are stuck with doing it manually.

looeee on Nov 20, 2017

If a load the FBX file with FBXLoader and set alphaTest to 0.5, the result looks okay.

Uploading the FBX file back to Sketchfab, i have the following result. It looks like that manual adjustments by the user are also necessary when using Sketchfab.

Mugen87 on Nov 20, 2017