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

Author: MastaMan
Date: March 1, 2022
Updated on: July 25, 2023

You are reading part: 1 2 3 4 5 6 7 8

Intro Part 7

This is Part 7 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

Material setup

For materials that will have specular highlights, you will need to apply a little trick, otherwise, due to self-luminous materials, they will not be visible. Considering that we cannot have any lighting in the scene for such materials, a special approach is needed.

The main trick is if we need to make reflections in the material:

Completely turn off "Emissive"
In "Lightmap" throw any texture and set "Color Channel" to "A" mode
Texture with "Emissive" flip to "Diffuse"
Enable the "Metalness" checkbox in "Specular", set "Metalness" value to "0"< /li>
In "Environment" drop "cubemap"
Control the reflection strength with "Glossines" in "Specular"

Floor

First of all, I threw the baked texture into Photopea (Photoshop), and brought it to such a look as in the picture. This will be our "Specular" map.

Cooker

Basin

Island

Everything is the same as for Basin, except:

"Glossines": "85"
"Reflectivity": "0.3"

Hood

Everything is the same as for Basin, except:

"Glossines": "62"
"Metalness": "0.3"

Small Table

Glass Doors

Material with "ID": 1 is left as it is, for glass material "ID": 2, the following settings.

TV

"ID": 1 do not touch, for "ID": 2, the settings are below.

Oven

"ID": 1 settings.

"ID": 2 settings.

Stair Collision

Here we will simply make a transparent material.

Conclusion

In this part, we are done with setting up the materials. All other materials not specified in this part are left by default. You can already start the project by clicking the "Play" button and enjoy the result. But, in the next part, we will add the final touch, a beautiful splash screen when loading a project with animation.