WebGL 与 CSS3D 用于图像的大散点图
WebGL vs CSS3D for large scatter plot of images
我正在构建一个 Web 应用程序，它将大量图像缩略图显示为 3D 云，并提供单击单个图像以启动大视图的功能。我通过为每个缩略图创建一个 THREE.CSS3DObject 然后将缩略图附加为 svg:image.
使用 three.js 在 CSS3D 中成功完成了此操作
它适用于多达 ~1200 个缩略图，然后性能开始下降（非常低的 FPS 和很长的加载时间）。当您点击 2500 个缩略图时，它就无法使用了。理想情况下，我想处理超过 10k 个缩略图。
据我所知，我可以通过将每个缩略图创建为带有纹理的 WebGL 网格来实现相同的结果。不过，我是 three.js 的初学者，所以在我努力之前，我希望得到指导，了解我是否可以期望性能更好，或者我只是在浏览器中要求太多 3D？
就渲染而言，CSS3 应该可以渲染大量的 "sprites"。但是10k可能太多了。
WebGL 可能是更好的选择。您还可以注意进一步优化，将缩略图存储在图集纹理等中...
但渲染只是其中的一部分。如果处理不当，事件处理可能会成为严重的瓶颈。
我不知道您是如何处理鼠标时钟事件和向全尺寸图像过渡的，但是将事件侦听器附加到 2.5k+ 对象中的每一个对象可能无论如何都不是一个好的选择。使用纯 WebGL，您可以使用图像空间来检测单击的对象。用不同的 id/color 对每个图块进行编码，并使用它来确定点击了什么。我想 WebGL/CSS3D 组合也可以使用这种方法。
为了回答问题，WebGL 应该可以处理 10k。如果您的矩形很大并且它们在屏幕上占用了大量空间，您可能需要考虑一些性能优化，但如果出现该问题，有一些解决方法。
我正在构建一个 Web 应用程序，它将大量图像缩略图显示为 3D 云，并提供单击单个图像以启动大视图的功能。我通过为每个缩略图创建一个 THREE.CSS3DObject 然后将缩略图附加为 svg:image.
使用 three.js 在 CSS3D 中成功完成了此操作它适用于多达 ~1200 个缩略图，然后性能开始下降（非常低的 FPS 和很长的加载时间）。当您点击 2500 个缩略图时，它就无法使用了。理想情况下，我想处理超过 10k 个缩略图。
据我所知，我可以通过将每个缩略图创建为带有纹理的 WebGL 网格来实现相同的结果。不过，我是 three.js 的初学者，所以在我努力之前，我希望得到指导，了解我是否可以期望性能更好，或者我只是在浏览器中要求太多 3D？
就渲染而言，CSS3 应该可以渲染大量的 "sprites"。但是10k可能太多了。
WebGL 可能是更好的选择。您还可以注意进一步优化，将缩略图存储在图集纹理等中...
但渲染只是其中的一部分。如果处理不当，事件处理可能会成为严重的瓶颈。
我不知道您是如何处理鼠标时钟事件和向全尺寸图像过渡的，但是将事件侦听器附加到 2.5k+ 对象中的每一个对象可能无论如何都不是一个好的选择。使用纯 WebGL，您可以使用图像空间来检测单击的对象。用不同的 id/color 对每个图块进行编码，并使用它来确定点击了什么。我想 WebGL/CSS3D 组合也可以使用这种方法。
为了回答问题，WebGL 应该可以处理 10k。如果您的矩形很大并且它们在屏幕上占用了大量空间，您可能需要考虑一些性能优化，但如果出现该问题，有一些解决方法。