Javascript three.js点云、BufferGeometry和不正确的透明度

问题是：我有一个包含大量数据点（大约一百万）的点云。当我将透明度应用于渲染点时，透明度不知何故不会显示渲染点后面的内容

正如您在标记点的示例中所看到的，它没有显示它应该显示的内容，就好像缓冲有问题一样

我使用three.js通过以下“设置”创建点云：

渲染器：

this.renderer = new THREE.WebGLRenderer({
    canvas: this.canvas,
    antialias: true
});

材料：

this.pointMaterial = new THREE.ShaderMaterial( {
    uniforms: {
        time:       { type: "f", value: 1.0 }
    },
    vertexShader:   document.getElementById('vertexShader').textContent,
    fragmentShader: document.getElementById('fragmentShader').textContent,
    transparent:    true
});

顶点着色器：

attribute float size;
attribute float opacity;
attribute vec3 color;
varying vec3 vColor;
varying float vOpacity;

void main() {
    vColor = color;
    vOpacity = opacity;
    vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
    gl_PointSize = size * (500.0 / length(mvPosition.xyz));
    gl_Position = projectionMatrix * mvPosition; 
}

片段着色器：

uniform float time;
varying vec3 vColor;
varying float vOpacity;

void main() {
    gl_FragColor = vec4(vColor, vOpacity);
}

几何图形（我省略了填充阵列的部分）：

我用内置的point材质尝试了这一点，同样的情况也发生了

this.pointMaterial = new THREE.PointsMaterial({
    size: this.pointSize,
    vertexColors: THREE.VertexColors,
    transparent: true,
    opacity: 0.25
});

---

这是一种预期的行为，还是我做错了什么？

阿尔法混合方程的工作方式是，后面几何体的源颜色被前面几何体的目标颜色覆盖。这意味着您需要按从后到前的顺序渲染透明几何体，以便前面的几何体与后面的几何体正确混合

如果所有的都是透明的几何体，那么您可以禁用深度测试，以相反的深度排序顺序渲染，这样就可以了。如果您也有不透明几何体，则需要首先正常渲染所有不透明几何体，然后禁用深度写入（非测试）并以相反的深度排序顺序渲染透明几何体，然后重新启用深度写入

---

如果您有兴趣学习更多内容，请提供问题的答案。

您希望在标有（红色）的列表中看到什么区域？您是否尝试将参数

depthTest:false

和

混合：三个。AdditiveBlend

添加到材质？@gaitat:前面透明顶点后面的顶点的正确表示。@Atrahasis:是的，我这样做了，因为这是关于Stackoverflow的另一个线程/问题中建议的解决方法。但是，它的用途有限，因为我不想要自适应混合，我想要对不透明对象进行深度测试（我知道我也可以找到解决办法，但那将是一个解决办法，因为有一个解决办法…）这是一种解决办法，但我会接受这一点，因为我觉得如果我没有，这个问题将永远悬而未决。

this.pointMaterial = new THREE.PointsMaterial({
    size: this.pointSize,
    vertexColors: THREE.VertexColors,
    transparent: true,
    opacity: 0.25
});