Hello London, how's it going? So first of all, I will apologize by my really bad English. Unfortunately, I don't have a charming accent as Daniel Rowe or British accent, so sorry for murdering your language. I will try my best. Okay, I'm from Venezuela, so my Venezuelan accent will arise. So how many of you have done
3d with
webgl? Okay, more than I expected. So what if I told you that this scene right here, that is kind of a potion wizard scene, is entirely done with
vue components and composites. So in the beginning, the name of my presentation today was going to be Trace Yes, the Clarity Way of Doing
3d with
web components. But I have been playing Hogwarts Legacy like crazy the last year, and I thought to myself, let's change it. Okay, boring naming, let's change that. And I come up, well, no, Chayipity comes with this Trace Yes and the Chamber of
vue, Unlocking the Mysteries of
3d Rendering. So with that, I present myself. My name is Alvaro Saburido. I'm a DevRel engineer at Storyblock. I'm from Barcelona, Spain, but originally from Venezuela. I create a lot of content in Alvaro DevLabs. Some links if you want to follow, say hi, always welcome. And so, yeah, that's actually me. I don't know what happened. But that's the boy who lives playing
video games, because yeah, I was a kid that loved to play
video games. And to be honest, that kid never grew up. This is me playing with my cat, Geralt. So what was my motivation? When I was a kid, I really wanted to learn how to create
video games. I was fascinated by the golden era of PS1 games like Crash Bandicoot, Spyro the Dragon, and who will forget that good game of Hogwarts, like Harry Potter with those amazing graphics? Look at that. HD right away. So, something to point here. I wanted to study that, but it was really expensive in Venezuela to be a game developer. So I ended up being a telecommunications engineer and then being a front-end development, where I am here right now. I'm super happy. But I left
3d on the side. I thought it was for people that were truly brilliant, geniuses, like how they do that stuff, until I discovered 3DS. So 3DS is a library that leverages the
webgl part, the difficult part, and makes it available for
javascript developers to code and make their scenes. And I found out this amazing course by Bruno Simon, it's the one in the picture, to learn how to do it. And six months after that, I was learning and I was able to create my own scenes. Then I discovered
react 3.5. And wait, before you say why you're talking about
react in a
vue conference, right? I know. But
react 3.5 is an amazing library made by PoemAndress, which is an amazing studio, and they made something that blew my mind. They were basically able to create scenes with their
react components. So instead of using plain
javascript, they were able to use that. But there is a catch here, is that I will never use
react. I'm joking. I use
react, but I prefer
vue. So I was trying to find something that would work for
vue. So I came up with this amazing library of try-its. This is probably the one you know, because it was the first one to try to do a wrapper. So it was a manual wrapper that tried to replicate all the different components. And then I found Lunchbox, that is the other one, that is a custom render. And stay with that phrase, custom render. But the thing was that try-its was really difficult to maintain, because it was a manual wrapper and to be honest, try-its always evolve. Every week there is a new version. It's really difficult to keep up with the changes. So that's how try-its was born. So what is TressJS? It's basically a custom render that allows you to create the 3DS scenes declaratively by using your favorite framework, using
vue components and composites. The word is the Spanish word for tree, so it's TresJS, and it's based on the 3DS library and as well because the French word was already taken. So I came up with that. What was... Why? Why TressJS? Look, why not using another one? I wanted to create something that was up to date with the latest 3DS with zero to non-maintainance, because also maintaining a library like this is really time consuming and a lot of effort. That is lightweight, that you could install it and the
performance of your web application or page is not affected. That was verbose and easy to use. That's really important for the
developer experience. Of course,
developer experience, focus. We needed something that was enjoyable to do
3d. LiveScript support. Everyone that has worked with 3DS knows what I'm talking about. And that could be performant even with
reactivity, because TressJS is powered with
vite. So
vite makes it possible that all goes well. Last but not least, I wanted to create the
3d ecosystem for the
vue community. Myself and a lot of colleagues, we wanted to create 3DS scenes and we were not able to do it because there was nothing for
vue. So how we can get started is as PMPM at TressJS core and as a pure dependency you can install 3, so it's not part of the bundle. Or you can play with it on a stack grid. And look how cool is this. I'm using a slide dev. So this is like a markdown. And I embedded one of the basic scenes right here. This is Tress. So you can put it on your slides. So first thing, how to use it. So we need to set up a canvas. 3DS works with a DOM element, the canvas element, to draw everything. So before we can create a scene, we need to import the Tress canvas component from the core and add it to the template. Really important that everything that we want to render in our scene needs to be inside. Because the Tress canvas will create a custom render that works for the
3d scenes, like the 3DS instances and objects. We need for setting up a scene, we need three things. We need an object. And I always say three things. It's actually four, sorry. So we have the objects like the geometry, the lights, the plane, simulate in the ground. We need a camera to be able to see it. We need a scene to put everything together. And a render to render in the canvas element, the
html one. So how we can set up a scene. In the left part, yes, we're going to have how you can do it with 3DS, like Vanilla 3DS. So you normally create a scene using the constructor 3 scene. It's visible, right? You can do a camera by creating a perspective camera this way. And then you are going to pass the canvas into the render. You're using the
webgl renderer. And last but not least, you're going to use the method render to pass the scene and the camera. Let's do it the Tress yes way. You only need to import the Tress canvas. Tress canvas handles everything from you, from resizing the screen, from adapting the aspect ratio. Everything is covered. And then you just need to import a Tress perspective camera. All the components are the same name as 3DS, but you only need to do a prefix called Tress. Now let's add an object. So if you were using plain 3DS, you're probably going to create a geometry. So I'm using Taurus geometry, but it's basically a donut. I don't know why they didn't call it a donut geometry. It's Taurus geometry. And these are some of the parameters there you are going to pass. Then we need to define the material. When the geometry is the structure or all the little pixels, like vertices and so on, the material is how the pixels are going to look like, what color they're going to have, like how reflective they're going to be. Then you create the mesh. They're going to create the mesh. There is the combination between the geometry and the material, and then, boom, you have your object. You add it to the scene. With Tress, yes, you have to import a Tress mesh component. And we're going to use view slots here to pass the Taurus geometry with some arguments. You can see that the arguments are exactly the same as we were passing to the constructor here. So you can pass any parameter for initializing the constructors using the arch prop. Then we can do Tress mesh basic material and pass the color as a prop. That's also possible. And boom, we have a really ugly donut. But we made it. We have our scene, right? Cool. I love that meme. Okay. So how does it work in the underground, right? We are taking the tree latest. So we are taking the latest version of tree, and we are taking all the different instances, all the different properties, methods, everything, and we're applying a little bit of magic, which is the AKA the custom renderer. And then this is converting everything into view components that you can use. So let's talk about arguments, because we touch that point just frequently, right? You can initialize any argument like you would do in 3GS, like this. The perspective camera, you are passing the field of view, the aspect ratio, and how far and near is it. This values right here. And the way of doing that in 3GS is going to be with the arch prop. Then you have normal props, which are similar to the properties. So you can pass them as this. And this is going to be similar to initializing the constructor empty without any parameter and then just change it dot, dot, dot, dot, and you're going to have the same thing. I mentioned view slots because you can pass parameters inside of the mesh to create something similar like this. So whenever you're passing components inside another component, it's going to do a reference as if it was an attribute on the initial or the parent one. So yeah, let's do some demonstrum. Yeah, I know, the spell went wrong. And it's my first live coding, so be kind with me, please. Of course. I know, this is actually the page. Let me check where is it. Here. Nice. Okay. So you saw that it was black pitch, right? Because we need the camera to be able to see it. So here you have the most basic Tress ES application. You have imported the Tress canvas, and I'm passing it a clear color, which is basically going to be the background color. So here I'm going to do Tress perspective camera. I'm not going to pass any parameter, okay? I'm going to save, and then where are you? Let me put it right away so I'm not doing this so often. Sorry about that. Now we can see the color that we defined. So we're in the right track, right? Now let's do something else. Let's add a cube. So the way we can use a cube is by passing Tress mesh, and then inside of it, let's use the Tress box geometry. And this is recent, because in the version 1, we didn't have
typescript, so this was a nightmare before. So let's add Tress normal material. Let's save. And now we have a nice cube, right? Thank you. So glad that it worked. And we're going to do another thing that is really cool. So I mentioned also composables, right? So we are going to import a composable that is called useRenderLoop. In gaming and in
3d in general, you are rendering frame per frame, because if you do an animation, you're going to render several pictures in a timely manner that UI is going to see it like smoothly, right? 60 frames per second, that's fine. So Tress canvas already does that for you. It creates that render loop. And you can access it by using the composable useRenderLoop. So we're going to use the composable to animate our cube. And here comes something really important about
reactivity and the use of Tress. So you know that viewer activity is based on proxies, right? So you could think right now, okay, if I want to animate it, I will do something like rotation, then I don't know, a ref or reactive. Okay? Just an example. And pass it to the mesh as a property, right? So we will do like position and then like this. This will work. Okay? But since this is reactive, your frame per seconds are going to drop. Because viewer activity is based on proxies. And they're not as fast as plain objects. So the recommended way of doing this is actually let's get rid of this rotation right here. Okay? And we are going to use template refs. Anyone familiar with template refs in
vue? Okay. So basically template ref is a way that you can get the instance from the template for that component. Okay? So here, I'm going to create a box ref. Come on. And you're going to see that I'm using a shallow ref. Amazing for
reactivity. Because the shallow ref will allow you to be more... Oh, five minutes. Okay. I'm going to do it way more quicker. So we're going to watch... We're going to pass it here. Sorry. To this one. Box ref. Okay. And now like this. And we're going to watch probably watch effect. No. Not even. We're going to go here and say if box ref value. So if it's available and it's not null. Okay? Probably move this up. We're going to rotate it. So let's hope this works. Yeah! It worked! Okay. I will never do this again. Let me refresh this and go to the... Where is it? Here. Okay. I will real quick. So my idea of Trezzi was an
ecosystem of applications, packages, and so on. So we have another one that I didn't use in the demo. I forgot. It's the Sientos package. And in the Sientos package is the word for hundreds in Spanish. And basically it's all the structure, all the shaders, all the different geometries. Easier to use. You can have it in Sientos. Why not in the core package? Because of size. So the core package is bare. You can do everything with that. But if you want to have a better
developer experience, you can use Sientos. And also... I know it's a bad joke, but Trezzientos is like 300. Okay. Enough. Sorry about that. So here I have some of the instructions. So like text
3d. You can create text in
3d. You can use
animations. You can load models like the one that I put in the beginning. It's using this composable right here. So everything that is extending the core. Okay? Oh, let me refresh. Now. So one of the instructions, for example, is the float or the Leviosu component. That allows you to float whatever you put inside. So if you put a feather, you're gonna have Leviosu. Like Hermione. Okay? Trezzientos is meant to be an
ecosystem. So the core package and the Sientos is maintained by us. We have in the roadmap the post processing one is already in work. And who knows? Like maybe yours package can be part of the
ecosystem in the future. This is a roadmap. I want to highlight the work of the NuxLab team. Because this is Volta. And I'm using it with my team to be able to establish a roadmap and be clear about the priorities and so on. So you can see that we are trying to translate the docs, create presentational controls,
html, contact shadows, and some fancy stuff. Okay? Some resources here. My slides are gonna be available as soon as I fix them. Because I don't know, I have a problem with the slide map. But here are the documentations, stackbleed, Discord, and some tutorials on my YouTube channel. I want to highlight the amazing effort of all the contributors. Because this is about to be open source. And I have the help of amazing contributors that helped me. Like Jaime Torralba, Tino, Web, Constantine, Randy, Maddy, and in the future maybe you. So a lot of people have asked me, like, why is it not open source yet? Let's basically change that. So I'm gonna go to GitHub. Where are you? And let's change the visibility to pull it. Yeah, I have read effects. Come on. Seriously? This was meant to be my moment. Come on. Yes, please. There you go. It's public. So from now on, version 2, we are gonna release it today. This release candidate. But we are gonna release it today as well as Siento's package. And the rest of the packages are already there. And if I find myself again... I don't know how much I have. But I do want to say something else. No. Okay. So I spent... Go there, open tickets, crash it, contribute. I'm waiting for it. I really love how people are using it already. So show me your stuff. I will be more than glad to put it on the playground. Thanks to my sponsors. Danny Devs, Smart Bakes, Easy Teams, Kisu, Masterjerry, and Storyblock. That was my sponsor before I joined the company. Right now I'm setting up the sponsor for Tres ES, so I'll be able to also sponsor my team. So that will be the idea. If you can contribute... Amazing. And a special thanks to Cody Bennett from PM Mindress, that helped me with the custom render
api. Berekia Patek for their showcase and help. Gael and Daniel Rowe for all the help. And also Shaggo from PM Mindress team. So thank you very much. Thank you so much. That was wonderful. So magical. Is it? I loved all the demos. Also, I've never seen 2FA kill someone's vibe like that, but you handled it like a pro. All right, we've got so many questions coming in. We're also working on trying to make sure everyone gets warmer as well. But first question. This is amazing, first of all. Can you use Tres ES with an older version of Free, like maybe an ancient from, say, a month ago? Or are the components and arguments bound to the latest version? So you can use it with
vue 3. I haven't made it possible with
vue 2 yet. Time. But since it's gone, also the official support is going to eventually drop. So I was focusing on
vue 3. But the last part of the question, what was it? Objects? Or are the components and arguments bound to the latest version of Free? Sorry, my bad. Ah, OK. So it's the versions of Free. Yes. Yeah, so when you install at the beginning, that you add the Tres ES core and you install Free, that's going to be the latest version of Free. And it's going to work right away. So because it's mapping everything that is then. So if they launch tomorrow, a new, I don't know, shader or a new property is going to be available right away. And would it work with older versions of Free? If you install that older version of Free, yes. OK, perfect. Awesome. And someone, I love this question. What sort of projects or use cases are there for Tres ES? Or to paraphrase, how can I convince my boss to use this on something that's not
3d or R-based? This person really wants to get their hands on it. Wow, that's amazing. I love to hear that. Honestly, like yesterday, somebody wrote me that he was doing a POC for their company using Tres ES. And they made this amazing animation with a shoe. So it was a product, like selling a product. It was a shoe like Nike. And they were doing all this amazing stuff, like changing the camera. So there is product customization. So you, for example, give to your client, to your users, the opportunity to customize their product. So they are buying some shoes that you can customize what the colors, the materials, all those kind of things. I recently do a POC with Storyblock. It's probably going to be my next topic of talks. A car configurator. So the car industry normally allows the user to put the different materials, like painting or the ring colors and so on. It's something that you can do with
3d. And it's an interactive way to be with your audience. Storytelling. For agencies, for brands, you don't know how much people love to enter a page and be immersed in the experience. And just you can tell your product on a
3d way, immersed. That will be the first ones. But if you have anything in mind, drop me a message in Alvaro Sabu and let's talk. I'm more than happy to help. Awesome. Awesome. And you showed us some
3d graphics. Can it be used also, can TrussJS be used for 2D graphics? Yeah. Yes. Yeah. Easy question. All right. So what is the future of TrussJS and 3JS? Now that Chrome has introduced
webgpu as part of their latest release, where do you see the future of these libraries? I'm really excited about that because a lot of things are changing in the
3d ecosystem. I'm talking with a lot of web
engines that are doing POCs with that. I'm going to add a POC with the same as 3JS to try to make it work. That is where the future is and hopefully it's going to be smooth to transit to there. Cool. And I thought I'd save this question till last, but it's my favorite question of them. What is your most Slytherin-like quality? The audience upvoted it. It was the number one question. Okay. How do you say it in English? Hard-headed? Like until I do it, I don't... Sorry my English. No worries. I don't give up. Nice. Persistence. Persistence. Awesome. Awesome. Let's give a massive round of applause. Thank you so much.
JSNation 2022
