1. Introduction to 3D with WebGL and View Components
Hello, London. How's it going? I'm from Venezuela, so my Venezuelan accent will arise. I create a lot of content in Alvaro.Dev labs. I really wanted to learn how to create video games. I ended up being a telecommunications engineer and then being a front end development where I'm here right now, I'm super happy. But I left like 3D on the side, okay, I thought it was for people that were truly brilliant in genesis, like how they do that stuff, until I discovered 3GS, okay?
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 or...okay. More than I expected, so what if I told you that this scene right here that is kind of a potion wizardy scene is entirely done with View Components and Composers? Okay.
So in the beginning, the name of my presentation today was going to be Trace.Yes a declarative way of doing 3D with Web Components. But I have been playing Whole World Legacy like crazy the last year and I thought to myself, well, let's change it. Okay. Boring naming, let's change that. And I come up, well, no, Chad GPT come up with this. Trace.Yes and the Chamber of View unlocking the mysteries of 3D rendering. So with that, I present myself. My name is Alvaro Saborido. I'm a dev rel engineer at StudyBlock. I'm from Barcelona, Spain, but originally from Venezuela. I create a lot of content in Alvaro.Dev labs. Some links if you want to follow, say hi, always welcome. Okay.
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. Okay, I was fascinated by that golden era of PS1 games like Crash Bandicoot, Spider the Dragon, and who will forget that good game of Hogwarts like Harry Potter with those amazing graphics. Look at that. HD right away, right?
So something to point here, I wanted to study that, but it was really expensive in Minnesota to be a game developer, so I ended up being a telecommunications engineer and then being a front end development where I'm here right now, I'm super happy. But I left like 3D on the side, okay, I thought it was for people that were truly brilliant in genesis, like how they do that stuff, until I discovered 3GS, okay? So 3GS is a library that leverages the WebGL part, okay, the difficult part, and make it available for JavaScript developers to code and make their scenes.
2. Introduction to Troy.js and its Benefits
I found an amazing course by Bruno Simon that taught me how to create my own scenes in 3D. Then I discovered React 3Fiber, a library that allows you to create scenes with React components. But since I prefer Vue, I looked for a similar solution and found Troy.js, a custom render that allows you to create 3GS declaratively using Vue components. Troy.js is lightweight, up-to-date, and provides a great developer experience with TypeScript support. It's performant and works well with reactivity thanks to bit.
And I found out this amazing course by Bruno Simon, it's the one in the picture, to learn to do it. And six months after that I was learning, and I was able to create my own scenes.
Then I discovered React 3Fiber, and wait, before you say why you're talking about React in a Vue conference, right? I know. But React 3Fiber 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 a scene 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. No, I'm joking. I use React but I prefer Vue, okay? Never!
So I was trying to find something that would work for Vue, okay? So I came up with this amazing library, Yes, 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, okay? But the thing was that Troy.js was really difficult to maintain. Because it was a manual wrapper and to be honest, 3GS is always a old, every week there is a new version. It's really difficult to keep up with the changes. So that's how Troy.js was born.
Okay, so what is Troy.js? It's basically a custom render that allows you to create the 3GS declaratively by using your favorite framework. Using view components and composites. The word is the Spanish word for tree. So it's 3GS. And it's based on the 3GS library and as well because the French war was already taken. So I came up with that. Why Troy.js? Look, why not using another one? I wanted to create something that was up to date with the latest 3GS with fewer to non-maintainers because also maintain a library like this is really time-consuming and a lot of effort, right? It's 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. TypeScript support. Everyone that has worked with 3GS knows what I'm talking about. And that could be performant even with reactivity because 3GS is powered with bit. So bit makes it possible that all goes well.
3. Setting up a 3D Scene and Objects in Tress
I wanted to create the 3D ecosystem for the Vue community. To get started, you can add the 3GS core as a pure dependency or play with it on a stack grid. Import the Tress canvas component from the core and add it to the template. Set up a scene by creating objects, a camera, a scene, and a render. Use the tres way by importing the tres canvas and a tres perspective camera. Add an object using Torus geometry and define a material for the desired appearance.
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, so we were not able to do it because there was nothing like for Vue. Okay? So, how we can get started pnpm add 3GS 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 up, so this is like a markdown, okay? And I embedded one of the basic scenes right is Tress. So you can put it on your slides. So first thing, like how to use it, right? So we need to set up a canvas. 3GS work 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 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 light, the plane, simulate on 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. 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. You normally create a scene using the constructor 3scene. It's visible, right? Yeah. You can do a camera by creating a perspective camera this way, and then you're going to pass the canvas into the renderer. You're using the WebGL render, 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 tres way. You only need to import the tres canvas. It handles everything from you from resizing the screen, from adapting the aspect ratio, everything is covered, and then you just need to import a tres perspective camera. All the components are the same name as 3GS, but you only need to do a prefix called tres. Now let's add an object. So if you were using plain 3GS, you're probably going to create a geometry. I'm using Torus geometry, but it's basically a donut. I don't know why they didn't call it donut geometry, it's Torus geometry. And these are some of the parameters that you are going to pass. Then we need to define a 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.
4. Creating and Configuring 3D Objects in Tress
You create the mesh by combining the geometry and the material. Then add it to the scene. Use the TraceMesh component and view slots to pass the geometry with arguments. The args prop is used to initialize arguments, while normal props are used for properties. View slots allow passing parameters inside the mesh. Let's do a Demostrum and check the basic trussES application.
Like how reflective they are going to be. Then you create the mesh. They are going to create the mesh, it's the combination between the geometry and the material and then boom, you have your object. You add it to the scene. With 3GS, you have to import TraceMesh component and we are going to use view slots here to pass the geometry with some arguments. You can see that the arguments are exactly the same as we were passing to the constructor here. You can pass any parameter for initializing the constructors using the arch prop.
Then we can do a TraceMesh 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, how does it work in the underground? We are taking the tree latest. 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 K8 custom render. And this is converting everything into view components that you can use.
So let's talk about arguments, because we touched that point just frequently, right? You can initialize any argument like you would do in a tree.js like this, the perspective camera, you are passing the field of view, the aspect ratio and how far and near is it, these values right here. And the way of doing that in tree.js and tree.js is gonna be with the args prop. Then you have normal props, which are similar to the properties, okay? 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 gonna 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 are passing components inside another component, it's gonna do a reference as if it was an attribute on the initial or the parent one. So, yeah, let's do some Demostrum. 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 a camera to be able to see it. So, here you have the most basic trussES application.
5. Using trussCanvas and Adding Objects
You have imported the trussCanvas and passed in a clear color. Then, you added a truss perspective camera without any parameters. Next, you added a cube using the TressBoxGeometry and a normal material. Finally, you imported the use render loop composable to access the render loop provided by Tress Canvas.
You have imported the trussCanvas and I'm passing in a clear color, which is basically gonna be the background color. Okay. So, here I'm going to do truss perspective camera. I'm not gonna pass any parameter. Okay? I'm gonna 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 TressBoxGeometry. That one. And this is recent. Because in the version 1, we didn't have TypeScript. So, this was a memory before. let's add normal material. And now we have a nice cube, right? Thank you. So, glad that it worked.
We're gonna do another thing that's really cool. So, I mentioned also composables, right? So, we are gonna import a composable. That is called use render loop. In gaming and in 3D in general, you are rendering frame-per-frame because if you do an animation, you're gonna render several pictures in a timely manner that you are gonna see smoothly. 60 frames second. That's on. So, Tress Canvas already does that for you. It creates that render loop. And you can access it by using the composable use render loop.
6. Animating Objects with Tress and Reactivity
We are going to use the composable to animate our cue. Reactivity in Tress is based on proxies, which can cause a drop in frame rate. To overcome this, we will use template refs, specifically a shallow ref, to efficiently get the instance of the component. This will allow for smoother animation.
So, we are gonna use the composable to animate our cue. 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? It's 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 gonna drop. Because view reactivity is based on proxies. 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 view? 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 activity. Because shallow ref will allow you to be more efficient. Oh, five minutes. Okay. I'm going to do it way more quicker.
7. Animating Objects and the 'Cientos' Package
We're going to rotate it. So, let's hope this works. Yay! It worked! Okay. I will never do this again. My idea was an ecosystem of applications, packages, and more. We have another package called 'Cientos' that includes all the structure, shaders, and geometries. It's easier to use and not included in the core package due to size.
So, we're going to watch... We're going to pass it here. Sorry. Do this one. Box ref. Not 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. If it's available and it's not now. Okay. Probably move this up. We're going to rotate it. So, let's hope this works. Yay! It worked! Okay. I will never do this again. Let me refresh this and go to the... where is it? Here. Okay. Real quick.
So, my idea was this was an ecosystem of applications, packages and so on. We have another one that I didn't use in the demo. I forgot. It's the package. And it's the word for hundreds in Spanish. And basically, it's all the structure, all the, like, shaders, all the different geometries. Easier to use. You can have it in a Cientos. Why not in the core package? Because of size.
8. Introduction to 3ds Ecosystem and Open Source
The core package is bare, but for a better developer experience, you can use Cientos. 3ds is meant to be an ecosystem, and we have a roadmap for future development. We are trying to translate the docs, create presentational controls, and more. Resources include documentation, Stack Blade Discord, and tutorials on my YouTube channel. I want to highlight the amazing effort of all the contributors. This project is about to be open source, and I have the help of amazing contributors. Let's change the visibility on GitHub and make it open source.
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 Cientos. Okay? And also, I know it's a bad joke, but 300 is like 300. Okay. Enough. Sorry about that. So, here I have some of the structures. 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 is using this composable right here. So, everything that is extending the core, okay? Oh, let me refresh now.
So, one of the structure, for example, is the float or the Levioso component. That allows you to float whatever you put inside. So, if you put a feather, you're gonna have like Levioso, like Hermione. Okay? 3ds is meant to be an ecosystem, so the core package and the Scientos 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 Nuxt Lab 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 the presentational controls, HTML, contact shadows and some fancy stuff. Some resources here, my slides are going to be available as soon as I fix them because I don't know, I have a problem with the slide web but here are the documentations, Stack Blade 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 Torrella, Tino, Will, Konstantin, Brandy, Maddie 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 going to go to GitHub. Where are you? And let's change the visibility to bullet. Yeah, I have read effects. Come on. Seriously? This was meant to be my moment.
9. Release and Gratitude
We are releasing version two and the Cientos package today. I'm grateful for the support of my sponsors and contributors, and I encourage others to contribute as well. Special thanks to Cody Bennett, Patrick, Daniel Rowe, and Shaq for their help. The demos were amazing, and you handled the 2FA issue like a pro.
Come on. Brilliant. Yes. Please. There you go. It's published. So from now on, version two, we are going to release it today, this release candidate, but we are going to release it today as well as Cientos package. And the rest of the packages are already there. Okay. 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 spend, 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, Sunny Devs, Smart Bakes, EZ Teams, Kisu, Masterjury and Storyblock. That was my sponsor before I joined the company. Right now, I'm setting up the sponsor for Tress ES to 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 PMAndrez that helped me with the custom renderer API. And thank Patrick for their showcase and help. Yeah. And Daniel Rowe for all the help and also Shaq from PMAndrez team. So thank you very much. Thank you so much.
That was wonderful. So magical as well, I loved all the demos. Also I've never seen 2FA kill someone's vibe like that but you handled it like a pro.
10. Compatibility with Older Versions and Use Cases
Can you use Trez.js with an older version of Three? Yes, if you install that older version of Three. What sort of projects or use cases are there for Trez.js? You can use it for non-3D or AR-based projects. Someone did a POC for their company using Trez.js and created an amazing animation with a shoe.
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 Trez.js with an older version of Three like maybe an ancient from say a month ago or other components and arguments bound to the latest version? So you can use it with Vue 3. I haven't make it possible with Vue 2 yet. Time. But since it's gone out so 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 Vue. Of Three. Sorry. My bad. Okay. So it's the versions of Three. Yes. Yeah. So when you install at the beginning that you add the Trez.js core and you install Trez.js, that's going to be the latest version of Three 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 Three? If you install that older version of Three, yes. Okay. Perfect. Awesome.
And someone, I love this question, what sort of projects or use cases are there for Trez.js? 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 they he was doing a POC for their company using Trez.js and they made this amazing animation with a shoe.
11. Product Customization and the Future of Trust.js
It was a shoe like Nike. They were doing all this amazing stuff like changing the camera. Product customization allows users to customize their product. Recently, I did a POC with Storyblock, a car configurator. Storytelling in 3D is immersive and engaging. Trust.js can be used for both 3D and 2D graphics. The future of Trust.js looks promising with the introduction of WebGPU in Chrome's latest release.
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. There is product customization. So you, for example, give to your clients, to your users the opportunity to customize their product. So they are buying some shoes that you can customize how you like what the colors, the materials, all those kind of things.
I recently do a POC with Storyblock. That'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 color. It's something 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 you can tell your product on a 3D way. That will be the first ones. But if you have anything in mind, drop me a message in Alvaro Savo, 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 Trust.js be used for 2D graphics? Yeah. Easy. Easy question. All right. Another one about the future of Trust.js. Now that Chrome has introduced WebGPU as part of their latest release, where do you see the future of these libraries going? 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 3DS to try to make it work. But it's where the future is, and hopefully it's going to be smooth to transit to there. Cool. I thought I'd save this question until last, but it's my favorite question of them.
12. Slytherin-like Quality and Persistence
What is your most Slytherin-like quality? The audience upvoted it. It was the number one question. Persistence. Persistence.
What is your most Slytherin-like quality? The audience upvoted it. It was the number one question. Okay. How do you say that in English? Hardhead? Until I do it, I don't ... Sorry, my English ... No, no worries. I don't give up. Nice. Persistence. Persistence. Awesome, awesome. Let's give a massive round of applause.
Vue.js London Live 2021
Comments