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

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

[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.

[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.