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点。我在屏幕上看到它只是theese的一小部分。

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，精灵的边缘会变得非常锐利，从而失去所有的抗锯齿效果。从远处观看时，它们往往呈现非常差并且消失。我期待能够渲染光滑的边框。我使用的是512x512 png地图。
当我将相机移离原点后，一定距离的精灵往往会消失。
低不透明度值似乎会使点消失。

如何改善此渲染？除了使用精灵之外还有其他方法吗？我缺乏编写自定义着色器所需的专业知识，所以我会欣赏任何有助于改进此渲染的内容。

以下是一些展示麻烦的示例图片：

即使绿色区域的蓝点密度高得多，它们也会变得模糊不清。我相信这是因为绿色和红色点是引入场景的第一个点云。而且它们呈现在蓝色之上。

如果我倾斜相机，由于深度指数不同，似乎会突然出现一些点。

如果我增加某些点云的不透明度，他们的精灵往往被不透明度较低的精灵遮挡。我期待那里有一些混合效果。

大多数点往往聚集在一起，由于渲染怪癖，大部分都倾向于消失

再次关闭一些剪辑效果

Answer 1

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

我在材料中添加了depthWrite和depthTest为false。

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

差异很大：

我仍然需要找到抗锯齿问题的解决方案。当远离相机时，圆点往往会完全溶解并消失，就像在特写镜头中所示。

使用0.1不透明度，透明贴图和平滑抗锯齿渲染100k精灵

1 个答案: