Three.js PointsMaterial AdditiveBlendingアーティファクト

Points AdditiveBlendingは、左からではなく、右から見るときに機能するのはなぜですか？ depthTest：falseを設定すると問題は解決しますが、ポイントが他のメッシュにオーバーレイするという別の問題が発生します。Three.js 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>

出典

2017-07-31 gonnavis

Three.Pointsの場合、ポイントはバッファに表示される順序でレンダリングされます。デプステストが有効になっていると、カメラの位置とビューの方向によって異なる結果が表示されることがあります。

追加混合を使用しているため、回避策はポイントを最後にレンダリングし、深度書き込みを無効にすることができます。

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

mesh.renderOrder = 999;

three.js r.86

出典

2017-07-31 15:42:04 WestLangley

Three.js PointsMaterial AdditiveBlendingアーティファクト

答えて

関連する問題