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

Vasyl Lukianenko
3D Artist and Technical Author

Date: June 12, 2022 Updated on: July 25, 2023 Reading time: 3 min Views: 423

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

Intro Part 7

This is Part 7 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 the rest of the objects and set up materials for them.

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

Patreon - 3DGROUND

Rear Trunk

Let's add an object to the "SM_Trunk" scene, by analogy with the previous part of the lesson. Drag the "FBX" file to the "Assets" panel → "car". Then drag the "Template" named "SM_Trunk" to the "Hierarchy" panel → "Car".

The "M_CarPaint_Trunk" material is a copy of the "M_CarPaint_Exterior" material, only with a different "AO" texture prepared in advance "T_Trunk_AO".

All other materials are taken from ready-made.

Result

Headlights

Add "SM_Lights" to the scene by loading "Assets" → "car", then dragging the "Template" named "SM_Lights" to the "Hierarchy" panel → "Car".

For the first and third slots, we will use ready-made materials "M_LightsLedIllum" and "M_BlackPlastic", we will create the rest of the materials from scratch.

Material HeadLight_Glass

Material ChromeClearDark

Material EmissiveWhite

Result

Wheels

Add "SM_Wheels" to the scene by loading "Assets" → "car", then dragging the "Template" named "SM_Wheels" to the "Hierarchy" panel → "Car".

playcanvas material wheeltirebump materials

Tire material

Materials of the inner part of the wheel

Material WheelTireBump

Material WheelAluminum

Material BlackMetal

We take this material from ready-made.

Material Brake

Material WheelBrakeDisk

Result

Disks

Let's create a new "Entity" named "Discs" in "Car".

Let's add three variants of disks "SM_WheelDisc_1", "SM_WheelDisc_2" and "SM_WheelDisc_3" to the scene by loading "Assets" → "car" into the panel, then dragging the corresponding "Template" onto the panel " Hierarchy" → "Car" → "Disks".

Material Disc1

Here we will only create the "M_Disc1" material. "M_Chrome" we will take from ready-made ones.

Material Disc2

Here we will only create the "M_Disc2" material. "M_Chrome" we will take from ready-made ones.

Material Disc3

Result

Conclusion

In this part of the tutorial, we have done a lot of work on adding almost all the objects and setting up their materials. In the next part, we will add the interior of the car and we will smoothly move on to creating interactivity.

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 PlayCanvas project series and focuses on the next stage of developing a professional interactive WebGL experience.

2. What is covered in Part 7?

Part 7 typically explores additional refinements, advanced functionality, workflow improvements, and further development of the automotive configurator.

3. Why are advanced development stages important?

As the project matures, attention shifts from core functionality to usability, performance, scalability, and overall user experience.

4. Can PlayCanvas support large and complex projects?

Yes. With proper optimization and project organization, PlayCanvas can handle sophisticated interactive applications and product configurators.

5. Why is project scalability important?

A scalable architecture makes it easier to add new features, content, and functionality without major restructuring.

6. Can new customization options be added during development?

Yes. Automotive configurators can be expanded with additional colors, materials, wheel designs, interior packages, and interactive features.

7. Does user experience remain important at this stage?

Absolutely. Fine-tuning navigation, controls, and interaction workflows is essential for creating a polished final product.

8. Can advanced camera systems improve product presentation?

Yes. Custom camera movements, predefined viewpoints, smooth transitions, and focus points can significantly enhance the presentation quality.

9. Is PlayCanvas suitable for commercial automotive applications?

Yes. Many automotive and product-focused companies use WebGL solutions to create engaging online experiences for customers.

10. Can these techniques be applied outside the automotive industry?

Yes. Similar approaches are commonly used in real estate, furniture visualization, manufacturing, product marketing, and e-commerce.

11. Why is asset management important in large projects?

Efficient asset management helps maintain performance, reduce loading times, and simplify future project updates.

12. Can WebGL applications perform well on mobile devices?

Yes. When optimized correctly, PlayCanvas projects can provide a smooth experience on smartphones and tablets.

13. Are programming skills required for advanced systems?

Yes. More sophisticated features often require JavaScript development and a solid understanding of the PlayCanvas API.

14. What advantages do interactive configurators provide compared to traditional presentations?

Users can actively explore products, customize options, and interact with content instead of passively viewing static images or videos.

15. Can the project continue evolving after this stage?

Yes. Interactive applications are often continuously updated with new features, content, optimizations, and user-requested improvements.

16. Who is this article useful for?

This article is useful for PlayCanvas developers, WebGL specialists, technical artists, automotive visualization professionals, and anyone interested in creating advanced interactive 3D experiences for the web.

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.