3Dmol.js
3Dmol.js copied to clipboard
3dmol
overlap of transparent objects
When transparent objects overlap, the objects show as if they are fused or masked. For example, a red sphere is inside a bigger blue sphere, the red sphere does not show. If the red sphere is opaque and the blue sphere is partially transparent, the red sphere shows as being inside the blue sphere. Is it possible to show, for example, a partially transparent red sphere inside a partially transparent blue sphere, as a purple (red + blue) sphere?
I could definitely try to make this in optional feature , and allow users to specify whether or not they wish for the materials to blend.
This is the defined behavior - we support unilayer transparency only (transparency mode 2 in pymol: http://www.pymolwiki.org/index.php/Transparency_mode).
Multi-layer transparency is difficult and requires substantially more processing. We'll work on it, but it will take a while.
Yes i could see how applying transparencies to other transparent objects could become a bit tedious very quickly. I also noticed that there is not much about materials in the documentation.
I see. Thanks for the explanation. Looking forward to the feature. We are not that familiar with WebGL yet, but if there is anything we can do, let me know.
Likewise, this would be very nice – I just came across this issue myself when trying to display multiple several (e.g. 5) isosurfaces at different isovalues, to approximate a kind of volumetric rendering.
My WebGL knowledge is also not great, but more than happy to test + help with this if there's anything specific that would need to be done?
The straightforward way to support multilayer transparency is to order all the faces and then draw them in the right order - this is too computationally intensive for javascript (and actually for desktop processors rendering complex scenes).
What is needed is order independent transparency. There are a number of approaches, each with its own approximations, but probably the best is described here: http://casual-effects.blogspot.com/2015/03/implemented-weighted-blended-order.html
It looks like an implementation of order independent transparency is imminent for three.js, would this likely be transferrable to 3Dmol.js given that both are WebGL projects, or would it likely be easier to do a separate implementation from scratch?
It would definitely make sense to port it, but still involves getting deep into the rendering code.