June 2022 Release

Here we GO!

Our second release of the year 2022 is stacked and packed for launch. Take your time, grab a juice and dip into all the new things that we added to your toolbox. We added lots of new workflows and Operators, we rewrote and improved some of your old favorites, made the website stronger and faster, and polished some details!

Everything is ready for you in the cables.gl editor NOW, so patch some cool art and share your creations!

For all fans of changelogs and text only mode - dive into the deep end here .

OK, let's take a tour!

New Physics

Precise Ray Casting and Character Controlled Camera with Collision

We are moving cables to a new physics engine! This release introduces the first batch of Ops using ammo.js, a javascript-port of the bullet physics engine, which are both widely used and battle-tested.

This switch gives us a bunch of new Ops, but also gives us the ability to develop this even further in the future. You can now automatically use the collision bodies in your GLTF-models in your physics world! Let us know about your experience with it!

The whole new family of Ops that live in the Ops.Physics.Ammo-Namespace is using more advanced physics than what we had in cables before. So more ways for you to have stuff crash into each other ...or even move around using AmmoCharacter to run into walls.

On top of all this, or rather WITH this, comes a new way of raycasting. Check out AmmoBody, AmmoBodyCollision, AmmoRaycast and the likes to see how to make your physics-objects interact with any input or even with each other.

To make your first contact with this new way of patching as smooth as possible - we created a new template project that you can select when creating a new patch! 
We then decided to see what we could do with the room and put in some art work and quite a few interactive demos inside. Check it out above and let us know what you think!

Remote Viewer

Live Multi Device Testing and Patch Projecting



Multi Device Testing
Working on the web, we often find ourselves in situations where we have to test projects on different devices and browsers. This was always possible, with nonstop reload button mashing, but now became even better.

Open the new "Remote Viewer" in a new browser-tab, a different browser or even a separate device to create a live connection to the patch you are currently working on. All the changes you make to that page are then transferred to all the connected devices!

Want to check your positioning or CSS on mobile devices? Fire up remote viewer and make sure your patch looks great on every device you have on your hands for testing. All you need is a patch that is yours - or collaboration rights to a patch you work on with others - and your devices connected to the internet.

It's as easy as that.

Multiplayer Patching
And since we are transmitting changes of the patch via network anyhow you can now share a multiplayer-session with your collaborators while you are in the patch. The editor will present you with a "Start Multiplayer"-Button whenever that is possible, press it!

One of you will be the pilot of the session, the other(s) will be able to follow the pilot while patching, see the changes in the renderer. If the pilot allows, you can also switch seats to hand over control. Let us know how this back-and-forth works for you!

All of this networking stuff is really new to us, so - again - let us know about any bugs/hickups or even feature requests via discussions.

Image Compose Version 3.0

Alpha, New Features and Enhanced Texturing Operators
All New Workflow
As we added new texture workflows in our past updates, we decided it was time to upgrade our base operator - ImageCompose and future proof it. For this we updated more than 50 Ops to a new version. Your previous workflows still work just as well with the fresh new operator, but generating and chaining textures that influence each other, masking out effects, adding and changing alpha channels are now optimized and faster.

That being said, some of the new versions of operators do not mix with old patching methods. Luckily, You do not have to rework and update everything and we took a bit of care with how we approach operator upgrading with this update. All that you have created will work fine, and when updating your patch operators the op will warn you about the incompatibility and offer a downgrade option.

Alright what did we do? We went through all of our beloved texture and shader generating operators and added more parameters for automatic aspect ratio, alpha masking, 32bit color, parameter mapping from textures - so try out your favorite compositing ideas with the new and advanced features.
Alpha
We now properly start with a transparent background that you can put your texture objects and layers on. Plug in a texture into the ImageCompose and use the alpha channel by toggling a texture operators alpha mode. This way you can keep the alpha channel of the previous layer to use as a mask for everything else in your chain of texture effects. Need to start with a color instead? drop a color OP and set your background color - kinda like in that one image editor.

Feedback
Working with feedback effects or applying adjustments to something like a WebcamTexture, is a lot easier as you simply plug in the texture into ImageCompose and it will inherit all of the properties like size and color bitrate.

HDR/32bit
Speaking of color bitrate - cables uses 8bit and 32bit textures. We renamed our parameters to properly reflect this so you will have an easier time working with external applications and having identical naming conventions across your workflow. For example "HDR" is now called "32bit" everywhere.

New PBR Material Features

Heightmap, Parallax Projection, Tone Mapping, Dynamic Lights
Tone Mapping
Physically Based Rendering materials got sprinkled with magical new features for this update. First off, the materials are better looking and now have tonemapping looks that you can dial in for that photohyperrealism needed to traverse the uncanny valleys.

