TresJS create 3D experiences declaratively with Vue Components

Hi, everyone. Thanks for coming. My name is Alvaro. You might have seen me in the conference or in the net, but I'm the author of Trace.js and I currently work as a DevRel engineer at the StudyBlock. I'm really happy to be here today with you so we can build some stuff with Trace.js. Trace.js is a way of creating 3d scenes using view components. I'm showing here right now some of the things that you might be learning or doing in the future with Trace.js. You can do from really basic stuff to more advanced like a galaxy, loading models, like a planet like this one, low-poly planets, changing the materials. And the one that I show in the Trace.js talk at London is the Wizzard one, which is a scene with some components that make the canvas flow. So I hope that the library leverages a little bit and it allows you to start learning because you don't necessarily need a lot of knowledge in three years to use it. So I share with you a page which is a notion page. So the idea of the workshop is that I'm going to build live the exercises and you will follow with me try to code them as well. We have around seven exercises but let's see how much we can actually do. Okay, that there cover the basic. Here there are some links that will be useful, especially the ones in the bottom like the workshop project repository. This repository has all the exercises that we're going to do today. And you can download it afterwards if you want to check how we did the exercise. So this is a little bit agenda. The idea will be to do the exercise zero right now, which is this one. And then I will try to create, well, publish the other ones so you can see them and we go on. So the idea is that you go with me. You can clone the repository or you can use npx digit to create a new one. We have a starter repository. So if you go to your terminal like iterm app for example. So if you use npx digit what it's going to do is clone a github template. But you can also get clone the repository directly and put yourself in the branch main. For this workshop we're going to use VS Code but feel free to use your idea of choice. So when you download the repository you're going to have something similar to this. So you will have a normal video application using vue. You can install everything by using npm install or pnpm. In this case I'm using pnpm. It has all the dependencies already inside. The most important thing you need to have is the 3ds core and the 3ds 100 package in the version 2.0.0. We have a Vita application using vue and it's all set up to work with it right away. Make sure though that you are in the main. Okay so that you're in the main branch. What we have is an app.vue that has installed vue router. So we're going to create a page for each one of the exercises. In this case since this is the first scene we're going to use a component called the experience. So the index.vue which is the main page is going to have a suspense. You're going to learn how to paste the command in the chat when you can. Which one do you mean? The one to initialize or the git clone? To initialize you can use this one. It's in the notion. You can change the name for your one but if you want to have the exercises it's better if you git clone the actual repository. So in the page that I share here in the project repository you can git clone this one. Okay so we're going to have suspense because we are going to do some async stuff in later. And if we go to the components the experience.vue is going to be the component that holds the whole scene. So I'm just going to close this right here so we can focus on the code. Okay and I'm going to run npm run dev. Okay so when you run npm run dev it's going to open a new tab in your branch. So I'm just going to go here and paste it in. And you should have something like this a complete empty scene with a grid and access helper in here. Please let me know in the chat if you're able to see this in your browser. Okay we have one job. Awesome. Okay cool. So to start with the beginning we're going to go to the code. Start with the beginning. Nice. And we are going to remove everything. Okay we are going to remove all these components. Okay and you can leave this here it doesn't matter and just save and refresh the scene. So right here we have a canvas element. So if we go to the inspector in chrome or whatever browser you're using you're going to see that it's a canvas element. So Tress ES and Tree.js what it does is that it takes all your scene everything that you're going to put inside of the Tress canvas component and it's going to render in this DOM element which is the canvas. Okay so you're going to see that there are no components here everything is going to be rendered on the canvas. If we go back to here now we are seeing only a black screen and this is one of the most common things that happen in the beginning and that means that you don't have a camera yet. If you go to the console you don't have any warnings because there's actually nothing wrong but the first thing that we're going to do is add a Tress perspective camera. So all the components in Tress are going to be prefixed by a Tress yeah a prefix but the Tress word. Okay so this right here is exactly the same name that the perspective camera instance has in Tree.js. So if you ever get lost like what object should I add or like you're taking a look at the Tree.js documentation know that you can add it to here and put the prefix to it. So if it's orthographic camera or this is I don't know what else grid helper you just need to put the Tress before. Okay so if we add the Tress perspective camera and we go here and we refresh now we're going to see that it has a color right. Why it doesn't have a color? Because we are passing a property to the canvas which is called clear color. So this is the color that the background is going to have and you can see already that it's behaving like a view component because we are passing some props from this reactive state into the Tress canvas component of Tress. We can do the same for the perspective camera because right now we are not seeing any other element right. Let's add the grid that was before right the grid on the floor. So let's use Tress grid helper and we're gonna pass an argument as an array. Okay just trust me I'm gonna explain what are the arguments in a bit just trust me and put some arguments like this. Okay sorry only 10. So let's save and let's go back to our scene and see what we have. So now you can see that something is rendered and please let me know if you have the same result you should have this grid render right here. Awesome we have a yes from Sabina. Okay we have several yes nice. So let me remove this here because we are not really gonna use it. Okay so if we want to change for example the position we have two things to use view components. We have arguments like the one that we pass to the grid helper and we have props like position. So if we want to change the position of the camera I can pass several things. I can pass an array which is gonna be the x the y and the zeta axis. So x is gonna be the horizontal y is gonna be the vertical and zeta is gonna be like the depth. Okay so let's say I want to move it a little bit off I put something like five and now you can see if you refresh that you don't see the grid anymore and that's because we went too high. Okay if we add five here still too high so we can pass another position. Ah the orbit controls yeah. Let's remove this and put it on the position. Okay let's save again so we can see the grid. Okay here is the grid again. We can also change the field of view so whenever you're creating a camera in plane tree what you normally will do is const camera equal a new perspective camera and you're gonna pass some arguments to the constructor like the field of view so how much you can see on the camera the aspect radio which is normally the the width and the height of it and then how far and how near you can see with a camera. So to do that in 3ds what you need to do is pass the property args and then the width and the height of the camera. The third thing you need to do is pass the property args and we're gonna pass the same ones like 75. Here we can put one okay because it's the aspect radio the truss canvas element is gonna be calculating that for you so you can pass one zero dot one and one k okay then we can remove this camera. So now you can see that you actually see more of the grid and that's because we change the field of view here normally is 45 and we added 75 so the bigger the field of view more of the scene you can see it's like changing the lenses. Okay so far so good. If I'm explaining too fast or I'm complicating things please let me know and I will try to explain it in a more easy way. Awesome nice to hear. So now let's add some objects right because the scene is pretty empty so the way we can add objects is using truss mesh. Okay so truss mesh needs two things inside it needs a box or a geometry sorry not a box like it needs a geometry and it needs a material. Okay so if you're using plain tree what you normally will do is that you will create a geometry so a box for example and you're gonna say new box geometry from 3ds. Okay and you're gonna pass the parameters same as we are doing here then you will create a material which is like this new standard material or new basic material. Okay let's change it for a normal material and we don't need to pass any object here so mesh normal material and then we can remove the color and then we will need to create a mesh so the mesh will be like new mesh and we need to pass the geometry and the material as the second parameter. So we're here using a truss mesh component and we're passing it the truss box geometry and the truss normal material as a slot so as view slots. Okay what it's doing under the hood is that it's creating this mesh and it's passing this as parameters and automatically adding to the scene. So what we're gonna save and go to the browser and see what happens. Now we have a cube in the middle of the scene. The normal material is this one that is gonna show you the different sides but we are gonna do an exercise only in materials. Okay so please let me know if the majority of you can see the box. I can go back to here so you can see the okay amazing Sergio has it. You remember that we could pass the position to the camera right? There are something called the transforms and actually let me check real quick them because I think we are in the other exercise already. So where was I here? So this is the exercise one which is install the view router. So I'm gonna push the exercise one which is creating the scene of the cube. Okay let me publish it. Share, share to the web. Okay so now if you refresh this page it should be here. Okay and now I'm gonna publish the second one. So they have a little bit of theory if you want to check it out but it's more or less what we are explaining here so it shouldn't add more. So I'm gonna share this too to the web and now we should have the exercise two which is animate the cube. Okay let's open this one because right now we have a cube that is working right? I was going to explain sorry I was going to explain in the cube scene how to use arguments. We already saw it how to use the props. So if we want to use the props you have some transforms. There are position, rotation, and scale that are the more basic props there you're gonna use. Of course this library has a lot of props so you can check the documentation of 3ds to see all the options but we're gonna use the transform properties. Let's go here and if we want to move up the object we can do position and I was telling before you can pass an array with the x value the y value which is going to be smaller like two and let's move it a little bit on the right so we're gonna move the x a little bit as well. Okay if we go back to our scene here we're gonna see that now the center of the scene is this one and the cube has been moved before it was in the middle of the screen and now it is a little bit on the left. A little trick if you want to have the scene interactive because right now it's still add this component here. This is a little bit more advanced but added before the canvas from the cientos package. The cientos package is an abstraction or like a helper that improves the developer experience. You can implement the orbit controls yourself with the core library but this one already has everything for you. So if you add it to the scene and you refresh you're gonna see now that if you click and move you can move the scene all over the place so you can already check like this is the 0.0.0 and your cube is moved a little bit in here. Did it work for you the orbit controls? Awesome. Nice. Okay so with this you can check your scene check what if something is wrong and so on. Now let's use another one which is the rotate. So we're gonna use rotation here and then our rotation goes in degrees. So we have rotation in the x-axis we have rotation in the y and in the zeta. It's the same thing here it's a vector. Whenever you are using like rotation for example and let's do it like this so you can see that it's also possible. So we are gonna do it the 3gs way and we're gonna set rotation is equal to new vector 3 and we're gonna pass the rotation here. So maybe let's rotate it minus mat pi. So mat pi is p pi so 3 14 15 something. Okay and that's the degrees that you're gonna use. So normally mat pi is 180 degrees. Let's divide it into two so we have a rotation and let's rotate two of the axis so we can see it. You can pass the properties like any other view application that you have. Okay so if we refresh right here something happened. Okay something that wasn't good because now we cannot see our cube. So let's see what happened. We don't have any errors here. Okay so what was that you didn't like? If we set the rotation like this check okay it's not taking the rotation let me check why. Let's try with minus four because maybe because it's a cube. No it's not working. I'm passing it to here. Vox geometry. Let's try with three and four. This is the moment that I started panicking. Okay here is a little bit rotating. I don't know why it's not rotating with the mat pi though. Let's put it between three and let's check like I'm only going to rotate in one. Okay so now the mat pi I don't know maybe it's because it's a cube and I'm just making the wrong. Let me know if it's rotating for you. I'm gonna try to rotate the mat pi here. Let's put it the positive one maybe. Okay so it is rotating. I don't know why maybe we actually took the the angles that made the full turn but now it's working. Yeah okay so let me know if you can see the cube rotated and I'm gonna try to use this one right here. So we were using this and let's pass rotation and should be exactly the same. For some reason it's broken when I pass the new vector. So this is a bug most likely. I will need to fix it if I pass a ref because what we do is normalize all the entries from the rotation. So let's check if it works with a ref value. No it doesn't. Okay I will need to check this one right here. If you pass it directly here like this it will work. The idea is that you don't mind if you are passing an array or you're passing a vector it should work. Okay so let's continue. Right now we have rotated so let's see the exercise. You can also rotate like change the position using pierce it props. So if you have position x or position like x or a prop that is I don't know shadow bias you can use this shadow bias like this. You can use it as a prop here. So instead of using position we can use position in the x value and let's change it for something a negative one. So we're gonna use minus four. Okay and let's go here we need to remove this here. I'm gonna put it in the beginning so we know. Okay so now you can see that it moves in the minus in the axis in the left. Okay so you could pass instead of the whole array you can pass each one of the array points like this. Okay cool so I think we have the first one Cool so I think we have the first one which is this. I can already explain this a lot here. You can use as methods as well so some props are methods in the constructor. So the perspective camera for example when you move it and you don't have the orbit controls you can tell it to look at certain position and this is a method that gets these parameters and 3ds is going to automatically map it for you. So let's try to do it here. We're going to just look at it's going to pass exactly the same position so it's going to be minus four zero zero. Okay we also have an issue with the typing. I wanted to check that but you see that the camera move a little bit towards here and that's the way you can direct the camera towards what you want it to see. If you do something like four here now you see that the camera looks to another way. So the idea is that whenever you're not using orbit controls you can use the look at to where the camera is. Okay so far so good. Any questions? So I have some yes there. All good cool. I think we can move forward then. You have some resources here in each one of the page. Can I see the camera on this space? Yes you can. So let's go to 3ds docs and here there is a camera helper. Okay so we could add the camera helper to see the actual camera but I need to explain how you can pass a parameter to another component. I'm going to explain that in a little bit but yes you can do it with this one. Okay let me remind me afterwards when we see template refs so I can show you. Any other questions so far? Okay I think we can jump then to the second exercise because I don't know how we are with time a little bit behind so let's hurry up a little bit. Animation of the cube. Okay so we're going to use something that is called use render loop and use render loop is a composable. Okay it's a composable and the idea behind it is that here we are painting on the canvas each frame per second so that's why you can zoom you can move etc because it's not rendering only one frame it's constantly raining on the refresh rate of the browser. So that's how games work that's how everything works in in rendering. So 3ds does it for you right away so you don't have to take care of it but if we want to animate anything inside we can actually do it with that composable. So here I'm going to call use loop from the use render loop. You can import the use render loop from the core package as well as the truss canvas that we added in the beginning. Everything is from the core package and the way we're going to use it is that we're going to pass as parameter the callback. Okay and inside of here we are going to apply our animation. The problem is that we don't have the instance in the javascript we only have the instance in the template so we need a way to get this instance right here. What normally people will do is that they will create a position here like I don't know ref and this position 0.0.0 right and they're going to pass it to the position here and then inside of the loop they're gonna probably say position value like this but this is not correct. Because reactivity in vue is using proxies and proxies are not as fast as normal objects so this will blow the performance. Imagine this operation being done more than 60 times per second. So if you put a console log here and I'm gonna show you how it looks in the console. So if I do this use loop is not on oh I'm sorry my bad it's on loop the function inside is on loop my bad. So you're gonna see that it's running really fast the console is getting a lot of logs here and if I'm not careful it's gonna blow up eventually. So try to be mindful about what you add here because it can affect the performance. I'm gonna just refresh to avoid Chrome from crashing. We are good and I'm gonna remove here so we need another way to get the instance to be able to rotate. What we're gonna do is use template ref from vue. So here we're on who is familiar with template ref first have you used it before? Okay awesome so in normal view what you're gonna get is the DOM element that you're using. In this case we're gonna do something else. We are gonna use a box ref. We're gonna call it that way and we are going to use a ref like this. You can use ref it will not matter but if we're going to optimize the performance you can use shallow ref. Shallow ref is a cousin of ref that it only triggers reactivity in the first level of nesting of the object. This is the one that we actually use inside of the reactivity system for Tres Cs. So what we need to do here is pass to the mesh the box ref and wait for it to be available. We could use a watch but if we add a if statement here and if it box ref value is not present then we return. But if it's there what we want to do is modify the rotation. So we're gonna do dot value dot rotation dot x and we're gonna use plus equal. So plus equal is the same as doing the previous one plus a value here. I recommend to use a really small value because since this is moving so fast so for your eyes to be able to see it put a little value here. Let's go to our scene and see if it actually works. So if we refresh we're gonna see that now it's rotating in the x axis right and it's rotating like this. So let me know in the chat if you managed to go this far. I'm going to show the on loop here and if you have any questions please let me know in the chat. What we did was use the use render loop composable. We are deconstructing on loop which is a method. We are passing to that method callback and in that callback we are using the template ref that we are passing to the mesh to get the instance. If I'm doing here console log box ref I'm gonna do box ref value. Okay. You're gonna see that it's undefined in the beginning because it hasn't mounted yet. So if we use a watch effect okay and we console log it again we can see the actual 3ds instance right here in the console. So this is the primary way you can get a reference for the 3d object that is in the scene on the script tag on your view component. Okay. The latest comment is 45 so let me know if you're still there. You didn't die already. Okay. Cool. Awesome. So could you show the code again? Yes, of course. So we have the on loop method that we're passing a callback and in the callback we are returning if we don't have the reference for the value red okay and if we have it we are modifying the rotation in the x value by increasing it with this offset. To continue with it I need to explain that this returns two parameters. One is the delta and one is the elapsed. Okay. So the delta think of the delta as the difference between two frames. So it's always going to be a really a small number here. So whenever you're animating you can do plus equal and you can pass the delta and it's going to be exactly the same as we were doing before. Okay. So if we refresh here you're going to see that it's moving the same way as before. So you don't need to create your own offset. You can for a smoother animations because your browser for example could have or your screen story of the macbook in this case I think it runs on 120 frames per second but some other devices run on 60 frames per second. So to have the same speed in all the devices is better if you use the delta. If you want to see the the actual frames per second you can import here. Use actually we have cientos right so here you can import use tweak pane. Okay like this. And what we can do I think with imported is just enough but let's initialize it. So I'm going to use the pane. Use tweak pane. So this composite what it does is that it adds this here on the top right. Okay so this is like some controls like visual controls that you can tweak your scene and interact with it. And you can see here that this says like 120 frames per second. You probably had a different one. Depends on your device. And this is what I meant before. So this code right here in my device is running 120 times per second. Okay then we have elapsed. Elapsed is similar but elapsed is the time elapses since the first animation. So if you remove here or let's add another one like box ref by the rotation in the y-axis and instead of using plus equal you can do elapsed. Okay and then it's gonna have the same effect. So you can see now that it rotates in two axis. So far so good. Let me see those thumbs up. Okay awesome. From then on you can do a lot of cool stuff like using trigonometry for example. So you pass the scene here and you pass the delta. It's gonna oscillate like top and down. Well in this case it's the x-axis so it's gonna rotate in that. But you can modify all the scale, the rotation and everything. Okay so I think we're cool for the first example. We already animated the cube. reactivity and choice. We show how to use a template graph. Yeah I'm gonna quickly mention that this is not the only one available. You can have also after loop and on before loop. So it's exactly that. Some things in 3DS you need to do before rendering or after rendering the scene. So with this one you can also pass some function to be triggered in that case. Okay also you have here some of the examples. For example the frame per second matter is done in that way. Okay before it renders we are gonna use in begin and after we're using end. And you have some resources here. So quickly I'm going to publish the other one so we can continue. If you have any questions put it on the channel but I think we are going good. So the next one and we probably need to resume it a little bit is gonna be the geometries. Okay so I'm gonna share it with the web and if you refresh here you're probably gonna have no not yet let's see okay you're gonna have this one the exercise tree. Okay so when we we were doing a cube until now right so when you're passing a mesh the mesh at the end it combines the structure which is the geometry so all the nodes all the little vertices that forms the object and the material is how it's gonna look like the color how reflective it is and so on. We can set another stuff rather than the box geometry. Okay so I'm not gonna change the branch okay but the idea will be to create another page. Okay so we can create another one here and say geometries.view. Okay so here I have a quick a way of like in the snippet that creates it seems really fast and in the router what you can do is create another route okay called geometries. Geometries right here and we're gonna pass this page here. Okay so let's save go to geometries and if we put here on our playground on here we put geometries we should have an empty one at least one template or a script. Okay because we need to save it. So here we have a quite empty as in so let me know if you managed to create the new route so we can start with the geometries. So we create a box geometry before and we can copy and paste the same one and we're gonna change the so be here geometries we are gonna change the one that we are using right so another one that we can so another one that we can use is the sphere geometry and the sphere geometry when you pass it it has the following attributes so it has the radius the width segments and the height segments. Okay so we can say that there is a radius of two and normally is between 16 and 32. This is how many triangles or how so we have this sphere okay like this is pretty big because we pass an argument so we have a lot of different like geometries if you go here to the exercise itself I pasted each one of them so we have like a cylinder this and I also put the parameters that you need but like I'll play with it and pass here instead of a sphere let's create another one maybe so let's do trace mesh again and let's pass the cylinder and let's use the same material okay but the problem is that they are going to be in the same place most probably yeah it's inside of the of the sphere so what we can do is reduce the sphere to one or even less and add a position to this one so let's add like two in the x and the x-axis maybe it's enough I don't know if you refresh now you're gonna have it just a side okay so this is the yeah the cylinder we have a lot of geometry so if you go here to the documentation of 3GS you're gonna see all the possible geometries and the only thing that you need to do if you want to use for example the icosilicon here you only need to prefix it with trace and then check what parameters it passed and you use the args property and that's it it's gonna work let's do this one for example the torus geometry aka the donut okay so I'm going to just copy the parameters here and we are going to change our cylinder for a torus geometry and I'm gonna copy and paste the parameters that we have here and then refresh here and it's actually a huge donut lol oh well I mean the radius of course is huge so if we do like 0.5 or 0 maybe it's gonna be smaller yeah well okay we have a ring cool so you can play with all the geometries and try to watch them the idea will be that you go here and you basically can play with it okay also in the example that I send you in the repository I think you have several different ones so you can check so we already have the geometries right let's now continue to textures because this one is pretty interesting I'm gonna share it okay and let's go back here refresh and should be available so exercise four textures okay so like right now we're using a normal material right that is showing some colors depending on the normals and so on we can load images so images or textures are just basically pngs that's it okay or a gpe image so to start with it we could use the same geometries one or we can go to let me check the exercises I think it's better to go to the branch because I already have the image in in the public repository so I'm gonna force checkout here force checkout here yes discard all and now we probably have the geometries and the textures so if you change the branch and I'm going to put it on the chat this is feature texture uh textures no exercise or exercise for text textures uh with um not capital but a feature with f in like this okay um another thing that I can show you that is pretty cool um that I haven't mentioned before is that you can use components as you were using view so I'm going to remove this component that was already there okay and if you're in the textures page remove the the actual component that was there because we are going to create a new one so you can group all your objects in a scene in different components as you will do with your normal ui so here I'm going to create another one that is going to be my donut for example is use donut okay and I'm going to create a small single file template with a script and a diff template with a script and a diff and here I'm just gonna copy and paste from the index sorry the experience I'm gonna copy and paste uh geometry okay so I'm gonna copy and paste the trez mesh and I'm gonna use donut no donut no um torus geometry they should have called it donut because it's a donut not a torus and um but the mathematicians were wrong like they wanted to call it like that um here I guess it's like three hundred thirty two and one hundred something like that let's save and if we go to the browser itself textures um what's happening oh well of course we are not adding this component yet so we need to add into the textures page here inside of the suspense we need to add my donut um the um the application does the auto import for you but if you need to import it imported from the components like this okay but it does it automatically for you you don't need to care about it and now we can see the donut itself so let me know if you manage to go this far like you have the textures page and you have a donut inside of it yes I can so my donut is gonna be a trez mesh we can remove the rough we're not gonna need the rough and the trez torus geometry we are passing the arguments so it's gonna be the radius how thick is the tooth how many segments on the radial and in the tubular okay and we're passing a trez mesh normal material okay so Sabine is ready who else we have another thumb up if we have two more I continue oh you were fast okay I hope it's working and you're not putting this just to continue okay cool so um we're gonna use the same method that we used for the donut and you're not putting this just to continue okay cool so um we're gonna use uh there are two ways of doing this um there is the like more 3ds way and the more 3ds way is gonna be using the use loader so const texture okay equal to await let me just do this use loader and the use loader you're going to import it from the trez yes core but we need the texture loader as well so we can import it from tree what we have here and we can console log it actually so console log texture okay um let's see what we have in the browser browser so you're gonna see that we have a texture imported okay so we have an object with the texture um use this one uh hexagonal you can check in the public okay here in the public folder where the static assets are you're gonna have a folder that is hexagonal um rock and inside of it you're gonna have a series of different uh textures or images this is the one for the color okay it's called base color and you're gonna have some weird ones like this one that looks like a chessboard uh this one that looks like um with purple and so on and other ones okay i'm gonna talk about that in a moment for now let's just focus on getting the base color okay which is the texture that we're normally used to and this this one the base color okay so since we have it because we are using the way that they use loader and we're using the texture loader from 3gs now let's use a material and pass that to the material so for that i'm gonna change that to a standard material which is one of the basic ones and we're gonna use a prop that is called map okay so a property called map and we are gonna pass the texture okay if we click save and we go here we're gonna see now that the image has been set to the donut itself okay so now the material is no longer a color or a series of color is actually a texture so who managed to go this far i'm gonna put the code here again awesome so we have one person to get sabina as well so who else who else give me two more okay roberto's ready who else nice perfect cool so what happened if for example i try to load another one okay and just follow me in this one so we're gonna add another which is gonna be the hate map okay or the displacement map just follow it okay so here we can set we can use the image this image that has like black and white okay this is the one that we're gonna use so let's go here and set height okay and it's a png be careful with this one because it's a png and not a gpg okay and this is standard material we this is standard material we can pass another property which is called the displacement map okay and we're gonna pass the height map let's save and see what happens so now you can see that the donut is completely deformed and that's because this is using how we call it this is using a system that is called pbr okay that is physical pbr physical bias i know it's something physical rendering like accurate physical rendering or something like that what would be i don't remember well and what it does is it fakes the texture of the element by using images so if you pass the displacement map it says to it hey whatever you have black colors or i don't know if it's black or white okay it goes in the gray scale it goes from white to black so depending how intense is the color is gonna be the vertices are gonna be more displaced so you can achieve the same as you would do with a really high poly mesh with images and this is how all the video games in the playstation 1 playstation 2 and nintendo and the beginning were using textures to imitate like rocks for example textures in rocks they were using this approach nowadays there are more approach you can use more low like a high poly elements but this is amazing to do things in the web we can actually see it a little bit better if we reduce the displacement factor so there is go something about the displacement scale is another property that you can pass the material and let's put something way smaller like 0.01 or something like that not too small maybe 0.2 okay 0.2 is already good but you can see that in some places we have like vertices that doesn't exist like it's breaking the actual mesh and it's because this is too low poly okay if we i'm sorry i got lost how we can check the actual like the triangles that we have there is a property in all the materials that you can pass which is called wireframe property okay so if you pass this property right here you're gonna now see all the vertices of the of the geometry and you can see that some of the vertices has been already modified it's like it's like i don't know the word in english i don't remember let's remove it these two okay and go back here this is the one for the geometry so you can see that this one is like it doesn't have any modification because we are not passing the map if we pass the map it's going to affect all the different vertices of that map making the geometry looks like it looks now if you want a better resolution you can tweak these parameters here so i will put a way higher resolution so that's the amount of squares okay of triangles that we're going to have if i refresh now you can see it's way more than before right it's a lot of different triangles be aware of it regarding performance because the more triangles you need to render most gpu you will use okay i'm gonna remove the wireframe for a moment and go back you're gonna see that now it looks even better and that's because we added more more triangles to it so the more triangles the better results you're gonna have the problem as well is that the the texture is 1k and to have a better resolution you will need oh 2k i think you will need a 4k image to do it so how many of you reach this point yes okay we have one two and we have five okay we have three amazing so i'm going to share the next one if you have any questions use the discord okay all your questions that you have today and if i don't get the chance to answer them please put it on on discord and i will do it this week okay so let me go to the next exercise because um i know well really really important we were using the use loader but there is another way that we can do this and we are going to just do this a special comment and i'm going to comment the use loader okay we can use something that is called use texture which is a composable that is available on the on the core so instead of having to use the texture loader you can use use texture okay and you need to pass an array or an object if you're passing an array you can pass exactly the same one here so it's going to be like this okay and we can remove this here so it's a promise so await okay so using use texture you pass an array of all your maps okay the first one is always going to be the albedo or the color and we can see that we have exactly the same as before if we pass something like this and say a map hexagonal like this not an array sorry an object and we need a displacement map like this so if you pass an object with the property map to the url and the displacement map to the height one we are going to have an issue because we need to deconstruct this so it's going to be the map and the displacement map like this and this is going to be the map map doesn't exist um oh well pbr texture yeah and it's pbr okay uh sorry about that instead of deconstructing we'll use pbr texture and here we're going to use pbr texture dot map and for the displacement map we're gonna use pbr texture displacement map okay it's gonna complain the type script but that's fine because you need to set it manually like 3gs with maps is already texture is not defined yes it's not okay so now we have a similar okay so now we have a similar um like uh result as before okay by using the use texture if you pass an array where all the urls are in the correct order it's also going to take okay so let's uh go to the next exercise how you doing is too fast are are you enjoying it okay so real quick um in the four one in the materials okay is exercise five and what you can do is create a new route which is materials and copy and paste these here but this is similar set as before so maybe we can use the same one because um basically what what we're gonna see is that uh we were checking the geometries and changing the geometries but you can also have different kind of materials okay and if i catch my breath okay maybe i can explain um so i'm going to change here to the five which is materials and for checkout discard all three okay and i'm going to go to materials okay so in this one i'm not going to code that much but i'm going to show you the different kind of materials that they are okay it's the same concept like you can pass different kind of materials here so you could pass like the normal that we used before basic material uh standard or physical material okay i'm just going to show you the difference between all of them okay is is that okay you can also see the examples and where are the basic on uh the notion page okay so um the most basic one is the basic right and is this one and it's just and is this one and it's just basically rendering a color okay so you pass a color here and it will render but you cannot see shadows you cannot see any texture whatsoever okay you can try to put it transparent and you can see that it's not going to work okay and you can also check the the wireframe okay and select which side do you want like back side or double side okay and now if you use the double side you can change the opacity of it so these are properties that i'm passing to the actual component if i go here to materials okay material tortoise knot to this one uh you're gonna see that i have like a lot of stuff here this is the controls that i'm using for um for the example but here we initialize with the material like this and then we are just taking the reference like we did with the box okay so we're passing the tortoise knot reference and whenever i change one of the of the controls and just basically uh changing the the material for example for the opacity and doing torus not value material and changing the opacity for the one that the control gives me okay so we're getting the reference of the object and just passing but you could pass this as a properties as well okay uh my favorite one is actually the toon material we because it looks like a legend of zelda like the breath of the wild the toon shading um and it's about like a shader like it's a material that imitates light with two colors or more okay you can set up several properties that make it smoother or not but you can see now that i have a light in the scene okay fake light and it's illuminating this side of the torus knot and this side is not getting any okay so that's the how cool is the the material then we have the depth material and i don't think it's going to be visible but if you really zoom to it this is the one that it tells you how far from the camera the material or the pixel is so you can see that here is lighter than here and it's because this part of the torus is closer to the camera so this is often used uh to fake like effects in that needs depth um because you can tweak how like if the gradient for example you can make something that is um transparent uh if it's too far so you can only show the first part like um do effects uh and so on okay but you see that it doesn't have a color it's just basically a map in a grayscale on how far each pixel is then we have the lambert uh lambert one uh to be honest i don't use it that much and it's a material that um use a diffuse um so it's like the two material but it's more um yeah it's like a radial right a gradient and it's a little bit smoother but it's completely like it does a completely fake it interacts with the light and it does it by its own it creates like soft shadows and um and make it a little bit better uh matcap oh yes the matcap is a special one because matcap is a type of images that you can create so normally you will create a png uh with the matcap and the matcap will tell the how you call it like the the mesh how it will look do you remember war um war art in war that you have different aspects of the text so it's something similar it's like it's a pretty fine image that will affect how it looks and if you go to the code um you're gonna see that we are using the use texture to get that texture from here so this is the texture let me put it in this screen this is the matcap texture so it's basically like this here you can see how it affects the the the highlights and the shadows and that's where we're passing to the mat like the matcap let me check where it's used here so if we are selecting the matcap material we're doing not ref dot value dot material matcap and we're passing the matcap and that's the final effect right here so this one for example is used when you have a lot of instances in your scene and you want to color them all out without risking performance because light and shadow is the most consuming thing on 3d rendering okay so you could have a scene that doesn't have any lights or any shadows and you can still have this effect so i have an example in the trace place here in the playground it's a 3d text okay it's this one and you can see it's using matcaps all over the place so all of these donuts actually are using matcaps it's the same for the 3d text okay so far so good any questions until this point let me check the time we're actually on time so it's 5 5 30 but i don't know like i am this is looks like we are good on time actually okay nice let me check the real quick the timings that i put so 5 30 yeah we're actually on we are before a schedule so we actually managed to go faster okay let's take more time to talk about the materials then okay do you have recommendations for websites to get textures from of course there are many of them i'm thinking so normally you will get them from pvr markets okay pvr material so is this one textures.com ambience cg is also good because it has a lot of them this one but you have to like be careful about the i would say the copywriting the copywriting of the licenses so normally you want to check for cca cc0 okay materials for example here so you have all kind of materials and they all have all the maps so they have like the color which is albedo let's take there is some rock or something this one that is like concrete so this one is going to have different things it's going to have the color and it's going to have the height map and probably the rockness and everything so this one is a good one i can share with you afterwards in the discord remind me or in twitter i will pass you some of the ones that i use also you can like download them in 4k which is pretty cool also we have uh we have some assets here and there is a repository on the tres that is called tres assets this one and inside textures you have several of them so you have like clouds we have environment maps ones from a haunted house hexagonal rock the same that we were using is also here in we have some matcaps as well so different kind of map caps inside here if you want to play with the with this exercise you can use the ones here okay cool uh so let's go back here we were with the matcap one then we have the normal material which is exactly the one that we were using at the beginning it looks really cool some people use it for final production but it's a real um case and why it goes from color to another color is because um when you how can i explain this this part is hard um do you remember when you were a kid those christmas um candies that were like a santa and inside was a chocolate let me see if i can get a picture so alvaro knows where i'm saying maybe it's something in spain only chocolate wrap um santa okay so these ones here come on these ones that were like uh aluminum and it has a santa so um maybe you you haven't but the overall idea is that um when you were taking out the wrapping and you put it on a plane uh you will have like a deformed version of that uh santa claus right so um let's say wrap plane no um you it's called uv wrap okay oh well here is well it's better explained though uh in the in this subject maybe i will add uh an explanation so whenever you have characters or something like that um it's like the wrap of the chocolate right and um whenever you're working on it on or creating an image it's going to put it in two dimensions instead of three so it's going to convert the three dimensions into a u and a v axis so the v is a vertical and the u is the horizontal that's why it's called uv wrapping and uh oh this is the best um this is the best example so when you have i'm not showing example great alvaro i was checking in another browser sorry i cannot so when you unwrap the sphere and you put it on a plane it's the same concept so that's why uh in the sphere just you can see the the different countries in a size and when you put it on a plane like this one it looks different so this is uv wrapping and it's because the x and the y axis so far so good there is other examples here um for example a box the box is the easiest way um because you it's like it was a cartoon box that you can fold into one plane okay so um to create images or baking them into actually um yeah characters or materials you need to uv unwrap them on blender for example things like that um how can i show this better actually this is seen right here is using that principle so the textures of the scene is actually a 2d map and if i go i can show you the actual image i think because it's in the playroom let me search for it so public models potions and this gonna be um well this is a dark but this is the actual all the textures that you see on the potions uh that i show you is this image right here so it's a 2d image it's a quite dark because the the scene is dark um i can show you as well the memory generator um this is the the uv wrap of another model that i have there is a meme that is the the dog meme and this is the the material that is used for it uh the first time i was doing this in in in three in 3d i was mind blown by that and this color that we have in the material in the in the normal material is basically the representation of the uv wrap so that's how it's gonna look in this uh geometry specifically if we change the geometry so let's go to the code and instead of um torus let's use the sphere right quickly i'm gonna use like one 32 and 32 okay and we refresh what happened ah well it's not the sphere or not it's a sphere only okay and i'm using the normal material you're gonna see that the sphere has a different normal okay so every geometry has a different normal and whenever you are creating models you need to create your own normal that's this one i'm gonna go back to the previous because i like the component itself so the torus node is really cool to show the different ones um we have the fun one i don't really know to be honest how um how this works i think it recreates highlights so the other one was faking the shadows and this is faking the the highlights and then we have the physical um component and this is the most interesting of them all the physical and the standard material the standard material no the physical is the same as the standard material but with more options so i'm only gonna show you one okay but this is exactly the same but with more properties for reflections and things and i don't know if it's visible in the in the stream so i'm gonna put another color that is maybe easier so you see that there are some reflections here okay and that's because i'm passing an environment map which is like the surroundings okay when you're working with physical rendering like creating physical elements you can play with the metalness of it so right now if i put it completely metallic you can see that the reflection of the city is pretty clear i can also play with the roughness of it so i could create like a plastic material like this and you can play with both of them so you can achieve different kind of results um i have another example in the playground for that and it's the realistic so whenever you're working with realistic scenes um because it works like tres yes works really well with a low polite but also you can create really realistic scenes okay so here i have like a model of a pokeball and you can see this is the same environment image that i was using in the other example but i'm rendering in the scene so you can actually see it and you can see how it's reflecting on the material itself okay because this material has a metalness that is higher this one right here is more plastic okay but you can play with it and imitate actual physical properties with this you can see the sun here it's exactly this one here so it works really cool and um if you look for here in the textures.com you're probably having um hdr assets now polyhaven this is another one that is really good polyhaven and if you look for hd hd ah i never know how to pronounce it hdris this is exactly what you can use for environment maps okay you can download any of them and this is how it's going to look in the different like um objects so if you have a glass object it's going to look like this if you have a metallic one it's going to look like this but this is a little bit more advanced i just wanted to show you that it's possible um so you can use the physical material and then just pass the environment map and you and you will be able to have something like this okay if you want to check in the code on the environment map the environment map is actually this one here so environment maps work like a cube and we pass different images or you can pass one h hdr so this could be like cons and map equal use texture and it's gonna be something like like this and then you can pass i don't know sunset hdr okay this is the one that i prefer this one is way more complicated okay but with this one you can pass environment map and then the way you can pass the environment map is um here in the material you can do environment map like this and pass the environment map and it's gonna work okay um what time it is so okay cool um are you doing fine or you want to have a break okay that's the spirit cool nice okay because we have one last we have like two uh things that we can but i also want to show you how to load models into your scene which is the coolest thing so we have until six i have the time spot incorrect in the page so we have one two six and a half something like that we're okay okay so we can go to lights then um i'm gonna use the same i'm not gonna change the the actual scene okay but you can go if you want you can go to this branch here which is exercise six lights and it's another page that is the light page okay i'm going to publish the page on here so it should be available right now oh i had too many open this one okay so now if you refresh you should be able to see uh this page right here which is the lights okay um i'm explaining to yeah just add another route but um now that i'm thinking let's copy and paste this because um it has a different color so like and it has the shadows available so i'm gonna copy quickly this one here from the example and i'm gonna go here and probably create another route yeah so i'm gonna do like pages lights that view gonna paste this here and in the router i'm gonna create another one which is gonna be called uh lights okay and now in our example let's go to lights okay can you show the code now it is browser yes it's the same code that it was uh in this page and um where is it i lost here in the exercise six in the notion page uh but i'm gonna show you to um what's this here so we basically have uh we change the color to have a darkest color in the background so we are able to see the lights um in a better way and we are passing a property to the canvas element which is shadows equal truth so we are telling the canvas hey we want shadows uh with the lights also we are passing other um things but this is the like how what type of of shadow do we want and then we have a perspective camera we have the orbit controls as before we have a plane geometry which is this one okay that is the floor so normally the plane comes from the one okay that is the floor so normally the plane comes vertically so you need to rotate the x-axis in 190 degrees which is equal to mat pi divided by two negative i always forgot so what we're gonna do is show how lights work okay and right now we actually have one light in the scene which is the ambient light so let's quickly remove it and see what happens so if we remove the light you're gonna see that now the material looks completely dark and that's because some of the materials needs the light in the scene to be able to work we were using a tune material and that's one of them the tune material if i here for example use a basic material this one doesn't need the light it will show the color right away but if we're using normal for example it's going to be the same you're going to be able to see it so this is the normal if we use the tune or we use the standard material for example they need the light to be able to work so i'm going to go back to the tune one because it's my favorite and we are going to add the ambient light back okay so right now it's having an intensity of one so that's basically like how much light it is and the ambient light is a more like omnidirectional light it's gonna light everything without any direction or various saying is gonna light everything in every direction whatsoever okay but we have different kinds of lights and let's go back to our i don't want this anymore here let me see if i can remove it yes thank you i put it on the resources i put the the documentation for 3gs okay if we open it we're gonna see that there are several lights so there is the ambient light there is one called directional light there is one called hemisphere light point light rectangular and a spotlight but since we don't have that much time i'm only going to show you the most useful one which is the directional i need to pick up my daughter don't worry it's gonna be recorded so it doesn't matter but thank you so much for for coming and i hope you enjoyed it and and it was good for you so let me know like if you have any questions in the future just ping me okay thanks for coming okay before more people needs to leave let's go back here and i'm going to use the light okay the way we can create the directional light is basically using the component so my autocomplete already gives me like trace the directional light and you can set a position to it i'm going to put in on top of the object okay so and also let's add an object in the scene because it's pretty it's pretty like empty only with the plane right so press mesh let me see what so press mesh let me see what position normal like this i'm gonna change instead of normal material let's use tune as well okay maybe as color we can use teal so here you can uh i forgot to tell it like as an argument like a property with color you can also pass normal css colors or you can pass the rgb values right away with x so we could do something like 0 0 80 80 okay and that should be like a teal color like this one but i don't like the box i'm gonna use the torus knot and it's gonna be like uh 0.5 i don't remember 32 32 maybe i don't know what the two-wheeler was more was like 100 okay so we have a torus knot but it's like somehow inside of the plane i don't like that and it's because i had some position before so i'm gonna put it like uh two in the y-axis okay this is gonna be something like this no too little let's use four and maybe increase the size of the plane so this is gonna be the width and the height of the plane by 20 instead of let's refresh okay we have more space right now okay we have more space right now right what i'm going to do is that i'm gonna light it um so i'm going to put the light on top of it so i'm going to put like something like 10 in the y-axis and zero and it has a um like a lot of intensity and we can change also the color i'm going to remove this for a moment i'm going to remove um i'm going to add a color here so maybe we can add like i don't know pink maybe so we can pass this like this and you can see that the light is now pink right and it's coming from the top because if we see where the light is in the object it's coming from the top so the shadows are actually down okay so if we want for example to achieve this dramatic look of the terror movies and so on you can do the other way around you can add the light um in this position like minus 10 and let's put it closer like minus four okay and now it's gonna go from the bottom up like this okay uh what else can we do with the directional light where we can change the intensity so if i put something like eight it's gonna be really bright okay so it's gonna have more effect like the dramatic effect like this and maybe i can show you another light um let me see if i can do it so we can add trace point light maybe yes position zero to four intensity let's put like yellow and see if we can see anything okay so now it's in the center of the scene on the scene no it's in the in exactly the center in exactly the center or where the mesh is right so we have the torus geometry and we have the light inside of it like in the in the x the y-axis and you can see how cool the effect is actually so a point light this is basically a point okay that you can set like put it anywhere on the scene and i remember somebody asked about the camera to be visible and you can do the same with the lights okay um to do that we can use the ref here and we're gonna use camera ref and just create a camera ref here ref or shallow ref okay we need to import them from view so we have that one and what we can add is a trace camera helper and i don't remember what um the camera helper have so we have to pass the camera on the only argument that we need so we can pass the camera reference as an argument so whenever the camera reference has a value we need to use beef as it was a normal view component we're gonna pass the arguments and we're gonna say uh camera ref and this hope it works because it is not working for the no it didn't work so for some reason so for some reason i don't know why um the camera helpers are not actually working i have an open issue in in the library because the helper for the directional light is also not working we will do something similar with it like a cons um and you will say light ref and you're gonna create a argument like this you pass it as um as a reference and there is a component called trace directional light helper okay and this should make visible the the camera on the scene i don't know why it's not working i had to check it because it i just realized it's not working for the camera either but let me look for a 3gs camera helper example so images what you normally would see is something like this oh it's a video sorry you will see something like this so it will show you like the projection of the camera and the same for the lights it's going to show you like visually render where the light is located and so on and it's important for debugging as well um directional light helper for example let me see the directional one is like this it's going to be a square and you're going to see a vector that is telling you where it's directed okay like this this is the directional helper so normally before in the version one it was working and i probably did something in the version to the break i had to check it out okay um so um everything clear with uh lighting lighted is a really complex topic um we can also here explain something else which is the the shadows so shadows are pretty pretty pretty expensive in terms of performance so be mindful about shadows the way you can enable shadows is by using shadows uh true to the renderer i have a message on the discord maybe can i use 3gs with the webpack setup if you do have an example for it um so yes it should work uh no matter what build system are you using it should work but it's using v8 under the hood i really recommend you to use it with uh with v8 instead of webpack um so following with the with the shadows so um you need to tell the scene and the objects what what objects can um project shadows and which ones can receive shadows so i need to tell here to the directional light that it can cast a shadow so cast shadow is going to give the directional light the ability to create shadows but also we need to tell which objects we want to create shadows so in this case i'm gonna choose the torus node and i want it to cast a shadow if we go back here and we refresh and i broke something let me see the developer tools so cannot create properties of undefined oh well the directional light helper sorry i'm gonna remove it yes it was that um you can see that still we don't have any shadow right and also probably because it's going up the light right so let's get back the light to a normal positions like uh let's put four and i don't know let's move it a little bit on the left on the right sorry and a little bit on the depth so like uh three three four three maybe let's see how it looks okay so now i don't know if it's visible but now it's going like this okay in this direction and let's see if we can um cast the shadows so right now we're casting the shadow with the torus node but we haven't told the plane geometry to receive the shadow so you also need to tell which objects can receive a shadow okay so if we refresh now you can see that we have a shadow so we tell the object itself that it can project a shadow we told the light itself please project shadows and then we tell the plane object to be able to receive those shadows i know it's a little bit complex but this is because of performance if you enable shadows everywhere and none of the scenes will work was probably because uh it's really expensive to add lights um to a sense okay that's a really um important um topic that you need to take in mind for the future the more lights and the more animations on lights or like if you change the position of lights and so on and the less performance is going to be okay and with that please thumbs up uh who is um ready to continue like did you manage to cast a shadow on the scene so we have two three okay we have a bug what happened it does this because it's working or because it didn't okay misclick okay okay cool um oh something that i can show you that is not in the because we are good on time um i want to show you something before we move to models you can use events okay um inside of trace yes it's really complicated how it works in 3gs in general is using something that is called ray tracing but all you need to know is if you use the normal uh like click event okay and let's put a function on click and here let's say cons on click i'm not gonna do anything with the light um maybe we can change the color of the material if we click it let's see if we can do that so um for that we will need the reference though for this torus not so we are going to create a cons here which is going to be the torus not ref equals shallow ref and we are going to pass it to the trace mesh so it's going to be ref torus not ref okay and if we click uh we need to know if we have the torus value if not it will return it will not do anything and if it is we are gonna change the color so we're gonna do torus um not ref actually let's just console log it so you can see it okay this is also an important part to the book stuff so right now we are only going to console log the torus not whenever we click on it okay let's refresh and let's open the console log okay so if i click you can see then it's prompting on the um on the console the instant itself if i click on the plane it's not doing anything if i click on top of that it's working right so we like trace yes does everything for you you don't need to do anything okay and here we're gonna spec the object itself and it has a lot of stuff okay it has all the children whatsoever here we can see the geometry which is the torus not geometry and where is the material here we can see the material mesh toon material right so we actually could enter this here and change the color let's do that so um we are going to do torus not dot value dot material and we are going to use new color so there is a utility on on 3ds which is oh i didn't know about this maybe this is gonna be random well anyway whatever you put here is gonna be the color that is gonna receive so let's try this afterwards i don't know if it's gonna work actually um so we can pass here like gold for example okay and let's see if it works so let's refresh okay we have this oh it disappeared i click it and it disappears so this is probably uh because the color oh yeah we are setting the material to a vector um so we needed to do like color here okay i mean i could say it's magic and it was going to be good as well so uh if i click now it's changing the color but it looks really bad because we are setting like a color like um a basic color so it's converting this to a basic material again okay um um what else could we do by clicking well this way you can like you can implement the drag and drop as well so that that will be something that you can do you can do pointer enter and pointer leaf as well so i'm gonna use here like um pointer enter this is like a mouse enter but it works as well in mobile so whenever somebody enters uh like a hovering the thing or you're using a ar okay so here in the pointer event where we are going to do is cons on hover let's use the same torus node return and maybe we can set opacity or something like that torus node ref value material opacity maybe we can put it on half okay so point to enter and let's apply one on pointer leaf so whenever we leave on leaf okay and we're going to copy and paste this on leaf okay and we are going to set it up back to one okay let's refresh so if we hover i click it sorry tools okay it's not changing the opacity so why is that let's put a breakpoint so on hover on here so it is working but it's not changing the opacity maybe i had to do like opacity set there are some properties that you need to set them like this i never remember which ones are let's try what by this even if not i'm gonna fail miserably yes i'm missing so is it is working but it's not updating the material for some reason okay it doesn't have a set value well anyhow you can see that the function itself work sorry about that but i don't know the setting the opacity is not working we could do the like something similar to this again here to see the example working so we can say teal and then if i go on top no what is happening on hover i don't know why it's not working i have no idea like it should change whenever i'm i don't know why it's not working i have no idea like it should change whenever i'm on top oh now what i have no idea what happened so you can see now that i'm entering again and again like going out on going on and it's working i have to check because it shouldn't work that way something's happening let me check in the in the playroom this is the exactly same example i don't know here is working really well i don't know weird okay cool so uh final part i think we're ready to go right um who's ready for some models if you don't raise your hand i'm not gonna show you the the models i'm sorry i need more excitement ah that's it good savannah i don't know if the rest left i really i have to go thanks oh sorry danik um don't worry i'll check the check the recording okay and if you have any questions just tell me i'm gonna share really quick the last page of it and you can actually go to um the code here so if you refresh this page of the model should be available and this is what we are going to um load into orisin so what i'm going to suggest you to do is just change the model and the model what i'm going to suggest you to do is just change to the branch that says feature exercise seven models okay i'm going to just force the checkout so yeah this core everything i'm gonna close everything so we have a better view don't save this don't save this don't okay so i'll make sure that you are in this branch because in this branch in the public assets we're going to have something that is called akuaku which is the model dot glb we also have a gltf one they are the same but the gltf doesn't have the textures inside okay this is the one that has everything inside already okay so if we go there is one um page that is called the models okay and and inside of it it has akuaku you need to wrap it in suspense because inside of the akuaku one you're going to see then here we have another composite this is the commented code because you could use the same way as before with the textures you can use the use loader composable and pass the tree like the three years gltf loader but in this case we already have a composable in cientos that does that for you so i'm gonna use that right away but know that you can also if you don't want to start cientos you can do it with plain uh three years okay with with plain trace yes score thanks um so if we right now um save this okay and we go here to our scene and let's change lights for i don't know models you should be having this scene right here so this is a 3d character from one of my favorite games in the childhood which is crash bandicoot and this is the the mask that the crash bandicoot has um and what this return is also the scene okay so it has different properties but first let's take a look of the scene itself okay so the scene is gonna be the actual model that you're importing so when you import the the gltf or the glb this is gonna be the structure that is inside of it and you can see it's a group okay it's a a group that has all the different things inside but if you want the different meshes so for example the leaf is or the eyes you can also use the notes property which is going to give you an object with all of the different meshes that are available on the scene as well you can check the materials right here so you have the material for the fuchsia left leaf which is a standard material the orange one as well all of them are basically standard material the wood i think is not the wood is a physical material because probably has some reflections okay um so once we have the scene or the node that we want to apply i'm going to just remove this real quick okay and i'm going to use the scene so we're going to use something that is called primitive component the primitive component is just basically a way of passing an object and just render that object in 3ds so if i put here let's say that i create a new perspective camera this is going to create a new perspective camera okay so this is like the component is that we use in normally in view the dynamic component that you pass the component here component name this is the equivalent in 3ds and it's called primitive so you need to pass the object that you want to render in this case we want to render the scene that we get so if we do like this and we pass the scene we're going to check that everything remains the same i remove the shadow because i remove some functions there right but you remember that we were using the nodes right so let's say that i want to only render the eyes so if i add like this and i refresh now only the eyes are available in the scene you see we can also do the same for the materials another way that we could do this but it's not a recommended way is we can use a truss mesh because at the end your object model is a mesh okay so we could pass here to the test mesh we could pass the geometry and the geometry would be the scene the geometry but let's use the body to ensure that it's not a group that's important i'm going to use nodes okay and the body because i know the body is already there it has a geometry so geometry like this is going to be aqua aqua dot geometry and let's see if it renders anything so it did render the body only the the wood okay but you can understand what i'm saying like it's getting the geometry from the aqua aqua body and if we want to add the material we can do something like this and the material was aqua aqua dot no but this is the node we need materials and we need materials dot wood i think yes and it will apply the the wood material so you see how like different ways you can pass parameters you could create a mesh for each one of the parts like create another mesh here and say um instead of the aqua aqua nodes uh ice and here i don't know if it's called ice i don't remember i don't remember oh we missed something here yes this so is it rendering no uh bounding sphere okay maybe there is an issue with the eyes so let's check nodes eyes is a group so we cannot pass a geometry for that case you can do be vine and just pass nodes eyes and it will be exactly the same yes but it will apply the material right away because this is like passing all the properties like uh in a row but that being said i always recommend to use the primitives so if you use the primitives and you pass the whole body this is gonna render uh everything for you okay um as well as with um like we can get the reference here and use the reference but since we already load the model we can use it here okay and one trick that you might want to do is that you want it to be able to cast shadows so there is a property not property no a method in the models that is called traverse and it's going to traverse all the children's like recursively so it's going to go to all of them and say hey if this is a mesh please cast a shadow okay so this is the same as we were doing before with the like the directional light and the mesh that we were putting the cast shadow is going to do exactly the same and now you can see that it's actually um rendering the shadow of the model itself so this was the final one how many of you managed to um reach to this point so how many of you have the the aqua render very good nice okay so i don't know how many of you have twitter but i would love if you can share a screenshot of this moment right here because uh congratulations you managed to load a model into a 3d scene on your view application and you should be proud of it so please share it on twitter i'm gonna retreat right tweet all of you okay um you can also put uh here press yes uh that this is the account for uh press yes and we are gonna retreat uh retweet it for you okay so six and a half nice now it comes to the the feral part which is questions so any questions any feedback um is now the time and every anything that you want to know about the library um or something that didn't work during the workshop and any questions that you might have okay so from mitch when will you not want to cast a shadow on a mesh so it depends on the kind of a scene that you want to do um so like if you want to create a really realistic one you probably want to cast shadows um so like if you want to create a really realistic one you probably want to cast shadows but um it depends really what what type of uh a scene do you want um also like what you could do is only casting the shadows on the ones that are visible by the camera and not by the rest of things like that what about animations it is possible in in press um so what do you mean about animations like model animations because we saw how to animate the cube and you can also use github to animate in the renderer but if you mean uh the the actually the model animation you can um let me go to the documentation so if you go to the cientos one and the cientos is cientos.tressyes.org this is the one for the cientos package the cientos package is the one that has several abstractions you will see that there is one called use animations so this is a composable that if you pass the animation object from the use gltf it will allow you to create uh it creates a mixer for you and you will be able to change the actions and i have a example in the playground which is this one so this is the use animation one uh i had to check why in the first load they're all blank so you can see that the model is animated right it's like uh saying hi i did this in okay okay this is what you mean right um i create this animation in in in blender and when you export the gltf it's going to export the bones and the animations in between so with that composable you can get the different actions and then you can use for example the controls to change the different animations here okay uh i hope that solves your your question if you have any any questions regarding the animations let me know okay um because it's not an easy topic okay what plans on future releases free or not expensive websites with 3d assets is this optimized for animation it is optimized for animations uh just like uh 3ds will be uh and like what you normally optimize to make animations is how you support the gltf so if you manage to so if you manage to export an optimized gltf and also something that i forgot to mention whenever you're using gltf here in the you can pass this uh this is the compressor we're using draco compressor so if you pass the the draco compression uh prop uh property of option it will compress the scene so it's more performant same for animations so um i mean it will be as i will show you a real example um like maybe this one this is animated so this is a gltf and i'm animating this with gzip like oh everything like the the plane and the clouds and the rotation of the planet itself but you could also do something like this um if you want something more optimized um this is like a particle system that i created to um resemble how the galaxy works so i'm gonna change the color to something brighter maybe so you can see it i don't know if it's really visible um maybe the account of particles or something like that so let me know if it's visible this is completely animated okay and then i'm animating the shaders on this so depends on what you want to achieve you can do it with shaders but it will be as performant as using plane 3ds what plans for the future releases okay so i'm going to show you uh here so we have a roadmap for it um we are now working on the nox module so you can already use nox with it you can import the component but we are going to create um we are gonna do a stream and daniel and myself uh daniel roe you know him from from nox and we are going to do one where we are going to build the actual module and the idea is that all the imports that you normally do with tres yes is out imported the same for the comp um composables and that as well you can pass an array of all the different packages that you want to install so the good thing about tres yes is that it's an ecosystem we have the core package but then we have several other packages we have the post-processing one that allows you to create effects as the same concept like compose components and composables we have the cientos one that you already saw we're gonna have a performance one to monitor performance and the tres leches one is one for uh controls it's gonna be like a panel that you can drag and drop and you can see the the different things um we're working on the post-processing one so we should release it at the end of july and then we are going to continue doing like presentational controls in cientos uh some abstraction for scrolling so you can create a scroll page and it will modify the scene with the scroll um the orbit controls we're going to enhance them some camera controls so this is similar of how video games controls work like a first person shooters uh people control this one is already done the contact shadow is a fake shadow that is way more performant is done with shaders keyboard controls and we want to translate the dogs so if you want to contribute uh feel free to contribute it's open source uh even if it's only helping in translating to a different language already a big thing uh so in this from july on we are gonna try to have the documentation for all the packages in several languages let me know if you want to contribute okay uh feel free and this is more or less like until november what we have planned but depending on the priorities like um there are four or five uh projects that are already using this in tres yes in production and depending on what what their needs are we're probably going to prioritize some things over on our okay but this doesn't end like how hard is to maintain tres yes are there required chains big when three years position are they that's the beauty um so i don't know if you remember a library called uh trois it was the first one trying to do a wrapper around three years for view the problem with that library is that it got unmaintainable because every time it was a manual wrapper so they created the view component for each one of the instance of tree okay for all the objects whenever it was an update they needed to update it manually um three gs it has the same approach as a thread for a spelt and react refiber for react it's a custom render so it uses the same render api as view but instead of dom elements it creates a scene object and whenever you install the core like when you do pnpm install tres yes core you also need to install the latest version of tree so it does that for you you can always have the latest version and it's going to work because it's only going to map whatever is inside of the three years map of course there are some breaking changes like for example before the release of the version two three years uh apply in the version 152 a breaking change on the color management so suddenly everyone that was using it it was broken like react refiber uh three yes and threadful were broken so i needed to update some things uh but it was easy it was like um i don't know two hours or something like that with the pr being processed and accepted and that's it sure if you want to know more like uh feel free to check the core and the centers i have to be honest like the core is quite complex because it's like really advanced view and advanced tree but i mean feel free like um especially for contributing cientos is cientos package is easier to contribute because it's our view components and composables um so let me know okay what else do we have any other questions because i think we can make it for today but uh yeah 10 minutes passed let me know like do you want to um do some more questions or you are ready for today okay i'm fine awesome no questions okay so um please share with me like any creation that you do from scratch i hope it was like um understandable uh please uh provide me feedback because this is the first official workshop that i'm doing about tres yes so let me know if the timing the topics the examples were helpful also the github repository if it was clear enough and the notion page please provide me all the feedback that you want and i really hope that you learned something new today to how to create the 3ds scenes and this is the first of many um things that you're going to build with tres yes so whenever you want we have also the discord channel for tres yes so if you have any questions you can go directly there um it is here in the um here in the in the dots you can go to the discord here and it's going to invite you to the discord channel okay so you can drop there and the community will help you we also have some showcases like for the community to show their scenes and so on okay so that being said thank you very much everyone that joined today and you're the first ones uh or having the workshops so really glad that you've been here today with me and happy coding