English 
Introduction Part 3
This is Part 3 of a series of tutorials on creating an interactive SVOYA interior with WebGL/PlayCanvas.
For those who haven't read the previous parts, here's a demo video.
In this series of tutorials, we will make an interactive interior presentation that can be viewed in real time through a web browser.
Access to materials, such as: models in the "FBX" format, baked textures and more, you can get by subscribing to Patreon.
Patreon - 3DGROUNDModel optimization
We need to reduce the polygonal mesh of each model so that our final scene in Playcanvas is lightweight, loads quickly and does not sag "fps".
It is very undesirable to use the "Optimize" modifier, because after it artifacts remain in the form of black puffs in the places of model bends or the "Unwrap" scan is damaged.
The models have been chosen to have a square mesh and can be easily optimized by deleting the edges in a circle ("loops").
In the example above, a sofa is shown at 1.5 million polygons. This is excessive detail for the interactive, which we will not see. Such a sofa can easily be optimized to 15,000 polygons.
Sofa
There are various ways to optimize models. For example, one of them, select the edge in a circle "Loop" and in the panel "Graphite Tools" click on the button "Dot Ring".
In this case, the faces will be selected through one.
Then click on "Loop" again.
Now press Ctrl+Backspace to delete selected edges.
This operation can be done several times.
Another way to optimize is "Optimize" in "Graphite Tools".
Hold down Ctrl+Shift, and click on the "loop" face to delete. For the sofa cushion, with such a dense mesh, I just randomly click on different faces.
When there are fewer edges, I make more targeted clicks. With this method, it is important to watch that the unwrap and detailing do not "float" "unwrap".
After optimizing the pillow, it began to look like this.
And the whole sofa began to look like in the screenshot below. About 15 thousand polygons.
Table and chair
By the same principle, we optimize the table with a chair.
There were 43,000 polygons, now there are 1,400.
Hood
The model was made completely from scratch and has only 360 polygons.
Sofa
The original model is 1 million polygons. After removing some parts of the model and optimizing 14,000 polygons.
Other models
Some, simple models were created from scratch, and some were optimized by hand.
For each manual optimization, these two techniques were used. Yes, the work is laborious, but using the "Optimize" modifier is not an option at all.
Unwrap
Absolutely for all optimized models, Unwrap was applied. Correct unwrapping is necessary for high-quality texture baking.
The principle is simple. On channel 1 we leave the original scan, on channel 2 there will be a new one. The unwrap on channel 2 must completely fit into the "Edit UVWs" square. This channel is used for texture baking.
Sofa
This is how the second channel of the sofa model looks like.
I mainly used one method of fast scanning. Select the edges, usually on the edges. then press "Convert Edge Selection To Seams" button.
For example, "Seams" pillows look like this.
After assigning all "Seams", press "Quick Peel". Next, in "Edit UVWs", we rotate the unwrapped pieces so that they are plus or minus exactly.
And with the final touch we make the packaging, in "Arrange Elements" click the icon shown in the screenshot.
In the settings we change only Padding to "0.02" so that the elements are further away from each other.
And so for each model.
Sofa
Table
Chair
Walls
Floor
Other models
The sweep principle for all models was the same. This process took me 2-3 days.
Conclusion
The stages of optimization and deployment are the most critical and take most of the time. But this work must be done with high quality, the final result will depend on it.
In the next tutorial, we will bake textures.
Go To Lesson Interactive presentation of SVOYA interior (WebGL/PlayCanvas). Part 4.Go To Lesson Interactive presentation of SVOYA interior (WebGL/PlayCanvas). Part 2.
{{comment.text}}