Introduction 00:00

We created a scene that looks good when doing a render, but our final goal is to export it to Three.js.

We need to optimize it, but also to bake it. If you remember from the previous lesson, baking consists of saving the good-looking render result into a texture that we will then place on the geometry in Three.js. Because of that, we need to UV unwrap our scene.

Setup 00:39

You can start from the blender file you made in the previous lesson, or you can get the same file as is in that lesson by using the starter file.

Optimization 01:21

Removing hidden faces

The first thing we need to do is remove all the hidden faces. That would mean faces directly on the floor like the bottom of the trunks. And, it would also mean faces against other faces like the back of the stair steps.

In order to see the faces more clearly, we can switch between the Wireframe and the Solid shadings:

Trunks

We are going to start with the trunks.

You can deactivate the collections you are not working on at the moment by unchecking them in the Outliner:

To optimize the trunks and logs:

• Select all of them.
• Go into Edit Mode.
• Switch to the face selection.
• Select all the faces as shown below and delete them with X.

You should get something like this:

Fences

Repeat the process with the fences:

Pole lights

Repeat the process with the pole lights. You only need to do one of the pole lights because they are linked duplicates.

Don't forget to delete the bottom cap of the main beam and the caps of the rope:

Rocks

Repeat the process with the rocks:

Though it isn't mandatory, if some rocks are overflowing into the ground, you can fix that with the bissect tool we used in the previous lesson. Select all the faces in Edit Mode, press F3 and search for bissect. Then slice the overflowing parts of the rocks you want to cut out.

Portal

For the portal, most of the optimization concerns the stairs.

You can start by resizing them so that they don't overlap too much:

Then you can remove the bottom faces but also the hidden faces between the steps:

If you did the previous lessons exactly as I said, and you now try to remove the faces of the bricks inside the stairs, you will see that you can't do it without editing all the bricks at the same time because they are linked duplicates.

If you didn't use linked duplicates, you shouldn't have this problem, but we are going to make sure that none of the objects in the scene are linked duplicates anyway.

Unlink duplicates

We need to unlink the duplicates in order to fix the bricks, as well as for the next step, which will consist of unwrapping the geometries. If we were to keep the links, both pole lights would be unwrapped on the same coordinates. This would result in the baking being done twice in the same position of the texture.

To unlink the duplicates, go into Object Mode and select all objects with A. Even if we are only concerned with the portal bricks and the pole lights, the action we are taking can be applied to the whole scene without consequences.

While all the objects are selected, press F3 and search for make single. Then choose Make Single User > Object & Data:

All previously linked duplicates are now unlinked and we can edit the bricks that overlap the stairs without changing all the bricks.

Remove the faces of the bricks inside the stairs:

Check the whole scene and make sure that you are done with removing the hidden faces.

Forgetting some isn't a big issue and you can still remove them later. But once we start unwrapping the geometries, removing faces at that time might have some consequences.

Fixing faces orientation

One issue we can't see has to do with the orientation of faces. All faces have a front and a back. While this isn't a problem when doing a render, it might create bugs during the baking process and some of the faces might become black. Those faces won't even be rendered in Three.js because, by default, back sides are hidden.

As you might have guessed, this orientation is a matter of normals. When doing extrudes, insets, and other operations like that, we might have flipped the normals unintentionally.

First, we need a way to see the faces orientation. While in Object Mode, in the top right corner of the Blender Viewport 3D, click on the following icon:

On the menu which should open, check Face Orientation:

You should now see blue faces when the orientation is good and red faces when the orientation is wrong:

In this case only the pole lights are wrong, but you might have a very different result with your model.

If everything is already blue, congratulations, you can skip this step.

To fix the red faces:

• Select the object you want to fix.
• Go into Edit Mode.
• Select the faces you want to flip.
• Press F3, search for flip and choose Mesh > Normals > Flip.

Once the whole scene is blue, you can uncheck the Face Orientation and continue:

Normalize scales

Another problem is with scaling.

Some objects have been scaled in Edit Mode, meaning that we are scaling the geometry and not the object itself. Some other objects have been scaled in Object Mode, meaning that there is a transformation on the object but not on the geometry itself.

Again, while doing renders, it's not really important. But it might create issues when doing the UV unwrapping.

Later in the lesson, we are going to use automatic UV unwrapping and Blender will take into account the geometry size but not the object scale. This might result in some objects taking more space or not as much space as they should. For example, you might end up with the axe taking only half of the texture because the geometry is still huge even though we reduced the object scale.

To fix that, we need to normalize all the scales.

In Object Mode, select all the objects with A , press CTRL + A to open the Apply menu and choose Scale:

You can't see a difference, but all of the object scales have been applied to their geometries instead. This way, all our objects now have a scale of 1.

We are done with the optimization and we can start to UV unwrap our scene.

Don't forget to save.