Render 100k sprites with 0.1 opacity, transparent maps and smooth antialiasing

Question

I have the following setup (only relevant bits of code):

Renderer

renderer = new THREE.WebGLRenderer({ 
    antialias: true, alpha: true, canvas: canvas 
});

Textures

dot: THREE.ImageUtils.loadTexture('./assets/images/dot.png')

Material

let material = new THREE.PointsMaterial({
    size: size,
    sizeAttenuation: true,
    color: color,
    map: textures.dot,
    // alphaMap: textures.dotAlpha,
    blending: THREE.NormalBlending, // THREE.MultiplyBlending
    transparent: true,
    alphaTest: 0.1,
    opacity: 0.3
});

Point cloud Usually I have 20 to 50 point clouds with 1k to 10k dots. What I see on screen it's a small fraction of theese.

pointCloud = new THREE.Points(geometry, material);

Adding points

cfg.pointCloud.forEach(point => {
    var vertex = new THREE.Vector3();
    vertex.x = point.x;
    vertex.y = point.y;
    vertex.z = point.z;
    geometry.vertices.push(vertex);
});

I have the following issues:

Overlaping sprites tend to clip each other instead of rendering on top of each other. Thus I get a lot of points simply obscured
If i use material.alphaTest = 0.5and material.opacity:0.1 the edges of the sprites become very sharp loosing all antialiasing effect. When viewed from a distance they tend to render very poorly and disappear. I was expecting being able to render smooth borders. I'm using 512x512 png maps.
When I move the camera away from the origin after a certain distance sprites tend to disappear.
Low opacity values seem to make the dots disappear.

How can I improve this rendering? Is there any other way besides using sprites? I'm lacking the know-how needed to write a custom shader so I will appreciate anything that helps with improving this rendering.

Here are some sample images that showcase the troubles:

Even though the blue dots density is much higher in the green zone they tend to be obscured. I belive this happens because the green and red dots are the first point clouds introduced to the scene. And they render on top of the blue ones.

If I tilt the camera it seems that some dots suddenly get rendered because of a different depth index.

If I increase the opacity of certain point clouds their sprites tend to be obscured by sprites with lower opacity. I was expecting some blending effect there.

Most of the dots tend to be clustered and due to the rendering quircks most of them tend to dissapear

Again some clipping effects from close up

This might be helpful: https://github.com/mrdoob/three.js/issues/5668 — gman, Mar 18 '17 at 07:26
I followed the link but it seems that the author was having rendering issues because of not using `material.alphaTest = value`. I tried changing the example with `BufferGeometry`. When I increase the number of sprites to 10k It already showcases the same problems as in my example. http://jsfiddle.net/z6nmto9e/ — Adrian Moisa, Mar 18 '17 at 07:54
If you followed the thread, sorting of particles was removed from Three.js, that's one of your issues. The thread says you either need to sort them yourself or use THREE.Sprite — gman, Mar 18 '17 at 08:04
I was just playing with this right now. I saw this after my first comment. It seems to fix a bit the rendering. http://jsfiddle.net/adrian_moisa/8ane66d2/ . I will try in my code to see what happens. — Adrian Moisa, Mar 18 '17 at 08:06
@gman Thank you for the indications. Due to your comments I was able to dig further and find an useful answer in another question. See the answer I posted. — Adrian Moisa, Mar 18 '17 at 09:03

score 0 · Answer 1 · edited May 23 '17 at 11:53

I managed to get a significant improvement in the rendering quality. I found very good answer here. Also this question had some good information.

I have added depthWrite and depthTest as false in the material.

let material = new THREE.PointsMaterial({
    size: size,
    sizeAttenuation: true,
    color: color,
    map: this._textures.dot,
    blending: THREE.NormalBlending,
    transparent: true,
    alphaTest: 0.1,
    opacity: 0.3,
    depthWrite: false,
    depthTest: false
});

The difference is significant:

Still I have to find a solution for the antialiasing issues. When far away from the camera, dots tend to totally dissolve and disappear as it is shown in this close-up.

Render 100k sprites with 0.1 opacity, transparent maps and smooth antialiasing

1 Answers1

Linked