It’s free. It’s patchable / node-based. It’s low-code – but you can hack those shaders where you want. It’s cables.gl, and it’s been getting steady updates and a ton of new tutorials, now in Español alongside the English (and as we learn to speak shader). Perfect for tweaking, understanding graphics, and making your next hit music video.
https://cdm.link/2023/07/cables-gl-free-visuals-in-the-browser-features-and-tutorials/
The cables.gl team and community around it have been busy lately, even in the (northern hemisphere) summer. That includes lots of nice new feature tweaks, like this one for checking out how your vizTexture op is working:
new UI feature: for convenient debugging the vizTexture op now has an internal colorpicker which shows you RGB data at a coordinate pic.twitter.com/9j2mzHP1ZC— cables.gl (@cables_gl) June 23, 2023
Let’s get into it.
First, there was a big June update, including team collaboration features – meaning now is a great time to get together with some friends and try hacking on this (as well as working together professionally). Here’s their blog guide to everything they added:
Part 1: Create and collaborate
That’s on top of a December update that added user extensions, editor improvements, new ops, image uploading, and more.
There are of course some refreshed tutorials. Instance picking, raycasting with interaction ops and so on are essential to interactivity, explained here:
That’s in turn doubly important since the fact that cables.gl runs in the browser means it’s a way to make interactive sites.
They also showed off how to make the effect in this beautiful demo by Holon – Kopfsache – and to use render2textures:
The demo in question:
Those speaking Spanish, there is this excellent set of tutorials in your language (or if you’re wanting to practice – weirdly, I sometimes find I retain information differently when outside my native language):
for spanish speakers: check out those tutorials! great work and thank you nahui/ocelotl!https://t.co/H4fFhBaphT pic.twitter.com/W5tP5E9O5v— cables.gl (@cables_gl) July 13, 2023
This new tutorial on random word cloud demos is also really helpful to understanding a number of details of how texture coordinates and other ops work:
While we’re at it, let’s have some more demos! Enjoy!
Available online, and yes, “.gl” is the top-level domain – thanks, Greenland!