I’m facing issues with transparency and overlapping meshes similar to what’s being discussed here. But I didn’t find any solution which suits my case.
I’m gathering all the resources I found here for future reference and also for other users:
- wboit - three.js webgl - order independent transparency
- GanguLabs/three-wboit: Weighted, blended order independent transparency pass for use with three.js.
- three.js webgl - wboit - weighted, blended order-independent transparency
- Source code Repo: three.js-wboit/examples/webgl_transparency_wboit.html at wboit · GanguLabs/three.js-wboit
- Source Code/PR - Examples: Add weighted, blended order-independent transparency pass / demo by stevinz · Pull Request #24903 · mrdoob/three.js (github.com)
- depth peel - three.js webgl - materials - depth peel (githack.com)
- alpha hashed transparency - three.js examples
- 40M cubes with individual opacity and color - Questions - three.js forum
- Need help making transparency show correctly in point cloud - Questions - three.js forum
- ios - How to avoid transparency overlap using OpenGL? - Stack Overflow
- darker intersects on transparent objects : r/threejs (reddit.com)
- Another solution is to render the object solid (no transparency) in a framebuffer and compose it into the final render with transparency. You’ll have to manage the scene differently for solid objects and for transparent objects
- InstancedMesh overlapping transparent ShaderMaterial issues - Questions - three.js forum (threejs.org)
- DoubleSide, transparent material produces artefacts between overlapping front and back faces · Issue #2476 · mrdoob/three.js (github.com)
- 3d - What’s the simplest way to render overlapping transparent meshes in THREE.js? - Stack Overflow
- This post talks about a technique called Screen-Door Transparency (reference)
- transparency - artifacts when rendering both sides of a transparent object with three.js - Stack Overflow
- this posts suggests using 2 meshes with opposite sides -
material.side = THREE.BackSide, andmaterial.side = THREE.FrontSide
- this posts suggests using 2 meshes with opposite sides -
- Overlapping, off-centred translucent objects? - Questions - three.js forum (threejs.org)
- three.js - Overlapping layers flickering
- Add alphas channel for instanced meshes. Update example. by Displee · Pull Request #25211 · mrdoob/three.js