The folks at cables.gl have evidently been busy, as they’ve got eye-searing new demos to share. And if you wish that were your next music video, you’re in luck, as they posted some tutorials on advanced topics for beginners, too. Best of all, everything is free, and runs right in your browser.
cables.gl is a dataflow environment for visuals, meaning just like vvvv and TouchDesigner and the like, you create sophisticated eye candy just by patching cables together. This doesn’t even have to compete with those tools; as it even complements them well. Since it’s able to embed its output in the browser, it’s essential for creating Web-compatible output without rendering video. And a lot of what you learn in cables.gl about textures and geometry applies well to those other tools, too; it’s not a bad place to get started. It’s all possible because browsers now provide APIs to powerful features of your graphics cards. (This might also not be a bad way of benchmarking the graphics abilities of the new stuff from Apple.)
It’s in a public beta – just register for it – and the developers say it will remain free to use (including sharing your work) forever, which sounds good.
First, let’s sit back and just get inspired. There are some gorgeous audiovisual demos from mfx to get us started (among other examples on their YouTube channel) – though this being cables.gl, you can get even nicer results running in your browser directly.
Completely digging this one from this month – a good apocalyptic time was had by all (“shown first at Deadline 2021 Berlin”):
A hyperactive techno AV – warning for those with epilepsy:
And this quite nice work with a simulated display:
first shown at outline 2021 a demo by unclex, ronny, pandur and zomb watch in realtime:
https://mfx.drastic.net/view/square_one/
So whether or not that’s your style, you at least see the capabilities of the engine.
Now onto the useful stuff, because if you’re wondering how to get compelling results and you are new to this, it’s time to dig into some geometry and textures. I love what they’re doing with tutorials, in that it’s covering some elegant techniques for basics in a way that will be useful to intermediate users of this and other platforms, but also is friendly to those of us just starting out. There are more on the channel as you dig, but these ones are some cool places to begin.
For instance, let’s start with using your GPU to work with transforms on vertices – you can do a lot of fancy-looking animations efficiently and quickly this way:
And speaking of building up animations quickly, check this excellent patch for working with vertex displacement (really nice stuff, and like I said, you can learn here and then apply to other tools):
There’s a powerful new tool for working with matcaps, short for “material captures.” These basically bundle together particular texture and lighting behaviors in a way that encapsulates complex, natural ways certain stuff looks in the real world. They’re also used by Unreal Engine, making this again a nice browser-based companion for other tools. The video starts at the beginning, both explaining what this is about and how to use them in this free tool:
And there’s this wonderful tutorial, recently posted, on copying textures:
Also, they have this essential video on working with importing assets, so you can work with objects and scenes made by you (or collaborators) in Blender, Cinema 4D, or your tool of choice. (Or you can do what I’ve been doing lately, and grab some messy-in-a-cool-way scenes from the iPhone’s depth-sensing camera):
Bonus – Blender users, more on matcaps (not in cables.gl, but you can apply the two):
And, uh, pillage places like this for more matcaps.
Check out the full cables.gl channel and site for more, obviously including some beginner tutorials I’ve skipped over here: