CODEWITHSUNDEEP
three.jstransparencypoint-cloudsblending
Brett L
Brett L

Reputation: 105

Three.js Transparent Point Cloud Not Blending Points Together Correctly

I'm trying to use THREE.Points to create a point cloud for data visualization. I'd like to make the points transparent so that the viewer can get an idea of how dense the points are in a particular region. I'm using a sphere geometry and additive blending for testing purposes.

The issue is that some of the points, shown as squares, blend properly with points in front of them, and others are simply hidden by the points in front of them. For some reason, blending doesn't seem to work correctly on the bottom half of the sphere, which is odd because I'm not using any lights, and it should be symmetrical. I'm not sure why this is occurring or how to fix it.

Link to code sketch: https://glitch.com/edit/#!/cloudy-chambray-leotard?path=main.js%3A22%3A0

The points on the top half of the sphere are visible behind the points in front of the camera, while the points on the bottom are not.

Looking straight on at the sphere:

View of the whole sphere

There also appears to be a left-right symmetry issue when looking from the top down:

enter image description here

Looking up from the bottom of the sphere I get the desired result:

enter image description here

Upvotes: 1

Views: 499

Answers (1)

M -
M -

Reputation: 28472

Transparency is tricky with WebGL because a transparent object writes to the depthmap, and the renderer assumes that other sprites behind the first ones are hidden so it skips drawing them. Drawing order is very important in this case, and it would be a nightmare to order your sprites from back-to-front every time you rotate the camera.

Simplest way to fix your problem is to set depthWrite: false in your material, so each sprite doesn't write to the depthmap. Then it won't matter whether they're in front or behind the other, they all get drawn.

Upvotes: 2

Related Questions