Workaround of disabling depth testing for transparent objects?

Question

In the scene I've got only transparent objects, thus with enabled depth testing it causes objects hiding each other. I know depth testing doesn't consider any transparency, it just writes to the depth buffer looking at values of z. Then how to render correctly two transparent objects ?

I did this renderer.context.disable(renderer.context.DEPTH_TEST); but nothing changed

illustration of my concrete problem:

the cube is MeshLambertMaterial({color: ..., transparent: true, opacity: 0.6})

and the plane is MeshLambertMaterial({color: ..., transparent: true, opacity: 0.4})

cube is rendered after plane, but if the cube is opaque then whole of it will be rendered correctly without any discarding (also look at the points they are also opaque hence are visible).

So how to get it consider transparency and don't care about the order of rendering as well so two transparent objects don't hide each other ?

Answer 1

In three.js, you can turn off depth testing by setting

material.depthTest = false;

Don't be surprised if you have artifacts when the camera position is changed.

You might also want to read this answer.

three.js r.80