Dynamic Lights
Next we added support for the already familiar light Ops with your PBR scenes - just throw them in, animate them and see your PBR scene dynamically light up.
As we progressed with building complex and intricate PBR scenes we added support for vertex colors that can do various tasks in the material - meaning tiny file sizes with smart optimization.
There is more - PbrEnvironmentLight, the image based lighting solution for PBR materials, got some big features too.  Now you will find an environment rotation parameter to adjust your final look and calculate the lighting of the scene - so you don't need to externally adjust your lighting information texture.

Heightmaps
PBRMaterial op got more ports too - for Lightmaps and Heightmaps! Add ambient occlusion, baked lighting and control the influence on your object. Working with realistic or fantastical surfaces? Throw a heightmap on 'em and feel the scene pop out of the screen 🙂

Parallax Projection
The other feature we got into helps you create believable reflections and light behavior as you zoom around your virtual spaces - the parallax correction area parameter. Enable gizmo helpers in your editor and adjust the bounding box around your room and your viewer will see reflections on your objects correctly from all angles and distances!

New Viz Ops And Editor Improvements

Faster Workflows, Faster Rendering, Suggestions and Tooltips

As it is the core part of cables, usually the editor always receives some updates - this time also! A few smaller and less visible improvements where made to the speed of saving a patch, the GLTF-Structure-View and the menu structure for remote viewer and opening a patch in a new window.

VizOps
A lot more visible are the additions to the Viz-family of Operators. We saw people using and enjoying what we added back in November and added more.

Check out the Ops on the reference page starting with Viz to see how to visualize Arrays, Booleans, Objects and Textures to easily have an impression of the state of your patch at any time.
Tooltips
To further improve our collective quality-of-life inside the editor, we redesigned the tooltips seen when hovering a operator's port. Now you get more information about the data that is coming out of that port or what sort of data should be going into it. For arrays it shows you the "stride", for example, so no more confusion of connecting Array2 to a port that needs an Array3 😀 .
Selection And Suggestions
When selecting multiple Ops you can now hold down the Shift-key to add them to your current selection or hold down CTRL to subtract multiple Ops that you've drag selected from your entire selection.
There is also a new suggestion helper for some types of ports -  when dragging a cable out and dropping the Op search window will give you suggestions on the Ops to create...that should save you from typing "Texture" all the time.

MediaPipe Ops And New Webcam

Augmented Reality and MultiCam Support


Augmented Reality
Due to popular demand and our own interest of more possibilities to make interactive things in cables, we added a first batch of Ops using google's MediaPipe library. Check them out!

Using these new Ops you can get the coordinates of hands, faces and full body poses to create interactive experiences for the web using nothing but your webcam. We are really looking forward to what you come up with using these!

WebCam
And to make your life with MediaPipe a bit more pleasant we reworked the WebcamTexture-Operator to be only active when triggered, to be able to flip both the x- and the y-axis (for those selfie-camera needs), it now has better resolution support and also now let's you pick from multiple cameras. So you can have multiples of them in the same patch now or have one and easily select from a list of available cameras on the device!

Optimized Website and Faster Navigation

Pages Everywhere
The cables-community grew over the last years and months and so did the patches people created. In fact all the lists of patches grew so big that our patch library became slow-ish to load and a big task to scroll through. We added pagination to all the bigger lists, which should make browsing your patches, search results or examples a lot faster and usable now.
Licence Information
Sharing is caring, right? But also crediting the original creator of the patch you just awesomely remixed is the right thing to do.

We thought license information was a bit too hidden and made it more visible for public patches, on both the website and in the editor. So now you never have to ask yourself when, how and who to credit. Continue publishing your patches on cables.gl - maybe with more confidence now.
Top Patches
Mixing up the community homepage and giving your patches the well deserved claim to fame in the community was the main goal behind reworking the top-patches section on the first page you see when opening cables.gl. The most liked patches of the last six months are now shown in the "Top Patches" category.

So, create that one awesome patch, make it public, spread the word!
Patch Page
One more thing we changed on the community-part of cables is that we now have a checkerboard pattern on the patch-view page when you are using a transparent background. You will also see a new button below the patch, to widen the viewing area and scale it to 16:9 for a better view of your creation. Embiggen!

Open Type Fonts and Geometry Extrusion

Huh, what's that? Extruding 3D geometry fonts! We were playing around with OpenType fonts and that evolved into a handful of tools that can help you create cool custom geometry. Extrude fonts and paths and play around with 'em just like with the rest of the geometry Ops in cables. We hope to see you try out this workflow and tell us what you think! They are fresh out of the oven 😉

