This is Part 1 of a series of tutorials on creating an interactive SVOYA interior with WebGL/PlayCanvas.

Be sure to watch the video below, this is what the finished project will look like.

In this series of tutorials, we will make an interactive interior presentation that can be viewed in real time through a web browser. And this means that your client will not have to download any applications or heavy Unreal projects weighing 10 GB.

With WebGL, everything is much simpler, this project weighs only 40 MB and loads in 5 seconds. The performance of a mobile device or an average desktop computer is more than enough to run such projects. There is no need to have a lot of RAM or video card resources here, since a special approach is used for this type of project, which we will talk about next.

In addition to the current 8-part series of lessons, based on this SVOYA interior, more advanced lessons have been made, which include the following topics:

I recommend reading the advanced tutorial after these 8 parts.

The approach to creating this project is fundamentally different from the Lamborghini Urus lesson. If, for the car configurator, we baked only Ambient Occlusion maps, and created all the materials as much as possible in Playcanvas. Then, for the SVOYA project, all textures will be baked for each object separately.

Each texture will have lighting baked in with shadows, diffuse, normal, etc. An example of such a texture is shown below.

Loading...

As you might have guessed, for each object you will need to do a full Unwrap scan. This is a bit laborious process, a similar approach is used when assembling scenes under Unreal Engine, only the textures are baked in 3Ds Max.

The process will be next. We create a normal interior in 3Ds Max, adjust the light. Then, in the same scene, we optimize each model and unwrap it. Next, in 3Ds Max, we bake each texture and the last step is to add the models and textures to the Playcanvas.

In fact, in 3Ds Max we will have the most work, about 80%. Thanks to the familiar process of rendering scenes in 3Ds Max, all objects will look realistic and the result will definitely be better than in Unreal.

But this method also has its drawbacks. We can't bake textures with reflections, otherwise it will look fake in the final result.

Some materials will have to be finalized in Playcanvas by adding reflections. But, basically, the assembly of materials will also take place in 3Ds Max. The baked texture will need to be added to the Self Illumination slot in the Standard material. There will be no lighting in the Playcanvas itself. All objects are models with self-luminous textures.

For this tutorial, I wrote a script to automatically export 3D models, which simplifies the process of removing unnecessary Unwrap channels, creating materials, naming, etc. This script will be attached in one of the parts, do not miss it.

I would also like to add that not every interior can be done on Playcanvas. You need to understand that a classic interior, where there are a lot of polygonal objects, you will not be able to load into Playcanvas. It is necessary to be guided that the whole project should fit in 150,000 polygons.

150,000 polygons is the optimal figure for adequate rendering of frames on most devices. Keep in mind that WebGL is a very stripped-down 3D engine, so the fewer polygons the better.

The SVOYA project took me 40,000 polygons. The size of all textures was 25 MB.

I am leading to the fact that you need to understand that large projects with a large number of objects, where there are many textures, most likely cannot be implemented.

I had to go through a lot of interiors before I settled on a suitable minimalist SVOYA - See The Sea. Everything is perfect here - few shiny objects, minimalist design, small area, simple objects, simple lighting.

Loading...

The main rules for creating interiors for Playcanvas:

If you look at the real interior on the SVOYA website, you will notice some differences from the current one, namely:

And this is not accidental, everything was optimized as much as possible, simplified and replaced by analogues. Optimization is everything!

The time you spend on a Playcanvas project will undoubtedly be longer than if you were doing regular renders or panoramas. But, such a project is done faster than Unreal projects.

Accordingly, a project on Playcanvas will cost more than a panorama tour and cheaper than an Unreal project. Let's weigh everything - we get a realistic interior with full interactivity without third-party software, right in the browser, with the ability to view from any device. And if you take into account that the assembly of the project is still easier than on Unreal. That such a presentation of visualization, undoubtedly justifiably, is gaining more and more market share.

Playcanvas is a great way to get interactivity with a minimum of effort and time.

Despite the fact that WebGL is a simple 3D engine, you can make interesting realistic projects on it. And given that you get full interactivity, while spending less time than in Unreal Engine, this way of presenting a presentation to a client justifies itself and deserves its niche.