While adding a SpriteMaterial glow texture to certain THREE.js nodes, I've encountered some rendering issues, particularly with how it appears over edges. Interestingly, at some angles, everything looks fine, but from other perspectives, the edges seem to disappear behind the transparent texture used. The highlighted areas in the image below demonstrate these problems.
https://i.sstatic.net/fjtzz.png
This is the code snippet responsible for creating the SpriteMaterial:
var material = new THREE.SpriteMaterial({ map: new THREE.TextureLoader().load('img/glow2.png'), color: color, transparent: true, side: THREE.FrontSide, blending: THREE.AdditiveBlending });
var sprite = new THREE.Sprite(material);
sprite.scale.set(30, 30, 1.0);
I'm pondering whether the issue lies within the texture png itself. If so, what modifications can be made to ensure that the resulting texture doesn't exhibit these artifacts? Alternatively, if the problem does not stem from the image file, could there be an error lurking within the provided code?