用0.1的不透明度、透明的映射和平滑的反混叠渲染100 k精灵

Question

我有以下设置(只有相关的代码)：

渲染器

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

纹理

dot: THREE.ImageUtils.loadTexture('./assets/images/dot.png')

材料

let material = new THREE.PointsMaterial({
    size: size,
    sizeAttenuation: true,
    color: color,
    map: textures.dot,
    // alphaMap: textures.dotAlpha,
    blending: THREE.NormalBlending, // THREE.MultiplyBlending
    transparent: true,
    alphaTest: 0.1,
    opacity: 0.3
});

点云通常有20到50个点云，有1k到10k点点。我在屏幕上看到的是它们的一小部分。

pointCloud = new THREE.Points(geometry, material);

加点

cfg.pointCloud.forEach(point => {
    var vertex = new THREE.Vector3();
    vertex.x = point.x;
    vertex.y = point.y;
    vertex.z = point.z;
    geometry.vertices.push(vertex);
});

我有以下问题：

• 重叠的精灵倾向于彼此剪裁，而不是互相渲染。因此，我得到了很多简单的模糊点。
• 如果我使用material.alphaTest = 0.5和material.opacity:0.1，那么精灵的边缘会变得非常锐利，失去所有的抗混叠效果。从远处看，它们往往呈现得很差，然后消失。我原以为能使边界变得平滑。我用的是512×512 png地图。
• 当我把相机从原点移开，经过一定距离后，精灵就会消失。
• 低不透明度值似乎会使点消失。

我如何改进这个渲染？除了使用精灵还有别的办法吗？我缺乏编写自定义着色器所需的技巧，所以我会欣赏任何有助于改进这个渲染的东西。

下面是一些展示问题的示例图像：

• 尽管绿化带中的蓝点密度要高得多，但它们往往是模糊的。我相信这是因为绿色和红色的点是第一个引入现场的点云。它们在蓝色的上面渲染。

​

​

• 如果我倾斜相机，似乎有些点会突然被渲染，因为深度指数不同。

​

​

• 如果我增加某些点云的不透明度，它们的精灵就会被低不透明度的精灵所遮蔽。我还以为会有混合效果呢。

​

​

• 大多数点倾向于聚在一起，并且由于渲染的奇怪性，它们中的大多数都倾向于消失。

​

​

• 再一次，特写的剪辑效果

​

​

​

​

​

​

Answer 1

我成功地提高了渲染质量。我找到了very good answer here。此外，这个question有一些好的信息。

我在材料中添加了depthWrite和depthTest作为假的。

let material = new THREE.PointsMaterial({
    size: size,
    sizeAttenuation: true,
    color: color,
    map: this._textures.dot,
    blending: THREE.NormalBlending,
    transparent: true,
    alphaTest: 0.1,
    opacity: 0.3,
    depthWrite: false,
    depthTest: false
});

差别是很大的：

​

​

​

​

不过，我还是要找到一个解决反走样问题的办法。当远离相机时，点往往会完全溶解并消失，就像这张特写照片中所显示的那样。

​

​