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
Post a Comment