search

ChristopherChudzicki / math3d-react

A user-friendly 3d graphing calculator for the web. Create, share, and animate 3d mathematical scenes.
https://www.math3d.org
Mozilla Public License 2.0
249 stars 34 forks source link

Rendering surfaces with opacity #202

Open NeatNit opened 5 years ago

NeatNit commented 5 years ago

(I promise this is the last issue I'm posting.. today)

I've drawn 2 unit spheres, one with an implicit surface and one with parametric. I've set both of their opacities to 0.75. The result (from some view angles) is a bit weird: https://www.math3d.org/QevvGSMZ

image

There seem to be weird discs rendered inside of the top one, and for the bottom one they're half-discs coming out of the center.

This issue only occurs when looking through two layers of translucent surfaces. For another example, consider these 2 parallel planes: https://www.math3d.org/1N8ODBEG

From above it seems alright (where the two overlay, it's darker):

image

But from below, it seems to forget that it should be darker (and it's doing weird things with the mesh):

image

ChristopherChudzicki commented 5 years ago

The underlying graphics library that math3d uses is MathBox.

Here's a post by MathBox's creator (Steve Wittens) that summarizes the issue: https://groups.google.com/d/msg/mathbox/Dt8o-zNiAsE/2b8GvzX9BgAJ. Truthfully, though, I'm not really an expert on 3d graphics (though it's something I'm always interesting in learning more about!) and so am still working to understand some of the details.

I just spent a while playing with {zWrite: false} and blending modes as Steve mentions, but I'm not totally satisfied with that either.

Related: https://www.sjbaker.org/steve/omniv/alpha_sorting.html

Oh: the issue with parametric surfaces is, I believe, related. I suspect it has to do with which part of the sphere is being drawn first, but I am not really sure.

Edit: So... Yes, this is an issue. I might explore it more, but I think a perfect fix would be hard, and other workarounds have downsides.