in three.js application (http://www.professores.uff.br/hjbortol/disciplinas/2017.1/hwc00001/test/threejs/viewer-04/viewer-04-e.html), wireframe in black competing solid in yellow screen pixel flickers. there way avoid this? notice: flicker effect stronger zoom out.
here animated gif showing problem: http://www.im-uff.mat.br/tmp/pixel-flicker.gif
well, of course, make wireframe model thicker, there solution thin wireframe?
thanks, humberto.
here code:
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>icosaedro</title> <!-- javascript libraries --> <script src="threejs.r84/build/three.js"></script> <script src="threejs.r84/examples/js/controls/flycontrols.js"></script> <!-- css --> <style type="text/css"> body {text-align: center;} </style> <!-- threejs code --> <script type="text/javascript"> // check capabilities, , start if sufficient var haswebgl = (function() {try {return !! window.webglrenderingcontext && !! document.createelement('canvas').getcontext('experimental-webgl');} catch(e){return false;}})(); var hascanvas = !! window.canvasrenderingcontext2d; // converts value boolean var context0 = null; var clock = new three.clock(); if (hascanvas) { document.addeventlistener( "domcontentloaded", init, false); } // end of if() function init() { document.getelementbyid("msgwebglcontext0").innerhtml = ""; /* spawns objects, scenes, cameras, renderers etc. */ context0 = {color: 0xccff33, name: "0"}; // set scene if (haswebgl) { context0.renderer = new three.webglrenderer({alpha: true, antialias: true }); } else { context0.renderer = new three.canvasrenderer({alpha: true, antialias: true }); } context0.renderer.setsize(600, 400); // add renderer document. // should called before three.trackballcontrols(). context0.viewport = document.getelementbyid("webglcontext0"); context0.viewport.appendchild(context0.renderer.domelement); context0.scene = new three.scene(); context0.camera = new three.perspectivecamera(20, 600/400.0, 0.1, 10000); context0.camera.position.z = 4000; context0.scene.add(context0.camera); context0.controls = new three.flycontrols( context0.camera ); context0.controls.movementspeed = 1000; context0.controls.domelement = context0.viewport; context0.controls.rollspeed = math.pi / 24; context0.controls.autoforward = false; context0.controls.dragtolook = false; // create icosahedron context0.scene.add(new three.mesh(new three.icosahedrongeometry(503), new three.meshbasicmaterial({color: 0x000000, wireframe: true}))); /* context0.scene.add(new three.mesh(new three.icosahedrongeometry(497), new three.meshbasicmaterial({color: 0x000000, wireframe: true}))); */ context0.scene.add(new three.mesh(new three.icosahedrongeometry(500), new three.meshbasicmaterial({color: context0.color, opacity: 0.9, transparent: true, side: three.doubleside}))); // run render(); animate(); } // end of init() function animate() { /* 1 animation tick */ requestanimationframe(animate); render(); } // end of animate() function render() { /* renders our little scene */ var delta = clock.getdelta(); context0.controls.update(delta); context0.renderer.render(context0.scene, context0.camera); } // end of render() </script> </head> <body> <div id="info"> <b>wasd</b> mover, <b>r|f</b> | down, <b>q|e</b> roll, <b>up|down</b> pitch, <b>left|right</b> yaw<br/> </div> <div style="text-align:center; display: table; margin: 0 auto;"> <span id="webglcontext0" style="width:410px; height:50px; display: table-cell; text-align:center; vertical-align: middle; border-style: solid; border-width: 1px;"></span> </div> <div id="msgwebglcontext0" style="text-align:center; display: table; margin: 0 auto;"> <span style="width:700px; height:50px; display: table-cell; text-align:center; vertical-align: middle; border-style: solid; border-width: 1px;"> seu navegador parece não suportar webgl ou esta opção não está habilitada. <br> em caso de dúvidas, entre em contato conosco pelo e-mail: <a href="mailto:conteudosdigitais@im.uff.br">conteudosdigitais@im.uff.br</a>. </span> </div> </body> </html>
if working big values this, should increase camera near frustum reduce/prevent z-buffer fighting. instead of 0.1, try values 10 or 20.
Comments
Post a Comment