Three.js PointsMaterial AdditiveBlending artifact

问题描述：

为什么Points AdditiveBlending只适用于从右边看，而不是左边？设置depthTest：false将解决问题，但会触发另一个点覆盖其他网格的问题。Three.js PointsMaterial AdditiveBlending artifact

<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>

答

使用Three.Points，点将按照它们出现在缓冲区中的顺序进行渲染。如果启用了深度测试，您可能会看到不同的结果，具体取决于相机的位置和视图方向。

由于您正在使用叠加混合，所以解决方法可以是最后呈现点并禁用深度写入。

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

mesh.renderOrder = 999;

three.js所r.86

Three.js PointsMaterial AdditiveBlending artifact

相关推荐