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

【问题标题】：Render 100k sprites with 0.1 opacity, transparent maps and smooth antialiasing使用 0.1 不透明度、透明贴图和平滑抗锯齿渲染 100k 精灵
【发布时间】：2017-03-18 17:02:07
【问题描述】：

我有以下设置（只有相关的代码）：

渲染器

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

如何改进此渲染？除了使用精灵还有其他方法吗？我缺乏编写自定义着色器所需的专业知识，因此我将不胜感激任何有助于改进此渲染的东西。

以下是一些展示问题的示例图片：

尽管绿色区域中的蓝点密度要高得多，但它们往往会被遮挡。我相信会发生这种情况，因为绿点和红点是引入场景的第一个点云。它们会在蓝色的上方渲染。

如果我倾斜相机，由于深度索引不同，某些点似乎突然被渲染。

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

大多数点倾向于聚集在一起，并且由于渲染怪癖，大多数点往往会消失

再次特写一些剪辑效果

【问题讨论】：

这可能会有所帮助：github.com/mrdoob/three.js/issues/5668
我点击了链接，但作者似乎因为没有使用material.alphaTest = value而遇到了渲染问题。我尝试用BufferGeometry 更改示例。当我将精灵的数量增加到 10k 时，它已经展示了与我的示例相同的问题。 jsfiddle.net/z6nmto9e
如果您关注该线程，从 Three.js 中删除了粒子排序，这是您的问题之一。该线程说您需要自己对它们进行排序或使用 THREE.Sprite
我现在只是在玩这个。我在第一次发表评论后看到了这一点。它似乎修复了一些渲染。 jsfiddle.net/adrian_moisa/8ane66d2 。我会尝试在我的代码中看看会发生什么。
@gman 感谢您的指示。由于您的 cmets，我能够进一步挖掘并在另一个问题中找到有用的答案。请参阅我发布的答案。

标签： javascript three.js

【解决方案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
});

差别很大：

我仍然必须找到抗锯齿问题的解决方案。当远离相机时，圆点往往会完全溶解并消失，如此特写所示。

【讨论】：