More Highlights...

Writing Ops
Since it always used a completely different way of executing code in patches, we decided to deprecate CustomOp in one of the next releases (not this one). But fear not! User-Ops will get some more love in the near future, and also already with this release you can upload any JavaScript-Library to your patch (as if you would be uploading images) and then use that with your User Op (as if you would with libraries that are part of cables).

GLTFScene
GLTFScene got some sweet improvements as well. The structure view of your scene, accessed from the parameter menu, now has collapsible sections so you can easily hide and find needed information, nodes to expose and materials to assign. Using more primitive types is now possible, like lines and points, directly within the operator, allowing better compatibility with your favorite 3D application workflows.

MeshMorph and FreeFormPlane
While on the topic of 3D - MeshMorph now has some slick parameters that allow for quick and sweet animations and different modes to cycle through various morph looks. The good-ol FreeFormPlane now has tool handles that allow super quick positioning within your canvas using helper gizmos.

QRCode, Clipboard, WebShare
A few more Ops that are worth mentioning are linked at the bottom of this section. Use them to create QRCodes, copy things to your clipboard or open the share capabilities of your OS (if available) - to spread the news about your patch. And for all of you putting art onto the blockchain, we created an op that makes integration with fxhash a lot more convenient. Have at it!

And whenever you are stuck, take our docs as a first stop. We updated the sections about exporting patches to various platforms with the tutorials we have on YouTube. We made all of then look nicer in darkmode and we even added a bit more information on how to support the development of cables. So it's definitely worth checking out that, as well.

Wow that's quite the package (told you, to set aside some time), but there is a lot more to check out in the changelog, on our youtube channel, and we will also be showcasing a lot of things on our weekly discord meetup.

Thanks to everyone who contributed to this awesome release! As always we'd love to hear some feedback from you, be it on social media, on discord or on github discussions.

Let us know what you think!

cheers,
Team Cables

February 2022 Release

Hey Everyone,

we hope you all got into 2022 well, and to keep you on your toes we prepared a nice release of cables.gl for you. The first release of the year is - again - packed with new features, lots of improvements and some bugfixes.

As always, you can go through everything that has changed by skimming the changelog. We'll try to cover the biggest changes in this post for you though. Also, check our youtube channel in the next few weeks for big and small tutorials of everything new in cables.


So, what's new?

Everything Is Shiny


Massive praise goes out to cables-user amajesticseaflapflap for spending their time between christmas and new years to brush up and contribute new Ops for this release. Thanks to his work we have a whole new world of doing lighting and materials in cables!

These newly introduced ops open up the world of Physically Based Rendering to everyone using cables.

With just two ops and a few precalculated textures you can create awesome lighting, reflections and add some roughness and shininess to your models. Try out the patch above and toggle between different parts of a PBR material!

Upload your model to cables, attach the appropriate textures and you are basically good to go. For your convenience cables even offers converters to get the proper RGBE files that are needed to make this work on the web. For your environments you will find three example textures in the "hdr"-section of the library-files-explorer. We also added RGBE-support to the Skybox-Op.

Making photorealistic stuff in cables has never been easier!

Dark Mode ON

The most immediately visible change is our rework of the whole community-part of the cables website. We created a new "dark mode" for you, and made it the default theme - head over to cables.gl after you are done reading this post and enjoy the darkness.

We also spent quite some time of revamping your whole experience outside of the editor - browsing the library, presenting your profile and patches. There was a lot to clean up, rework and reorder, and we are really happy with how everything turned out...hope you like it, too.

From Texture To Beyond

With this update, we introduce a new paradigm for creating and manipulating positional, rotational, and scale data for mesh instance and point clouds in cables. Instead of using arrays, now you can use colorful textures to animate and precisely control point clouds - blazingly fast!

This approach paves the way for more experimentation and performance friendly crazyness. Stay tuned and try it out!

More GLTF

The last release bought you a lot of tools and toys to play around with GLTF 3D scenes. This release picks up on that and irons out a few bugs and increases compatibility with more GLTF file structures.
You should now have an even easier time when importing your GLTF/GLB files into cables and animate them in your patches, without baking animations.

An ever expanding part of cables now also supports select PBR material properties and material colors, allowing you to easily setup your 3D scenes in your favorite 3D editor and import it to the web. Be sure to test this out by toggling "use material properties" inside the GLTFScene Operator.

Helping Hands

InfoBar

