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

Creation of the Lamborghini Urus project (WebGL-PlayCanvas). Part 4.


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

Index

Intro Part 4

This is Part 4 of the tutorial series on building a Lamborghini Urus with WebGL/PlayCanvas.

In the previous part, we completely finished preparing the environment, figured out how to use JavaScript scripts, and also set up the basic light.

For those who haven't read the previous parts, here's a demo video.






And the previous parts of the lesson.

Go To The Lesson "Creating A Lamborghini Urus Project" Part 1


Go To The Lesson "Creating A Lamborghini Urus Project" Part 2


Go To The Lesson "Creating A Lamborghini Urus Project" Part 3


In this part of the tutorial, we will figure out how to add geometry to the scene and go over the basic material settings.

I want to express my deep gratitude to the user Yana Melnichenko for preparing a 3D model of the Urus car. Melnichenko Yana is a top specialist in the field of GameDev and ArchViz for Unreal Engine. A lesson on how to prepare a 3D model - optimization, texture preparation, LightMap baking, etc. will come later and is up to you. Write a comment or such a lesson is needed.


I will also attach a link to Behance - Yana Melnichenko.

Behance - Yana Melnichenko

Adding Geometry to the Scene

We will not dwell on the description of the process of preparing a 3D Urus model. If you think that you need an addition to this lesson, write about it in the comments and together with Yana Melnichenko we will prepare such a lesson.

Access to materials, such as: models in the format "FBX", textures, baked maps "AO" and more, you can get by subscribing to Patreon.

Patreon - 3DGROUND


Below is a list of pre-built Urus parts. All preparation took place in 3Ds Max, and then the necessary parts were exported to separate FBX files.
model components fbx
Loading...
Items such as front doors, tailgate, three wheel options, wheels and interior should be separated into separate FBX files for convenience.

Create a "car" folder in the root of the "Assets" panel. In the future, in this folder, we will add geometry, textures and materials related to our car.

Let's add the body of our car to PlayCanvas. To do this, simply drag "SM_CarExterior.fbx" into the "Assets" panel, into the "car" folder.
playcanvas upload fbx
Loading...
During the loading process, you will automatically have various assets, materials, "GLB" and "Template" created.

Before adding a car exterior to the scene, you must first create an empty "Entity". This will serve as a container in which we will add other parts of the model.

Create "Entity" in "Hierarchy" panel, name it "Car". Then drag "Template" named "SM_CarExterior" to "Entity" - "Car".
playcanvas add object to scene
Loading...
The car body should appear in the Viewport.
playcanvas car exterior
Loading...
Let's rotate "Entity" - "Car", by 90 degrees along the Y axis.
playcanvas rotate entity car
Loading...
When adding other parts to the scene, namely "Entity" - "Car", additional torsion is not needed for the objects.

Material setup

playcanvas object materials
Loading...

Material CarPaint

playcanvas material carpaint preview
Loading...
Select an object in the Viewport, in the "Inspector" panel, you will see the materials belonging to the body of our car. Let's start with the first material - this is "CarPaint".

Click on "CarPaint" in the "Inspector" panel to open the material editor. Immediately rename the material to "M_CarPaint_Exterior".
playcanvas material carpaint diffuse and specular settings
Loading...
Change the settings "Specular" and "Diffuse" as in the screenshot above.

Go to the "Environment" scroll, next to the "CubeMap" parameter, click on the pencil icon and select "CubeMap" - "Sky" in the "Assets" panel, in the "env → cubemap" folder ". During selection, you can navigate to subfolders. Set the value of "Reflectivity" to "1.56".
playcanvas material carpaint environment settings
Loading...
And the final touch, let's add the "AO" map. Load it first into the "car" folder, then add it to the "Ambient" rollout. Below is an example of the "Ambient Occlusion" texture we are using.
t exterior ao
Loading...
In addition to connecting the map, enable the "Tint" checkbox, set "Color" to "180,180,180" and the blending mode to "Multiply".
playcanvas material carpaint environment settings
Loading...
The result we got.
playcanvas material carpaint result
Loading...

Material BlackPlastic

playcanvas material black plastic preview
Loading...
Let's move on to the next material. Select the car exterior in the Viewport, open the "BlackPlastic" material in the "Inspector" panel, rename it to "M_BlackPlastic".

Turn off the "Apply To All Maps" checkbox in the "Offset & Tiling" rollout.
playcanvas material black plastict disable tiling and offset
Loading...
Load the "Noise" texture. Immediately assign it in the "Normals" rollout with "Bumpiness" equal to "0.1" and "Tiling" equal to "200" and "200".
perlin noise
Loading...
In the "Environment" rollout, assign our "cubemap_blurred" as "CubeMap". Set "Reflectivity" value to "0.4".
"Projection" set to "Box" mode. "Box" mode - imposes reflections in a different way, which gives an interesting effect.
playcanvas black plastic settings 1
Loading...
For "Diffuse" and "Specular" set the values ​​as in the screenshot below.
playcanvas material black plastic settings 3
Loading...
The result we got.
playcanvas material black plastic result 2
Loading...

Material BlackMetal

playcanvas material black metal preview
Loading...
playcanvas material black metal specular and diffuse settings
Loading...
playcanvas material black metal environment settings
Loading...
The result we got.
playcanvas material black metal result
Loading...

Material Chrome_Exterior

playcanvas material chrome exterior preview
Loading...
playcanvas material chrome exterior abmient and diffuse settings
Loading...
Assign "Ambient" texture "AO", from "Assets" panel - "T_Exterior_AO.png", blending mode "Multiply", with "Tint" enabled and color "0, 0.0".
playcanvas material chrome exterior specular and environment settings
Loading...
Here is the result.
playcanvas material chrome exterior result
Loading...

Material GlassWinds

playcanvas material glass winds preview
Loading...
playcanvas material glass winds diffuse and specular settings
Loading...
playcanvas material glass winds environment settings
Loading...
Result.
playcanvas material glass winds result
Loading...

Material FrontGlass

he sixth material we have is responsible for the front glass. Let's name it like "M_FrontGlass". In the model, it is named a little differently, that's okay.
playcanvas material front glass preview
Loading...
playcanvas material front glass diffuse and specular settings
Loading...
Assign the transparency map "T_BackGlassInverted" to the "Opacity" slot. Further settings, as in the screenshot below.
playcanvas material front glass opacity and environment settings
Loading...
Result.
playcanvas material front glass result
Loading...

Conclusion

In the next part of the tutorial, we will continue to set up materials for the "SM_CarExterior" object.

Go to the "Creating a Lamborghini Urus Project" Part 5


Go to the "Creating a Lamborghini Urus Project" Part 3


{{commentsMsg}}
  

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


SUBSCRIBE TO OUR NEWSLETTER

{{subscribeMsg}}