English 
Introduction
This is Part 3 of the 5 series of tutorials on adding interactivity to the SVOYA Apartment interior.
Access to materials, such as: models in the "FBX" format, baked textures, scripts and more, you can get by subscribing to Patreon.
PatreonView the Playcanvas project online.
View Playcanvas Project OnlineCreating a sofa material
A year has passed since the launch of the SVOYA Apartment project, and during this time Playcanvas managed to get a lot of interesting updates and material settings. The Playcanvas web engine continues to evolve, constantly improving its capabilities and tools for creating high-quality 3D applications and games.
One of the most important and interesting tools is "Falloff". This feature has long been available in 3Ds Max, and allows you to easily and quickly set up fabric materials. In addition, 3Ds Max has the ability to mix different maps using "Mix" and create unique effects such as velveteen.
However, when working with Playcanvas, you need to understand that these effects cannot be baked, and creating these types of materials can be difficult or even impossible.
During the year of the existence of the SVOYA Apartment project, the Playcanvas web engine has managed to develop significantly and expand its capabilities. Material settings have made a big contribution to this, among which the new options "Sheen" and "Clearcoat" stand out. Together, you can create incredibly realistic effects, such as silk velvet fabric that changes color and brightness depending on the viewing angle and distance from the subject.
To better understand how these settings work, I recommend trying it in practice. I can demonstrate using one material as an example how different combinations of settings affect the rendering quality and visual appeal of the material. The main thing is not to be afraid to experiment and be creative in setting up materials in Playcanvas!
Material Sofa Green
Let's create a unique material and name it "Sofa Green". First, we'll assign the baked shadow map to "Lightmap" to improve the lighting and give the material more dimension. Then, let's add the finished "Helipad" cubemap to the "Environment" section with certain settings.
However, for "Sheen" and "Clearcoat" to work properly, you need to make sure "Reflectivity" is set to "0". This is the only way we can achieve the best result and get a visually appealing material with the “Sheen” and “Clearcoat” parameters working.
Add a shadow map to "Diffuse" as well. Turn on the “Tint” option and use green color.
In the “Specular” section, you need to enable “Use Metalness”. Set the “Metalness” parameter to “0”.
“Glossiness” to “50”.
Let's make sure that "Emissive" is completely turned off.
Let's deal with the "Sheen" setting.
"Sheen" is essentially the well-known "Falloff" in 3Ds Max. Here you can specify the color that will be visible on the curves of the model, as well as the strength of the effect.
By changing the color and “Glossiness”, you can achieve different options for the roughness of fabrics. I like values from “0.8” to “0.92” the most.
For a velveteen effect, "Clearcoat" is great.
I used the worn texture in the "Clear Coat" and "Clear Coat Gloss" slots.
I used different "Tiling" texture settings.
For "Clear Coat Normals" I used the following texture.
Thus, we have created a universal material and it can be used for different fabrics by changing the “Bumpiness”, “Glossiness” and “Clear Coat Factor” parameters.
“Clear Coat Factor” - is responsible for the strength of the velveteen effect.
“Glossiness” - the rubbery effect will come, I recommend using from “0” to “0.3”.
“Bumpiness” - the silkiness of the material.
By combining these settings and black and white scuff textures, interesting results can be achieved.
Experiment, it doesn't matter that "Use Metalness" does not apply to fabrics in any way, just turn the settings and see visually how it can be used to your advantage.
Based on this material, create several variants of different colors for our configurator.
Duplicate the "ChangeColor" button, rename it to "ChangeMaterial".
Move the button and place it over the sofa.
The button is ready!
Add the "change-material.js" script to the "scripts/configurator" folder.
Script "change-material.js".
Apply the script to the sofa object.
Set the “Trigger Button” to our “ChangeMaterial” button.
In the “Materials” parameter, enter a number that indicates the number of materials to change.
Assign materials to slots.
Run the project, the materials change one by one by pressing the “ChangeMaterial” button.
Conclusion
In this part of the tutorial, we made a material change configurator and learned how to create complex fabric materials.
Patreon subscribers will be able to view the SVOYA Apartment project in read mode, as well as quickly copy-paste the necessary assets and scripts into their personal project.
For everyone else, you will find everything you need on the page of this lesson.
Patreon
{{comment.text}}