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.
Each texture will have lighting baked in with shadows, diffuse, normal, etc. An example of such a texture is shown below.
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.
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.
Image from svoya-studio.com
The main rules for creating interiors for Playcanvas:
- Try not to make large rooms
- Don't go beyond the polygon limit of 150,000 (selected by experience)
- There should be a minimum of shiny objects in the scene
- Best if there are objects in the scene with blurry reflections
- Materials on objects should be as simple as possible (otherwise there may be problems when baking)
- You can miss small objects or details and this is normal
- Each object is a separate baked texture
And this is not accidental, everything was optimized as much as possible, simplified and replaced by analogues. Optimization is everything!
- The sofa has a different material
- The sofa is chosen to be simpler in execution
- Some curtains are missing
- The lamp above the island is missing
- None small details such as flowers, vases, air conditioning, etc.
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.
Go To Lesson Interactive presentation of SVOYA interior (WebGL/PlayCanvas). Part 2.