Unexpected transparency in alpha map from three.js RenderTarget

Question

I’m using a RenderTarget in three.js/react-three-fiber to generate a simple alpha map using a Cylinder. The Cylinder uses a basic material with color white, which should be fully opaque in the alpha map, per the docs. However, when applied to a geometry, the area corresponding to white in the mask is not fully opaque, as shown in this example:

https://codesandbox.io/s/r3f-programmatic-alpha-map-f8lhi?file=%2Fsrc%2Findex.js

The scene setup is:

Red plane masked to a cylinder via the alpha mask - expected to be fully opaque Behind that, a white box - it should not be visible at all from default camera position, but it is.

Does anyone have any idea why the white alpha mask leaves the Red plane with non-zero transparency (i.e. NOT fully opaque)? Thank you.

Answer 1

The explanation was provided by @drcmda here: there is a default tone mapping applied by react-three-fiber which results in the alpha map not being rendered pure white. To prevent that happening, disable tone mapping in the alpha map geometry material:

      <Cylinder args={[1, 1, 1, 64]} position={[0, 0, 0]} rotation={[Math.PI / 2, 0, 0]}>
        <meshBasicMaterial attach="material" color="white" toneMapped={false} />
      </Cylinder>

i.e. in line 49 of the codesandbox linked in the question.