Three.js 透明点云没有正确地将点混合在一起
Three.js Transparent Point Cloud Not Blending Points Together Correctly
我正在尝试使用 THREE.Points 创建用于数据可视化的点云。我想让这些点透明，这样观众就可以了解这些点在特定区域的密度。我正在使用球体几何体和加法混合进行测试。
问题是一些显示为正方形的点与它们前面的点正确混合，而其他点则简单地被它们前面的点隐藏了。出于某种原因，混合在球体的下半部分似乎无法正常工作，这很奇怪，因为我没有使用任何灯光，它应该是对称的。我不确定为什么会发生这种情况或如何解决它。
Link 代码草图：https://glitch.com/edit/#!/cloudy-chambray-leotard?path=main.js%3A22%3A0
直视球体：
从上往下看似乎也存在左右对称问题：
从球体底部向上看我得到了想要的结果：
透明度对于 WebGL 来说很棘手，因为透明对象写入深度图，并且渲染器假定第一个精灵后面的其他精灵是隐藏的，因此它会跳过绘制它们。在这种情况下绘制顺序非常重要，每次旋转相机时从后到前对精灵进行排序将是一场噩梦。
解决问题的最简单方法是在 material 中设置 depthWrite: false，这样每个精灵都不会写入深度图。那就不管前前后后，都被画出来了。
我正在尝试使用 THREE.Points 创建用于数据可视化的点云。我想让这些点透明，这样观众就可以了解这些点在特定区域的密度。我正在使用球体几何体和加法混合进行测试。
问题是一些显示为正方形的点与它们前面的点正确混合，而其他点则简单地被它们前面的点隐藏了。出于某种原因，混合在球体的下半部分似乎无法正常工作，这很奇怪，因为我没有使用任何灯光，它应该是对称的。我不确定为什么会发生这种情况或如何解决它。
Link 代码草图：https://glitch.com/edit/#!/cloudy-chambray-leotard?path=main.js%3A22%3A0
直视球体：
从上往下看似乎也存在左右对称问题：
从球体底部向上看我得到了想要的结果：
透明度对于 WebGL 来说很棘手，因为透明对象写入深度图，并且渲染器假定第一个精灵后面的其他精灵是隐藏的，因此它会跳过绘制它们。在这种情况下绘制顺序非常重要，每次旋转相机时从后到前对精灵进行排序将是一场噩梦。
解决问题的最简单方法是在 material 中设置 depthWrite: false，这样每个精灵都不会写入深度图。那就不管前前后后，都被画出来了。