meshcat-dev / meshcat

Remotely-controllable 3D viewer, built on top of three.js
MIT License
250 stars 44 forks source link

Semi-transparent shapes have odd rendering artifacts? #93

Closed EricCousineau-TRI closed 3 years ago

EricCousineau-TRI commented 3 years ago

From this Russ's PR: https://github.com/robotlocomotion/drake/pull/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 commented 3 years ago

https://user-images.githubusercontent.com/26719449/131225360-80a4a3e8-0767-4c37-a01b-1bd19af4d4e1.mp4

RussTedrake commented 3 years ago

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 commented 3 years ago

Can you try again with https://github.com/rdeits/meshcat/pull/95 ?

rdeits commented 3 years ago

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 commented 3 years ago

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 https://github.com/rdeits/meshcat/issues/93#issuecomment-907719883 ). I suspect the relevant PR is https://github.com/mrdoob/three.js/pull/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 commented 3 years ago

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

EricCousineau-TRI commented 3 years ago

https://user-images.githubusercontent.com/26719449/131255853-82bc03d3-9643-4beb-aea9-f331e7c54e76.mp4

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