Semi-transparent shapes have odd rendering artifacts?

[EricCousineau-TRI]

From this Russ's PR:
RobotLocomotion/drake#15670

With this manual test:

$ cd drake
$ git log -n 1 --oneline --no-decorate
3801155a9f [geometry] Establish Meshcat in C++ (step 4)
$ bazel run //geometry:meshcat_manual_test

The following shape:
https://github.com/RobotLocomotion/drake/blob/3801155a9f3fb69c415b7138542d758254232cf8/geometry/test/meshcat_manual_test.cc#L32-L33

Seems to have some odd rendering artifacts (backface culling + translucent stuff)?

Browser:

$ cat /etc/issue
Ubuntu 18.04.5 LTS \n \l
$ firefox --version
Mozilla Firefox 91.0.2

[EricCousineau-TRI]

2021-08-28-meshcat-backface-translucent.mp4

[RussTedrake]

caveat: I'm pretty sure we have not bumped the drake meshcat SHA since Robin updated the three.js version a few days ago. I will test that.

[rdeits]

Can you try again with #95 ?

[rdeits]

Actually, I don't think this is a three.js issue at all. In fact, I'm prtty certain I used to see exactly the same odd artifacts in translucent spheres and ellipsoids back when I was working with Director and VTK. I suspect this is coming from the particular way in which the mesh for this elipsoid is being produced. I assume that the new C++ meshcat bindings are using Drake's internal geometry tools to convert the ellipsoid into a mesh, right? That would explain why you're seeing the same visual issues that I saw when I was using Drake + Director back in the day.

On the other hand, I'd recommend avoiding trying to discretize the ellipsoid at all on the Drake side. If you try to generate this same scene in meshcat-python (even with the very latest three.js 0.131), everything looks great. Here's a static_html render of an example: https://drive.google.com/file/d/10blrzq8TayD7IJcpD-gdVWkKGohcxw3D/view?usp=sharing

The fundamental difference is that meshcat-python sends spheres using the three.js SphereGeometry (and ellipsoids are treated as spheres with a scaling applied), so all the discretization happens in three.js on the browser side. That seems to work much better, and it certainly cuts down on the amount of data we have to send.

[rdeits]

Ah, nope, I was wrong again. In fact, transparent ellipsoids are actually better in the most recent threejs (the one I used to render that static demo in #93 (comment) ). I suspect the relevant PR is mrdoob/three.js#21967 . I think that's worth putting up with some weirdness when animating the camera zoom, so I'm going to put together a PR to update to the latest and greatest threejs.

[RussTedrake]

Just for completeness, drake's c++ meshcat was using SphereGeometry for the ellipsoids same as meshcat-python.

[EricCousineau-TRI]

2021-08-29-ellipsoid-fix.mp4

Just tried out #97, and it fixed the sphere / ellipsoid!
(however, there were some other issues; will file separate Drake issue for now)
RobotLocomotion/drake@master...EricCousineau-TRI:issue-meshcat-93