使用 Three.js 制作大量二维矩形的最佳方法是什么

Question

Three.JS noob 在这里尝试进行 2d 可视化。

我使用 d3.js 制作了包含数千个节点（矩形）的交互式可视化。不用说在动画过程中存在性能问题，因为浏览器必须为这 10000 个节点中的每一个节点创建一个 svg DOM 元素。

我希望使用 WebGl 重新创建相同的可视化，以利用硬件加速。

现在 ThreeJS 是我选择的一个库，因为它很受欢迎（顺便说一句，我确实看过 PixiJS 并且它的 api 对我没有吸引力）。我想知道在 three.js 中做 2d 图形的最佳方法是什么。

我尝试为每个矩形创建一个PlaneGeometry。但似乎 10,000 个平面几何图形并不可行（动画变得超级慢）。

我可能遗漏了一些东西。我只需要知道创建 2d 矩形的最佳原始方法是什么，并且仍然可以唯一地识别它们，以便在绘制后与它们进行交互。

感谢您的帮助。

编辑：你们会建议使用另一个库吗？

Answer 1

我认为您在研究 WebGL 方面走在了正确的轨道上，但根据您在可视化中所做的工作，您可能需要更接近金属，而不是“开箱即用”threejs。

我建议看看 GLSL，看看如何使用顶点和片段着色器实现可视化。您仍然可以将threejs 用于许多WebGL 管道。

您可能需要直接进入 GLSL 着色器工作的原因是因为您希望从 javascript 中取出大部分多边形操作逻辑，至少尽可能多。每当您要求 js 对数万个多边形进行紧密循环以更新位置等时……您都会为 CPU 使用率而苦苦挣扎。

让 js 将数据参数传递给您的着色器并让顶点操作在那里发生会更多性能更高。

看看这里：http://www.html5rocks.com/en/tutorials/webgl/shaders/ 以获得漂亮的着色器教程。