Problem when transparent points overlap

Questions
1

Hi there,

I’m quite new using three.js. I have a bunch of points which I apply a texture to. These textures use transparency.

Here’s what happen:

image
image900×602 82.5 KB

As you can see, sometimes it works great (the point is transparent) and sometimes it seems that the point is opaque (i.e. we can’t see the other one that’s behind it).

Any idea how I can fix this?

Also, any idea how I can fix the pixelated look of the edges of the circles? I have set antialias: true in the renderer but it’s not doing anything.

Here’s my code:

const texture = new THREE.TextureLoader().load(PointPNG);

const material = new THREE.PointsMaterial({
  color: 0x0000ff,
  map: texture,
  size: 50,
  alphaTest: 0.1,
  transparent: true,
});

Cheers !

2

The points need to be sorted before each render call in order to properly blend by alpha, except if you use additive blending then the order doesn’t matter.

3

Thanks for your reply. I tried adding blending: THREE.AdditiveBlending to PointsMaterial, but it doesn’t seem to solve the problem:

image
image900×602 68.1 KB

4

Oh yes you need to disable depth test depthTest: false.

2 Likes
5

The problem is that I have other objects in the scene and this causes my points to go over all of these.

6

I see, then you need sorting anyway. You can store each point in an array where you update a distance property (distance to camera), sort the array by it and write the positions by the sorted array to the points geometry position attribute, so you can use any kind of blending correctly and keep depth testing enabled.

1 Like
7

Thank’s a lot for your time! Why can’t three.js compute this for me as it does for any other object?

8

It’s a specific usecase and there are couple ways to sort and deal with sorting or updating multiple attributes, for alphaTest only cases it wouldn’t be even necessary to sort.

1 Like
9

Sorting is the only way, there are other options that you could explore, but not my knowledge all other ways such as order-independent transparency have too many other requirements to make them truly viable.

I use sorting in my particle engine too, for pretty much the same reasons.

1 Like