 Hello everyone. We're talking about creating tools for Blender outside of Blender that's a really strange title for a conference. The topic of this conference is to create external interface outside of Blender using, for instance, a web browser of a standalone application and to remote Blender by using it. So, first of all, we're going to really quickly introduce ourselves. Yeah, I'm Flavio Perez. I'm from France. I used to have an artist background before doing a school named Art Technologies of Images where I learned to script. I didn't consider myself as a programmer. I work at the Tour de Menuie, at MacGuff, on these big features you may have heard of. And then I went to the stars of France, a little company called Infecto, and today I'm starting another called Leafy Special. Thank you. And I'm Francois Gassard. I'm also French, as you can hear. I also come from Art Technologies of Images at the Paris I.T. University. I'm an independent 3D, 3D and VFX artist. We're using Blender, but not only, but mainly Blender now. And I'm also a developer and I call the standalone application and mostly web application now. I'm a co-founder of a company named Automated to integrate HTML5 panel inside After Effects and Adobe application. That was the initial project when I started to work on this stuff. I'm an active member of the demo scene when we create a lot of real-time graphics. And I'm trying to use the web browser as a renderer giant, mainly for broadcast purpose. And aside that, I'm a member of the core team of Naturen with open source compositing software and I try to make it communicate with Blender using exactly the same kind of sockets. And we are also teachers at the Paris I.T. University when we try to teach open source software to our students and they really, really love Blender. They choose Blender, in fact. When you ask them, if they want to work with Maya or Blender, at 90% they reply, they work to Blender. So it comes from the students, not from the teacher. That's a really interesting point of view. We also want to thank Jonathan Giroux, work on the initial connection for sending camera information from Blender to a WebGL renderer inside the browser. And after that, we work on the communication on the other side from the web browser to Blender. And it is also the creator of the registry add-on, who is a kind of repository of add-on who can be easily installed inside Blender. I would like to quickly thank you. Thanks to Blender CERNBECAMP, which is something we organized in three years with students doing an internship. We started out in effect on this year, which was at Le Fe Special last year. We work on Vlad Eloise, you might see tonight. And for the post-library, I'm going to present today Noelle here in the middle, and Damien, which is the guy without clothes. The naked guy. Helped me a lot on this. So I would like to thank them. Almost naked. So first of all, why creating tool outside of Blender? We really, really love the Blender interface, even the 2.4 branch, in my opinion. But first of all, we don't want to disturb the developer with sometimes strange, strange idea. We don't want to add new buttons. We don't want to add new shortcuts. And we sometimes want to create complex widgets, while sometimes difficult to design using the Blender user interface. We want to have direct access to a lot of libraries who are already made in several languages. And you want to connect Blender to external tool, make them communicate. So we're going to show you that with two different demos. So as it works, we decided, I mean, I tried last year to put a web server inside Blender and work within outside. And it didn't work really well. Just like running Qt inside Blender, the loop is not working well. So actually, we find the way, putting that web server in another thread. But I'm going to go back to that in a little, in a second. And the idea was still to have something which was non-blocking, of course, as Blender should always be. And it's great. So the idea is, now you have this web server and you can send stuff to that using the web socket. We'll see that. Of course, the first version, you can send any Python command. So you can even make jokes to your former team workers in the same network, for example. While that's a security issue, you have already managed so far. You can only use the localhost connection and stuff like that. And only called for operators and not any Python command. But that's it. I will just go to a schema explaining how it's working. So Blender, start this web socket for Python, little web servers, very, very light on a separated thread. So it's not blocking Blender in any case. And then the way it's communicating with Blender is we have this Q-list. And in this Q-list, we see we can put a message and then Blender can get it using a permanent script asking for the Q-list if there is something waiting. So, for example, in the case of the post library, we'll show you as a demo, we just connect that post library to the little server. Here we can already check if the connection is allowed or we just close it, of course. And then the post library will just send a message to the web server which put that message on the next slide. And the server could be on the localhost. You don't have to have two computers. Yeah. And the demo would be on the same. Only on these computers, for instance. Yeah. So that message goes to the pile of the Q and Blender take it every one-sixth of a second. Every time Blender is refreshed, checked if there is something new in that pile. It's very quick. And now Blender got the message and do whatever needs to be done. The way we found to answer back, because Blender could use the request library from Python, for example, to call back the, to send a message back to the server, but it's not very handy. So we have found a way to do a callback within the server, the operators inside Blender, going through the same web socket connection. So the application can wait for an answer back from where the message, the first message has been sent. The goal was to create a bi-directional communication process between a web browser and Blender and Blender and the web browser. So what language or framework can we use to develop interface or widgets? Any kind of frameworks who can manage web socket connection. Of course, web browser natively can handle web socket connection, but if you prefer to create a standard application using C or C++ or making an interface using QTE or WX widget, it doesn't matter. You can use it that way. But in this case, we try to mostly use the web browser because web browser is incredibly powerful now to create interface. We can really, really quickly create new prototype controllers. The one I'm going to show you took me about ten hours to create a light widget. And the browser can easily communicate with the rest of the world through a bunch of API. Natively, it can check database, it can make XML request of Ajax request, take JSON, and it can use WebGL and CSS. I don't know if you already know this website named ShaderToy. When inside the browser, you can create really high-end graphics. And it shows a powerful of the WebGL renderer. And we can use it to create really, really complex widgets. So the best part is also we can, we don't love installation process, as Don said before. And the best part is you just have to put the widget on the server. You don't have to copy, it's automatically deployed or the computer in the network. And we can use also a lot of library to do a lot of things. Facial recognition and technology working on that to speed up the animation process of the characters. And we already have a lot of things who exist in JavaScript. Yeah, what can we do with that? We can do a lot of things actually. We have two examples today. As we work with the WebSocket, it can work on your computer. That's the easiest part. But it can work also through the network. For example, the post library I'm going to show can be on the dedicated server. So everyone on the team access the same poses all the time. And it's updated. It's just one server. So it's working very well through the network. I mean, at least on the local network, if you want to work through internet, you will have to handle the ports and stuff like that. That's something else. So in working like that, we can easily put anything in a tablet. If we do an interface in the web page, you can open it in the tablet and it's connected to Blender through the WebSocket on your network. So you can send stuff from the tablet to Blender easily. So that bases, for example, and the light widget will be the second example. So we might just go to the demo part, I guess. And then as it's WebSocket, you can connect two or three users at the same time on the same Blender if there is any application worth it, of course. That's more of your part. Yes. So it's time for demo. We're going to start with the post library. It's nearly similar to the one Tom said previously. Yeah, it's working. So how it's working. We have already started the server in Blender. So there is one button. Yeah, it started. So I'm going to check and reload this page. And I see here, this is Firefox. It says it's connected to victorcolibri.blend. So it's that file. So I know I'm connected to that file. That post library, it's basically a nav bar where you can put different folders to save your poses, pose thumbnail, and then properties when you click on a pose, you can see the pose and the name and then more options here. If needed, you can zoom the poses and stuff like that. So if you have a little screen, you can also hide the different panels with the same shortcut as Blender. And you can just create a very, damn it, a very small window here if you have only one screen, of course. All right. So it's kind of very easy. When you want, you just double click on the pose and it applies it on Blender straight away. So you see, it's kind of, the idea was to be very fast. So what's happening when I double click, it's taking all the poses matrix saved as a JSON file in a SQLite library and then sending it back to Blender. It's almost real time. So you can do that. I will go back to that one later. You can apply them. One of the funny things we thought about was if you want to mix different poses, you can just middle click and then you just, you just mix the poses. So it can be useful also because when you select bones here, you want to say I want, sorry, I want to apply the pose to only the selection here, for example, only the eyes and not the mouse. Now, if I do that, it's applying the pose only to what is selected. So it can be very useful for animators as if I go back here and I take this pose, for example, I say, okay, I like the legs here. I don't want the upper part. So I can just select it and I can mix it with something else and the legs are not moving. So you can mix them very easily and the mixing is working. Then we have more features like the hands and the hands. If you have saved hands, for example, this pose here, but you don't want to save the pose for the left hand and then for the right hand, you can just apply mirror here and it will apply the pose to the other side. This is using the mirror features of the face blender, which is very handy and easy to use. And then, yeah, the first phase here, if I apply it, no, if I apply it, it's applying something to the whole body because if I click here and say select affected bones, I see I have saved all the bones. So now I just want to re-update this pose with the current phase but not the rest of the bones. So I will just go select the face, his bones and update pose here. Now the pose has been updated on the database on one click and I can reuse it and it's not bugging anymore. So that's it for the pose library. So the first one is more a technical demo, not a practical demo. It's a kind of toy. In this case, I simply launch Cycle on the left part of the screen and here I have Firefox once again and I have a widget lighting. If I click the plus button, I place a new light inside the blender here but I can also move it using a WebGL controller and I can easily and quickly place new light to light my characters. I can reduce the intensity, push the light away, modify the distance and also modify the color. So that's just some example of what we can do but we can of course create a lot of controllers and here we can simply place new light all around. Okay, with a light selection, minus button to delete light and the most important thing about that is not blocking blender and you can connect to the same blender with different widgets. If you want to light, for instance, three characters in the same scene, you can launch a Cycle rendering and maybe by a process what we don't know exactly what process to use for that but you can stream the Cycles rendering over the network and each lighter can see the result of the placement of each light here. So they can work at the same time or the same thing to light each character. Quickly on feature ideas, this is like a very, very simplified rig for kids, for example, less than six years old. It's very easy for them to have a tablet and move something. This is another example and so you can just drag, for example, the leg and the tablet and it's very easy. It's automatically selecting the right bone on controlling blender in real time and this is another idea of a rig picker for any majors. We don't really see on the screen here but when you have the controllers you can select them and and then you have the selection on real time in blender so you can work and then have the tablet and click it and you don't have these very little rig pickers you can have sometimes in the toolbar and for example here it's a puppet so when you select the hand you have all the other available hands which are just display and you can switch to them. So we can we can think about a lot of fun features going out of blender and using the most of what we can have. Like most of us already have a tablet today and the and the browser inside the tablet handles a lot of stuff and we can use that. Why not? We want to extend the controller outside of the main monitor to have some remote. So what about the future? We don't know. We have to talk about that with you. Do you think it's a good idea? Do you think it's not? Yeah. Thank you. In this case of the lighting widgets the idea was to stream a cycle across the network using for instance ffmpeg and to send the rendering inside the web page just next to the controller. So just by using a tablet a graphic artist can light his character across the network. And obviously we want to generalize this concept to create specific tool for each part of the projection for the animation for the lighting. So if you have any question feel free to talk with us about the concept. What we can do with that? We're not dangerous. We just have a really strange French accent. Thank you very much. Any question? Okay. Okay. Yeah. We have two minutes more. One question maybe. No. No. Yeah. Hi. I've been thinking about also these kind of tools for the past few years and have you also talked about low latency communications between Blender and web servers web pages because ffmpeg is not in my opinion not that low latency at this moment. In some h264 encoding profile and in also some ogg profile we can have really low latency to have less than one second of latency between the sending of the information and the display of the information inside the web browser. You can use really specific we can talk about that if you want. You can use a really specific profile to have a really really low latency obviously if you are on the same computer because you are in the localhost but also if you are in the local network it also works. Yeah. Okay. Thank you. Thank you. Thank you very much. I'm running upstairs and I'm gonna check it. He's coming. Hello. Okay. So I