JavaScript – Pixi.js和ThreeJS用于高级Web GUI

前端之家收集整理的这篇文章主要介绍了JavaScript – Pixi.js和ThreeJS用于高级Web GUI前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这个想法

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

我想要这个接口来处理大量连接的节点,允许用户移动它们,重新连接,放大/缩小等等.每个节点都可以有文本,按钮,滑块和其他控件.另外,我们要创建一个相当高级的可插拔图形界面 – 每个面板都将是一个插件 – 您可以将其视为基于Web的eclipse.面板可以是图形编辑器,时间轴或3D视口.

问题

我想问你,哪个图书馆会给我们更多的好处 – Pixi.js,ThreeJS或者其他的?也许我们应该混合它们 – 在Pixi.js中创建界面,并在ThreeJS中创建需要3D支持的一些插件(我不喜欢这个想法,因为“一致性”更低).

要求

我们希望在WebGL中运行的所有内容.原因之一是,我们希望尽可能顺利地运行图形编辑器,并考虑到这一事实,图形编辑器需要显示与GUI其他部分相同的控件,因此在一种技术中可以合理地执行此操作.

我正在寻找一个图书馆,这将给我最好的性能和灵活性,创造这样一个大项目,特别是考虑:

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

解决方法

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免费引擎与免费的工作室和强大的帆布后备.还有一个基本的幻想效果,你可能想要,九片.但即使这个简单的九片事情也会使9个绘制电话,你可以看到你的表现快速下降.我也用cocos2d做了性能测试,我可以说400个最简单的精灵彼此相邻,只运行30fps.

引擎(无论引擎)没有关于您要实现的是什么信息的原因,性能如此之低.大多数引擎将只提供一种或两种方式来渲染某些东西.如果我选择我想要每张照片是一个精灵(一个节点),引擎将无法简化.

如果我是你,我不会使用任何引擎,只能使用webgl.但这意味着您必须知道webgl,并且没有画布回退.任务似乎是非常困难的,而且是一些恶魔. ThreeJS和playcanvas引擎都有浏览器中的免费编辑器. Playcanvas在2天前发布了新版本的编辑器.编辑gui都是HTML,两者都是.我们在谈论喜欢HTML gui的webgl引擎.还有很多游戏设计师也喜欢HTML.

所以HTML是不错的选择,但如果你真的需要使用webgl,你应该做好准备.你的任务可能是不可能的引擎.

猜你在找的JavaScript相关文章