Three.js PointsMaterial AdditiveBlending 工件

Question

为什么 Points AdditiveBlending 仅在从右看而不是左看时有效？设置 depthTest:false 会解决问题，但会触发另一个问题，即 Points 覆盖其他网格。

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

Answer 1

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

由于您使用的是加法混合，解决方法是最后渲染点，然后禁用深度写入。

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

mesh.renderOrder = 999;

three.js r.86

Three.js PointsMaterial AdditiveBlending 工件

Three.js PointsMaterial AdditiveBlending artifacts

blending

three.js