Author MastaMan
Updated on April 4, 2023

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

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.


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

In this case, the faces will be selected through one.

dot ring graphite tools

Then click on "Loop" again.

loop graphite tools

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

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

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

And the whole sofa began to look like in the screenshot below. About 15 thousand polygons.

sofa optimized

Table and chair

By the same principle, we optimize the table with a chair.

table before optimization

There were 43,000 polygons, now there are 1,400.

table after optimization


hood model

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


bed before optimizing

The original model is 1 million polygons. After removing some parts of the model and optimizing 14,000 polygons.

bed after optimiation

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.


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


This is how the second channel of the sofa model looks like.

sofa unwrap

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

For example, "Seams" pillows look like this.

pillow seams example

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

And with the final touch we make the packaging, in "Arrange Elements" click the icon shown in the screenshot.

pack custom

In the settings we change only Padding to "0.02" so that the elements are further away from each other.

pack unwrap settings

And so for each model.


bed unwrap


unwrap table


chair unwrap


wall unwrap


floor unwrap

Other models

The sweep principle for all models was the same. This process took me 2-3 days.


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.

No one has posted a comment yet
{{comment.lastname}} {{}} {{}}
Sponsored content