Category: interviews

LogicX Virtual Showroom 2021

You might have noticed while browsing this month's top voted patches that cables user known as Wirmachenbunt posted a public preview of an interactive  scene. The project slice that we get to pick apart and learn from is part of the new LogicX Virtual Showroom website driven by cables graphics and includes some cool stuff under the hood. 


We absolutely had to sit down and ask some questions about how the studio was able to achieve this great looking website. Here is our interview and be sure to check out the links at the bottom for a closer look!

For this years LogicX website, what new goals were set by your client and how did you approach the solution?

Creating a more realistic look compared to the stylized world of 2020, was a priority. And while the 2020 edition was mobile first, this year we focused on desktop and tablet. We also tried to improve the usability since the first approach wasn’t working for everyone.


How have you achieved the polish and realistic look of your 3D scenes and what was your approach to preparation and publishing of the scenes within WebGL with cables?

The lighting and materials are fully baked into one texture. On the cables side this minimizes the workflow to just loading one GLTF file and one or two textures. We tried to achieve the best compromise between looks, file size and performance. Blender proved to be the perfect companion for cables. The export to cables works seamlessly. 


With this project, Wirmachenbunt worked with the cables.gl team to integrate Draco compression - are you happy with the result and what did it help you to achieve?

When publishing to the web, file size is always a concern. And Draco compression does a amazing job. It squeezes complex geometry into tiny files and shortens the waiting time for the audience. We are very happy pandur made this feature available in cables. 


Are you embedding textures into your GLTF scenes and are you using compression for them?

No, we load textures independent from the geometry. There is the KTX texture format which might be interesting to investigate.

Large part of your project is integration of HTML text, videos and interactive camera rotation and navigation. Could you talk about what was the approach here. Is this entirely built in cables?

We tried to improve the workflow compared to our first cables project by tackling the traditional HTML tasks outside of cables. It just made more sense to us, working with Kirby CMS and PHP on everything outside the WebGL world. The only exception are the 3D topic flags, they are HTML elements, driven by cables. 

Everything 3D is cables, therefore also the camera animations and interaction. Cables just provides the ops to easily built this mix of pre-defined camera animations and turntable interaction. The key ops are AnimMatrix and DeltaSum, worth checking out.


LogicX features quite a few animations for the camera angles  transitions and 3D model looks - were these baked out from Blender?

All camera animations are made with cables, either with AnimMatrix or lerping (easing or smoothly animating) between angles and positions.

How were you able to achieve the transition fade effect between models here?

Thanks to ratsnakes demo patch, we realized how powerful the ops ColorArea and AreaDiscardPixel are. We used it pretty much the same as in the demo patch, only using different settings and two models at the same time. You can do so many cool stuff with ColorArea, like scanning geometry fx or ground fog. There is a lot of potential.


Continuing with the navigation, desktop and mobile navigation is smooth and intuitive - did you have to create separate websites for this to work?

Nope, it’s only one website. Only the usual css breakpoint stuff going on.

In our previous blogpost you mentioned your heavy involvement with VVVV for production of projects, is there anything that you used in LogicX that was built in that software?

There was only one moment where I used vvvv because it’s more intuitive to figure out more complex number crunching. Cables can’t display or edit numbers directly in the patch field, only somehow via the inspector. And this becomes cumbersome in this case. But it's the same when using for example Visual Studio and C#. It’s a vvvv specialty which most development tools don’t have and I‘m used to.

All in all, the second project was a lot more fun and there are plenty of features in cables which we love and now miss in other tools. Looking forward to more projects with cables and to see how this community evolves.


Christian (cables patch)

Joscha (PHP, HTML,CSS, Kirby CMS)

Damian (Blender, 3D)

Patrick (Design)



see the full website here!

LogicX by Wirmachenbunt

Cables user Wirmachenbunt created an amazing website where lots of different elements came together to make something really beautiful, it also shows what cables is capable of when used for commercial projects.
You can see the results here  

We asked him some questions to give us insights into the creative process of how the web page was created.
A big thank you to him for taking the time to answer them. 

If you'd like to use cables in a commercial capacity but are missing some features or need custom support then don't hesitate to contact us to help you create a solution.

Could you tell us a little about yourself ? (background, previous work/s, current work/s)

