Author: MastaMan
Date: April 4, 2023
Updated on: July 25, 2023
You are reading part: 1 2 3 4 5

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.

Patreon

View the Playcanvas project online.

View Playcanvas Project Online

Creating 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.

playcanvas clost material example 1
Loading...
playcanvas clost material example 2
Loading...

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.

sofa green material environment
Loading...

Add a shadow map to "Diffuse" as well. Turn on the “Tint” option and use green color.

sofa green material diffuse
Loading...

In the “Specular” section, you need to enable “Use Metalness”. Set the “Metalness” parameter to “0”.
“Glossiness” to “50”.

sofa green material specular
Loading...

Let's make sure that "Emissive" is completely turned off.

sofa green material emissive
Loading...

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.

sofa green material sheen
Loading...

For a velveteen effect, "Clearcoat" is great.
I used the worn texture in the "Clear Coat" and "Clear Coat Gloss" slots.

15
Loading...
sofa green material clearcoat
Loading...

I used different "Tiling" texture settings.
For "Clear Coat Normals" I used the following texture.

68
Loading...

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.

result sofa green material
Loading...

Based on this material, create several variants of different colors for our configurator.

Changing sofa materials on the click of a UI button

Customizing UI elements

Duplicate the "ChangeColor" button, rename it to "ChangeMaterial".

duplicate button change colors
Loading...

Move the button and place it over the sofa.
The button is ready!

Applying and configuring the changeMaterial script

Add the "change-material.js" script to the "scripts/configurator" folder.

Script "change-material.js".



add change material script
Loading...

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.

configure change material script
Loading...

Run the project, the materials change one by one by pressing the “ChangeMaterial” button.

result playcanvas material configurator
Loading...

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


You are reading part: 1 2 3 4 5
{{commentsMsg}}
  

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