search

nglviewer / ngl

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

Blending of semi-opaque ball and stick #592

Open harryjubb opened 6 years ago

harryjubb commented 6 years ago

Hi,

Is it possible to change how translucent representations are blended? Trying to achieve something like in #381 using larger and semi-transparent ball+stick to highlight atoms, but where the bond cylinders and atom balls overlap, they're blended additively(?) so that you can see the overlap:

screenshot

https://codepen.io/harryjubb/pen/qQWJVK

Is it possible to change the blending so that it appears as if uniform and not as overlapping objects?

I hope that makes sense.

FYI @jamesfoley

arose commented 6 years ago

They are blended additively (but in unpredictable order). I am not aware of simple way (one that does not involve doing multiple render passes) to the blending you want. A workaround could be to make the cylinders shorter.

harryjubb commented 6 years ago

Ah ok, thanks for your reply.

Would compiling NGL with changing ShaderMaterials from ThreeJS from AdditiveBlending to different options achieve a different result? Presumably doing this would break other things? Slightly out of my depth so if that doesn't make sense please let me know!

arose commented 6 years ago

With other blending options (https://threejs.org/examples/?q=blend#webgl_materials_blending) you still get a different appearance when multiple transparent layers overlap.

fredludlow commented 6 years ago

Presumably you could minimise the effect by shortening the cylinders so they stop at the point they intersect the sphere? It wouldn't be perfect as you'd still be drawing the surface of the sphere inside the cylinder.

Edit: d'oh should have read Alex's reply above before commenting ☺️