为什么three.js pointcloud在mac和windows（Intel HD graphics 4000）之间的渲染不一样？答案

【问题标题】：Why three.js pointcloud is not same rendering between mac and windows (Intel HD graphics 4000)?为什么three.js pointcloud在mac和windows（Intel HD graphics 4000）之间的渲染不一样？
【发布时间】：2019-04-03 05:25:02
【问题描述】：

我正在使用 Three.js 开发巨大的点云查看器（超过 1000 万）。但是，我得到了一个奇怪的结果——mac 和 windows 之间的渲染不一样。

下图是在 Mac 上 On Mac，下一个数字On windows 在 Windows(7) 上。

两者都使用英特尔高清显卡 4000。 Chrome 浏览器会发生什么？

附加信息：同样的情况是 iPhoneSE、iPhoneX、iPad4、MacBook、MacBookAir 和 MacBookPro。那些机器显示非常稀疏的点云（通常是英特尔高清显卡系列）

但是，只有 iMac(2017) 成功地显示了巨大的点云。它使用 Radeon pro 555，而不是英特尔 GPU。

我想要任何关于信息或/和错误的消息，但“chrome_debug.log”中没有错误

=== === 在我的代码下方

if(data.point.position.length>0){
    var geometry = new THREE.BufferGeometry();
    geometry.addAttribute('position', new  THREE.BufferAttribute(data.point.position, 3));
    geometry.addAttribute('color', new THREE.BufferAttribute(data.point.color, 3));
    var material = new THREE.PointsMaterial({
        vertexColors: THREE.VertexColors,
        size:0.8,
        sizeAttenuation : true,
    });
}

=== P.P.S. === 所有人

尝试和错误，在我找到解决它之前。当 pointMaterial.sizeAttenuation = false 时，Mac 上的 FAR 透视图与 Windows 上的一样。但是，NEAR 透视图变成了稀疏的点云。但是如果 NEAR 视角，使用 pointMaterial.sizeAttenuation = true 创建，我得到的结果比以前更好。

非常感谢您的建议。

【问题讨论】：

从外观上看，在有问题的情况下，它可能只是渲染的前 64k 点。你能确认一下吗？
@H.Gatz 您需要显示您的代码，否则我们在猜测...如果您还没有这样做，请尝试添加 renderer.setPixelRatio( window.devicePixelRatio );。渲染器将为您正确调整像素大小。
感谢 WestLangley 先生的建议。我不知道 Retina Display。很快，更新了我的代码和测试，但对于 FAR 透视图，结果似乎相同。但是，NEAR 透视图完全改变了。

标签： three.js point-clouds

【解决方案1】：

在工作和失败的配置上，访问http://webglreport.com/?v=1 并检查 OES_element_index_uint 扩展的值。我的假设是失败的机器/操作系统组合不支持此扩展（MacOS 上缺少驱动程序支持）。

three.js 需要此扩展程序才能从单个 BufferGeometry 渲染超过 64k 的顶点。在不支持此扩展的机器上，您需要拆分几何。

【讨论】：

感谢 Paul 先生，我现在访问了 webglreport.com/?v=1。我在 MacBooKAir/Chrome 和 Firefox 上获得了扩展“OES_element_index_uint”。但是稀疏的云显示失败了。

【解决方案2】：

您的问题是 Mac 设备上的像素密度。 Mac 设备在视网膜显示器上的像素比通常为 2 或更高。当您声明pointsMaterial.size 时，您是在告诉它每个点的像素大小，因此请确保在分配像素大小时将window.devicePixelRatio 考虑在内。像

pointsMaterial.size = mySize * window.devicePixelRatio;

应该可以解决问题。

【讨论】：

【解决方案3】：

对于 Chrome 用户，禁用“可用时使用硬件加速”可以解决稀疏点云问题，但 fps 可能非常低。后面的原因我就不深究了，如果有人找到了，请告诉我~

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。