CODEWITHSUNDEEP
three.js
ahaas
ahaas

Reputation: 3

THREE.js particles are appearing behind every other object in the scene

I've put a GPU particle system into my scene, copied from this example:

https://threejs.org/examples/?q=particle#webgl_gpu_particle_system

I've noticed that with the skybox present, the particles will never render visibly. Similarly, with the skybox removed, the particles only appear "behind" the spaceship and asteroids in the scene, when in fact some of the particles are positionally closer to the camera than the spaceship and asteroids. Screenshot

How can I have the particles appear normally in 3D space, with proper layering?

Upvotes: 0

Views: 617

Answers (1)

manthrax
manthrax

Reputation: 5016

There are two problems. One is that particle systems aren't neccesarily depth sorted.. so you may need to control rendering order explicitly...

three.js: how to control rendering order

The second problem is with transparent (alpha blended) objects, generally.

Read up on alpha blending, and z-buffering, depth sorting, and alpha test, specifically.

If you are just using additive blending, as that example code appears to be, then you might be fine with just the rendering order stuff described above.

The reason particle systems can't easily sort is because there are so many of them, and they are managed by the GPU, so sorting them would require pulling the data back from the GPU, to the CPU, sorting (in javascript), and then re-uploading, which would make the systems many orders of magnitude slower.

What you can do however is use z-buffering, and alphaTest, but this can cause slight alpha fringe halos around some of the particles when they happen to render in an unlucky order...

Since the particles are so small, this likely won't matter but if you start expanding the system to use larger particle sprites with different shapes, it may become an issue.

Upvotes: 1

Related Questions