DoubleSide, transparent material produces artefacts between overlapping front and back faces

Hey Team Three,

Incredible work on the library - I am having an absolute blast on my first WegGL project thanks to you guys : )

However, I am experiencing some rendering artefacts between overlapping front and back faces when setting a MeshBasicMaterial up like so:

map = THREE.ImageUtils.loadTexture('some_transparent_image.png');
material = new THREE.MeshBasicMaterial({
    map: map,
    transparent: true,
    side: THREE.DoubleSide,
    depthTest: false
});

I have created a quick fiddle to demonstrate the issue I am experiencing:

http://jsfiddle.net/92Mb7/19/

Notice that as you slowly roll the sphere/camera up and down along the X axis, artefacts start to appear as ‘bands’ between overlapping front and back faces. This is even more evident when depthTest is set to true. However when depthTest is set to true, these artefacts only appear when looking down on the sphere from the top. Conversely, looking at the sphere from the bottom renders the mesh and material as I would expect.

I have spoken to @aerotwist about this and he has explained that it is likely an issue to do with the depth buffer, but was hoping that it was resolvable?

Any aid you can provide would be greatly appreciated 😄

Many Thanks,

Matt

[apendua]

@MatthewWagerfield Why not try rendering the model twice? First with side = THREE.BackSide, than with side = THREE.FrontSide. This should do the job for all convex geometries without any need to sort objects / triangles or whatever. BTW, I’ve been always thinking that this particular use-case is the reason to introduce the THREE.BackFace functionality, but now I’m not sure 😉

[WestLangley]

@Anniks Please redirect your question to the three.js forum.