I’m using a RenderTarget 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 react-three-fiber example:
r3f programmatic alpha map by stephent using @react-three/drei, @react-three/fiber, loglevel, react, react-dom, react-scripts, three
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.
Anyone have any insight as to why the white alpha mask leaves the Red plane with non-zero transparency (i.e. NOT fully opaque)?
Thanks!
Stephen
Linking back to this issue on GitHub which has the solution/explanation to this issue (tone mapping defaults in the RenderTarget):
opened 09:52PM - 14 Jun 21 UTC
closed 03:45PM - 15 Jun 21 UTC
Help (please use the forum)
**Describe the bug**
A geometry with a standard material which has BOTH an al… pha 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:
```js
<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
```js
<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
```js
<Plane args={[2, 2, 1, 1]}>
<meshStandardMaterial attach="material" color="red" alphaMap={alphaTarget.texture} transparent={false} opacity={1} />
</Plane>
```
***Live example***
* [CodeSandBox](https://codesandbox.io/s/r3f-programmatic-alpha-map-f8lhi?file=/src/index.js)
* 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
1 Like