nglviewer / ngl

WebGL protein viewer
http://nglviewer.org/ngl/
MIT License
667 stars 170 forks source link

Transparent ball+stick disappears behind transparent cartoon #552

Open xrobin opened 6 years ago

xrobin commented 6 years ago

Here is a CodePen example.

I set two representation: a white cartoon for the protein and a ball+stick for ligand. Both have alpha transparency, with opacity: 0.5.

Observed behaviour:

  1. the ligand completely disappears behind the transparent cartoon
  2. the cartoon is visible behind the cartoon (OK, *)
  3. if you rotate you will see that the transparent cartoon is visible behind the ligand (OK)

Expected behaviour:

  1. the ligand should still be visible behind the transparent cartoon
  2. and 3 are as expected

Additional comments:

  1. Setting the ligand's opacity to 1.0 will make it "re-appear" behind the cartoon, however as soon as it is below (I tested with 0.99) it is hidden.
  2. 'line' representations show the same problem as ball+stick.

* Actually, if you set the rotation to o.setRotation([0, 1.3, 1]);, you may notice that the cartoon that is right in front of the scene seems to be hiding a bit of the cartoon too, however it isn't quite as obvious.

arose commented 6 years ago

Sadly, NGL does not support multi layer transparency. You can try to get a desired effect by setting depthWrite: false on representations. However that will result in other artifacts, but it is often ok when the transperency is not too low.