Three.js Artefacts PointsMaterial AdditiveBlending

Pourquoi les Points AdditiveBlending ne fonctionnent que lorsque vous regardez à partir de la droite, pas à gauche? Définissez le paramètre depthTest: false qui résout le problème, mais déclenche un autre problème que les points recouvrent d'autres maillages.Three.js Artefacts PointsMaterial AdditiveBlending

<html> 
<head> 
    <title>My first three.js app</title> 
    <style> 
     html 
     ,body 
     {height: 100%;} 
     body { margin: 0; } 
     canvas { width: 100%; height: 100% } 
    </style> 
</head> 
<body> 

    <script src="/lib/threejs/three.js-master/build/three.js"></script> 
    <script src="/lib/threejs/three.js-master/examples/js/controls/OrbitControls.js"></script> 
    <script> 
     var scene = new THREE.Scene(); 
     var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 

     var renderer = new THREE.WebGLRenderer(); 
     renderer.setSize(window.innerWidth, window.innerHeight); 
     document.body.appendChild(renderer.domElement); 


     var buffer_geometry=new THREE.BufferGeometry(); 
     var vertices=new Float32Array([ 
      -1.0, 0.0, 0.0, 
      1.0, 0.0, 0.0, 
     ]) 
     buffer_geometry.addAttribute('position',new THREE.BufferAttribute(vertices,3)); 


     var controls=new THREE.OrbitControls(camera, renderer.domElement); 

     var material = new THREE.PointsMaterial({ 
      color:0x330000, 
      transparent:true, 
      // depthTest:false, 
      blending:THREE.AdditiveBlending, 
      size:.3, 
     }) 

     var mesh = new THREE.Points(buffer_geometry, material); 
     scene.add(mesh); 

     camera.position.z = 5; 

     var animate = function() { 
      requestAnimationFrame(animate); 

      renderer.render(scene, camera); 
     }; 

     animate(); 
    </script> 
</body> 
</html>

Source

2017-07-31 gonnavis

Avec Three.Points, les points sont rendus dans l'ordre où ils apparaissent dans le tampon. Si le test de profondeur est activé, vous pouvez voir des résultats différents en fonction de la position de la caméra et de la direction de la vue. Etant donné que vous utilisez un mélange additif, une solution de rechange peut être de rendre les points en dernier et de désactiver l'écriture en profondeur.

var material = new THREE.PointsMaterial({ 
    depthWrite: false, 
    blending: THREE.AdditiveBlending 
}) 

mesh.renderOrder = 999;

Three.js R.86

Source

2017-07-31 15:42:04 WestLangley

Three.js Artefacts PointsMaterial AdditiveBlending

Répondre

Questions connexes