three.js transparent sphere glitch

Question

I have a transparent sphere and a spot light and that's about it. My sphere displays visual glitches, like striations.

see: http://jsfiddle.net/blwoodley/tvcogqkg/3/

(Note the grid is not necessary to manifest the bug. I just put it in there to show that transparency is working otherwise fine).

Any thoughts on how to get rid of these glitches? They seem to depend on the relative position of the camera and spot light.

Using three.js, r71.

Here is the code from the fiddle since SO seems to want it:

var SCREEN_WIDTH = window.innerWidth - 100;
var SCREEN_HEIGHT = window.innerHeight - 100;

var camera, scene, _planeMesh;
var canvasRenderer, webglRenderer;

var container, mesh, geometry, plane;

container = document.createElement('div');
document.body.appendChild(container);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 100000);
camera.position.set( 380, 80, 100 );
var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( 180, 160, 0 );
var grid = new THREE.GridHelper(400, 40);
grid.position.y = -20;
scene.add(grid);       

scene.add(spotLight);

camera.lookAt( scene.position );
var material = new THREE.MeshPhongMaterial( {
    color: 0xaaaa00,
    emissive: 0xaa0000,
    specular: 0xaa00aa,
    shininess: 10,
    side: THREE.DoubleSide,
    shading: THREE.SmoothShading,
    opacity: .8, transparent: true } );
var size = 16.0;
var sphereGeo = new THREE.SphereGeometry( size, 32, 16 );
var mesh = new THREE.Mesh( sphereGeo, material);
scene.add(mesh);

var mesh = new THREE.Mesh( sphereGeo, material);
mesh.position.y = 40;
scene.add(mesh);

var mesh = new THREE.Mesh( sphereGeo, material);
mesh.position.x = 60;
scene.add(mesh);

// RENDERER
webglRenderer = new THREE.WebGLRenderer();
webglRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
webglRenderer.domElement.style.position = "relative";

container.appendChild(webglRenderer.domElement);
animate();

function animate() {
    requestAnimationFrame(animate);
    render();
}

function render() {
    webglRenderer.render(scene, camera);
}

gaitat gaitat · Accepted Answer · 2015-06-13T03:59:36

Remove the attribute side: THREE.DoubleSide. Since you are drawing spheres, you don't need it.

three.js transparent sphere glitch

1 Answers