Spent more time on the transparencies, managed to chase down most of the bugs. Here are a few more shots comparing to three.js
In three.js, although pleasing-looking, the transparencies a bit.
Here’s a more revealing angle
You can see clearly that three.js draws glass after the potion, which makes glass be drawn on top in the wrong places
Something else interesting happens here that’s less obvious, because three.js does blending in LDR space, we lose some transparency on bright objects, such as this bottle neck shining through in Shade
Glass has transparency of 75% in this scene, and potion has transparency of just 10%, so there’s very little light that can bleed through, but because of the environment map - there’s still some. By doing blending after HDR compression as three.js does - we lose that brightness information and blending produces way less intensity on occluded surfaces.
This was surprising to me, not that it doesn’t make sense, but I didn’t really think about what happens blend you alpha-blend in HDR vs LDR (compressed range).
Everyone likes cars, right?
And one more interesting case
and if we move the camera just a bit, we get this
Anyway, I’m still a bit stuck with cases where alpha is exactly 1, that is - using the technique on opaque surfaces. I’m getting full black pixels for some reason. For now I’m just detecting simple cases during load, like material alpha set to 1, and no transparency channel in the texture and just overriding the material transparency flag. More work for later, for now I’m happy with the result.