transparency - artifacts when rendering both sides of a transparent object with three.js

Question

I try to render both sides of a transparent object with three.js. Other objects located within the transparent object should show too. Sadly I get artifacts I don't know too handle. Here is a test page: https://dl.dropbox.com/u/3778149/webgl_translucency/test.html

Here is an image of the said artifact. They seem to stem from the underlying sphere geometry.

Interestingly the artifacts are not visible for blending mode THREE.SubtractiveBlending = 2.

Any help appreciated!

Alex

Answer 1

Self-transparency is particularly difficult in WebGL and three.js. You just have to really understand the issues, and then adapt your code to achieve the effect you want.

You can achieve the look of a double-sided, transparent sphere in three.js, with a trick: You need to render two transparent spheres -- one with material.side = THREE.BackSide, and one with material.side = THREE.FrontSide.

Using such methods is generally required if you want self-transparency without artifacts -- especially if you allow the camera or object to move.

Here is a fiddle: http://jsfiddle.net/x5bm0qLf/

EDIT: Updated fiddle to three.js r.105