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.
And the first part of the lesson.
Go to the Lesson "Creating a Lamborghini Urus Project" Part 1
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...
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 DeviantArthttps://www.deviantart.com/as-dimension-z/art/Salt-Pit-Free-HDri-755583634
After writing a request "HDRI to cubemap online" in Google, go to the site using the first link:
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.
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.
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.
Let's create a folder "env" and a subfolder "cubemap" in it, as follows:
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.
In each folder add the appropriate cubemap textures, create shaders in each folder named "cubemap_blurred" and "cubemap_superblurred".
Go to the "Creating a Lamborghini Urus Project" Part 3
Go to the "Creating a Lamborghini Urus Project" Part 1