Pixi.js和ThreeJS用于高级Web GUI

Question

Pixi.js和ThreeJS用于高级Web GUI

javascriptcanvasthree.jswebglpixi.js

15

理念

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

我希望这个界面可以处理大量的连接节点，允许用户移动它们、重新连接、缩放等等。每个节点上都可以有文本、按钮、滑块和其他控件。此外，我们还想创建一个相当先进的可插拔图形界面——每个面板都将是一个插件——你可以把它看作是基于Web的Eclipse。一个面板可以是图形编辑器、时间轴或3D视窗。

问题

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

要求

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

我正在寻找一个库，能够为我们创建这样一个大项目提供最佳性能和灵活性，特别是考虑到以下因素：

能够创建自定义HUD元素（滑块、按钮、图形等）
能够处理大量元素——缓存/重绘只需要的部分很重要
对于Canvas回退功能很重要，但不是关键

- Wojciech Danilo

2D元素应始终使用常见的Web技术创建，您可以仅使用html5和css3完成许多事情。如果您想要任何3D方面的高级解决方案，请选择Three.js，它是一个适当的库，并为您提供易于访问的GPU。我不能推荐Pixi.js，因为它仅用于带有动画和类似内容的滑块（高级自定义动画需要更少的时间，但性能也较低）。现在，您可以在渲染循环的顶部创建一个图层来展示您的“2D GUI”，或将其全部放入渲染循环中（这当然会更慢，因为您需要每秒渲染它们）。 - Silom

@Silom 我完全理解hmtl5和css是最终解决方案，但如果您想创建一个具有缩放和一些花哨效果的高性能节点图，可以处理数千个节点，我认为使用canvas / webgl会获得更好的性能，对吧？因此，我们正在考虑这种解决方案。感谢您的建议，这非常合理。如果您有任何其他建议，我很乐意听取！ - Wojciech Danilo

你可以使用svg标记放大和缩小，矢量图形就是为此而生。并且可以使用画布与您的图形交互。Entity Black的答案正是我想告诉你的，只是我受到字符限制。你可以使用Pixi和Three.js有更多的选择，但也更加受限制，因为它们都基于自定义渲染循环（实际上很容易因开销过大而崩溃）。 - Silom

1

@Silom 浏览器对SVG的支持不够好。直到现在，即使在IE中也无法使用CSS样式来渲染SVG（但通常情况下，您应该使用CSS而不是SVG元素属性以获得速度= GPU加速）。例如，SVG属性transform没有硬件加速（在Chrome Dev中打开“启用绘画闪烁”）。即使在当前浏览器中，对SVG元素进行的CSS变换也没有硬件加速。此外，如果您缩放，SVG会占用GPU内存。具有几十个或更多元素的可导航形状图形，WebGL、Canvas甚至HTML+CSS都比SVG表现更好 :-( - Robert Monfera

我最近为了在THREE.js中简单处理鼠标交互而构建了这个：http://codepen.io/killroy/pen/dMzLMq 一旦完成，它就工作得非常好。这还是一个正在进行的工作，但到目前为止相当可靠。 - Killroy

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Entity Black · Answer 1

如果你想创建一个能够处理数千个节点，具有缩放和一些花哨效果的高性能节点图，我认为使用canvas/webgl可以获得更好的性能，对吧？

不，我不能同意。

HTML在节点操作和渲染方面非常出色。但是它的弱点就是你提到的那些花哨特效。

另一方面，WebGL非常适合制作花哨的特效，但节点操作非常差。假设你第一次尝试将每个节点作为一个绘制调用来创建，300个绘制调用后可能就完成了。你必须思考和欺骗才能摆脱绘制调用（WebGL调用）。我看过并可以谈论的示例是：Cocos2d-js 可能比Pixi.js或ThreeJS更适合。它是一个非常好的免费2D引擎，带有免费工作室和强大的画布回退功能。还有一种基本的花哨效果，你可能想要，就是九切片。但即使是这个简单的九切片也会产生9次绘制调用，你会看到性能迅速下降。我也用cocos2d做了性能测试，我可以说400个最简单的精灵挨在一起只能以30fps运行。

性能如此低的原因是引擎（无论是哪个引擎）没有关于你究竟想要实现什么的信息。大多数引擎只会提供一两种渲染方式。如果我选择每个单独的图片都是一个精灵（一个节点），引擎将无法简化它。

如果我是你，我不会使用任何引擎，而是只用WebGL来完成。但这意味着你必须了解WebGL，并且没有画布回退。任务似乎非常困难，需要一些演示。ThreeJS和playcanvas引擎都有免费的浏览器编辑器。Playcanvas刚在两天前发布了新版本的编辑器。并且两个编辑器的GUI都是HTML。我们正在谈论偏好HTML GUI的WebGL引擎。此外，许多游戏设计师也喜欢HTML。因此，HTML绝不是一个坏选择，但如果你真的需要使用WebGL，你应该做好准备。对于引擎来说，你的任务可能是不可能完成的。