R3F doesn't handle transparency correctly.

[deen24id]

Description

Hi, I originaly post the issue in the R3F repo: pmndrs/react-three-fiber#3487, but the maintainers suggest that I should post the issue here instead: pmndrs/react-three-fiber#3487 (comment).

Here is the copy of the issue:

I have a 3D model that has transparent vertices. When I use 3D Viewer app in Windows, the model is displayed correctly. As you can see from the image below, the head is transparent with mask on its face:

However, when I try to display it on R3F, the display is kinda broken. As you can see from the image below, many parts are not supposed to be transparent:

Here is a sandbox to reproduce the transparency problem: https://codesandbox.io/p/sandbox/objloader-forked-74fq8g. I also attached the relavant .obj files in the sandbox, so that you can view it in other apps.

Besides, in another web app: https://www.roblox.com/users/84743203/profile?friendshipSourceType=PlayerSearch, if you take a look at the 3D currently viewing section, they do not experience the same transparency issue.

Let me know how to fix this problem . Cheers!😄

---

Furthermore, the maintainer makes the following comment: pmndrs/react-three-fiber#3487 (comment)

This looks to do with how the OBJLoader works with transparent materials

Cheers!😄

Reproduction steps

1. Here is a link to the relevant codesandbox: https://codesandbox.io/p/sandbox/objloader-forked-74fq8g.
2. The relevant model can be downloaded from the sandbox.

Code

1. The code is also available in the codesandbox: https://codesandbox.io/p/sandbox/objloader-forked-74fq8g.

Live example

1. The live example can be viewd in the codesandbox: https://codesandbox.io/p/sandbox/objloader-forked-74fq8g.

Screenshots

No response

Version

0.174.0

Device

No response

Browser

No response

OS

No response

[WestLangley]

three.js reads the green channel when sampling the alpha map.

three.js/src/renderers/shaders/ShaderChunk/alphamap_fragment.glsl.js

Line 4 in ddfa74b

diffuseColor.a *= texture2D( alphaMap, vAlphaMapUv ).g;

I expect you are assuming otherwise, since a single texture is serving as both the diffuse map and the alpha map in your example.

[deen24id]

You are speaking Martian to me here. What am I supposed to do here exactly? I just want to display the model like the one displayed by the 3D viewer.

[Mugen87]

The model is currently not compatible to three.js's material system. However, if I put the following code into the onLoad() callback of OBJLoader...

object.traverse( function ( o ) {

	if ( o.isMesh ) {

		o.material.alphaMap = null;

	}

} );

...it renders like so:

You could also just remove the map_d Handle1_diff.png entry from the MTL file. This defines the alpha map in the first place. Given how the model is configured, I think it's not really needed anyway.