Bring the Magic of 3D to Your Vue Applications With TresJS

So, what if I told you that... This is so cool. I never did a talk in an observatory. What if I told you that this scene right here or this game, because I can play with it, is entirely done with Vue components? So this is done decoratively, and I have another example. This is a sound where it comes from. It's done by one of our core team members. He created this synth wave kind of thing. It's also done entirely with Vue components and composables. So that's what my talk is about. And I'm going to mute so you don't have the sound all the time. Okay?

Yeah. So, hi, everyone. I'm going to present today... My library is called Trace.js. And the idea is to bring the magic of 3D to your Vue applications.

My name is Alvaro Sabu. I'm a DevRel engineer... Or, well... I had to update this. I'm a developer experience engineer in the starter block. I'm from Barcelona, Spain. But originally from Venezuela. Creating content on Alvaro DevLabs. And also my portfolio that I never finish is around there. And my Twitter and socials. So you're welcome to say hi anytime.

So what is Trace.js? Trace.js is a Vue custom renderer on top of 3ds, which is the core library in JavaScript to render WebGL experiences. So you can use it to build a scene declaratively, like you would do with a UI, to create different things like Vue components and composables. Trace is a Spanish word for 3ds. And it's pronounced Tress. And in reference of the library. So how do you get started with it? We have several flavors. But you can install it with your packet manager of choice. Or you can always play with it on our Vue JS playground. So you can go here and directly code. And you will see the output here. I'm gonna share it later on my socials. Okay?

So... Let's create our first 3ds scene. So this is like the setup syntax of Vue with a script and a template.

So this is like the setup syntax of Vue with a script and a template. What we're gonna do is we're gonna import the TraceCampos component from the core. And then we're gonna add it with a prop called window size, so it occupies the whole size. Is it visible? Yeah? Okay. So we import it. We use it in the template. And then as a good practice, we can use another component on Vue, a subcomponent called... I don't know. The experience, the scene. Just because the TraceCampos is a context provider. So all the context of our 3d is gonna live inside of it. So it's gonna make things easier. Okay?

Then... I'm forgetting that I have the animations. This is super fancy now. First we need to see something, right? Something rendered on the scene. So we add a perspective camera. With a position in the scene. And a look at. Which is like... Where it's gonna point out. So you can start noticing that this is a parallel between the 3ds objects and how they use as components here. Then we can add some objects into our scene. So I'm gonna add a box. Okay? A box is built with a trace mesh. So you can do the analogy between the geometry being the HTML of the 3d object. And then the material is gonna be like the CSS of the object. It's gonna declare what color it has. If it's reflective, if it's not. Okay? All that comes together in something that is called a mesh.

And if we're lucky enough and we add a light to the scene, because if not, everything is dark, we come up with something like this. Okay? So... Hey! We have our first 3d renderer ever on the screen already with these components. So we can say, like, woohoo! Clap your backs. You already did your first 3d scene ever. But can it get better than that? Of course it can.

So right now we are using the plane directly on the middle of the scene. But we can add some arguments for the constructor. So the arguments will depend on the component that you're using. In this case, I'm going to modify how the box geometry looks like. So I'm adding some properties to the width, the height, and the depth, let's say. Or I can change the rotation of the whole cube by changing the property here and using some math in order to change it. So this is how it's gonna look like after we do those changes. So we increase the size of the cube and also we rotate it a little bit.

Let's make it glow. Right? And this is when I have something to announce. And we just launched today the post processing library for TresCS. So you remember at the beginning of the talk, I was showing you a cool game with glowing lights and such. Post processing library is meant to make it easy and focus on developer experience. So you can add it as TresCS post processing. And it's as easy as adding for the material, you need to enable the emissive. So it's a property that allows you to say, okay, I want to have this intensity. And also the color of the glow. Okay? And then you can import something called the bloom and the effect composer. So the effect composer is gonna be like the context of the effect. So you can pass several passes. And every pass is gonna be a different effect. So you can build up different post processing effects. Why it's called post processing? Because it's not rendering in realtime, it's just taking what you render and then adding post processing, as you will do with movies or video games. It's the same concept.

So we're using the bloom effect with an intensity, luminance, threshold, yadda yadda. Really technical, but it's what allows you to detect when to glow. And voila! We have a glowing cube! Amazing! Woohoo! So this is when we can start dancing and figure out, okay, we can do pretty cool stuff with 3D on the web.

And the cool thing is that also it's pre-performant. So since I have only seven minutes today, I only wanted to show you a little glimpse of what you can build with TresCS. And you can notice a small amount of code that it requires to get something working. So the next steps will be... I put some QR, so I hope they are working. You can check the documentation. We have a lot of nice to go, get my first scene running. We have a cookbook, where all the community is adding recipes on, for example, how to do animations, how to load models that you don't load from video games or like free in the internet. And we have a YouTube playlist that honestly I had to create more content next year. That's my hope. Where we show the basics of how to get started with.

It will not be a good talk for myself if I don't thank our sponsors. So this is all the people that allow us to continue working and to provide to the different contributors some monetary support. That's really important. We have companies as well that are supporting us by sponsoring. Big thanks to StackBlitz for the collaboration on the BitConf. And yeah, that's about it. Thank you very much. I still have 30 seconds. So do you want to see another demo? Yeah? Okay. Let's go real quick. Here and go back. Since we're in a planetarium, come on, quick, what about some galaxies? Yeah. So we can change the color. Is it visible? Kind of, right? I don't see it from here. Yeah, you can change the color, like how many randomnesses you have, size of it. And this is all as well done with view components. Thank you very much. Thank you. Thank you.