three.js transparent sphere glitch -


i have transparent sphere , spot light , that's it. sphere displays visual glitches, striations.

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

(note grid not necessary manifest bug. put in there show transparency working otherwise fine).

any thoughts on how rid of these glitches? seem depend on relative position of camera , spot light.

using three.js, r71.

here code fiddle since seems 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); } 

remove attribute side: three.doubleside. since drawing spheres, don't need it.


Comments

Popular posts from this blog

facebook - android ACTION_SEND to share with specific application only -

python - Creating a new virtualenv gives a permissions error -

javascript - cocos2d-js draw circle not instantly -