Hi, I'm Chris Engler from Hamburg, running a studio called wirmachenbunt, hence the username. We create primarily interactive media installations, ranging from large scale video wall presentations to complex exhibits, combining real time graphics, physical input and architecture. So far vvvv has been the tool of choice, especially when it comes to boygrouping (multi-device rendering) and connecting to all sorts of electronics. Apart from the studio works, I teach at the Muthesius University of Fine Arts and Design.

Creating digital projects / artworks for over 10 years now, it is natural to explore new ways of publishing and emergent playgrounds. I actually registered at the cables website in 2017 but didn't dive into the tool too much. But it was kinda amazing what you could do in the browser at this point. There was some conversation with pandur in between the years and then right before corona hit germany, we managed to organize a workshop at the university. This was the kickoff for me to actually understand cables and have a go with it.

How did this project start out? What were the end goals

Well, thanks to corona, my friend Patrick at LOGICDATA came along with the idea to bring the canceled trade show content to the web. A few pingpong discussions later, the draft was a vertical scroller, controlling a camera animation, seamlessly through a virtual office space, highlighting the products of LOGICDATA. This includes some secondary interaction, like moving the table up and down.

We had like 6 weeks from draft to release, using cables for the first time. The end result is pretty much what we wanted. There will be an update in the future, since we learned a lot, content-wise and how the interaction is perceived. One thing we didn't finish in time is multiple virtual humans, animating through the scene.

Why did you decide to use cables to create this webpage?

Short answer, we needed WebGL and a node-based environment felt familiar.

Can you tell us what other programs and processes that you used to prepare the content?

There are the obvious ones like Photoshop and Illustrator. Blender proved to be the best match for cables concerning 3D stuff. The GLTF export just works. We used to use Cinema4D alot before but we’re transitioning to blender now. Primarily due to the export trouble with Cinema4D. There was actually a bit of vvvv involved, I made a patch to bake the alpha channel of a PNG sequence to JPEGs.

Is the HTML and CSS a part of the cables patch or is it a separate layer?

The HTML and CSS is generated directly by cables. Joscha (responsible for the HTML stuff) had to make a lot of new op's to manage the HTML layer with arrays. It's awesome you can create HTML elements with cables, but next time we will go a different way. Primarily to work in a collaborative way on a project. One can handle the HTML layer outside of cables, while the cables developer can progress independently. We might reconsider this workflow if teams can work in parallel within a cables project.

How did you make one large seamless scrolling experience?

Everything depends on one value, controlling a GLTF camera animation and translating the HTML content. Big thanks goes to pandur for the emergency help during the project, especially the camera data ops and missing quaternion2euler fun.

I cared a lot about file size and performance, since the goal was 60fps on a broad range of devices. Hence bits and pieces are only active (ifthen FTW) when in range. Multiple 3D objects are instanced to save draw calls, which works quite well with the GLTF data you get. And the engine image sequence uses JPEGS and a shader to achieve small size but with transparency.

What were the hardest challenges you encountered during the development process?

Not so much cables itself, I'd say multiplatform and browsers. For an offline developer like me, it was kinda scary to go down this rabbit hole. There have been a couple of moments, where things just didn't work on some devices and we had to find out, painfully where things could go wrong. Like iOS loves power of two textures and everything else doesn't care. Or the performance was rubbish on a high end android device which was caused by some constantly evaluating op.

Anything else you'd like to share?

First, I fell in love with cables. It is playful to just open the browser and get going. I can show the stuff everywhere and everyone can have a go with it. And cables has the best of both worlds, patching and the ability to easily extend its functionality by code. And i'm not a javascript pro 🙂 . 
I see great potential in cables, not just as a demo tool or as an online environment. Since the release of LOGICX, I've investigated the cables export to various platforms as native apps or electron. There will be wirmachenbunt tradeshow productions made with cables.

Wide awake Earth – An interview with Artur Neufeld

image
image


One of our long time users Artur Neufeld created an amazing web experience with cables.
We asked him if he could do an interview with us to explain more about how the project came to be.

Links : 
https://wideawake.earth/
http://www.arturneufeld.com/

1 - How did this project start out, what were the end goals?

