Author: MastaMan
Date: June 12, 2022
Updated on: July 25, 2023
You are reading part: 1 2 3 4 5 6 7 8 9 10

Intro Part 8

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

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



In this part of the tutorial, we will add a car interior to the scene and set up materials for it.

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

Patreon - 3DGROUND

Dashboard

Let's add an object to the scene "SM_Panel", by analogy with the previous part of the lesson. Drag the "FBX" file to the "Assets" → "car" panel. Then "Template" with the name "SM_Panel" is dragged onto the "Hierarchy" → "Car" panel.

To make it easier for you to work with this leftover, select all unnecessary elements of the car and uncheck "Enabled" on the "Inspector" panel. This way you will hide the objects.

playcanvas panel
Loading...

We will create almost all materials from scratch, with the exception of "M_BlackMetal" - slot 3, "M_Mirror" - slot 5 and "M_Brake" - slot 6.

playcanvas panel materials
Loading...

Material M_Panel_BlackPlastic

playcanvas material panel blackplastic preview
Loading...
playcanvas material panel blackplastic settings
Loading...

Material Panel_Chrome

playcanvas material panel chrome preview
Loading...

In this material, I want to focus on the "Environment" convolution. Here the "Projection" mode is switched to "Box", and "Center" and "Half Extents" are changed in order to achieve an interesting effect in the highlights - smeared stripes at 30-40 degrees.

playcanvas material panel chrome settings
Loading...

Material InteriorDisplays

playcanvas material interiordisplays preview
Loading...
playcanvas material interiordisplays settings
Loading...

Material Panel_BlackLeather

playcanvas material panel blackleather preview
Loading...
playcanvas material panel blackleather settings
Loading...

Material Panel_Carbon

playcanvas material panel carbon preview
Loading...
playcanvas material panel carbon settings
Loading...

Material Panel_Leather

playcanvas material panel leather preview
Loading...
playcanvas material panel leather settings
Loading...

Material Panel_Buttons

playcanvas material panel buttons preview
Loading...
playcanvas material panel buttons settings
Loading...

Result

playcanvas panel result
Loading...

Interior

Let's add an object to the scene "SM_Interior". Drag the "FBX" file to the "Assets" → "car" panel. Then "Template" named "SM_Interior" is dragged to the "Hierarchy" → "Car" panel.

playcanvas interior
Loading...

Material "M_BlackMetal" - 4th slot and "M_ChromeClearDark" - 3rd slot, take from the ready ones. All other materials will be created from scratch.

playcanvas interior materials
Loading...

Material Interior_BlackPlastic

playcanvas material interior blackplastic preview
Loading...
playcanvas material interior blackplastic settings
Loading...

Material Interior_Carpet

playcanvas material interior carpet preview
Loading...
playcanvas material interior carpet settings
Loading...

Material Interior_Leather

playcanvas material interior leather preview
Loading...

Please note that this material is installed on slots 5 and 7.

playcanvas material interior leather settings
Loading...

Material Rubber

playcanvas material rubber preview
Loading...
playcanvas material rubber settings
Loading...

Material Interior_LeatherSeat

playcanvas material interior leatherseat preview
Loading...
playcanvas material interior leatherseat settings
Loading...

Result

playcanvas interior result
Loading...

Glow of the taillights

playcanvas create glow effect
Loading...

Create an empty "Entity" in "Hierarchy" → "Root" with the name "BackLight_GlowEffect", add the usual "Plane" to it. Let's rotate "Plane" by "-90" degrees along the "X" axis. Set "Scale" on all axes equal to "0.7".

playcanvas glow effect
Loading...

Also disable "Cast Shadows", "Cast Lightmap Shadows", "Receive Shadows" properties for "Plane".

Now, for "Plane" let's create and apply a material named "GlowEffect". To create a material, call the context menu on the "Assets" panel and select "Material".
Apply the settings for the material, as shown in the screenshot below.

playcanvas material glow effect
Loading...

