Badass JavaScript

A showcase of awesome JavaScript that pushes the boundaries of what's possible on the web, by @devongovett.

ThreeNodes.js: A Visual WebGL Scene Editor

November 16th 2011

ThreeNodes.js is a visual dataflow based WebGL editor that uses drag and drop to create a scene.  It is similar to vvvv, which is described as “a graphical programming environment for easy prototyping and development.”  It allows the user to drag and drop units known as “patches” onto a working area and connect them together to form an output scene which is rendered in real time using WebGL.  This makes it easy to rapidly build something without writing a single line of code.  This is how easy it is to get started:

First, create a webglrenderer node. Then add a scene and connect it to the “scene” of the webgl node. On the scene children you would connect a “merge” and to it a mesh. With that there should be a red cube showing in the renderer window.

As you can see from the above screenshot, very complex scenes are possible quite easily as well.  As with many WebGL demos these days, it is based on Three.js which is already easy to use, but for rapid prototyping, this takes it to the next level.  You can try out the editor yourself here.

It is great to see tooling for these web technologies coming along - all those abandoned Flash developers will be looking for it!