Build a 3D Portfolio with React Three Fiber - Blender Baking

how to build a professional looking portfolio with the reactory fiber part 2. hi welcome to this new tutorial the final goal of the entire tutorial series is to create a great looking portfolio so today we are going to learn how to create and bake a beautiful scene with blender and how to use it in our react re fiber project I suggest watching the video Once to grasp the concept before following along with me quick parenthesis if you are just starting with blender it can be overwhelming because it contains a lot of features yet what I'm going to show you just require at the very basic so that you can get from the famous Donuts tutorial this is at the final scene that we will create together let's switch to rendered you have a way better looking effect because it's using a raycasting to do this you have nice lighting effects and shadows effects and in the second time I will teach you how to save it into one texture it's called baking and how to use it into our reactory fiber project we will be using this blender file as a reference to do the baking process but first let me show you from scratch how I ended up with this scene so the first thing I do is I remove everything then I will want to create the room with the wall and the the window for the room I follow the tutorial named room blender tutorial I will share with you the link in the description but let me show you how to do it quickly we start by doing shift a we add a mesh a plane then we go into edit mode I go on top you can see in the shortcut on the bottom left to know what I'm doing so I scale it up this will be on the room then I will try to grow two walls so I switch to a edge selection you can also type one two three to do it so I take those two edges I extrude it hit C to extrude it on the z-axis and once I'm fine I click so I have my walls and the floor so then I go to face selection I take the bottom the left and this wall hits space to open this dialog and say extrude faces along normal and there are shortcuts but I don't know them and this tool is quite helpful so I can extrude it if I press s it's a even thickness is on so I when I'm fine I click and now I have some depth for on the floor and the wall now what we will want to do is to have a window here so let's switch to object mode we will add a cube and Kayla and position it to be the window so hit G X okay okay so now we have this Cube that we will use to break our wall to have our window we go on the plane and add a Boolean modifier and we select the object that in Impact this one so it's this Cube you need to check that you are on difference and if we hide the cube now we can see we have a hole in our wall but let's say you want a more difficult shape you can put it back go to the cube add a modifier maybe add an array let's say on the wall oh it says z-axis okay we will add some space between them but just a little bit okay now we will want to scale it down maybe you want to scale it on the y-axis put it a bit down and if we hide it we have a window shape once you are fine with your window shape what you can do is go to your plane apply the Boolean modifier so now if we go to the edit mode our object is now like this we can't go back to the original form and we can delete our Cube the model that I use are coming from polypiza it has a lot of free assets look for everything and maybe you have a free version of it once you have done it some you can do file import and gltf if it's under format you have then select your model for example the pantry and what you can have is if it's way too big you will need to scale it down okay so scale it down position it like rotate on the z-axis put it wherever you want for positioning I recommend you to switch in the camera position you put it on the right we can see therefore it's a bit difficult but okay here maybe on the front you will want it to be here and we have an issue here okay so this is how I position all my models this model is quite simple it only has palm tree and they mesh directly but some other models comes a bit differently if you go to file Imports and you look for example to plant white pots and here you can see a lot of group so you don't want to have this huge object what you can do is you select all of them by default it's selected when you open it hit command or Ctrl p object keep transform and now you have one group containing all your meshes then you can just select the parent scale it and the children will be scaled the same way you can even go further by selecting everything and do join it will join all the meshes into one object and here you have it I recommend you to do it on objects because later it will be easier let's see what is a rendering by default we Have No Light No Shadow so let's add some light to have a better effect so shift a um yeah shift a add light let's add ascend okay we need to be in rendered but by default it's Cycles uh it's EV okay so here you can see we have basic Shadow we have the sand it's not very bright let's rotate the Sun we can go to the bulb here and increase the send power okay nice here is the same kind of rendering you will have using a 3js with manual lights and applying Shadows but with blender we can use another render engine which is called cycles and it's using raycasting so by default you can see it's very pixelated but if you wait a bit it will send more rays and the quality will improve and now when you look it's way more realistic because of the lighting effect is calculated the real way but just for positioning our items and setup the the textures I recommend you to stay in EV mode for the moment let's use PBR texture for the floor and the walls so if you go to polyhaven.com you can see a lot of PBR texture what it is is it contains the color but it also contain other files to explain how the color color reflects on it but the downside of it is if you download it you can see it's like 100 megabytes so it's fine to use in blender for you but we can't use it in a real project on a website so once you've downloaded the texture that you want go to your object go to shading switch to edit mode and we will create texture for our wall and the floor for example we would do only on the top floor we'll go to the material of the plane and hit new here it is the Shader we have by default it's principled bsdf you can change the color okay but what we want to do is to use our texture so you click on principle psdf and then you will need a plugin this plugin to be able to import our PBR texture easily is called node Wrangler so go to edit preferences go to add-ons and search for node Wrangler then you just have to click and you will have it installed now the shortcut to open node Wrangler don't forget to click here is Ctrl shift t on Mac I don't know on Windows but I guess it's the same then go to the folder containing all the files select everything and hit principle texture set and now you can see we have our PBR texture applied it's applied on everything because we only have one material on this object maybe we should start by fixing it let's create a second material let's call it a new default select everything assign it and just here we will assign this floor material let's rename it okay so now you can see it did the texturing everything by itself it's smart enough if we go back to layout now if we are in EV rendering the result is quite nice you can see lighting effects but if you want to see the whole potential of it just keep it into rendered and Cycles now when we look at the floor it has a realistic effect that look gorgeous and that we will be able to use later in our project okay that's almost everything I did to create this scene so let's switch to the final scene of course I will provide you with this blender file but you can of course build whatever you want by following the technique we will learn together the first thing to do is to do file save us and do a copy of this base scene so I renamed it into baked vinyl so now we'll try to understand the concept of baking so on the top left corner we can drag another window because I'm zoomed in I don't have a lot of space here we can go to image editor and let's talk a bit about what is baking we are going to create an image we can name it bake it or light map whatever you want and we would create a big texture image and inside we will put all the colors and shadows that our scene contains so you can use different sizes based on your project and how many in total you will have in your project for just this scene the whole scene we will use one so let's do 4096 and we need it to be a square so we'll do it on both sides so you can use 1024 2048 but not everything you need to keep uh those sizes we don't need Alpha because it's not transparent we need a 32-bit float for more precision and hit OK what we did here is just create an image so using the mouse wheel we can zoom out and now we have our texture now what we will need to do is to go on each single object edit the UV it's what telling it where to put it on the texture and then to bake the lighting into that texture but don't worry you will understand by doing it let's start simply by doing it on the Shelf here so we select the Shelf we go into edit mode okay or maybe we need first to go to UV editing here we have our Shelf and it's by default it has a UV set but because we are just using default material without texture the UV isn't important but now it will be important because we won't use the default material but we will use the one from the texture that we will create later so the first thing we can do is to do U and and Rob here it will generate the UV for this object automatically then we will need to update our material to bake it into the texture by following those UVS so go to shading four simple one like this it's very easy what we need to do is to add an image texture shift a to add image texture then we select the new image that we created so it's named baked color space switch to srgb and that's all we need to have it separated in just to say where we want it to be baked so now you can do control or command C to copy it because we will use it on a lot of objects if we go to our material for this object you can see it has two colors so we'll do it on the second material hit command V and we have also our image texture here okay so now it's ready to bake we can go here we will need to switch to Cycles it's it's not the case but it was already good for me then you have the sampling viewport settings viewport is what you have here so currently if I switch to rendered here it's doing a 256 sampling but while I'm baking I don't want to use my processor performance I can switch to one the quality will be decrease but that's fine and if we go to the render here we have a Max samples of 4000 which is way too big maybe we can switch to 100 28 for the moment we can turn off the noise so it doesn't choose a lot of processing then scroll down and you can see bake here you have different settings we want to bake everything into the texture so don't bother yourself with it the output is an image texture clear image we don't have anything yet we can just keep it for the moment and once you're fine you hit bake to follow the progression of the baking you can see on the bottom here the percentage it's a very slow because of the resolution and the big texture we have well maybe it's way too soft so let me reduce the size of what we will bake or even by stopping it it rendered something so it's fine now let's switch to material preview here it is as it was before it's unaffected and it's working fine here on the left we have our texture baked but this big texture we made was for all objects and currently we put just a small object into the whole texture so we need to fix it later when we will do every object the third thing to do is to save the image because it's what will be used so you can hit save save it into as a jpeg RGB quality if you can keep 90 which will be fine keep the same color space and save as image later we need to save it next to our gltf scene that we will generate but we'll do it just after let's go back to shading for this object and here we have this texture that is using the image we created let's connect it to the base color and if we go to material preview here you can see even if we don't have real-time Shadows we are not in Cycles we have this nice looking effects with the shadows and the Sun and every effects the quality is not the best because I stopped it while it rendered but yet we have this quality without using any GPU or CPU consumption but we don't want to connect everything in blender we will connect it only later in 3G so we can disconnect it we will use this image here just for the baking inside blender we have done it just for one object but first let's see how to export our scene and to use that texture into our 3js project as we don't have a project yet go to my GitHub and take the starter pack Repository copy the path go to a terminal git clone the path and the folder I want it to be in it's optional but I want to name it portfolio baking let's start by checking is if everything is good yarn yarn Dev we have the cube everything is fine let's create a folder here in public folder models and in blender let's export our scene into this folder the file export jlb gltf go to your project folder so portfolio baking public models and use the name you want scene Dot I won't use glb let's say I want just gltf just for the fun include I will include everything transform okay geometry okay I will use the compression to make it a lighter and Export gltf but look here it's 235 megabytes why it's because in blender we have the floor and the wall that are using the huge texture we saw before and it was included is in my gltf it's not what we want so let's export it again export jtf what is good is as as long as you don't close blender it will keep the last setting so it's fine but when you restart you have to to put the settings again so we can keep gltf embed or we could use separate for the texture but it's fine but what we will do is go to Geometry material and for images we will set to known because we will manually save our image to a file and we just want the grtf and we will plug them using our code now okay keep compression hit export first it was very fast compared to before now it's only 500 kilobytes still it can be improved but it's a very lightweight okay let's create our scene component in react use npx gltf jsx public models and our file send Don gltf we generated this JS file you know I never keep it okay I create a new component let's name it office maybe I could have named everything of it would have been better I okay now in my office I rename it to office iFix other path so it's model and down it's also models fine in the experience instead of our Cube we will use Office here okay save and let's see what it is yarn Dev if we have a look at it we can see it but it has a lighting issue we can fix it by simply adding an ambient light with an intensity of one I'm also not a big fan of the camera position let's fix it I will put zero two five remove the fov here is what we have loaded we have no lighting effects because we didn't choose our baked texture the Shelf also doesn't have that texture so let's use it in blender now we have our folder we need to have that texture we can go image save us and we will need to save it in our project we can create a new folder name it textures name it baked okay and same settings let's load our texture in our office so go on the top of it here here we will do con texture equal use texture from react 3 dry it's a hook that I provide okay but the path copilot choose this round it's baked and save it now we have the texture now we'll need a material to use it so we'll need three and we will create a texture material it's equal to three dot mesh tender the material and we will map the texture fine but now I need to replace the material for the Shelf and I have no ID which mesh it is the solution for it is when I use gltf j6 I can use a special parameter it's Dash K what it does is it keep the name so the mesh name I have in blender so I can understand what is everything so let's get back the group copy everything go back to our office and copy paste everything now we have the the name we can search for shelf We Know It This one and for the material we will replace it with texture material and same here and it doesn't work because oh I made a mistake in the mesh standard material I forgot to say new now if we go to our object we can see that the texture is loaded on the Shelf but we have some issues because it doesn't look like what we had in blender what we need to do to make it work with 3js is flip y equal to false if we go back to our scene we can see that the texture is correctly applied it's fine but the color seems a bit washed so we can still do something for this we can use texture dot encoding and use a 3 dot srgb encoding to tell how our texture is baked now the color really corresponds to what we had in blender okay so what we know is it works for the Shelf but we want to do it for every object we need to replace here the material for every object it's a bit boring but if you use Visual Studio code you can use regex here so we will use this regex chargpt wrote it for me so it's material equal to anything hit here to apply regex and replace it with material equal and its texture material then maybe that and apply all but I like to push enter a lot of time once it's good save it and look what we have we have the texture applied to every object but it's not correct because we didn't set up our object to handle this texture but we now just have to work on blender and the gltf and textures go back to blender go to shading and here we have access to all the different materials in this project I trimmed it so it should be quite fun fine go to the first one I don't know what it is command V and paste the image texture and do it for every material or if you don't want to go from this list you can also go on each object like we did before like for example salamesh I don't know the English name go to material here you can see it contains a lot of material just for this object and go uh command V just don't forget any material so we can bake it for the entire project now you can switch to the glass it's a more complicated material but still we just need to bake it into an image so it's fine here and here fine I will go through all objects so here it has only one color it doesn't contain sub meshes we go to the disk same it contains only one but I think here we have sub objects for the mesh so maybe we can fix it we can go on the desk select everything and hit join and now we have access to all the materials here it will be easier okay go to each color house plant it's in this spot here open it's only one mesh so it's fine go to each color apply go to the Mac same only one mesh each material we paste it okay and later maybe on the screen material which is this gray one we will apply something visual but later in the project go to the keyboard here we have like every key is a group so we don't want it will merge all the meshes it join fine we go to this material texture same and same the lava lamp we already did it the palm tree okay here it has this one oh we got it before from the first one okay okay the plant it the one we saw so it has a lot of sub meshes we can join it now we have all the colors in the material lists we go to each and we paste it's a bit long and we don't have many many objects so it's fine but you see how long it can be for the Pokemon maybe it's easier if we join two so let's do it and here it was not good and the rest is done okay fine now the Shelf it's already done because we started by this and the right you can see I used a custom Shader if I just import it in blend in 3js it doesn't work because it can't handle custom shaders with color ramp from blender but because we will bake it we will have these colors directly inside our project and even here it's more complex we just need to have this to bake the texture on the side fine then we have the Stitch but because it's using um an image texture we won't touch it yet so maybe we will just hide it and we will also prevent the selection from this toggle we don't want to select it and we also don't want to select the lights and we have the chair which is separated so let's get back our shirt to the items here and we need to add the texture fine and fine does it have children no it's fine now we have all our objects set up correctly just uh the the wall and the floor but we will do it later go to uh UV editing we'll zoom out a bit now what we need to do is to select all objects I need to go to object mode before select everything so you can see it's only selecting this because I prevented the selection of the plane and the lighting so I'm on all my objects here I can switch to edit mode I select everything and we can't bake it now because all textures are fighting with each other now we have everything what we can do is hit U to unwrap but we can't just use unwrap the default mode because it's not the most optimized way to do it there are different options the simplest one is to use a light map pack you you just Define the the dimension of your light map as it's 4096. you select the margin is in the space between the region say okay so here is what it generated so it's difficult to know what it is but what we can do is switch to just one object go to edit mode and here if we select you can see it puts some of the UV here some of the UV here some of the UV here okay so this process is an automatic process it's not the best but it's the fastest it's the first one you want to try because maybe the UV will be done correctly and you have enough space on your texture and it will work fine out of the box and you won't spend a lot of time to do it so let's try to bake all those objects into our texture go to bake we want to be in Cycles unless we won't have the bake option Max samples we will do something very stupid like 10. the quality will be bad but it will be fast we just to check that we are going in the right way once you've done it go to bake and hit bake and I can directly see that I have an issue with uh the rug so I will fix it I will fix it first so go to object mod shading go to the rug and I don't understand why it said uh it couldn't bake into it here it's what it generated automatically you can see that this portion is completely black and we have other items very small so there is an issue with our UV the first one we can have is based on the scaling of our objects it looks like we have some issue first with our UV because it bake it something by default with a very small one and it looks like we have something very big here that took almost everything so let's have a look at what it is what we can do is Select everything go back to shading UV editing sorry Zoom here and we can click here to go from this side to detect what object it is so what is and the this this is the palm tree it's taking like as many as much space as all the other objects and this is a common mistake you might do is when we scale object directly in object mode so if you look you are in object mode you go to your items what you want then is if you go to item here and transform you want the scale to be one so all objects are in the same space dimensions so we can take all our object go to object apply and scale fine and you can save we will also need to check for the plane if it's correct so can I select it here in this case is fine okay so we can get rid of it and we will need to unwrap it again let's select everything again go to UV zoom out this can take it back you and a light map pack now it should be a bit better okay so here we have a new light map it seems that some objects are fighting each other but oh no my plane was selected so I will just cancel and do it again okay so I need to deselect it and select our objects okay you and light map pack okay so here is in the light map we have if we go here this is the rug it takes a lot of space but it's coherent with what we see here if we check it it's in the palm tree the Shelf okay fine let's try to bake it and see what it looks like go back to layout we still are on other all our objects we need clear image to start from scratch and hit bake it's going pretty fast because I put a Max samples only of 10. and here you can see we have some lighting effects on some items it seems it's not working on everything sorry I found the issue on the rug it's just to click on the image texture unless without it it doesn't know what texture to use for the baking once you're fine you can hit bake but because I have clear image it canceled everything we can uncheck this and go for example on the palm tree and try to bake it to see if we have the same lighting effect where it's very dark it seems to work pretty well so let's select everything maybe not everything we will remove the rag and the palm tree okay and hit bake it finished baking it looks like a nice light mop but with everything is mixed based on the size of the things so if we need to do adjustments it won't be very good but let's first look at what it looks like as usual we save the texture but if you look at what it looks like now in the project it's wrong why because we edited the UV for every object and we didn't export again our jtf so we need to do it first as simple as always file export gltf export you should have the same settings but now I have another issue because I change some geometry when I did some join and stuff so I need to regenerate the gltf but you don't have to do it every time if you only change the UV it's fine you just have to generate and it will work automatically so the traditional npx gltf jsx we go to our scene we take the whole group copy then we take the whole group pastes and we keep our hole replace and apply everywhere now we can see we only have 40 instead of 140 because of the join okay we can save and reload here is what we have you just have to focus on the objects because the walls and the floor are screwed up we didn't apply the correct texture to them but look at the palm tree it's quite accurate and nice the rag on the floor too but we don't have good noise we will do it later and we put a below resolution so the result isn't perfect but it's starting to look nice okay so D4 doing a proper UV unwrapping for all objects we will apply the texture on of the walls and the floor why did I decide to do the walls and the floor separately is because they already have a texture if we go to object mods select it if I can select it now I can object mode okay I will hide it go to edit mode shading here I'm not on the plane oh I'm on the glass I need to go to the correct material it's here I go to the floor here we have the texture and those textures require a UV map to be correctly set if I add the texture for the like the others it's fine but I need to have another set of UV if I go here UV editing material preview here okay here is the UV for the floor I need to have this with the correct texture so if I switch the image shown I will say dark within playing so I need to take this base on this texture for the rendering in blender but for the baking I need another UV map that will share space with the other items to do it it's pretty simple you go here to this uh button it's called object data properties open UV Maps and let's say the first one will be the baked one it's very important that you set the first one because the first one will be used by default by 3js and you want the baked one to be used in three Js in blender it's easy to switch in code it's less easy to switch and we add another one we will call it for the plane let's say I would would UV okay so now in our shading well I don't have a lot of space but okay I can toggle here but you can also toggle it uh in this view normally I'm on wood UV it's fine but I want to go to baked and in baked I can unwrap it and move it it's fine I can do whatever I want now from this one but when you are in Wood you you don't want to touch it anymore it's already correct but for the bake now we can integrate it to how the whole light map and if we check for for example the walls on the wood UV well it shouldn't be would you be like PBR you because it's the whole object that share the UV it's fine and now unbaked we want to stay on bake to do the unwrap and stuff so be sure this line is white highlighted don't touch any more to PBR UV and we can move it it's it has no importance we still need one last step we go to shading on our materials what we will do for example on the wall we need our image texture I will Zoom a bit more and we will need to say which UV map it's used because it has many so it doesn't know which one to use shift a UV map and you select baked you connect UV to vector okay so for the baking it's fine you can click here but for the mapping of the PBR texture what you will do is you delete a texture coordinates you add another UV map you drag and drop it inside the Box now you can move it you select pbruv and to connect the vector here so you see it doesn't change anything but we will be able to do the baking with a different UV map now we just need to reproduce it for the floor so texture coordinate we remove it we add UV map into mapping connect UV to vector and PBR UV here on the baked shift a UV map connect and use the baked one just have a look if here we change to baked because we moved it you can see the floor here is incorrect while with this UV it's it's correct nice now you can click here so it knows it's baking here um the white we don't need to change it or maybe we will also add the image because we want to bake the wall even if it's no color the wall is fine and the glass we also need to bake the glass so add an image texture baked and it's fine now we could select all our objects go to UV editing and do for example light map pack but the problem we have is the the sizing of elements is not perfect the the wall and the floor are taking too much space and the other items are not the best way to interrupt so we can still optimize it and fine tune it a lot first we don't want to preview it on the wood but on the texture okay now we will go on each item but before I need to fix something that we haven't seen yet we go to rendered and if we switch to um EV you can see it's pretty dark while on the wall it's pretty luminous this is because here the glasses are taking all the lights so if we remove it you can see it's way brighter this is because of one thing we need to check some things before we need to check the normals before baking it correctly so we need to do face orientation and look at everything if it's blue it's fine if not it's uh to what the opposite but I think the glass is the opposite yeah so here I select other faces Face bar flip and now it's blue so it's in the correct sense I can remove the face orientation look at the material that's rendered and now it seems It's better let's unwrap each object individually for example the plate we go to edit mode select everything hit U and wrap you can see the unwrap by default is bad everything is fighting each other we can use different way to interrupt an object we can use Smart UV project it should use the best way you'd find to unwrap it so if we use it it's it's not perfect but we have another issue is because we have big faces but some faces are will never be visible in my 3D scene for example below the floor it won't be used below the wall it's very huge but it's useless to have it so let's delete unused faces go to edit mode select this face this face this this X and delete faces now we have less faces still we have the same result but if we unwrap we have a better unwrapping even if it's not perfect you can try smart UV projects okay by the way let's remove the baked one for now and look it like this okay so we have this this is not perfect we can try other way light map pack seems it's the best we can have but you need to see if the texture is stretched or not to check if it's fine go here and display stretch so the best is when everything is in the same blue the more it goes to Green the more it stretches but let's say it's fine for now so what we'll do is Select everything reduce the size place it somewhere because in the end we will play Lego and assemble all our UV into the big texture okay so now next object we'll do the same for everything the chair edit mode select everything you interrupt by default we have this it's not the best um by default the the best and wrap you can make is by adding Sims you select faces and you say where the texture is able to cut so you mark Sim and stuff but it's complicated and I recommend you to watch tutorial to learn how to do it for now we will just use default tutorials too default ways to do it a smart TV projects is the best we skate it down and place it anywhere next object in the mouse edit mode and wrap by default it's fine let's compare with smart UV project no light map pack it's a bit stretched but let's keep it because it's a square so it will be easier to to position it later and it's a very small object the desk okay edit mode enter up here the unwrap is a bit complicated maybe we need to remove all the faces from below too for this one what we can do is hit spacebar toggle local view so we only see this hit l so we take all the relating mesh X delete faces and now we don't have below the desk because it's useless toggle it's fine now we select everything and wrap again it's a bit better but maybe we have a better widget with the other okay not bad and light map pack it seems to be a bit stretch but okay uh smart UV project maybe is the best we will see later we can adjust it later it's the good thing to separate items now the house plants and wrap same go for here we can go to Togo local View below it's useless delete faces okay toggle again and wrap it's fine but maybe we have better results and this looks nice scale it down move it anywhere next item iMac it's here edit mode a and wrap okay okay it's a lot of stretches I'm not sure what we will have in the end but uh maybe Smart TV project will be better for this one okay object keyboard edit unwrap let's find out of the box scale it down here lava lamp unwrap maybe it's better skate it down here palm tree it's a bigger one and wrap looks nice it has a lot of stretch so let's keep the inner up in bottom left okay the plant edit mode and wrap seems to work well okay I will select all objects edit mode to check if I put objects one on top of the other okay I still have space on the left okay so Sarah mesh edit mode and wrap looks fine can put it on the left the Shelf and wrap same on the left and the Reg hmm okay here and wrap okay doesn't know how to do the interrupt so with smart UV it will know okay fine and now everything is interrupt you can go to object mode select everything edit we have all our items we will need to place them inside this box our texture of 4000 and see if it works here I don't know what object it is that I have fighting objects so if I take this and this is the plant this is the desk okay so I need to move the plant a bit so I'll go object mode the plant edit mode I remove it here edit mode okay so now oh what is this item is from the Shelf okay so we need to go back to the Shelf edit mode why is it like this okay and wrap scale it down put it maybe on top object mode select everything edit mode and we have all our objects we just need to position it everything to our texture maybe let's start with the bigger one so you have this button here to to show what you have from here or what you have from the texture it will be highlighted on the right part so this one is the Pokemon so we can make it very small here we have the rug it's it should be big so we can keep it big let's put it on the bottom left here what is it it's the plant we can have it small okay we will adjust later here it's in the palm tree we want it to be big the lava lamp it can be small the keyboard it can be small too what is this the screen okay here we have the desk it needs to be quite nice the mouse it doesn't need to be big so here we have space for it here is our wall and the floor so we we need to have a a lot of space on the texture to have the best quality we can and here is the chair we still have some space so let's take it okay now we can expand some items you can also I I'm moving it but you can rotate it if you need because it has no importance it will be based on what we will bake into it so really just position its items have the best space optimization you can and apply it okay I will make it bigger this a bit bigger the palm tree two we'll see we'll see for now what it looks like and then we will adjust later okay so now let's go to layout select everything go to render engine Cycles and let's try to bake or maybe I will cancel and I will clear the image it's not important because we print over it but you just to have a clear overview of what we are doing and now bake here is what it generated on the left it looks like more easy to understand here we have the floor the wall here the orange stuff is our Pokemon the rug uh the plan the palm tree so it looks nice from here let's look in uh 3js what it looks like as always image save and file export gltf export we just need this it's because we change the UV from our object but we didn't change the geometry so now it should work and it looks pretty nice we have an issue with the glass but here it will be a 3.js issue because we created a material without transparency while the glass had the transparency we have the plants all black which is a problem and also on the Shelf so we will just focus on those two objects then the noise will be fixed with the denoser from blender okay so what's the problem with our two items go back to UV editing material preview will be easier go to object mode the Shelf edit mode select everything and of course I forgot here the UV so we'll need to bring it okay and here is it the same problem yes okay so it's an easy problem we need to go back to object mode select everything edit mode select and we need to find some space for here our plant I already a nice spot here okay I can make it quite big and same for the Shelf okay I always work and zoomed but I should Zoom if I scale it as big as I can yeah you can see it's stretched so maybe make it a bit bigger fine okay let's switch to object mods and let's try to bake it to see what we have so far go today out and the camera up bake while it's baking let's not be a lazy let's create a second material texture glass material which will be the same using the same texture because we are fine with it but we want it to be transparent and the opacity are of 42 0.42 should be fine we need to find the glass and we didn't have a mesh named glass but we know it's related to the plane so it's this mesh and I know it's the last one normally so let's try it texture glass material and now you can see it's a bit better but we don't have a background so it's not the best but here it's a bit transparent and it looks like a glass okay back to blender seems that the baking is done because we're doing it with a low sample so it's quite fast especially with my M1 image save did we touch the UV yes so we need to export it gltf export reload and Tada we have this scene looking quite nice we'll need to to bake it at a higher resolution but we only want to do it once we are happy with the result like we know it will be fine so it looks quite nice oh the chair is over at the floor but we can fix it later okay nice nice I think we can bake it for the final bake what we will do is go to render the render section not the viewport one Max samples we can increase it to two hundred fifty six and hit the noise it will be way slower so grab a coffee have fun and once you're fine with it bake the baking is finally over it looks quite nice from here look at the the details into the texture we have the Shadows all the details let's look if it looks as nice in our project image save I don't remember if we change the UV I think no but let's export it and now look the difference of quality we have here we have a small issue with the chair that we can fix later okay I will show you how to fix it but now the rendering quality is very nice okay let's fix that chair it's a trial and error process but we are lucky look at our object go to the chair go to UV editing I don't remember what kind of UV we made here for the chair so uh it looks like we used unwrap it didn't work well I don't know maybe a light map pack will be better we can try it and see which will be still faster now go back to all object into object mode select all objects and we will only move the chair will make it bigger because we have space put it here and hope it fix the issue okay now we want to bake only the chair so in object mode go to only the chair here you don't want to clear the image or you will clear the rest of the texture and hit bake you can go to layout to see it happen okay it's done here it looks nice but I hope it works oh I also save it this time we change the UV so we definitely need to export and it's worse I don't know why so let's try another method okay go to the chair again edit mode and let's look at the mesh it looks like it's already screwed here so maybe delete the face oh it looks like it has uh useless faces I don't know why but it has and okay where do we have the issue to oh at a lot of places so the model is isn't perfect so maybe we should adjust it or change the chair still let's try to remove faces and see if there are useless faces no so I was lucky only the first one had the issue no no okay uh weird but okay here those faces I know my character won't sit on it so I can remove it it's not important um below the chair too so it's taking space for nothing okay here it's the same I think yeah okay let's try unwrapping it now uh uh okay I'm not in UV editing let's do smart UV okay and wrap maybe it's better let's try it it's movie here we know it's the share space and let's make a game we are on the chair hit bake bake it on this is my last try so be prepared save export save reload and it's not perfect but it's better we don't have the jump effect and here we have the whole okay but from from a distance it looks nice so I will stick with it that thing I want to do is to remove the gray background and then find a nice gradient on grabient apply it in the CSS and enjoy [Music] thank you for watching I hope you enjoyed this long baking tutorial please hit the like button if you find Value in my content it really helped the channel gains visibility and grows don't forget to subscribe if you don't want to miss the next part of the portfolio tutorial coming each Friday and if you want to continue learning react refiber you can jump to the next video available here

Channel: Wawa Sensei

Views: 29,465

Keywords: threejs, three js tutorial, threejs tutorial, react three fiber, react three fiber tutorial, three js journey, three js react, r3f tutorial, three js, three.js, pmndrs drei, threejs animations, pmndrs, threejs portfolio, three js portfolio tutorial, react three fiber portfolio tutorial, David Heckhoff portfolio, webgl tutorial, react, threejs texture baking, blender baking texture, r3f texture baking, r3f texture, threejs realistic rendering, r3f realistic rendering

Id: YkHqpqJgLKw

Length: 69min 43sec (4183 seconds)

Published: Fri Jun 02 2023