1

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

gman
  • 100,619
  • 31
  • 269
  • 393
Brett L
  • 105
  • 1
  • 11

1 Answers1

2

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.

M -
  • 26,908
  • 11
  • 49
  • 81
  • So in this case, the rectangles on top half of the sphere in the back were drawn before the rectangles on the front of the sphere and that's why transparency worked on the top? – Brett L Jan 13 '21 at 16:38
  • 1
    Yeah, the dull grey tiles means the front tiles are drawn first, then the back tiles get drawn **around** the existing front ones, so you don’t get that additive effect. Conversely, the brighter tiles mean the back ones go first, then the full front tiles get rendered on top of the back ones, giving that nice additive look. – M - Jan 13 '21 at 16:48