Woj*_*ilo 13 javascript canvas webgl three.js pixi.js
这个想法
嗨!我和一个开发团队正在为交互式图形编辑创建一个开源图形界面.
我希望这个界面能够处理大量的连接节点,允许用户移动它们,重新连接,放大/缩小等.每个节点上都可以有文本,按钮,滑块和其他控件.另外我们想要创建一个非常先进的,可插拔的图形界面 - 每个面板都是一个插件 - 你可以把它想象成基于web的eclipse.面板可以是图形编辑器,时间轴或3D视口.
这个问题
我想问问你,哪个库会给我们更多的利益- Pixi.js,ThreeJS也许另外一个？也许我们应该混合它们 - 创建界面Pixi.js和一些需要3D支持的插件ThreeJS(我个人不喜欢这个想法,因为较低的"一致性").
要求
我们希望所有内容都在WebGL中运行.原因是,我们希望尽可能顺利地运行图形编辑器,并考虑到图形编辑器需要显示与GUI的其他部分相同的控件这一事实,合理地在一种技术中执行它.
我正在寻找一个图书馆,这将为我提供创建这样一个大项目的最佳性能和灵活性,特别是考虑到:
但是如果你想创建一个具有放大/缩小和一些奇特效果的高性能节点图，可以处理数千个节点，我认为使用 canvas / webgl 我们会获得更好的性能，对吧？
不，我不能同意。
HTML 在节点操作和渲染方面确实非常出色。但ofc的弱点是你所说的那些奇特的效果。
另一方面，webgl 对于奇特效果非常出色，但节点操作非常差。假设第一次尝试时，您将每个节点创建为一个绘制调用，300 个绘制调用，您可能就完成了。你必须思考、作弊、思考、作弊才能摆脱绘制调用（webgl 调用）。
我见过的例子，所以可以谈谈。Cocos2d-js可能更适合然后Pixi.js或ThreeJS. 它是非常好的 2D 免费引擎，具有免费工作室和强大的画布后备功能。您可能还需要一种基本的奇特效果，即九片。但即使是这个简单的九片东西也会进行 9 次绘制调用，您可以看到性能快速下降。我还使用 cocos2d 进行了性能测试，我可以说 400 个最简单的精灵相邻的运行速度仅为 30fps。
性能如此低的原因是引擎（无论什么引擎）没有关于您到底想要实现什么的信息。大多数引擎只会为您提供一两种渲染某些内容的方法。如果我选择我希望每张图片都是一个精灵（一个节点），引擎将无法简化它。
如果我是你，我不会使用任何引擎，而只会使用 webgl。但这意味着你必须了解 webgl 并且你没有canvas 后备。任务似乎很困难，又进行了一些演示。ThreeJS 和 playcanvas 引擎在浏览器中都有免费的编辑器。Playcanvas 两天前发布了新版编辑器。编辑器 gui 都是 HTML。我们正在谈论更喜欢 HTML gui 的 webgl 引擎。另外很多游戏设计师也更喜欢 HTML。
所以 HTML 根本不是一个坏选择，但如果你确实需要使用 webgl，你应该做好准备。对于引擎来说，你的任务可能是不可能完成的。