 So, this is a package I am going to use for the summer as part of first-ever Julia summer of course. So, this is a package which lets you do 3D practice graphics in the browser using this Julia. You can find me on Twitter, I know it well, I might get one, you all know it well. So, the animation you see over there is basically the Boris exams, are you sure? But in 3D. So, it's a gif of that. I will show you an example later. So, 3DS was basically a WebGL variant entry package for Jumbia. So, a WebGL is this technology which lets you use the GPU from the browser. So, you can use your GPU and you get all the power that comes with the GPU in just case the browser. So, this lets you like share 3D content over the web like Azure notebooks. You can use it in Julia box or own Azure server. It's pretty nice to do. So, this is a wrapper around the 3DS JavaScript library. So, the 3DS JavaScript library is a really nice library. It lets you, very popular and it basically makes WebGL easier to work with. So, it eliminates a lot of boilerplate that your WebGL has and you can do a lot of so much easier 3DS. And 3DS.js is basically a wrapper around this library. So, for example, a cube is around 100 lines of code in just JavaScript and a WebGL part is around 30 lines of code in 3DS.js. That's our library. If you're on 10 in the Julia library, I'll show you how that works. So, let's actually take a look at the cube right. This is the cube which I was talking about. So, this is a very basic scene. I have a cube in the center and I have a light at one corner and the cube is colored red. That's all of this. So, let's actually build this scene right now. So, in 3D graphics, the first step in 3D would be to build a scene. Like, you have a CCC scene object which means there's an initial setup. Like, it renders a download event for you on the screen and sets up a WebGL render and stuff. And you add all the other things that you want to split through the scene. So, this is actually the example, like, this is a function which you use to add a scene and then you make a list. And then you put whatever you want to add to the scene inside the list. So, when you did just an 8th scene and you can just go back and look at the HDL and JavaScript and you can see that there's a canvas element that has been created. Yeah, there's a canvas element and if you look at the logs, you can see, okay, I see. But there's actually a WebGL renderer being all over there. So, the next step would be to add a camera because unlike in 3D scenes, you actually have to know where to look at the 3D scene. And cameras are very nice to have. You can rotate around and zoom around the scene. So, that actually is the other dimension you need a camera to set. So, in pjs.jl, adding a camera is a business function. You just say camera and then you put whatever coordinates you want a camera to be placed at. And then you start to see what you're coding in the list. So, once it goes again, like, you know, there's nothing to see. So, you get added right now. So, the next step would be to add the queue. Right? So, in 3D scenes, the way you add stuff, you create a mesh. So, in a mesh, you actually have two things, a geometry and a material. So, the geometry is basically telling you the shape you want to draw it, like a tube or a code, a cylinder, stuff like that. And the material tells you, like, the properties of the geometry. Like, earlier, I said, like, I want the queue to be red, red. So, over here, what I'm doing is I'm creating this box geometry, which is a queue geometry and I'm giving it 111 for width, height and depth. And the material I'm saying, like, I want to be red and I want the kind to be a Lambert material. So, I did about that later. And then, like, I just, I just put a code here to the scene. So, now, I actually get something drawn on the screen. But it's black. But we've got to queue to be red, right? The reason for this is that, like, we have already the lights to be the same. So, the material is specified in different tunnel on lights to our ratio color. So, next step is to actually add lights. So, how do you add lights? You can add, like, three kinds of lights in 3ks and this is one of those kinds. So, I added a point light and I'm telling that the coordinates that I wanted to be, which is 333, which will be at a point of the queue, because the queue was a sidebar. So, I just put it all together. So, this is the entire core. And so, you'll see, like, I have the instance function and the inside mesh, which has a box and material. I have a point light and a camera and then this, this, and others, like this. So, it's around 10 lines of code and that's all it takes to draw a scene in 3ks. So, this scene, as such, is interactive. You can rotate. So, you see the one side is black, because there's no light there. I can pan it. I can zoom. So, this is one of the things you can do, but by default. In any scene, draw by 3ks. But this is not all. Like, as I showed earlier, you can use UI elements to, like, actually interact with the scene. That's really nice to draw. That's a really nice feature to draw. So, you can do this. Like, so, how you do this is, like, you make a slider. So, okay. So, what we're going to do now is, in the previous scene, like, we have started to create. What we can do is, we're going to make a slider. And we can, like, we make the size of the queue, update, move it to the slider. So, I just have a couple of lines. So, if you look at the function over here, this is basically drawing from a tryout earlier. It's like, I have the size replays, but the variable I want to do. And I have a slider here, which I want to do. So, this is all in Azure and stretchy. So, yeah. So, this is the side of the queue. So, I have a slider here, and I can just increase it. And the queue increases. So, again, this is, like, rotated. I can do all that stuff still there. And I know this too. So, next step, we're going to make animations. Like, so, animation, if you think about it, they're just like sliders. But instead of having updates about the UI element, you're just looking at, I actually type it. So, this is a, this is a lift of a rotating queue I made using this. So, this is the actual queue. So, in the actual queue, I actually rotate the queue also. So, how I'm doing this is, like, using the reactive, like, second measure. So, I have an event loop here, which is saying, like, every once in a second, I just increase the rotation by 0.5, and then I just plot it again. So, these are our point lines of code, and I get rotating queue there. That's it. So, how does it all work? So, we're going to the website for a bit. So, it's all just to be neat out there. So, the first step is Polymer. So, Polymer's largely made over Google, and it lets you create your states for it. That's complicated easily. So, you can actually have custom STM elements, and you can wrap a lot of action inside it. So, for example, like, you can do, like, the, like, the, like I'm actually showing, like, our cat-exe element, and then you just show cat-exe. So, what it does, I combine 3DS and 4 Polymer, to make 3DS custom elements. So, these 3DS custom elements are wrapping 3DS functionality into a component. So, I can say stuff like 3DS box, and that's where we are. And all the jobs, of course, we decided that I don't bother about it. What I need to do is, I just have to, like, omit that STM and tag with it. So, now that that's the web stuff covered, so how do I try to do this from Julia? For this, there's a, this is a landing quadpacho. So, this, we basically are, let's say, have a virtual down in Julia, and you create STM elements in Julia. So, this does different on the server side, and it updates only the required elements in Julia. So, I combine patchwork and 3DS custom elements. So, now what happens is, like, patchwork creates a custom element in Julia. And then, I don't have notebooks, and I should have a notebook, where I'll put these STM elements, and then the JavaScript part will just take over, and blah, blah, blah, blah, blah, blah, blah, blah, blah. So, again, the good quality of what it's like, let's me use the goodness of patchwork. Like, I have that different capability. So, for example, in the Qtube update, size of Qtube update, only that part of the system will be sent across to the browser, and the browser makes a change there, and the attach is not in the ground, only the Qtube is being updated. So, this improves performance a lot. So, yeah, this is the text tag. So, you have 3DS at the top, which is creating those elements. You're using patchwork, and then patchwork outputs these 3DS elements, which then is polymer, and then 3DS, the graphics library to draw stuff. So, yeah, this is what you work with. So, when I say 3DS.box 1.1.1.1.2, it actually goes in this element, which I will say it's not x, y, z, w, x, z, d, my bad. And then that renders such a STM element over there, and then the part of the stage is over. So, I have a couple of developer. So, this is Comfo. So, this is basically my main project in Julia Summer of Cold. This is Comfo 3D. So, Comfo 3D is basically, like, hashing body is a Comfo slavery. So, it's essentially a Comfo slavery to 3D. So, you can create complex figures from simple derivatives, and it lets you take a context and, like, and use measures related to them. That's a pretty powerful stuff, but this is not completely done yet. So, I'll be switching out absolutely. And so, now I have a couple of demos for this. The first demo I have is the surfboard. So, this is a surfboard already using 3DS.jl. So, this is the plot of a function sine x into cos y. So, I can do this in Julia. This is what I've done. So, this is the function. I'm not having it over. And I just have a surfboard here. So, I just... Okay. So, this is our running right now. And, yeah, this is the surfboard for the function sine x square plus sine y. I can just change this. Okay. I'm going to save. Okay. Save this to, like, y square. And I can hit enter. And this is the operator. Yeah. This is the operator one. So, I can similarly do mesh plots also. So, this is a mesh plot implementation. So, we can see that. So, again, I can zoom it, zoom them. I can rotate them. And I'll let's go. So, the good thing about this right now, you can just do all this in Azure Notebooks. And this is just a box also you can do this. So, it's pretty nice. And, okay. Okay. Other examples I have. So, basically, this is the... Basically, in 3D modeling, you have these .obj files. So, they basically model objects. And now, like, I have capability of loading mesh objects into the scene. So, we can make this a good request. And so, you can do stuff like this. So, this is the cat, which is drawn on the scene. So, I just have the same load, cat.obj, and so on. And so, this is the impact. Oh, so, as you saw, I spoke about CXCF's key 2D stuff here. So, this is CXCF's key in 3D. I have to be able to... Wait, I'm sorry. Okay. Okay. I don't know. So, basically, you guys have this idea here, right? So, this is like the basic request. So, I can update the request. And so on. So, now I have the request on one. I update it again to... I can still rotate the scene. So, three. So, this is keep going on. So, this is the last example I had which I promised at the beginning. So, this is basically points in 3D. So, this is the simulation of Burble Burge, flocking together. So, you can rotate this. You can zoom. And... Yeah. So, this is the space going around. Basically, this is the simplest Burge flocking together. The original example was run by Ian Tanning in Azure 2D. So, I just exhaled the 3D. We synced our first room. Yeah. So, I decided that Ian Tanning, Shashi, and Simon, from a mentoring need to do the JSR. I'm ready for that. I'm ready for the JSR. Okay. Yeah. So, thank you. Thanks. Any further questions? The cache that you put in the file, that is drawn in which one? It's a... It's a... It's drawn in Azure, but it's in previous or in the backend. It's drawn, I think. It's basically... This is getting on before, but then, like, there's this file I have library being made. So, that... Let me load in the OVJ files. And then there's this... In the project, this graphics lab system is really nice. Like, a couple of people will really work on it. So, we have OpenGL part, and it's coming up. And a lot of... There are a lot of focus on making everything work together. So, there's Digital Geometry Organization, as such. So, they make... We have all these packages, the geometry types packages which we find, like, which is basically common interface with all graphics library. So, RCTL, actually, RCTL. And then, you can just load it in this work. And, yes? We wanted to say something. It's not a question, really, but, the... The... This summer was the first Julia summer of code that was sponsored by the War Foundation a year before that. We had a Google summer of code. And, I think it's pretty cool that both of your mentors were students from last year. Yeah. It's, it's kind of cool to pay it forward that way. And I think it worked out really well. Good. Yeah. Thank you.