javascript - 用于高级 Web GUI 的 Pixi.js 和 ThreeJS

Question

想法

嗨! 我和一个开发团队正在创建一个用于交互式图形编辑的开源图形界面。

我希望这个界面能够处理大量连接的节点，允许用户移动它们、重新连接、放大/缩小等。每个节点上都可以有文本、按钮、 slider 和其他控件。另外，我们想创建一个非常先进的、可插入的图形界面——每个面板都是一个插件——你可以把它想象成基于 web 的 eclipse。面板可以是图形编辑器、时间线或 3D 视口(viewport)。

问题

我想问你，哪个库会给我们带来更多好处 - Pixi.js、ThreeJS 还是其他？也许我们应该混合使用它们——在 Pixi.js 中创建界面，在 ThreeJS 中创建一些需要 3D 支持的插件(我个人不喜欢这个想法，因为降低“一致性”)。

要求

我们希望一切都在 WebGL 中运行。这样做的一个原因是，我们希望尽可能流畅地运行图形编辑器，并考虑到图形编辑器需要显示与 GUI 其他部分相同的控件这一事实，用一种技术来实现是合理的。

我正在寻找一个库，它将为我创建如此大的项目提供最佳性能和灵 active ，尤其是考虑到:

• 能够创建自定义 HUD 元素( slider 、按钮、图表等)
• 处理大量元素的能力——缓存/重绘只需要的部分很重要
• canvas fallback 很重要，但不是关键

Answer 1

but if you want to create a high performance node graph with zooming in / out and some fancy effects, that could handle thousands of nodes, I think much better performance we would gain using canvas / webgl, right?

不，我不能同意。

HTML 在节点操作和渲染方面确实非常出色。但它的弱点是您所说的那些花哨的效果。

另一方面，webgl 非常适合花式效果，但节点操作非常差。假设在第一次尝试时，您将每个节点创建为一次绘制调用，300 次绘制调用，您可能就完成了。 You will have to think and cheat and think and cheat to get rid of draw calls (webgl calls).

我见过的例子，所以可以谈谈。 Cocos2d-js可能比 Pixi.js 或 ThreeJS 更合适。这是非常好的 2d 免费引擎，带有免费工作室和强大的 Canvas 后备。还有一种您可能想要的基本奇特效果，九片。但即使是这个简单的 9 片对象也会进行 9 次绘制调用，你会发现你的性能正在快速下降。我还使用 cocos2d 进行了性能测试，我可以说 400 个最简单的 sprite 彼此相邻运行仅 30fps。

性能如此低的原因是引擎(无论是什么引擎)没有关于您究竟想要实现什么的信息。大多数引擎只会为您提供一种或两种渲染方式。如果我选择我希望每张图片都是一个 Sprite (一个节点)，引擎将无法简化它。

如果我是你，我不会使用任何引擎，只会使用 webgl。但这意味着您必须知道 webgl，并且您没有 Canvas 后备。任务似乎很艰巨，又进行了一些示威。 ThreeJS 和 playcanvas 引擎在浏览器中都有免费的编辑器。 Playcanvas 于 2 天前发布了新版本的编辑器。编辑器 gui 都是 HTML。我们正在谈论更喜欢 HTML gui 的 webgl 引擎。还有很多游戏设计师也更喜欢 HTML。

所以 HTML 根本不是一个坏选择，但如果你真的需要使用 webgl，你应该做好准备。引擎可能无法完成您的任务。