ntamas
commented
2 years ago That's a rendering artifact of the "poor man's bloom effect" that we are using; it is basically a Three.JS sprite with a semi-transparent material that contains a ring-like texture; this is then blended in an additive manner with whatever is behind it. It looks like in some cases the glow of drones "behind" the glow of another drone is not rendered and then you get this artifact. Any insights into why this is happening and how this can be fixed are welcome.
(Another option would be to use a proper selective bloom shader, but then this would involve rendering the spheres first, running a bloom pass on the spheres, then compositing the spheres with the rest of the scene and somehow make sure that occlusions are handled correctly. This seems like an even bigger task for me).
At the end of the demo show (https://share.skybrush.io/s/itu-2019/) a black rectangular border appears around the drones that is clearly visible, as it obscures the bloom of other lights while they are landing. (But only the bloom, not the actual light.) See the image below for a screenshot:
I have tested it in Firefox and Chrome and the issue consistently appears in both. It is also visible on the demo show bundled in the repository when building locally, but is a lot less prominent as that choreography ends with switched off lights.