title: Show common part of 2 semitransparent objects?
body: <p>I'm creating a math app that uses OpenGL to show several geometric 3D shapes. In some cases these shapes intersect and when this happen I want to show the intersecting part of each shape inside the other. As the both shapes are translucent, what I need is more or less something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/NDBha.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NDBha.png" alt="Perfect intersection"></a></p>
  
  <p>However, with 2 translucent spheres I get that result instead:</p>
  
  <p><a href="https://i.stack.imgur.com/jer0L.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jer0L.png" alt="With depth testing"></a></p>
  
  <p>I know that, to achieve a correct transparency effect, the depth testing should be turned off before the transparent shapes are drawn. However this cause another side effect when a transparent shape is beyond another non transparent shape:</p>
  
  <p><a href="https://i.stack.imgur.com/4wFNk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4wFNk.png" alt="Without depth testing"></a></p>
  
  <p>So, is there a way to show correctly the intersecting part of 2 volumetric shapes, each inside the other, without breaking the depth testing?</p>