Double sided transparent shader looks buggy

Question

I have made a little test that allows you to experiment with shaders in a 3D environment using three.js.

There's a sphere in the scene that shows the shader.

The demo shader I have created is a very simple shader that uses a 2D noise implementation. A big part of the sphere remains black, which I made transparent. I want the other side of the sphere to be visible too. So I have enabled transparency and set rendering side to double-sided.

material = new THREE.ShaderMaterial({
    'uniforms': uniforms,
    'fragmentShader': $('textarea#input-fragment').val(),
    'vertexShader': $('textarea#input-vertex').val()
});

material.side = THREE.DoubleSide;
material.transparent = true;

On this example, the buggyness is easier to notice.

When the sphere is viewed from the top, you only see the shader from the outer side. When viewed from the side there seems to be a bit choppyness, and when viewed from the bottom it seems to be working.

These are the different angles (top - side - bottom):

Here's the important bit of my fragment shader:

void main() {
    float r = cnoise(vNormal.yz * 2.0 + t);
    float g = cnoise(vNormal.xz * -1.0 + t);
    float b = cnoise(vNormal.xy * -2.0 + t);

    // opacity ranges assumable from 0 - 3, which is OK
    gl_FragColor = vec4(r, g, b, r + g + b);
}

So why am I seeing the choppy edges and why does the viewing angle matters?

Answer 1

There is nothing wrong with your shader. You can also see the effect if you set:

gl_FragColor = vec4( 1.0, 1.0, 1.0, 0.5 );

Self-transparency is tricky in three.js.

For performance reasons in WebGLRenderer, depth sorting works only between objects (based on their position), not within a single object.

The rendering order of the individual faces within an object cannot be controlled.

This is why from some viewing angles your scene looks better than from others.

One work-around is to explode the geometry into individual meshes of one face each.

Another work-around (your best bet, IMO) is to replace your transparent, double-sided sphere with two transparent spheres in the same location -- a front-sided one and a back-sided one.

three.js r.56