Currently, I am facing issues with blending sprites in three.js to load textures for points (originally a pointcloud). Unfortunately, the blending does not seem to work correctly. Below is the code snippet that I am using:
this._renderer = new THREE.WebGLRenderer({alpha: true, antialias: true, preserveDrawingBuffer: true});
this._renderer.setClearColor( 0x000000, 0 );
....
new THREE.Points(geometry, new THREE.PointsMaterial({transparent: true, blending: THREE.CustomBlending, blendSrc: THREE.OneFactor, blendEquation: THREE.AddEquation, map: lt._sprite, size: 1, vertexColors: true}));
The sprite used contains the disc.png sprite provided by threejs. You can see how it appears below:
- custom blending (as per the code above): threejsblending.
- no blending: no blending
Various blending techniques I tried resulted in either similar outcomes as mentioned above or the sprite not being loaded correctly (appearing as square points).
Since I do not have extensive experience with threejs or webgl, any assistance would be greatly appreciated. Though my entire code is lengthy and intricate, I am willing to share relevant parts as required.