Threejs alphaToCoverage branch works good on my local devices to render a hair card model.
1 Like
another option if you’d like to try it!
mrdoob:dev ← donmccurdy:feat-alphahash
opened 07:34PM - 24 Jun 22 UTC
**Related issues:**
- https://github.com/mrdoob/three.js/issues/9977
- http… s://github.com/mrdoob/three.js/issues/19554
**Description:**
Proposal for adding `.alphaHash: boolean` and `.alphaHashScale: number` properties to all three.js Material types. This is an alternative method of transparency distinct from alpha blending (`.transparent=true`) and physically-based transmission (`.transmission > 0`), which is not a panacea but has some significant benefits:
1. Keeps objects in the 'opaque' render list
2. Avoids all sorting issues associated with alpha blending
3. Less overdraw than alpha blending
4. Less performance cost than transmission
5. Keeps objects visible through transmissive materials
The major drawback of the method is noise / grain, which can be reduced significantly with appropriate anti-aliasing. With or without AA, alpha hash is a good choice in several use cases:
1. Transitioning visibility of opaque objects without triggering sorting and backface problems during the transition. E.g. switching between LODs should not cause distracting flicker.
2. Hiding boundaries between two opaque objects, e.g. blades of grass fade into the ground, without requiring everything to be transparent.
3. Scenes with so much overlapping transparency that sorting issues are intractable
In these cases a bit of grain might be a reasonable tradeoff to avoid alpha blending issues — particularly if the transparent region is temporary, small, or distant from the camera.
The effect closely resembles Blender's *Blend Mode: Alpha Hashed* material property. Blender enables multi-sampling by default, which hides most of the grain, but this can be disabled in its renderer settings. The `.alphaHashScale: number` parameter should be used to tune the hash function to fit the multi-sampling method, with values in the range of 0.1–0.5 working well in my tests. When multi-sampling is not used, 1.0 is fine.
| # samples | three.js | blender |
|-----------|----------|---------|
| 1 | <img width="557" alt="three_1" src="https://user-images.githubusercontent.com/1848368/175824634-e76ccfbe-14cb-4119-aa75-e3e5be323f91.png"> | <img width="544" alt="blender_1" src="https://user-images.githubusercontent.com/1848368/175825142-397ce964-f9d7-4609-9ecd-c0a9a70c8cc8.png"> |
| 16 | <img width="576" alt="three_16" src="https://user-images.githubusercontent.com/1848368/175824633-aeee1685-329f-46cf-aac9-8b84659f7273.png"> | <img width="589" alt="blender_16" src="https://user-images.githubusercontent.com/1848368/175825145-b8ae06c8-5652-43fd-bda0-76c3531026d8.png"> |
**Questions:**
- [ ] Do we want to support `material.alphaHash`? We could also consider a NodeMaterial-only solution, as a separate node: `material.alphaTest = new AlphaHashNode( opacityNode, scale );`
- [x] ~~TAARenderPass is brightening the scene, and I'm not sure why. I've omitted all color management settings for now, to isolate that underlying problem. Any ideas here? Is this an appropriate type of multi-sampling to be using for this example? /cc @bhouston~~ See below.
- [ ] Better example? I used this [chloroplast scene](https://sketchfab.com/3d-models/chloroplast-42eec3ca7c074048b57f94ea9db7e7a8) from Sketchfab, mainly because it doesn't work well with alpha blending, for any choice of depthWrite.
**Preview:**
- [webgl / materials / alphahash](https://raw.githack.com/donmccurdy/three.js/feat-alphahash/examples/index.html?q=alpha#webgl_materials_alphahash)
**References:**
- https://casual-effects.com/research/Wyman2017Hashed/index.html
***
*This contribution is funded by [The New York Times](https://www.nytimes.com/).*
i’ve had some trouble getting multi-sampling to work the way you’d want in an example like this, that’s a bit of a challenge at the moment.
It is OK. I have nothing emergency to do with this feature. I wish you secceed.
1 Like
