Question

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

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

我使用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);
}

几何体（我遗漏了填充数组的部分）：

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

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

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

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

Answer 1

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

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

如果您对学习更多内容感兴趣，

Here会some回答similar个问题。

three.js指向云，BufferGeometry和不正确的透明度

1 个答案: