Has Cables.gl has been on your periphery for a while now, but you haven’t yet taken the time to dig into it? Maybe this is the first time you’re hearing of it? If you haven’t heard of it before, Cables.gl is a web-based tool for creating beautiful real-time interactive content. It uses a node-based interface similar to VVVV or TouchDesigner, allowing for quick experimentation and prototyping. Cables.gl is developed by the Berlin-based studio undev (https://undev.studio), who started the project back in 2016 as an internal development tool for interactive WebGL and Web Audio projects.
Don’t assume that running in the web browser means that Cables.gl is any less capable than the standalone software it takes inspiration from — it includes a very robust feature set and performs very well! In this post, we’re going to take a look at some of the great features that set Cables.gl apart.
Before we get started, if you’re looking to get started with Cables.gl yourself, be sure to check out Elburz’ two recent Cables.gl tutorials, which provide a great introduction to the software: Microphone Input & Audio Reactivity in Cables.gl – Tutorial, and First Steps in Cables.gl:
Amazing Real-time Visuals
To start off, Cables.gl is capable of creating some impressive visuals! Cables supports a wide variety of texture effects, drag and drop 3D model loading, and materials for 3D geometry. For those interested in developing VR experiences, it also supports WebVR.
On the Made With Cables page of the Cables.gl website you’ll find an impressive variety of beautiful examples of what Cables.gl can do, including 2D, 3D and interactive visuals. Definitely check it out!
Cables.gl is Free!
Among the many great features of Cables is the fact that it is totally free to use! According to the Cables website, “Cables will always be free for everybody to use and anything you make with cables is yours”. In a world where subscriptions and high license costs are the norm, this is a refreshingly different approach.
This also means that for applications like education (primary schools, secondary schools, colleges/universities, continued learning institutions, etc), Cables could be a great tool to introduce students to node-based programming, programmatic concepts and generative visual design.
No Installation Required
Being web-based, Cables.gl requires no software installation to function (other than a modern browser)! No messing around with installation, licenses or updates. Everything is accessed via the Cables.gl website. Cables.gl has also been set up for easy web embedding when your project is done.
Cross Platform Compatible
Mac, PC, Linux? Cables.gl supports them all. All patches and assets within Cables.gl can be opened on any computer that has browser support.
Not only that, but Cables.gl projects can be run on any device that supports a modern browser — which includes mobile devices, tablets, Chromebooks, and more!
To see this in action, take a look at the above photo from the June 2022 Release blog post. Cables.gl can be seen running on multiple iPhones (old and new), an Android phone, and an iPad, while the editor is running on a newer MacBook Pro.
Not only that, but all devices are running in a new remote viewer mode, which means that any updates/changes in the editor will appear on all devices in real time!
Interactivity and Connectivity
Cables.gl supports browser APIs like gamepad, MIDI, webcam, and phone sensors. You can also connect to other devices’ development tools like a Kinect or Leap Motion. All features of MIDI are supported, including MIDI clock, notes, CC, and NRPN. This means you can connect Cables.gl to external synths, sequencers, effects, or DAWs pretty quickly.
Latest Hardware Not Necessary
Because its main requirement is a modern browser, Cables.gl projects can be developed and run on a (very) wide variety of devices. I was able to start developing on a 10+ year old MacBook Air without issue.
That said, a lot of the performance comes down to the patch. The more shader effects and 3D models your patch has, the higher the performance requirement. Just as in TouchDesigner, performance can also be dependent on your patch optimization skills as well.
Cables.gl Recommendations
Cables.gl does recommend having at least the equivalent of a Nvidia 970M for any serious graphics work. As the Nvidia 970M was introduced in 2014, that includes a pretty wide range of compatible hardware. And as we talked about before, not every project is going to need that kind of juice to perform well. Many projects run great on mobile devices!
One other thing to point out regarding developing Cables.gl projects versus running them: I was even able to open the patch editor on an iPad, though I got a message stating to use Firefox or Chrome (I was using the iPad version of Firefox) and that unexpected behavior may occur. With that in mind, it’s not clear whether developing projects on tablets/mobile browsers is officially supported.
So if you’re looking to develop projects on a tablet, your mileage may vary. As mentioned above, projects can be run on mobile devices without issue, but editing seems to be intended to be done on a laptop, but it never hurts that you can take a look under the hood on a tablet.
Great User Interface
Spend any time working with Cables.gl and you’ll realize that a lot of thought has gone into the user interface. Undev have clearly taken some time to learn from other node-based tools and developed something that includes many of the best features of different platforms, along with interesting new innovations all its own. As Elburz mentioned in his recent videos on Cables.gl, the search functionality is particularly robust, a welcome feature for anyone who has dealt with the sometimes subpar search functions of other platforms! One of my favorite features is the ability to see the flow of data through the cables in real time as you can see below. This makes troubleshooting tricky patches a lot easier.
Check out the User Interface Walkthrough section of the Cables documentation to dig into the UI in more depth.
No Code Required
One of the goals of Undev studio for Cables.gl was to create allow users to create amazing content without having to know any code. This is especially great for beginners who are looking to get into the world of interactive generative visuals but don’t have any experience with coding. Combine this with a well thought out, easy to use interface as well as thorough documentation, and you have a very beginner friendly software! No doubt this will help to spread the use of Cables.gl in years to come.
… But You Can Still Code
Even with its focus on accessibility and ease of use, Cables.gl still offers plenty of opportunities for you to get under the hood. Not only can you program vertex and fragment shaders directly in the software, you can actually code your own custom operators as well! Another super cool feature: the code for the built-in operators is freely available. This means you can create your own custom operators using the built-in operators as a starting point or even reference internal operations to learn how things are coded.
Get Our 7 Core TouchDesigner Templates, FREE
We’re making our 7 core project file templates available – for free.
These templates shed light into the most useful and sometimes obtuse features of TouchDesigner.
They’re designed to be immediately applicable for the complete TouchDesigner beginner, while also providing inspiration for the advanced user.
Frequent (Big) Updates
Being that Cables.gl is freely available, you might think that the software receives infrequent updates as the developers focus their attention on other projects. Not so with Cables.gl! Cool new features are constantly being added to the software. Recently, a remote viewer (allowing live testing on multiple devices), an updated physics engine using ammo.js, and multiplayer patching were added. That was just the June release! Check out the Cables.gl blog to take a look at all that’s been added recently.
Wrap Up
As you can see, there’s a lot to like about Cables.gl! It includes a feature set more often seen in traditional software packages, right in your web browser. At the same time, it’s easy to use, fun to experiment with, and provides a great opportunity for exploring mobile-focused interactive projects. All of this for the low price of free. I highly recommend checking it out!