Move "BackLight_GlowEffect" to the left taillight and rotate "Y" axis by "90" degrees.

playcanvas move glow entitty
Loading...

Fine. It remains to add "Component" - "Script" and assign as a script the already existing "hotspot", which we applied to the sun.

playcanvas apply script for glow
Loading...

For "hotspot" in the "Camera Entity" settings, select the "Camera" object. Duplicate "BackLight_GlowEffect" and move it to the right for the right rear light.

If you start the project on the "Play" button, you can see if we move the camera view to the back of the car, a glow effect appears. But, if the camera view is directed to the front of the car, thanks to the script, the glow effect disappears.

Result

playcanvas glow effect result
Loading...

Camera settings

playcanvas default camera view
Loading...

As you can see, by pressing the "Play" button, the default camera view flies away from the scene. Now we will correct this situation.

playcanvas camera settings
Loading...

Select the "Camera" object on the "Hierarchy" panel, use the "Move" tool and "Rotate", set the desired view from the camera. Then, in the settings on the "Inspector" panel, make the settings as shown in the screenshot above.

For the "orbitCamera" script, set the maximum and minimum angle "80" and "2" degrees, so that it is impossible to "fall through" the camera through the ground. "Inertia Factor" - will add smoothness of torsion to the camera. And for "Focus Entity", select our "Entity" - "Car" so that the view is "nailed" to our car.

We press "Play" - and the car is in the center of the frame, we do not fall through the ground when spinning, and spinning has become more pleasant in itself.

playcanvas camera settings result
Loading...

Additional scripts for Camera

Let's add some camera scripts from the free Playcanvas asset store.

To do this, click the "Store" button on the "Assets" panel.

playcanvas button go to store
Loading...

On the "Store" page, sort the content by the "Script" tag.

playcanvas store filter by tag
Loading...

Add the following scripts: "Vignette Post Effect", "Bloom Post Effect", "FXAA Post Effect".

playcanvas camera scripts from store
Loading...

Click on the script card, then click the "Download" button and select your project.

playcanvas download asset from store
Loading...
playcanvas download effet select project
Loading...

And so, for each listed script. This addition of frequently used effects, scripts and assets is very convenient, for which many thanks to the Playcanvas developers.

We return to our project. You should have three scripts in the root of the "Assets" panel. Drag them to the "scripts" folder.

playcanvas downloded from store scripts
Loading...

Select the "Camera" object on the "Hierarchy" panel, add new scripts from the "Add script" list: "fxaa", "bloom", "vignette" on the "Inspector" panel ".

playcanvas add scripts to camera
Loading...

Set the script options as shown in the screenshot below.

playcanvas setting camera scripts
Loading...

Result

As you can see, there is a vignette around the edges, the Antialiasing is a bit better and the glow effect is more pronounced.

playcanvas camera scripts result
Loading...

Exhaust effect

Playcanvas has a Particles system, thanks to which you can create interactive effects.

playcanvas particles
Loading...

Create an empty "Entity" and name it "Particles", add "Particle System" to it. Move it to the left extreme exhaust pipe.

As the "smoke" texture, we will use this texture.

t smokepuff
Loading...

My setup example.

playcanvas particle settings
Loading...

Graphs "Velocity", "Radial Speed", "Opacity".

playcanvas particle graph
Loading...

Make a duplicate of "Particle System", and move it a bit to the right. Let's set the following settings.

particle system duplicate
Loading...

Great, now we'll duplicate these two "Particle System" and move them to the right to the other exhaust pipes.

playcanvas particles complete
Loading...

Result

playcanvas particles result
Loading...

Conclusion

conclusion part 7
Loading...

In this part of the tutorial, we are completely done with adding geometry and setting up materials, making the taillight glow effect, and setting up the camera and particle system.

In the next part of the tutorial, we will add even more interactivity and improve the lighting.



You are reading part: 1 2 3 4 5 6 7 8 9 10
{{commentsMsg}}
  

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