While we spent some time outside the editor since the last release, and that lead to a rehaul of the website, we are not forgetting the core part of cables.

For all the new people, all the regulars looking for workflow improvements and also all the veterans catching up on changes we added the new "infobar" at the bottom of your browser-window.

Whenever you select something, the infobar will give you a quick hint on the possible actions and keyboard-shortcuts for the current selection. This might give you some ideas on how to improve your workflow. so... look down more often!
Flowmode

Our beloved flow-mode got an update as well. If you press "F" you'll see the flow of data along the cables...you know this, right?

What we added to this is that from now on all the ports that see some action will flicker as well. Even when they are not yet connected via any cable.

This makes flow-mode an even better tool to debug and optimize your patches.
Backups

Since we know we all take wrong turns sometimes and have to take one step back, we improved working with backups in cables a bit. If you now go back to an older version of your patch and save it, you will get a warning about overwriting your patch.

And since that might not be enough, cables will create a backup of the current version of the patch before reverting to the old version as well. This should really keep you from accidentally overwriting your "happy little accidents" with an older version.

Team Up Now!

Ever had a task that spread out over multiple patches and maybe also multiple people?

The addition of teams to cables makes it easier to create collections of patches, invite others to work on them and keep track of what is going on.

Simply create a team, upload an avatar and start adding patches to the team via the collaboration-tab in the settings of your patch. You can also invite everyone in your new team to collaborate on your work with one click!

There Is More...

These were the biggies, but a few other things are worth mentioning as well.

We give you ImageComposeSnapshot to grab a texture in the middle of a texture-effect flow and check it for debugging or use it somewhere else, maybe some feedback effects? 

CellularNoise, PerlinNoise and SimplexNoise received offset textures, a parameter for harmonics, setting aspect ratio and input of a blend mask.

MediaRecorder got some bugfixes and now outputs the available codecs as an array. XYPad reacts to mousedrag now, PickingMaterial works with instanced meshes, and that's not even everything...

With all that being said, there is a lot more to check out in the changelog, on our youtube channel, and we will also be showcasing a lot of things on our weekly discord meetup.

Thanks to everyone who contributed to this awesome release! As always we'd love to hear some feedback from you, be it on social media, on discord or on our freshly moved "forum" on github discussions.

Let us know what you think!

cheers,
the cables team

The camera model in the header screenshot and demo patch is "Bilora Bella 46 Camera" by Martijn Vaes. Available under Creative Commons Attribution.

November 2020 Release

Hey,


we would like to show you some of the cool new things that are coming to cables with this massive update.
The last update of cables happened at the end of July (30.07.2020 to be precise) and a lot of stuff has happened. We managed to close 229 "issues" spanning bugfixes, improvements and new features.

Even though the focus of this update was more on bugfixing and "cleanup" we managed to push out a few new ops and features for you, some of which we'd like to quickly introduce:

More tools for Mesh Instancer

These Ops give you some easy ways to manipulate your instanced meshes without re-uploading everything to the GPU every frame.


Vertex shaders will do the work for you and you can control them using textures. 

You can modify positioning of the meshes using InstancedDisplacementMap and colorize them using InstancedTextureColorize.

This can then be combined with any material and other shaderEffects.

New export options

We are often asked how putting cables patches on your own website works and sometimes we cannot help because every web-hoster does stuff differently.


We are trying to make this process a bit easier by allowing owners of patches to connect 
their individual patches to their github pages or to netlify by providing an API-Key in the
cables ui. 

This will then give owners and collaborators of patches a "one click deployment" to these pages and should give you an easy way to show your creations to the world...

Please feel free to suggest other services in the forum!

JSON structure view

When working with bigger datasets, netsted JSON or remote APIs finding the datapoints that really matter to you used to be really tedious, spreading over several ops, up until now.


This update introduces a few ops that let you select properties of a JSON-Object "by path".
But more important, we put a little "explorer" in there to find the correct ops. Working with deeply nested JSON should now be a lot easier, sometimes even just two or three clicks to get to what you want.

Canvas magnifier

Introducing a new handy little tool to check colors of your rendering. 


Press ctrl+c / cmd+c to copy the selected color to the clipboard!

Transparency workflow

We updated the ImageCompose and DrawImage ops to finally support transparency the way you would expect it. 


Expect more tools to work and modify transparent textures in the future.

Some texture effects will not respect the transparency. We are working on this, please let us know if you find those bugs.

Also worth mentioning:


- Many Improvements to MatCapMaterial and PhongMaterial
- First round of improvements to existing audio ops
- Tweaks and fixes to the raycasting system
- Improved profiling of ops

