Every $2 will be transferred to the Ukrainian Volunteers Fund. Do not remain indifferent, support Ukraine!

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


Author MastaMan
Updated on June 1, 2022
English and Русский

Index

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.
floor
Loading...
floor material
Loading...
floor material settings 1
Loading...
floor material settings 2
Loading...

Cooker

coocker material
Loading...
cooker material settings 01
Loading...
cooker material settings 2
Loading...

Basin

basin material
Loading...
basin material settings 01
Loading...
basin material settings 02
Loading...

Island

island material
Loading...
Everything is the same as for Basin, except:

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

Hood

hood material
Loading...
Everything is the same as for Basin, except:

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

Small Table

small table material
Loading...
Similar to previous posts:

  • "Glossines": "60"
  • "Metalness": "1.0"

Glass Doors

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

TV

mateiral tv
Loading...
"ID": 1 do not touch, for "ID": 2, the settings are below.
tv material settings 1
Loading...
1646158170
Loading...

Oven

oven material
Loading...
"ID": 1 settings.
oven material settings 1
Loading...
oven material settings 3
Loading...
"ID": 2 settings.
oven material settings 3
Loading...
oven material settings 4
Loading...

Stair Collision

stair collision material
Loading...
Here we will simply make a transparent material.
stair collision material settings
Loading...

Conclusion

svoya result
Loading...
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.

Go To Lesson Interactive presentation of SVOYA interior (WebGL/PlayCanvas). Part 8.


Go To Lesson Interactive presentation of SVOYA interior (WebGL/PlayCanvas). Part 6.


{{commentsMsg}}
  

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


SUBSCRIBE TO OUR NEWSLETTER

{{subscribeMsg}}