BufferGeometry + Standard Materials not rendering depth correctly?

My problem is whenever geometry clips into other geometry the “clipped” geometry (which should be occluded by the “shell” of the thing its clipped into) renders on top of everything.

here are two examples:


image

Basically I have a bunch of balloons created using BufferGeometry and some physics using cannon-es. The physics isn’t perfect so sometimes the balloons briefly clip into each other on contact. This normally wouldn’t be very noticeable except for the clipping render bug I described. The second image shows the balloon “tie” of one balloon clipping into another (since I decided not to include that part in physics), again this wouldn’t be super noticeable except since its clipping this weird bug happens and it renders on top of the thing it should be inside.

To see this phenomenon yourself (and the code that makes it) you can look here:
https://brightnessark.mooo.com/games.html
And the javascript:
https://brightnessark.mooo.com/js/games.js

There’s a lot of stuff going on in games.js, but honestly you really don’t need it. Just creating a few buffer geometries that intersect with each other seems to reproduce the problem. Does anyone have any ideas on what I might be doing wrong?

Oof. As normal after messing with this for an hour or two and not figuring it out, I figured it out approximately one second after posting this.

Apparently I was getting the winding wrong. By winding my triangles CCW instead of CW everything is fixed =/