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

Vasyl Lukianenko
3D Artist and Technical Author

Date: June 12, 2022 Updated on: July 25, 2023 Reading time: 6 min Views: 369

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

Intro Part 2

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

So, in the previous part, we got acquainted with what WebGL is, tried the PlayCanvas web game engine in practice, created a project and started setting up the environment.

We've covered some of the PlayCanvas basics without which we can't move forward, namely commonly used hotkeys, interface structure, project types, where to find documentation, and basic project settings.

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

In this part of the tutorial, we will continue creating the environment and figure out how to replace the background with a different one.

In this tutorial series, we won't be using any third party software other than Autodesk 3Ds Max to prepare the model. All tools are free web services: PlayCanvas, Photopea, Matheowis and more...

Well, are you ready? Then let's start...

Background preparation

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

The first thing to do is change the background. He will immediately give an understanding of how it is necessary to put the light and in general will set the general mood of the picture.

The main idea that I wanted to realize was a car driving on a dried-up lake, where endless sand stretches for tens of kilometers and mountains are visible somewhere in the distance. This was to create the illusion of privacy and focus on the car. Best of all, it's pretty easy to implement ????.

By typing "Sand Pit HDRI" on Google, I found a suitable free HDRI on DeviantArt using the first link.

Salt Pit - Free HDri by AS-Dimension-Z on DeviantArt

https://www.deviantart.com/as-dimension-z/art/Salt-Pit-Free-HDri-755583634

Since PlayCanvas "is not friendly" with spherical maps, we need to turn this HDRI into a cubic one.

After writing a request "HDRI to cubemap online" in Google, go to the site using the first link:

https://matheowis.github.io/HDRI-to-CubeMap/

As you can see from the screenshot below, the interface of the service is very simple. Press "Upload HDRI", select our "SandPit_10000x5000.hdr" and wait for the download.

Without changing any settings, press "Save" and select the size option "4096" and "png".

And the third layout option, where each side will be a separate file. Press "Process", and after processing - "Save", in the same dialog box.

Immediately, just in case, we will save more intermediate options, with the sizes "512" and "256". Later we will use these cubemaps for reflections.

Let's make the options for "512" and "256" blurry to simulate blurry highlights. Of course, it was possible to use the "Prefilter" function to automatically generate atlases directly in PlayCanvas, with different degrees of blur, but this option did not suit me, so I just manually made 2 more blurry backgrounds.

For example, the option for "512 " I blurred to this state. The process is simple, you need to load all the pictures into Photopea, go to the "Filter" menu, then "Gaussian Blur" and set the value to "5.0px".

https://www.photopea.com/

Then save each picture. This process must be done for the variant with the size "256", only to make it even more blurry by 2-3 times.

The process is simple, so we will not dwell on it in detail.

At this stage, the preparation of the background is over and we move on to loading it into PlayCanvas.

Adding a background to PlayCanvas

Go to PlayCanvas and first of all delete everything unnecessary. Select the cube and cubemap folders in the "Assets" panel and delete them using the context menu. We do the same with the "playcanvas" object in the "Hierarchy" panel.

We should have a scripts folder in the "Assets" panel and two objects in the "Hierarchy" panel - a camera and a light.

Let's create a folder "env" and a subfolder "cubemap" in it, as follows:

To rename a folder, select it and enter a new name in the "Inspector" panel on the right.

Make sure we have the "cubemap" folder selected, then simply drag and drop to load the following files into the PlayCanvas. Please note that we are loading the variant with the size "4096".

After dragging, after some time cubemap pieces will appear in the list.

That's how easy it is to load assets into PlayCanvas. It is only necessary to keep order in the project and correctly divide it into folders for easier search and navigation in the project.

The next step, we will create the "CubeMap" shader, to do this, call the context menu in the "Assets" panel, then "New Asset" and select "CubeMap" from the list of possible assets. As you might have guessed, this is the shader that will be used as a background in the "Rendering" settings.

Name the shader "Sky" and drag and drop the pieces of images into the desired slots "Faces".

I drew a diagram of what names should correspond to each side of the cube.

As a result, you should have something like this.

Now, go to "Settings", the "Rendering" rollout, and with a simple drag and drop, assign the "Sky" shader as the "Skybox".

Start the project with the "Play" button. Fine! We now see the panorama of the desert, everything worked!

Preparing other CubeMap

We still have other cubemaps with "512" and "256" sizes. By analogy with the previous section, let's create the "cubemap_blurred" and "cubemap_superblurred" folders.

In each folder add the appropriate cubemap textures, create shaders in each folder named "cubemap_blurred" and "cubemap_superblurred".

I'll duplicate the "Faces" layout again.

And for the variant with the size "256", it will be like this.

Conclusion

In the next part of the tutorial, we will finish the work on the environment, don't miss it!

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 development of the Lamborghini Urus WebGL project in PlayCanvas and focuses on the next stage of creating an interactive automotive presentation.

2. What is covered in Part 2?

Part 2 explores additional development steps, project improvements, and new features that enhance the functionality and visual quality of the configurator.

3. Why is project planning important for automotive WebGL applications?

Proper planning helps maintain performance, organize assets efficiently, and simplify future development and maintenance.

4. Can PlayCanvas handle complex automotive models?

Yes. With proper optimization, PlayCanvas can display highly detailed vehicle models directly in a web browser.

5. Why is optimization critical in automotive projects?

Vehicle models often contain large amounts of geometry, high-resolution textures, and complex materials that can affect performance.

6. Can materials be customized in real time?

Yes. Interactive configurators can allow users to change paint colors, wheel finishes, interior options, and other visual elements instantly.

7. Does Part 2 focus on user interaction?

Yes. Improving user interaction and creating a smoother browsing experience are important goals during project development.

8. Can camera controls be customized?

Yes. Developers can create custom camera systems that allow users to inspect the vehicle from different angles and distances.

9. Is PlayCanvas suitable for commercial automotive configurators?

Yes. Many automotive brands use WebGL technologies to showcase vehicles and provide interactive customer experiences online.

10. Can these techniques be applied to products other than cars?

Yes. The same workflows can be adapted for furniture, electronics, real estate presentations, and many other interactive 3D applications.

11. How important is asset organization in large projects?

Proper organization makes it easier to manage files, optimize performance, and implement new features as the project grows.

12. Can projects like this run on mobile devices?

Yes. With appropriate optimization, PlayCanvas applications can work effectively on smartphones and tablets.

13. Are programming skills required for advanced features?

Yes. More advanced functionality typically requires JavaScript knowledge and experience with the PlayCanvas API.

14. What advantages does WebGL offer over static renders?

WebGL allows users to interact with the model, explore details, change options, and experience the product in real time.

15. Can the project continue to evolve after launch?

Yes. New features, configurations, visual improvements, and optimizations can be added throughout the project's lifecycle.

16. Who is this article useful for?

This article is useful for PlayCanvas developers, technical artists, automotive visualization specialists, and anyone interested in creating interactive WebGL experiences and vehicle configurators.

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.