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

Vasyl Lukianenko
3D Artist and Technical Author

Date: June 12, 2022 Updated on: July 25, 2023 Reading time: 5 min Views: 435

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

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.

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.

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.

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

The car body should appear in the Viewport.

Let's rotate "Entity" - "Car", by 90 degrees along the Y axis.

When adding other parts to the scene, namely "Entity" - "Car", additional torsion is not needed for the objects.

Material setup

Material CarPaint

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

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

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.

In addition to connecting the map, enable the "Tint" checkbox, set "Color" to "180,180,180" and the blending mode to "Multiply".

The result we got.

Material BlackPlastic

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

Load the "Noise" texture. Immediately assign it in the "Normals" rollout with "Bumpiness" equal to "0.1" and "Tiling" equal to "200" and "200".

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.

For "Diffuse" and "Specular" set the values as in the screenshot below.

playcanvas material black plastic settings 3

The result we got.

playcanvas material black plastic result 2

Material BlackMetal

playcanvas material black metal environment settings

The result we got.

Material Chrome_Exterior

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

Here is the result.

playcanvas material chrome exterior result

Material GlassWinds

playcanvas material glass winds environment settings

Result.

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 diffuse and specular settings

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

Result.

Conclusion

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

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

FAQ

1. What is this article about?

This article continues the Lamborghini Urus WebGL project in PlayCanvas and focuses on further development, optimization, and enhancement of the interactive automotive experience.

2. What is covered in Part 4?

Part 4 explores additional functionality, project refinements, and advanced features that improve both visual quality and user interaction.

3. Why is continuous development important for WebGL projects?

Large interactive projects benefit from gradual improvements, allowing developers to test new features, optimize performance, and maintain project stability.

4. Can PlayCanvas handle production-quality automotive projects?

Yes. With proper optimization and asset management, PlayCanvas can be used to create professional automotive configurators and interactive presentations.

5. Why is performance optimization still necessary?

As more features, textures, and interactions are added, maintaining smooth performance becomes increasingly important across all devices.

6. Can users customize vehicle configurations?

Yes. Interactive automotive projects often allow users to modify colors, materials, wheels, interiors, and other vehicle options in real time.

7. Does Part 4 improve the user experience?

Yes. Enhancing usability, navigation, and interaction flow is an essential part of creating an effective automotive configurator.

8. Can advanced camera systems be implemented?

Yes. Developers can create custom camera controls, animated transitions, focus points, and inspection modes for a more immersive experience.

9. Is PlayCanvas suitable for commercial automotive presentations?

Yes. Many companies use WebGL technologies to showcase products online and provide interactive experiences to potential customers.

10. Can the same techniques be used for non-automotive projects?

Yes. Similar workflows can be applied to furniture configurators, product showcases, architectural presentations, and industrial visualization.

11. Why is project structure important as complexity grows?

A well-organized project makes development easier, improves maintainability, and simplifies future updates and feature additions.

12. Can these applications run on mobile devices?

Yes. Proper optimization allows PlayCanvas projects to run efficiently on smartphones, tablets, and desktop computers.

13. Are programming skills required for advanced functionality?

Yes. Advanced systems and custom interactions generally require JavaScript knowledge and familiarity with the PlayCanvas API.

14. What advantages does WebGL offer compared to traditional presentations?

WebGL provides real-time interaction, allowing users to explore products, change configurations, and engage with content directly in the browser.

15. Can the project continue evolving after release?

Yes. Additional features, visual improvements, optimizations, and new configuration options can be introduced throughout the project's lifecycle.

16. Who is this article useful for?

This article is useful for PlayCanvas developers, technical artists, automotive visualization specialists, interactive experience designers, and anyone interested in creating advanced WebGL applications.

Vasyl Lukianenko
3D Artist and Technical Author

Vasyl Lukianenko is a 3D artist and technical author focused on practical workflows, optimization, and production-ready techniques. He publishes tutorials, courses, and tools to help artists work faster and get cleaner results.