Plotly.js: Transparent faces in mesh plots overlap incorrectly

[scottsleep]

Normally, when a face is opaque it can obscure other faces, or if the camera is rotated 180 degrees the first is now obscured by the second. This is currently not true for faces with opacity < 1. Instead it seems as if they are always layered in order of creation, so the first face in the mesh will always be on top (or beneath?) the others, no matter their relative 3D location.

The example contains 4 triangles: the two on the left are opaque while the two on the right are transparent.

• Notice how the orange face is always in front of the blue one, even though they intersect and part of it should be behind, as demonstrated by the purple and red triangles.
• Even if the camera is rotated.

https://codepen.io/anon/pen/bQqeMg

This leads to situations where obscured objects are drawn in front. All the boxes in the image below are either behind or inside the Blue one.

Observed in Chrome 70.0.3538.102 and Firefox 63.0.1 (64-bit) on Win 10

[etpinard]

Yeah, that's essentially the mesh3d manifestation of bug https://github.com/plotly/plotly.js/issues/1267

Thank you for writing in with such clear examples.

[etpinard]

Related https://github.com/plotly/plotly.js/issues/3138

[etpinard]

Another example: https://github.com/plotly/plotly.js/issues/3410 - this for surface traces.

[archmoj]

I think we may need to sort triangles when there are transparent ones. There might be other solutions useful for orthographic projection {this PR}.
Another idea for making surfaces transparent is surface tessellation.

[archmoj]

Another codepen to highlight the draw order issue still exists even with lower opacity values and separated RGB channels.

[archmoj]

OK. I think a patch like this commit may help.
cc: https://github.com/plotly/plotly.js/issues/4111
cc: https://github.com/plotly/plotly.js/issues/1267

Please notice how one could get similar overlap colors here but not before.

Here are more examples:
example 2
before
after

example 3
before
after

example 4
before
after

[archmoj]

Also for scatter3d traces there is another possibility to enable depth like these:
example 2
example 3
example 4

[archmoj]

And finally for regular point-clouds here is the algorithm that works best:
Example 1
Example 2
Example 3
Example 4

cc: #4111
cc: #1267

[archmoj]

Also for surface plot the app at https://dash-gallery.plotly.host/dash-yield-curve/ displays

[jackparmer]

This issue has been tagged with NEEDS SPON$OR

A community PR for this feature would certainly be welcome, but our experience is deeper features like this are difficult to complete without the Plotly maintainers leading the effort.

Sponsorship range: $15k-$20k

What Sponsorship includes:

• Completion of this feature to the Sponsor's satisfaction, in a manner coherent with the rest of the Plotly.js library and API
• Tests for this feature
• Long-term support (continued support of this feature in the latest version of Plotly.js)
• Documentation at plotly.com/javascript
• Possibility of integrating this feature with Plotly Graphing Libraries (Python, R, F#, Julia, MATLAB, etc)
• Possibility of integrating this feature with Dash
• Feature announcement on community.plotly.com with shout out to Sponsor (or can remain anonymous)
• Gratification of advancing the world's most downloaded, interactive scientific graphing libraries (>50M downloads across supported languages)

Please include the link to this issue when contacting us to discuss.