3D Modeling Tutorial: Making a Simple Chair - Part 2
/Greetings, fellow apprentices!
I'm back with part 2 of the Blender 3D "Chair" tutorial. Like Part 1, I will lie through my keyboard by saying this is a "brief step-by-step" tutorial. There is nothing brief about it, as it contains an in-depth walkthrough detailing the second process of developing our Chair: Texturing.
To be clear, I am creating this tutorial in a way that would have been helpful to me when I was starting out in Blender 3D. If any part of it is unclear to you, or if you have comments or suggestions to improve this process, please feel free to comment below! In the meantime, let's begin by re-opening your Chair.blend file (or whatever you named it).
Step 1. Right-click select each loose piece of the assembled chair. Legs, seat, back, and back spokes:
2. Press "Ctrl+J" to join all of the selected pieces into a single object. The "dark orange" outline around each individual piece will turn to "light orange" and the center-average origin point will realign itself seemingly randomly:
3. With the new single chair object still selected, go over to your "Tools" tab (if it is not open, press "T"), and select the "Set Origin" dropdown menu, and choose "Origin to 3D cursor". This will make the chair's origin point the center of the seat. This origin point translates into your final model in your post-Blender game engine:
4. Press "Ctrl+A" and select "Rotation and Scale". This applies new vertex co-ordinates to the entire object with respect to objective 3D space. This is particularly important for UV-unwrapping, as it lessens vertex warping during the process:
5. Press "Tab" to enter Edit mode:
6. Now here's where the fun begins. We are going to mark the "seams" of each individual mesh. These seams will be the locations on the meshes that "unwrap" onto a 2D plane which we will then draw our textures onto. It is important to get these seams clear and concise. Begin at one leg. Hold "Shift" and select all of the vertices on an entire side of that leg, as well as all of the vertices on the bottom pad, like so:
7. Holding "Shift" to add more selections, repeat this process with the other three legs:
8. In the "Shading/UVs" tab, click "Mark Seam":
9. The selected seams are now "Marked" in red:
10. Move your viewport up to the chair back, and press "Z" to enter Wireframe mode to make the hidden vertices visible. Select all of the vertices in a straight line from one end of the back to the other, like so:
11. Like you did with the legs, go to "Shading/UVs" and "Mark seam". Note how the selected edges are now red, like the marked seams on the legs:
12. Focus your attention to the spokes inside the chair back. Shift-Select two straight-line vertices in each of the 3 spokes:
13. Mark these seams and note the Red edges:
14. Now it's time to open the UV editor. Take note of the little gradient nub at the top-right of your viewport:
15. Left-Click grab it and drag it to the left of your screen. This will open a new viewport/window for you. When you drag it to the left, make sure to leave a little room so you can still see the whole chair in the original viewport:
16. Now click on the "Editor Type" button on the bottom-left of the NEW viewport and select "UV/Image Editor". This will change your duplicated 3D view of the Chair, into your 2D UV space:
17. Press "T" to close the side-bar, to give you more space in the left viewport:
18. Hover your mouse cursor over the left viewport and press "A" to select all of the vertices in the Chair object:
19. Press "U" and select "Unwrap" from the menu that appears. This will unwrap each of the selected meshes within the Chair and place them onto the 2D plane in the right viewport:
20. Press "T" to open the sidebar, and change the "Margin" count to "0.01". This will increase the space in between vertex points on the UV-map, which helps to eliminate color bleeding when your game engine reads it during run-time. I've made arrows pointing to the spaces this creates on the UV-map. Compare them to the previous image:
21. Now we're going to create an Ambient Occlusion texture to add shadows to the final texture map. In the right sidebar, select the "Render" tab. Further down this tab is a minimized "Bake" category. Maximize "Bake" and select "Ambient Occlusion" in the Bake Mode dropdown menu:
22. In the UV-map viewport, click "New" in the Image Selection header:
23. Make the name "Chair_AO", and adjust the Width and Height each to "512". This is going to be the name and the sizes of the Ambient Occlusion texture, respectively:
24. This will create a new image in the UV-map viewport, giving you a solid black background placed behind your selected unwrapped meshes. Once you see this, go to the "Bake" category in the right sidebar and click the "Bake" button:
25. This will procedurally generate a greyscale Ambient Occlusion texture in the UV-map viewport in real time. What this does is gather shadow data from the object based on overlapping meshes in the model as though it were sitting out in the open on a sunlit afternoon. It then translates that data onto the map:
26. Go down to "Image" and select "Save as Image":
27. Select your folder where you are saving your textures, make sure the name is "Chair_AO.png", and select "Save as Image":
28. Now click the "X" in the Image Selection header to remove the Ambient Occlusion data texture map. It's done it's job, and we're finished with it. Clicking "X" will return your viewport to the default UV map:
29. Now it's time to save the UV map as an actual image that we can manipulate in separate image software (in our case, it's GIMP). Click "UVs" and select "Export UV Layout" from the dropdown menu:
30. Make sure all of the data is identical to what I've marked in the arrows here, then click the "Export UV Layout" button to export it to the same folder where you've saved the Chair_AO.png :
31. Alright, now, open GIMP! When it opens, go to "File -> Open..." and select Chair_AO.png. When that is open, go to "File -> Open as Layers..." and select Chair_UV.png. This will give you two layers, like so:
32. With Chair_AO layer selected, go to Filters -> Blur -> Gaussian Blur and enter "15" for both Horizontal and Vertical parameters, then press "Ok":
33. Once Blurred, change Chair_AO's "Mode" from "Normal" to "Hard Light":
34. Create a New Layer and name it "Wood":
35. Change the Foreground Color to a Brownish hue (I selected HTML 8a5100). Once the foreground color is changed to brown, use the Bucket Fill tool to make the entire Wood layer that color:
36. Grab the "Fuzzy Select Tool", select the Chair_UV layer, and select all of the empty spaces surrounding the UV mesh outlines:
37. With the empty spaces still selected in the Chair_UV layer, go to "Select -> Shrink" and shrink the selection by 3 px:
38. Select the "Wood" layer and press Delete:
39. Make a New Layer, and name it "Wood Grain":
40. Go to "Filter -> Render -> Clouds -> Solid Noise" and enter "16" for the X Size, and "1.9" for the Y Size:
41. When you press "OK" it will give you the predicted Solid Noise in greyscale. We want to change it to a color, so change the background color from White to Black (as shown in the arrow), and then select "Colors -> Map -> Gradient Map":
42. Select the Chair_AO layer, select "Colors -> Curves", and adjust the Curve as shown by the arrow. This will darken the entire layer and eliminate a lot of that blurry white color:
43. Select the Wood Grain layer, select "Colors -> Curves" and adjust the curve as shown by the arrow. This will lighten the brown hues:
44. Select the Wood layer, select the "Select By Color" Tool, and select the empty space in the layer:
45. Select the Wood Grain layer, and press Delete. This will carve out the empty space, leaving only empty pixels:
46. Make a New Layer named "Seat", and drag the Chair_UV layer underneath it in the layer queue:
47. Select the Chair_UV layer. With the "Fuzzy Select" Tool, individually select all six faces inside of the seat mesh, as shown by the arrow:
48. Go to "Select -> Grow" and grow the selection by 2 px:
49. Select the "Seat" layer, select the Bucket Fill Tool, and change the Foreground Color to a vibrant purple:
50. Use the Bucket Fill Tool to fill the selection with the Foreground Color purple:
51. Go to "Select -> None" to deselect the space, then go to "Filters -> Blur -> Gaussian Blur" and enter "5" for both Horizontal and Vertical parameters:
52. Drag the "Chair_UV" layer to the bottom of the layer queue and make it invisible (un-check the Eye), then select the "Seat" layer and go to "Filters -> Artistic -> Clothify" and enter a Depth of 5 before pressing "OK":
53. Duplicate the "Seat" layer, name it "Seat Gold", then drag it just beneath "Seat" layer:
54. Render the "Seat" layer invisible. Then select "Seat Gold" layer and use the "Fuzzy Select" Tool to click in the center of the purple color and drag your mouse down until the entire purple mass is selected, including several invisible pixels surrounding it. Then delete the purple contents:
55. Select the "Bucket Fill" Tool and change the Foreground Color to a vibrant yellow. Fill the newly-empty space with yellow:
56. Deselect the space around the yellow fill, and go to "Filters -> Blur" and give the yellow a basic fuzzy blur effect to soften the transition between the cloth and the wood. Make the "Seat" layer visible again:
57. Now it's time to Export your NEW Chair_UV.png texture! Doing it this way rather than using "Export As..." will automatically overwrite your current Chair_UV.png file in your folder, so always use caution around this selection:
58. Back in Blender, grab the viewport nub in the top-right of the small chair viewport and drag it to the right until the grey arrow appears. When it does, release your mouse button and the viewport will collapse:
59. Select the "Materials" tab in the right sidebar, and increase the Intensity to "1.0":
60. Select the "Textures" tab, choose "Image or Movie" in the Type menu, and then choose "Open" under the Image selection. Select the "Chair_UV.png" file which you just exported from GIMP:
61. In the viewport select the point light, then select the "Lamp" tab in the sidebar and change it to "Sun":
62. Select the chair in the viewport, then select the "Textures" tab in the sidebar, and under the "Mapping" category select "UV" from the Coordinates dropdown menu:
63. In the "Viewport Shading" button, select "Material". In the "Tools" tab on the left sidebar, press the "Smooth" button to round off the faces of the chair:
64. Now go to "File -> Export -> Autodesk FBX (.fbx)", and adjust the parameters I've marked with arrows before finally exporting the chair object:
And there you have it! You now have a colorful, vibrant, and low-poly chair that is game-ready! How does it feel to have tackled your first piece of in-game furniture from scratch?
Please feel free to leave a comment telling me how you did! If you'd like, send me some screenshots of what you've accomplished! I'm also open to comments and suggestions concerning the flow of my tutorial process here, any process you'd like explained further, any models or textures you'd like to see in the future, and any and all problems that I've left unclear for you. Please leave me some feedback! Let's make this great together!
Until next time, I wish you all the best on your artistic adventures, and never stop learning!
~Anthony