Geometry with white alphaMap and transparency=true, opacity=1, is not rendered fully opaque

[stephent]

Describe the bug

A geometry with a standard material which has BOTH an alpha mask set and transparency set to true is not rendered fully opaque as expected.

Even though the alpha mask is solid white (i.e. fully opaque) and the opacity of the geometry is set to 1, the geometry is rendered partially transparent.

To Reproduce

Steps to reproduce the behavior:

1. Attach a standard material with an alpha mask which includes some part fully opaque area (i.e. white) to a geometry
2. Set transparent to true and opacity=1 on the same geometry
3. The geometry is not rendered fully opaque, even though the alpha mask is fully opaque AND the opacity is set to 1

Code

Example using react-three-fiber: a red plane is masked to circular area via the alpha mask, and is expected to be fully opaque. Behind the plane is a white box which should not be visible at all from default camera position, but it is in Case 1 below.

Case 1 (displays bug): Plane should be masked to a circle (via alphaMap) and should be solid red, but is rendered partially transparent:

      <Plane args={[2, 2, 1, 1]}>
        <meshStandardMaterial attach="material" color="red" alphaMap={alphaTarget.texture} transparent={true} opacity={1} />
      </Plane>

Case 2 (as expected): Plane rendered to solid red, no transparency

      <Plane args={[2, 2, 1, 1]}>
        <meshStandardMaterial attach="material" color="red" /*alphaMap={alphaTarget.texture}*/ transparent={true} opacity={1} />
      </Plane>

Case 3 (as expected): Plane masked and rendered to solid red, no transparency

      <Plane args={[2, 2, 1, 1]}>
        <meshStandardMaterial attach="material" color="red" alphaMap={alphaTarget.texture} transparent={false} opacity={1} />
      </Plane>

Live example

• CodeSandBox
• See material element on line 56.

Expected behavior

Plane should be masked and solid red (i.e. as per Case 3 screenshot below) when both alphaMap is set AND transparent=true and opacity=1. Or if transparent=true is not valid in conjunction with use of an alphaMask, update docs to clarify.

(I'm not sure if there's any valid real world use case for using an alphaMap in conjunction with transparent=true, but somehow I stumbled into this situation in my own code, and was confused by the result I saw.)

Screenshots

Case 1:

Case 2:

Case 3:

Platform:

• Device: Desktop
• OS: MacOS
• Browser: Safari
• Three.js version: 129

[Mugen87]

A geometry with a standard material which has BOTH an alpha mask set and transparency set to true is not rendered fully opaque as expected.

Even though the alpha mask is solid white (i.e. fully opaque) and the opacity of the geometry is set to 1, the geometry is rendered partially transparent.

I'm unable to reproduce this issue with the following fiddle: https://jsfiddle.net/vsoLhmq6/2/

BTW: When sharing a live example, it's better to use pure three.js code and not libraries like react-three-fiber. That makes it only harder for us to investigate issue inside the engine. Do you mind updating the above fiddle?

[mrdoob]

/cc @drcmda

[WestLangley]

Even though the alpha mask is solid white

It would appear it is not. One reasonable guess is this is due to react-three-fiber tone mapping, sRGB encoding, and/or gamma correction in the render target.

[stephent]

Even though the alpha mask is solid white

It would appear it is not.

Except in Case 3 - same map, but fully opaque.

One reasonable guess is this is due to react-three-fiber tone mapping, sRGB encoding, and/or gamma correction in the render target.

I guess next step is to try to update @Mugen87 's fiddle to use a Render Target instead of an image for the alphaMap to see if that reproduces the issue.

[drcmda]

Even though the alpha mask is solid white

It would appear it is not. One reasonable guess is this is due to react-three-fiber tone mapping, sRGB encoding, and/or gamma correction in the render target.

if does autoconvert colors to srgb and tonemaps to acesfilmic. so either <Canvas linear flat (linear colorspace, no tonemapping) which is the threejs default.

or

<meshBasicMaterial color="white" toneMapped={false}  />

both work, but i'd prefer # 2 because # 1 would then have incorrect gamma.

if a threejs project is on srgb and mapping it could then give you the same (unexpected) result. that was just a matter of configuring the canvas slightly different.

[Mugen87]

@stephent Please use the forum if you need more help.

[stephent]

Quick follow up on this comment in my original post:

I'm not sure if there's any valid real world use case for using an alphaMap in conjunction with transparent=true, but somehow I stumbled into this situation in my own code, and was confused by the result I saw.

The answer is "yes" - without transparent=true, even though the alpha mask is applied, the full geometry occludes other objects (depth buffer, I assume? - not totally up to speed on the terminology here...).