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 3

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

In the previous part, we prepared all the necessary CubeMap and changed the background in our project.

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

In this part of the tutorial, we will finish the environment and even make the first animated texture, as well as deal with the lighting and create the sun effect.

Let's not waste a minute...

Creating the ground surface

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

We need to create a surface on which the car will stand to cast the shadow. And let's apply a little trick - let's make a Tiling Offset animation to simulate movement. We do not need to move the whole car - we will create the illusion of movement.

Let's create a "ground" subfolder in the "env" folder of the "Assets" panel. In it we will add textures and shaders related to the substrate.

Immediately add to the textures folder: gradient circular black and white texture for "Alpha" and "Normal" bump surface map.

ground alpha3
Radial gradient
ground 4k normal
Normal map

I got it like this.

playcanvas ground textures

Next, let's create a plane, to do this, in "Hierarchy" press the plus button and select "Primitive → Plane" from the list.

playcanvas create plane

Name the plane "ground". Since it is not possible to set the size of standard primitives in PlayCanvas, we will increase "Scale" to 120, see the screenshot below.

playcanvas scale plane

Let's create a new material for our surface. In the "Assets" panel, use the context menu to create "Material".

playcanvas create new material

Go to the material settings by double-clicking on the shader. Name the material "M_Ground". In the material settings, in the rollout "Offset & Tiling" uncheck the box for "Apply to All Maps".

Go to the "Diffuse" scroll and change the color to "226, 226, 226". This color is selected empirically, the main thing is that the color of the material matches the color of the sand from the environment. Let's leave these values ​​for now, later they can be adjusted when the light is fully adjusted.

Assign "Opacity" black and white map "ground_alpha3" in "Opacity" rollout, set "Blend Type" to "Alpha" mode.

In the "Normals" rollout, enable the "ground_4K_Normal" map and set the "Tiling" texture repetition to 8.

playcanvas create ground material

We assign a material to the plane by simply dragging the material in "Viewport" onto the "ground" object.

As we can see, the black and white transparency map with a radial gradient gives a smooth transition between the ground and our surroundings.

Create an animated texture

Below is an example of JavaScript that is responsible for animating the texture. Look at the screenshot below how it can be easily downloaded. You need to call the context menu on the link labeled "view raw" and click "Save link as...". See the script code below the screenshot.

playcanvas script scrolling texture

If you do everything right, you will see the downloaded script in your downloads folder.

download js scrolling texture

Go to PlayCanvas, open the "scripts" folder in the "Assets" panel and drag the "scrollingTexture.js" file there.

playcanvas upload script

Using this script, select the "ground" object in the "Hierarchy" panel, and in the "Inspector" panel, click "Add Component". From the list of components, select "Script".

playcanvas add script component to object

From the drop-down list of scripts, select "scrollingTexture". With such not tricky movements, we can assign any scripts to objects.

playcanvas apply script to object

After applying the script, its settings will be available to you. In fact, you do not need to go into the code to make any changes, for example, change the texture movement speed, everything is done through a convenient interface. This is the convenience of PlayCanvas over other web engines.

playcanvas scrollig textures script settings

In the "Assets" panel, navigate to the "env → ground" folder. Click on the pencil icon next to the "materialAsset" for the "scrollingTexture" and select the "ground" material from the list of assets. Set the first value of the "speed" parameter to "0.05".

playcanvas assign assets to script

Try to start the project with the "Play" button. If you did everything right, you should see how the texture will shift.

Lighting settings

Select "Light" from the list of objects, in the "Inspector" panel, set the following values ​​from the screenshot below. You can also specify similar values ​​for "Position" and "Rotation".

playcanvas light setup
playcanvas light setup 2

Once the position of the sun is set, you may notice that there is almost no transition between the background and the environment. If desired, you can always change the background color of the "ground" material in the "Diffuse" rollout.

At this stage, you can finish setting up the lighting. In the future, light sources will be added to illuminate the interior and some parts of the car, but this is after setting up all the materials.

Sun effect

playcanvas sun effect

To create the effect of the sun, I went to "Google Pictures", wrote a query "Sun lens", set the search settings for large and free images.
I liked the option in the picture below. I contrasted it a bit in Photopea and painted some of the edges with black.

sun lens google

When saving, I specified the size "1024x1024px" despite the different aspect ratios of the image. This is done because Playcanvas needs to prepare textures that are multiples of 2 and preferably square in size. In the end, I ended up with something like this.

edited test lens

I then created a new "Entity" by clicking the plus in the "Hierarchy" panel and selecting "Entity" from the list.

playcanvas create entity

In this "Entity", we will add a new "Plane", to which we will assign a material with the texture of the sun. We need an additional "Entity" for the script, which we will hang in the sun.

Name "Entity" for example "Sun Glow" without deselecting "Sun Glow", create "Plane" with the following parameters.

playcanvas sun params

Please note that we have removed all options for casting shadows. Now let's create a material in the "env" folder with the name "M_SunGlow" and the following parameters. And assign a material to our "Plane".

playcanvas sun material 1
playcanvas sun meterial 2

I think the parameters "Diffuse", "Opacity" and "Emissive" are clear to you. But in the "Other" rollout, we turned off absolutely all the checkboxes. Thanks to this, the sun will be drawn on top of other objects and will not be affected by light and environment settings.

For "Entity" - "Sun Glow", position and rotation parameters have been additionally adjusted.

playcanvas sun glow pos and rot

Thus, we moved the sun to approximately the desired position relative to the environment. It is important that "Plane" is in the position "0,0,0", and all positioning manipulations should be carried out with the parent "Entity".

playcanvas sun runtime

Let's hang on "Entity" - "Sun Glow" script "hotspot", which will rotate the sun so that it spins along with the camera and is always perpendicular to the camera's view.
See the script code below. Right click on the link "view raw" and save the file "Save link as...".

Most of the necessary scripts have already been written by someone and can be used. For example the "hotspot.js" script I found in the official tutorials:

Just opened the project from the link and downloaded the required script.

Load "hotspot.js" into the Playcanvas in the "Assets" panel, in the "scripts" folder. By analogy with the previous example, for "Sun Glow" add a new component via "Add Component", select "Script" from the list and select "hotspot" from the drop-down menu of scripts.

playcanvas hotspots script

In the script settings, select "Camera Entity". Click on "Select Entity" next to "Camera Entity" parameter and then in "Hierarchy" select "Camera" object.


Ready! Now, if you start the project by clicking the "Play" button, you can see how the sun spins behind the camera, and if the rotation exceeds 90 degrees, the sun disappears, which is what we wanted to achieve.

In the next part of the tutorial, we will figure out how to load 3D models into the scene, as well as set up the camera.

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

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