Wide Awake is the brainchild of illustrator Friederike Hantel and fashion designer Ethel Vaughn. The project started as Friederike’s master thesis, and she contacted us at Selam X and asked just for some guidance and tips, on how to approach such a project on a larger scale. So we met for a coffee and just started talking about the project, its possibilities, and its potential. We were instantly intrigued by her ideas and style and were on board immediately and decided, that the potential of the project would be untapped if the whole collection would just be a bland online shop like any other. So we decided to go all-in on the holistic approach, treating the project as a brand and elevating it with a multimedia treatment. The goal was to launch the collection with a big bang, so it can be taken more serious on the international stage and get the attention that it deserves. We were all in this project because we think it is something worth to support, so it started more as a personal project, but we of course hope, that it will get bigger as we go.

2 - Can you elaborate on how the creative process led to the final result?

The first meeting with Friederike was back in September of 2018. It turned out, that she and I live basically in the same neighborhood, so it was easy to meet up, discuss plans and creative directions on a semi-regular basis. In the beginning, we had even more ambitious plans, from AR and face filters to VR and motion cap. One core idea of the project was its collaborative spirit, so we asked other creators to pitch in ideas and transform her imagery into something new. 3D artists brought her visuals to a different dimension, sound designers brought the visuals to life, makeup artists, models, and photographers delivered fitting images for the lookbook. All participating creators had absolute creative freedom, and that made the project so fun and diverse. The concept for the website shifted dynamically, as we got new visuals from the other creators and the main challenge was to wrap everything into a coherent story. In the end, we went with the concept of layers, closely related to the aesthetic of comic books. So the creative process was really a trial and error kind of thing, were we ping-ponged ideas and visuals, and at some point, someone would say “What if we would do that?”. So. e.g. that the lookbook pictures would open to fullscreen, with the borders and visuals aligning dynamically, was just an idea that came naturally after I received her first sketch for the lookbook visuals. 

3 - Why did you decide to use Cables to build this web page?

The first draft of the website already had this idea of a visual journey, the working title was “Kosmos” since we wanted to tell a story that went from the universe scale all the way to the microscopic level. As mentioned, the concepts shifted and changed a lot, so only remnants of the kosmos idea survived in the end. I was glad to use Cables in this process since its modularity allowed me to quickly change ideas on the fly. At some points, the journey was more of an auto scroller, so adding e.g. the possibility to scroll the scenes with the mousewheel was easy to implement, without the headache of refactoring the logic all the time. So the dynamic creative approach went hand in hand with cables modularity, which made the whole process a lot more fun. Otherwise, I am sure, I would have been more reluctant to new ideas and more careful when discussing new possible features or concepts. Now I could say “yeah that’s a neat idea, not sure if it is possible but let me quickly make a prototype”. And Cables enabled me to have this mindset.

4 - Can you tell us about any challenges that you faced during the development process?
In the end, we had this huge amount of layers for the interactive WebGL journey, around 300 to 400 individual PNGs. So as you can imagine, this resulted in all kinds of issues, from performance to loading times and Http requests, this layering approach was influencing everything. So one challenge was optimization, so from enabling gzip on the serverside, to carefully squeezing every bit from each PNG with different compression methods, to baking different image effects right into the PNGs, like blur/neon effects, and splitting the whole thing into thematic scenes. In the end, I would say, that the loading time is still too long, but we were at a point, that the only way to improve the loading time, would be to cut out scenes or reduce the overall amount or quality. So we decided to sacrifice a few seconds on the loading time in the end because the result was interesting and unique enough to justify that decision in our opinion. 

5 - Anything else you want to share?

Mhh just as a tip for newcomers, or anyone using cables, in general, I guess: Get accustomed to the CLI that Cables provides. In this project, I needed to tweak values all the time and needed to see it in action on my dev server, so I quickly hacked together a python script that automates the process of getting the new patch file from the Cables API. That alone really speeds up the workflow when working with bigger and more complex patches. Another thing I really learned to appreciate is the impact of a good compression method for assets. Since our PNGs had a limited color palette and big chunks of transparent areas, I could save up to 80% of the filesize, by using something like PNGQuant in a batch operation. If you don't have hundreds of images, you can also use something like TinyPng on your assets, before going to production with the project.

We’d like to give a big thank you to Artur for taking the time to respond to us. We can’t wait to see what other projects he’ll come up with.

One of our long time users Artur Neufeld created an amazing web experience with cables.
We asked him if he could do an interview with us to explain more about how the project came to be.

Wide awake earth 


How did this project start out, what were the end goals?

