Pixi.js和ThreeJS,用于高级web GUI



的想法

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

我希望这个界面能够处理大量连接的节点,允许用户移动、重新连接、放大/缩小等。每个节点上都可以有文本、按钮、滑块和其他控件。此外,我们希望创建一个非常高级、可插入的图形界面-每个面板都是一个插件-你可以把它想象成基于web的eclipse。面板可以是图形编辑器、时间轴或三维视口。

问题

我想问你,哪个库会给我们带来更多的好处——Pixi.jsThreeJS还是其他库?也许我们应该把它们混合在一起——在Pixi.js中创建接口,在ThreeJS中创建一些需要3D支持的插件(我个人不喜欢这个想法,因为"一致性"较低)。

要求

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

我正在寻找一个库,这将给我在创建这样一个大项目时提供最好的性能和灵活性,特别是考虑到:

  • 创建自定义HUD元素(滑块、按钮、图形等)的能力
  • 处理大量元素的能力——缓存/重绘只需要的部分很重要
  • 画布回退很重要,但并不重要

但如果你想创建一个具有放大/缩小和一些奇特效果的高性能节点图,可以处理数千个节点,我认为使用canvas/webgl会获得更好的性能,对吧?

不,我不能同意。

HTML在节点操作和渲染方面确实非常好。但它的弱点是你们所说的那些奇特的效果。

另一方面,webgl在花式效果方面非常出色,但节点操作非常差。比方说,在第一次尝试时,将每个节点创建为一个绘制调用,300个绘制调用可能就完成了。你必须思考和欺骗,思考和欺骗才能摆脱平局呼叫(webgl呼叫)。

我见过的例子,也可以谈论。Cocos2d-js可能比Pixi.jsThreeJS更合适。这是一个非常好的2d免费引擎,有免费的工作室和强大的画布后备。还有一个你可能想要的基本花式效果,九片。但即使是这个简单的九分球也会打9个平局,你可以看到你的表现迅速下降。我还用cocos2d进行了性能测试,我可以说400个最简单的精灵并排运行的速度只有30fps。

性能如此之低的原因是发动机(无论是什么发动机)都没有关于你想要实现什么的信息。大多数引擎只会为您提供一到两种渲染方法。如果我选择我希望每个图片都是一个精灵(一个节点),引擎将无法简化它

如果我是你,我不会使用任何引擎,只会使用webgl。但这意味着你必须了解webgl,并且你没有画布后备。任务似乎很困难,再次出现了一些降级。ThreeJS和playcanvas引擎在浏览器中都有免费编辑器。Playcanvas在两天前发布了新版编辑器。编辑器gui都是HTML。我们讨论的是更喜欢HTML gui的webgl引擎。此外,许多游戏设计师也更喜欢HTML。

所以HTML是一个不错的选择,但若你们真的需要使用webgl,你们应该做好准备。你的任务对于引擎来说可能是不可能的。

相关内容

  • 没有找到相关文章

最新更新