For a long time we have been asked on how we can keep cables free and open to everyone.
We finally made the move to make cables.gl a project that you can easily support financially using Patreon!
By supporting cables on Patreon you will be able to pick from one of five levels. The levels differ in the monthly amount - obviously - but also in the benefits you get with each level.
Keeping our word that cables will always be free to use, we keep the benefits of supporters "visual" and "early access".
No "freemium" or "pro account". Some also get awesome shirts!
Pick some level that you feel comfortable with and rest assured that we love supporters at every level.
For a up-to-date list of what the different levels contain, head over to Patreon itself.
When working with data textures it is often hard to debug. The VizTexture op now can show RGBA values at a pixel position for much more direct visualization of your data
Intersection Ops
This is a new group of ops for just very simple picking/raycasting and inter body collisions.
Often
we don't want to use the >1mb big ammo library when we don't need
any physics simulation, just some simple clickable 3d objects.
The last release gave "Extensions" to the cables-community. A way to contribute your code to cables. This release gives all the power of this into the hands of "Teams".
Because it's a huge release, with some major changes, we will also split the presentation of it into a few more posts.
This one being about how to collaborate on and share ops with the cables-community.
Before we dive in, as you know, you can find all the changes that went into this massive release in our changelog.
The real talk for this is in the docs. As "RTFM" is really rude, we will give you a quick rundown of how to work with Patch Ops, User Ops, Team Ops and Extensions.
All of these are tied together in teams. They are the new and improved way to collaborate on patches and ops. Teams then can share these - be it with your friends, coworkers or the whole community.
The Gist Of It:
Create a team. Make it private, unlisted or public. Let people join - or invite them. Add patches and ops.
Sharing patches is pretty straightforward: Everyone in the team will be able to open all the patches in the editor.
Make individual users collaborators of the patch and have them work with you.
With Ops, it's now like this:
If you feel like it, you can check all the implications by diving into the new section about permissions in the docs.
With this release being about sharing, and contribution we reworked the credits page on cables.gl to include all the contributors in the community, all the open source projects that we are standing on the shoulders of...and most notably the companies that sponsored cables development in the past.
If you want your logo on that page, contact us to find a spot on our backlog for features you'd love to see integrated.
Thanks again to everyone that contributed to the development of cables so far!
Op Selection
To not make this post too text-heavy. Here are some new ops for you to check out:
That about wraps it up for this post. Stay tuned for more information on changes in
We picked up on where we left in the last release and moved our beloved example room to VR. WebXR-VR is coming along quite nicely these days and we updated our experimental VR ops and made them work on many devices.
We got ourselves some headsets, jumped in on the task and added two new Ops to the cables library: WebXrVr and WebXrVrController.
Once you put the WebXr.Vr-Op
into your patch and open it on a capable device, you will be presented
with a "headset icon" on top of your patch. Click it and you can dive right in!
With just these two ops, you to add VR capabilities and controls to your
patches easily. Check out the examples and see how easy it is to
experience your patches in Virtual Reality.
As said, this is the very first version of WebXr in cables and we would
love to hear from you. If you have any feedback on devices, features or
workflow, please let us know.
It works great on devices like Quest 2, HoloLens or many Android phones. Without a headset, you can use this handy extension for Chrome and Firefox. Try it:
Managing Collaboration
Collaborating with people is a huge part of how we think cables should work. Be it via public patches, remixing, sharing or working together on private projects.
We now introduce better control of who can see, play around or edit a patch.
This is explained in full detail in the documentation. Here is a quick rundown:
Request Access
Any team member, or user with a secret link will see a "request access" button on the patchpage. Click it to let the owner of the patch know, that you want to help them work on the patch.
For example: You can safely ask for help in the forums using a secret link and give read only access to people that offer help.
To not have you flooded with a lot of requests, this button is not shown for public patches.
Grant Permissions
The owner of the patch will see new requests on their invite page, and also be notified with a red bubble the next time they open cables.gl.
It's now up to them to decide on the level of access. In a nutshell: "Full Access" allows everything, "Read Only" allows to play around but never save the patch.
We also added this functionality to invites, so whenver you want to share a patch with someone you can now decide if they should be able to make changes to your patch.
Collaboration Overview
Working with collaborators has become more centralized. You can now decide on the level of access even after accepting requests or sending out invitations.
Simply open the "Collaboration"-Tab in the settings of any patch and invite new users, see pending requests or change the permissions of current collaborators. Even for patches created before this update!
Easier Life In The Editor
Making your patching-experience a better one, improving on workflows and making it easier to keep your patches clean and tidy is one of the most important goals of every release.
Let's see what we came up with this time to make the life of patching even more enjoyable.
Alignment
Do you also like your patches cleanly organized and aligned in a aestetically pleasing manner? Then this new feature will make you smile.
The editor will now show a vertical line when dragging ops around. You will see when they "snap" to other ops that are on the same position, vertically. No more excuses for crooked cables!
Suggestions
We added more context based suggestions for fitting ops. So now you have a shortcut to create Texture-, StringEditor-, DivElement-Ops and all the fitting VizOps for the type of the port.
The opsearch dialog will now be even more clever and allow you to create and use variables or triggers to organize your patch. You can even decide if you want to set the variable directly or control setting of the variable with a trigger.
Connecting Ports
You might have encountered situations where it was very tedious to link ops to each others. Be it because of display size or input method. With the new "longpress" functionality in the editor that's a thing of the past.
To use it, click on any op and hold until a white line will appear. Now, navigate to the op you want to connect and select it. You will be given the known selection of fitting ports to choose from.
We enabled both of these features in the editor, they can easily be turned off in your editor preferences.
Quick Math
All the simple math ops to work on numbers in cables are now quickly accessible via shortcuts.
Press escape to open the opsearch dialog. Then simply enter +, -, * or / to add the appropriate op to your patch.
You don't even have to press enter anymore!
Shiny New Toys And Some Old Friends
PlayerControlPanel
To facilitate for the (pretty common) task of playing media files, or even controlling the cables timeline, we created "PlayerControlPanel". The op gives you a simple UI to work with AudioBufferPlayer, TimelinePlayer or anything else that somehow works with a "current time". Check the example for a timeline-based audioplayer that allows for skipping and navigating in the track!
VizStringLong
When debugging the state of your patches, all the Viz-Ops come in handy. If you have to deal with text, or long strings in general.
VizStringLong will now show you all the content you need to get an idea on what's going on.
VizArrayChart
This new op will make getting an overview of your arrays a breeze. Connect any array with numerical values to it an it will show the distribution of it's contents as a piechart.
If you need the values named, add an array of strings to the op to have your piechart labeled with.
GradientTexture GradientTexture received a trigger port that allows you to randomize the colors it outputs.
The number of points you gradient will have is still up to you to decide. You can manually
trigger and refine the generated gradient or just let it be completely
random by triggering it, say, at a certain Interval.
Pose Tracking Mask
With a small update to
MpPoseTracking you now can work with the segmentation mask provided by
the media pipe library and hand it over to other ops.
The most simple
example would be to mask the background of a webcam image, but we are
sure you will come up with much more creative uses for this feature.
Geometries
FreezeMeshes lets you combine multiple meshes into one geometry, to optimize performance.
With GeometryToObj you can generate an .obj file from a geometry. For example, you can import your geometries in any 3d software (like blender).
More Ammo For Your Patches
With the release back in June we introduced a new way of working with physics in cables. ammo.js.
We got a lot of feedback on that and also spent some more time on our own to see how it performs. This resulted in quite some changes, additions and improvements to the ops that were introduced almost four months ago.
AmmoBody got an option to "be" a triangle mesh, it now can work with an array as an input to create multiple bodies at once. To optimize performance when using physics in only parts of your projectAmmoWorld now cleans up all the bodies internally, when set to inactive via an input boolean. You will also find a new output port for all collisions that currently happen in the world.
AmmoCollision, for that matter, now can filter collisions more fine-grained. You can match the name of either body of the collision using "exact", "startswith" or "contains" matching. So "ball collides with any wall" is possible and now also works well with AmmoEmitter. Stick all of this together with AmmoRaycast, now outputting hit positions.
Show us how you create games with cables!
Things That Also Happened
For a complete overview on what changed, head over to the changelog, it is quite the read.
If you are still not done with reading, check out our updates to the documentation. We added a new section on coding your own VizOps, as already mentioned there is a whole write-up of the (new) permission system to patches and we moved the section on embedding exported patches into your website to a more prominent place.
Talking about exported patches... The exe export has been changed to not rely on github anymore. It is a lot easier to export executables of your patches now! And for folks working with the likes of react/Vue or any other framework or platform that does not handle subdirectories (well), every export now comes with a "Export without subdirectories" options. This puts javascript and assets alongside the exported index.html.
And last, but not least, we added some cool new projects to our "hall of fame". Check out made with cables to see some impressive "real world" projects that were made with cables.
Thanks to everyone who contributed to this awesome release! As always we'd love to hear some feedback from you, be it on socialmedia, on discord or on github discussions.
It has been a great big year in the cables-universe - we made a lot of changes, improved stuff that was already there and added new features. We even fixed one or two bugs!
The cables-community was busy and growing in 2021 - we see a lot of new people in our regular meetups, registered users are constantly increasing and so is the number of created and published projects. Keep up the good work, and join the discussion on discord, the forums and the public issue tracker.
If you feel lost, need a quick introduction or want to know how to use new features, check our YouTube channel that revved up again in the second half of 2021 with a new tutorial video every week. Like, subscribe, comment...as they say!
Shall we dive into what happened in the last 12 Months? Well, let's!
The Big Changes
GLUI:
After almost a year in development, we switched the cables patch editor from being rendered in SVG to an accelerated WebGL rendered one - as it should be! We took it a step further and deleted the SVG renderer entirely from the user interface in the November release.
Having the editor no longer draw operators and cables with SVG but being completely rendered in WebGL gives massive improvements in regards to performance and a lot of new possibilities for improvement.
We also reworked almost all of the cables-ui to be sitting on a modern JavaScript foundation. This gives additional future-proofness and more room for neat UI improvements as can be seen in the latest "Viz"-family of ops and the addition of Areas to group your ops together.
With this step made, watch out for more improvements to the UI to make your patching-life easier, quicker and even more fun!
GLTF:
Workflows with imported 3D GLTF Scenes in cables got a major boost over the last year. We introduced a lot of new ops that make working with materials, cameras and animations exported from i.e. Blender a breeze. It all culminated in adding support for skins and bones in November, and while we were at it (and since we still target the web) we also added Draco Compression support. You can even compress your 3D models right inside the cables editor file manager!
Even though we are super happy to see these already used "in the wild", we flanked these features with a few tutorial videos to guide your workflow transition a bit easier. Check them out!
In The Wild
Workshops:
Apart from a few real-world projects we also set aside a bit of time to teach cables to students and interested audiences all around Europe. Sometimes remotely, sometimes in-person. We held workshops at Hyper Island, returned to Muthesius Art School in Kiel - spreading the word on demo making, and introduced cables to the students at Ostfalia University as well as Beckmans Design School.
Thanks to everyone inviting us and giving us a chance to show the possibilities of cables to various audiences. If you'd like to have cables as part of your curriculum in 2022, feel free to contact us on discord. We'd love to come!
Nodevember:
For the first time, we invited the cables community to take part in nodevember - a month of challenging topics to create patches for. And what a month it was! Brave participants created a staggering 53 patches and shared them with the world. It was incredible to see the cables community being super-active during November and having new public patches for the given topics everyday!
We even made it to the big list of software used for the online event, awesome! We will definitely be doing this again in 2022, so reserve November for some intense patching sessions!
What's Next In 2022?
As you might have read between the lines, we are super happy with the last year. Thanks to everyone contributing to cables in one way or the other, be it by joining our discord meetups, giving feedback on releases, hinting us at new things to try out, helping other people on discord and the forums or also "just" spreading the word on socialmedia. Thanks!
But are we done? Far from it. Be prepared for another year of new and improved stuff in cables, like working on patches together simultaneously, better ways of contributing code to cables, more features using your webcam for AR or a complete rework of the cables community websites. Stay tuned!
again: happy new year everyone, we are looking forward for the next 12 months with you!
Congratulations to all of the participants in our very first #Nodevember with cables challenge! The month long patching extravaganza finished up with more great patches that we were all excited to see.
It sure wasn't easy balancing work, life and creative brainstorming prompted by the official topics but we all enjoyed seeing your posts each day! To all of the participants, we've prepared a small package of goodies to ship out - expect those soon!
Check out what everyone whipped up for last week of the challenge below and you can always see the rest of the submissions in our past blog posts and of course the #nodevember tag in the cables.gl patch library.
Get ready for #Nodevember with cables 2022
As with all things good and fun ... we want more! Next year we hope you too join in and share your cabling skills and tricks. We really enjoyed what the community made and how it inspired us. Truth be told, the discussions we had during the meetups and in our chat gave us some ideas on how to improve our own patches and yes, even create and add features to new cables operators.
Check out the awesome work from the rest of the community as they flexed their node based applications that are posted under the official hashtags on twitter and insta - #nodevember and #nodevember2021 .
another release, quite quickly after the one in September but still a massive one. You can see what working on almost 250 issues does on the official changelog, as always.
Worth mentioning in this release are definitely some pretty nifty new features in the UI of the editor. Like grouping Ops into areas or having small visualizations directly next to your Ops. But more on that in a few seconds...
GLTF support in cables got a big update as well with support for skinning, bones and a bit of performance optimizing if you are working with DRACO compression. Time to fire up blender!
We also worked on updating documentation, adding a few more "tips" to the "did you know"-panel. Did you know these exist and you can turn it back on in editor settings?
GLTF skin and bones
GLTFScene can now render skinned meshes that are animated by bones. This means you can now create a "T-Pose Skin"
of a person and use mixamo to easily create a person that is running, fighting or even dancing.
Cables will now automatically replay these animations.
New UI Ops and workflows
The UI of the cables Editor received tons of small improvements, updates and little things that will make your patching-life easier.
With the WebGL-UI now being the only mode to run the editor, the time was right to facilitate the new environment and give you some nifty new features.
Our new Area Op lets you create, color and name areas in the patchfield. Once you created an area you can then select all the Ops that
are in there and move them around freely, a cool new way to organize all the different parts of your patches and move them around.
The new set of Ops starting with "Viz" give you the possibility to visualize data in the patchfield itself.
VizString and VizNumber will output whatever value your out-ports currently have.
VizGraph will go one step further and show you a graph of several numbers as they change over time. Compare how your animations and easings align with each other right in your patchfield.
And, last but not least, VizTexture will give you a preview of the Texture at that exact position in the trigger-flow. Super useful to not always have to render them out to the canvas.
If you need to catch up on what has changed, you can check all the "did you know"-images right here.
Pixel Difference
With the introduction of the new PixelDifference Op cables now provides THE tool for feedback effects.
Use it to calculate the differences between individual pixels which can then be used with PixelDisplacement to create self-modifying feedback effects.
Manual Backups
If you find yourself in a situation where you want to change something big in your patch and you fear that stuff will break (and it will, right?), you can now create a quick backup of the current patch to get back to.
This is also helpful to compare what has changed and which exact binge-cabling session broke your patch. Be aware though that you should not edit and save backups, this will set your patch back to that state...then again, that might exactly be why you went back to that version in the first place, right?
Easier Audio workflow
We updated the documentation on when and how and where you are allowed to play audio in browsers. Since there have been questions about this quite a lot, we thought we'd put it into the FAQs.
For even more convenience Ops.WebAudio.Output now displays a small speaker icon in the bottom right corner of your patch to provide the "User Interaction" that is needed to start playback. If the browser is already allowed to playback audio, it will not show. Sweet!
Media Recorder
We introduced a new way of recording your patches to video. By using the fairly new Mediarecorder API you are now able to easily record videos of your project from within the editor. Use the new MediaRecorder Op and try different browsers for different supported video codecs ... and also audio-support!
Sharing your work has never been easier!
more new operators!
On top of all the above we added a few more Ops, some by your request on the public issue tracker, for you to work with. Have fun putting them to use!
even more improvements to...
A few of our old favourites have gotten some improvements as well. Be sure to check the changelog to see how these trusted Ops were made even better.
Apart from us working on cables, some of you have shared the amazing things you've created! Be sure to let us know what you make with cables in the future!
Soo...that's that...have fun diving into everything delivered. Join our weekly meetup on Discord for praise and questions. Thanks to everyone providing feedback, bugreports, bugfixes and mental support. Appreciated! Happy patching!
Great to see the participants challenging themselves with new techniques and approaches and we are taking notes!
We linked a few here and to see more just browse the #nodevember tag in our public patch library. You can also check out the #cablesgl #nodevembertags for more patch videos and patch links on social media.
If you'd like to participate and nab a super cool cables.gl sticker and shirt - there is still plenty of time left.
To enter, publish a patch on the cables.gl site with the #nodevember tag or post a video of your patch on social media with the tags #nodevember and #cablesgl .
Here are just a few of them for you to play with and learn from.
Check out our Nodevember website section and the social media #nodevember #cablesgl tags for even more publicly published and top secret experiments from our community as the challenge continues into the 2nd half of the marathon.
If you'd like to participate and have some fun with the official #nodevember creative topics, all you have to do is publish your cables patch with the #nodevember tag set in the settings.
To share it with the global event online audience and our team on social media - tag a video of your patch with #nodevember #nodevember2021 #cablesgl .
Have some questions or want some help with a patch you want to share? We will continue to checkout the challenge with you during our Weekly Meetups on our Discord.
Thanks to all participating so far and we are looking forward to week 3!
Join in!
Here are the Official channels and hashtags to keep an eye on:
With the first week of the #Nodevember cables challenge behind us, we've already got some great patches out in the wild thanks to you!
You'll notice we have a new section on our frontpage showing the latest patches tagged with #nodevember and of course find posts from our community on the official channels.
We encourage you to check out and take apart the patches, remix them and share them with the world!
As the online event gets into week two, we are eager to see what you will create. Get inspired by the suggested official topics to start your patch, the #nodevember online community, or try out a personal challenge.
We'll continue to explore #nodevember with you during our Weekly Wednesday Meetups on our Discord - just drop in and join in the fun.
... and in case you are wondering about the event - check out our previous blog post for details and how to get your hands on some cables stickers and shirts!
Here are the Official channels and hashtags to keep an eye on:
