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 CollisionWe 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!
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!
Image Compose Version 3.0
Alpha, New Features and Enhanced Texturing OperatorsAll 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.
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 TooltipsAs 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.
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