three.js指向云，BufferGeometry和不正确的透明度 [英] three.js point clouds, BufferGeometry and incorrect transparency

问题描述

问题：我的点云有很多数据点（大约一百万）。当我对渲染点应用透明度时，透明度会以某种方式显示渲染点后面的内容

The problem: I have a point cloud with quite a lot of data points (around one million). When I apply transparency to the rendered points, the transparency somehow does not show what is behind the rendered points

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

As you can see in the example of the marked point, it does not show what it should, it is as if there is a problem with the buffering.

我使用three.js使用以下设置创建点云：

I use three.js to create a point cloud using the following "setup":

渲染器：

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);
}

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

The geometry (where I left out the part where I populate the arrays):

var bufferGeometry = new THREE.BufferGeometry();

var vertices = new Float32Array(vertexPositions.length * 3);
var colors = new Float32Array(vertexColors.length * 3);
var sizes = new Float32Array(vertexSizes.length);
var opacities = new Float32Array(vertexOpacities.length);

bufferGeometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
bufferGeometry.addAttribute('color', new THREE.BufferAttribute(colors, 3));
bufferGeometry.addAttribute('size', new THREE.BufferAttribute(sizes, 1));
bufferGeometry.addAttribute('opacity', new THREE.BufferAttribute(opacities, 1));

this.points = new THREE.Points(bufferGeometry, this.pointMaterial);
this.scene.add(this.points);

我尝试使用内置点材料，同样发生了这种情况

I tried this with the built-in point material, where the same happens

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

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

Is this a but, expected behaviour or am I doing something wrong?

推荐答案

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

The way the alpha blending equation works is that a source colour for geometry that is behind is covered by a destination colour for geometry that is in front. This means you need to render your transparent geometry in sorted order from back to front, so that geometry in front will correctly blend with geometry behind.

如果您只有透明度几何然后你可以只是禁用深度测试，以反向深度排序顺序渲染，它将工作。如果你有不透明的几何体，那么你需要首先正常渲染所有不透明的几何体，然后禁用深度书写（不测试）并以反向深度排序顺序渲染透明几何体，然后重新启用深度书写。

If all you have is transparent geometry then you can just disable depth testing, render in reverse depth sorted order, and it will work. If you have opaque geometry as well then you need to first render all opaque geometry normally, then disable depth writing (not testing) and render transparent geometry in reverse depth sorted order, then re-enable depth writing.

此处 一些回答类似问题，如果您有兴趣学习更多。

Here are some answers to similar questions if you're interested in learning a bit more.

这篇关于three.js指向云，BufferGeometry和不正确的透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！