VVVV.js –用于高端Javascript / WebGL应用程序开发的可视化编程框架

大卫·甘恩(David Gann)

欢迎! 如果您有兴趣学习和支持VVVV.js开发,请转到Patreon页面!
您也可以使用VVVV.js示例直接尝试一下。

VVVV.js具有许多基本的JavaScript和WebGL编程方法,这些方法打包在300多个节点中。 通过使用基于浏览器的节点图编辑器,可以创建复杂的Web和移动应用程序,而无需进行文本编程,非常适合初学者和教育目的。 此外,该框架是高级程序员以可持续方式维护库和代码的有效方法,从而可以进行快速的应用程序编程。

图1:带有PBR着色器,Atlas多重纹理,实例化和递减阴影以及SSAO的VVVV.js示例补丁

许多与图形相关的节点可用于过程生成。 特别是网格和变换可以以vvvv典型的方式在程序上生成。 但是,没有基于节点的着色器编辑器。 着色器必须手工编写,效果链必须反复通过帧缓冲区,这最终会减慢应用程序的速度。 因此,最好使用尽可能少的着色器。 最佳情况下,VVVV.js应用程序将使用一个或两个带有批处理和实例化的前向着色器以及一个用于后期效果的大延迟着色器编写。 但是当然也可以根据需要添加任意数量的着色器。

VVVV.js中实现了许多与游戏引擎相关的基本节点集。 主要涉及场景图管理,缓冲区处理和冲突检测。 尽管已经实现了可以正常工作的3d游戏原型,但该实现仍缺少BSP或Octree算法之类的典型优化。 碰撞也仅限于AABB扫掠碰撞检测和响应以及简单的高度图碰撞。

图2:程序生成的具有多重纹理的地形。

在VVVV.js中编辑节点图时,默认情况下,节点在客户端执行。 但是,可以将一个节点声明为服务器端节点。 客户端和服务器端节点之间的连接随后通过网络运行。 当用户仍然看到一个补丁时,在内部将图分成单独的图,分别在客户端和服务器上运行。

这样可以实现多用户应用程序和后端编程的快速原型制作。

图3:服务器端节点用黄色针突出显示。 模式连接表示数据在客户端和服务器之间发送。

VVVV.js是一个非常以节点为中心的框架,这意味着它使大多数节点自行负责,而不受主循环的干扰。 这样的好处是添加新节点相对容易,并且遍历,图分支或状态相关算法不会带来很多问题。 这样做的缺点是,由于几乎每个节点都在内部运行for循环并调用相同的函数以将数据从输入引脚传递到输出引脚,因此这会增加整个计算的开销。

优化算法解决了这个问题,该算法目前仅用于算术运算。 优化算法遍历节点图并生成一个简单的字符串,其中包含要在一行代码中执行的javascript的算术运算。

只要节点不包含状态更改,此优化效果就很好。 计划将来,所有无状态节点图部分都将在运行时进行类似的优化。

许多常见的HTML5编程概念已经打包到VVVV.js节点集中。 例如,可以使用一个节点创建HTML元素,并使用一组与CSS相关的节点为其添加样式。 VVVV.js还可以在网页中注入典型的界面元素,并将事件侦听器附加到具有另一组节点的对象上。

图4:此补丁结构在主体中注入了具有CSS样式的div,并向其附加了事件侦听器。

正如我们所展示的,VVVV.js向着生产就绪的可视化编程框架迈出了一大步。 它包含许多方面,使其成为计算机图形,游戏,数据可视化,交互艺术,媒体安装,应用程序开发,声音制作等领域中应用程序设计的灵活工具。 VVVV.js具有一个单独的呈现引擎,这使其可以替代three.js和其他并非围绕视觉编程范例进行本地构建的库。 此外,由于其多功能性,VVVV.js能够将其他代码库包装在一组节点中,从而有可能使其成为竞争者,而不是一个可以轻松连接外部库的中性框架。

图5:浏览器中有400万个具有适当帧速率的粒子(nvidia gtx 970)

参考资料

哈维·阿根霍(Javi Agenjo),阿伦·埃文斯(Alun Evans)和约瑟夫·布拉特(Josep Blat) 2013。WebGLStudio:WebGL场景创建的管道。 在第18届3D Web技术国际会议论文集(Web3D ’13)中。 美国纽约州纽约市ACM,79-82岁。 https://doi.org/10.1145/2466533.2466551

Florian Boesch。 2018.WebGL统计。 (2018年2月)。 于2018年2月13日从https://webglstats.com/检索

P.科齐 2015年。WebGL见解。 CRC出版社。 https://books.google.de/books?id=6crECQAAQBAJ

戴维·甘恩 2017年。等距角色扮演游戏的程序生成。 硕士课程
论文。 林茨艺术学院(Kunstuniversitaet Linz),奥地利林茨。

保罗·E·哈伯利。 1988年。ConMan:一种用于交互式图形的可视编程语言。
在ACM SigGraph计算机图形学,卷。 22. ACM,103-111。

大卫·米诺(David Mignot)。 2018.ThreeNodes.js。 (2018年2月)。 从2018年2月13日检索
https://github.com/idflood/ThreeNodes.js/tree/master

vvvv组。 2018.vvvv。 (2018年2月)。 于2018年2月13日从https://vvvv.org/检索

Matthias Zauner。 2018.VVVV.js. (2018年2月)。 从2018年2月13日检索
http://vvvvjs.com/

©2018大卫·甘