Wide Awake is the brainchild of illustrator Friederike Hantel and fashion designer Ethel Vaughn. The project started as Friederike’s master thesis, and she contacted us at Selam X and asked just for some guidance and tips, on how to approach such a project on a larger scale. So we met for a coffee and just started talking about the project, its possibilities, and its potential. We were instantly intrigued by her ideas and style and were on board immediately and decided, that the potential of the project would be untapped if the whole collection would just be a bland online shop like any other. So we decided to go all-in on the holistic approach, treating the project as a brand and elevating it with a multimedia treatment. 

The goal was to launch the collection with a big bang, so it can be taken more serious on the international stage and get the attention that it deserves. We were all in this project because we think it is something worth to support, so it started more as a personal project, but we of course hope, that it will get bigger as we go.


Can you elaborate on how the creative process led to the final result?

The first meeting with Friederike was back in September of 2018. It turned out, that she and I live basically in the same neighborhood, so it was easy to meet up, discuss plans and creative directions on a semi-regular basis. In the beginning, we had even more ambitious plans, from AR and face filters to VR and motion cap. One core idea of the project was its collaborative spirit, so we asked other creators to pitch in ideas and transform her imagery into something new. 3D artists brought her visuals to a different dimension, sound designers brought the visuals to life, makeup artists, models, and photographers delivered fitting images for the lookbook. All participating creators had absolute creative freedom, and that made the project so fun and diverse. The concept for the website shifted dynamically, as we got new visuals from the other creators and the main challenge was to wrap everything into a coherent story.

In the end, we went with the concept of layers, closely related to the aesthetic of comic books. So the creative process was really a trial and error kind of thing, were we ping-ponged ideas and visuals, and at some point, someone would say “What if we would do that?”. So. e.g. that the lookbook pictures would open to fullscreen, with the borders and visuals aligning dynamically, was just an idea that came naturally after I received her first sketch for the lookbook visuals.


Why did you decide to use Cables to build this web page?

The first draft of the website already had this idea of a visual journey, the working title was “Kosmos” since we wanted to tell a story that went from the universe scale all the way to the microscopic level. As mentioned, the concepts shifted and changed a lot, so only remnants of the kosmos idea survived in the end. I was glad to use Cables in this process since its modularity allowed me to quickly change ideas on the fly. At some points, the journey was more of an auto scroller, so adding e.g. the possibility to scroll the scenes with the mousewheel was easy to implement, without the headache of refactoring the logic all the time. So the dynamic creative approach went hand in hand with cables modularity, which made the whole process a lot more fun. Otherwise, I am sure, I would have been more reluctant to new ideas and more careful when discussing new possible features or concepts. Now I could say “yeah that’s a neat idea, not sure if it is possible but let me quickly make a prototype”. And Cables enabled me to have this mindset.


Can you tell us about any challenges that you faced during the development process?

In the end, we had this huge amount of layers for the interactive WebGL journey, around 300 to 400 individual PNGs. So as you can imagine, this resulted in all kinds of issues, from performance to loading times and HTTP requests, this layering approach was influencing everything. So one challenge was optimization, so from enabling gzip on the serverside, to carefully squeezing every bit from each PNG with different compression methods, to baking different image effects right into the PNGs, like blur/neon effects, and splitting the whole thing into thematic scenes. In the end, I would say, that the loading time is still too long, but we were at a point, that the only way to improve the loading time, would be to cut out scenes or reduce the overall amount or quality. So we decided to sacrifice a few seconds on the loading time in the end because the result was interesting and unique enough to justify that decision in our opinion.


Anything else you want to share?

Mhh just as a tip for newcomers, or anyone using cables, in general, I guess: Get accustomed to the CLI that Cables provides. 
In this project, I needed to tweak values all the time and needed to see it in action on my dev server, so I quickly hacked together a python script that automates the process of getting the new patch file from the Cables API. That alone really speeds up the workflow when working with bigger and more complex patches. 

Another thing I really learned to appreciate is the impact of a good compression method for assets. Since our PNGs had a limited color palette and big chunks of transparent areas, I could save up to 80% of the filesize, by using something like PNGQuant in a batch operation. If you don’t have hundreds of images, you can also use something like TinyPng on your assets, before going to production with the project.


We’d like to give a big thank you to Artur for taking the time to respond to us. We can’t wait to see what other projects he’ll come up with.