You can see all the changes of this update in our changelog.

That being said, a huge thank you goes out to everyone contributing to this update, either by code, by reporting bugs or asking for improvements and by helping each others on the forum and on discord, keep up the commumity!

People contributing to this release are (in no particular order): 

That's all folks! Enjoy all the new stuff, and: happy patching!

All the best from,
your undev team

November 2019 Release

We've been hard at work to roll out another update for cables gl.
From now on we  will show you a summary of newest ops and features on this, our new blog 🙂



Editor and GUI Changes

Brighter Background

We changed the background color of the patchfield. When you see this the first time, it might be kind of shocking, but the patch is more readable than before and UI elements are more distinguishable.

Editor Keyboard Shortcuts

We integrated a new tab for the Keyboard shortcuts. Now you don't have to leave the editor to look at them. The list is not 100% complete right now, but will be extended in the near future.

Editor Icons

Editor tabs now have a color coded type indicator, this makes it easier to find and read the tab you're searching for.

Assign Variables directly to Ports

This is very helpful if you are dealing with lots of variables, or using the new preset op. Instead of using lots of VarGet Ops, you can directly attach variable values to ports.


New Phong Material

Phong material op has many more features and options than the previous versions.

The different diffuse and specular modes allow for much more freedom in getting the look that you want. We also added more textures to use the material with.
Furthermore, we reworked our lighting system. It is now easier to use multiple lights (up to 16) in your patch. Whilst before only point light illumination was possible, now there are 4 different types of lights that can all be used in conjunction to illuminate your patch: PointLight, AmbientLight, DirectionalLight, SpotLight. These only work with the PhongMaterial for now, so make sure you use it if you want illumination!

See all Phong Ops



MIDI Out

The new midi out ops will allow you to transmit Midi notes, NRPN and CC data to any external sequencer or hardware. Midi messages can be generated with data from all of our ops, this opens up generative ways to create midi data that can be again used to drive your cables patch with our midi input ops.


More New Ops



Op Enhancements

- Ops.Gl.Orthogonal_v2 - added axis switch
- Ops.Array.ParseArray_v2 - shows error indicator when invalid numeric values
- Ops.Gl.TextureEffects.DrawImage_v2 - transforms also apply to alpha mask
- Ops.Trigger.Repeat_v2 - now direction of index can be selected
- Ops.Devices.TouchGesture - added active bool input
- Ops.Gl.Meshes.SimpleSpline - performance improvement
- Ops.Json3d.Mesh3d - can now load meshes with vertexColors
- Ops.Gl.Meshes.PointCloudFromArray - performance improvement when updating coordinates regularly
- Ops.Devices.TouchScreen has force output - tested with apple pencil pressure/ipad pro
- Ops.Math.AddUp - reset trigger
- Ops.Gl.Shader.MatCapMaterialNew - added opacity texture
- Ops.Gl.TextureEffects.ScaleTexture - now has a mask input to control the scale with a texture
- Ops.Devices.Midi.MidiNote - added array out option for multiple notes
- Ops.Devices.Midi.MidiCC - added array out option for multiple cc values



Renamed and Deprecated

- Rename Ops.Gl.Matrix.ViewMatrixTranslation to Ops.Gl.Matrix.cameraPosition
- Rename Ops.Gl.CanvasSize to Ops.Gl.CanvasInfo
- Rename Ops.Value.ValueBoolean to Ops.Value.Boolean
- Rename Ops.Gl.TextureEffects.Scroll to Ops.Gl.TextureEffects.ScrollTexture
- Rename Ops.Gl.TextureEffects.Circle to Ops.Gl.TextureEffects.CircleTexture
- Rename Ops.Value.ValueHub to Ops.Value.NumberSequence
- Rename Ops.Gl.Textures.Text_v2 to Ops.Gl.Textures.TextTexture_v2
- Rename Ops.Gl.Textures.Graph to Ops.Gl.Textures.GraphTexture
- Rename Ops.Json3d.Json3dScene2 to Ops.Json3d.Scene3d_v2

- Deprecated Ops.Devices.Midi.MidiKeyPressed
- Deprecated Ops.Value.ValueChanged
- Deprecated Ops.Value.ValueStringEditor
- Deprecated Ops.Gl.Particles.PointCloudFile
- Deprecated Ops.Devices.Midi.MidiSend
- Deprecated Ops.Devices.Midi.LaunchPadScroller

Cables is now in public beta

We’re incredibly proud to announce we have launched the public Beta of cables.
After 4 years of hard work we’d like to welcome you to join us in making beautiful interactive content in the web browser.
Please help us spread the word.