Interactive presentation of SVOYA interior (WebGL/PlayCanvas). Part 3.


Author MastaMan
Updated on November 7, 2022

Index

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 - 3DGROUND

Model 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").
model hi poly wire
Loading...
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".
select loop on model
Loading...
In this case, the faces will be selected through one.
dot ring graphite tools
Loading...
Then click on "Loop" again.
loop graphite tools
Loading...
Now press Ctrl+Backspace to delete selected edges.

This operation can be done several times.

Another way to optimize is "Optimize" in "Graphite Tools".
free form optimize graphite tools
Loading...
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.
graphite tools optimize click shift ctrl
Loading...
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.
pillow optimized
Loading...
And the whole sofa began to look like in the screenshot below. About 15 thousand polygons.
sofa optimized
Loading...

Table and chair

By the same principle, we optimize the table with a chair.
table before optimization
Loading...
There were 43,000 polygons, now there are 1,400.
table after optimization
Loading...

Hood

hood model
Loading...
The model was made completely from scratch and has only 360 polygons.

Sofa

bed before optimizing
Loading...
The original model is 1 million polygons. After removing some parts of the model and optimizing 14,000 polygons.
bed after optimiation
Loading...

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.
apply unwrap
Loading...

Sofa

This is how the second channel of the sofa model looks like.
sofa unwrap
Loading...
I mainly used one method of fast scanning. Select the edges, usually on the edges. then press "Convert Edge Selection To Seams" button.
convert edges to seams
Loading...
For example, "Seams" pillows look like this.
pillow seams example
Loading...
After assigning all "Seams", press "Quick Peel". Next, in "Edit UVWs", we rotate the unwrapped pieces so that they are plus or minus exactly.
quick peel
Loading...
And with the final touch we make the packaging, in "Arrange Elements" click the icon shown in the screenshot.
pack custom
Loading...
In the settings we change only Padding to "0.02" so that the elements are further away from each other.
pack unwrap settings
Loading...
And so for each model.

Sofa

bed unwrap
Loading...

Table

unwrap table
Loading...

Chair

chair unwrap
Loading...

Walls

wall unwrap
Loading...

Floor

floor unwrap
Loading...

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.


{{commentsMsg}}
  

No one has posted a comment yet
{{comment.lastname}} {{comment.name}} {{comment.date}}
{{comment.text}}


SUBSCRIBE TO OUR NEWSLETTER

{{subscribeMsg}}