Every $2 will be transferred to the Ukrainian Volunteers Fund. Do not remain indifferent, support Ukraine!

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


Author MastaMan
Updated on June 14, 2022
English and Русский

Index

Intro

This is Part 1 of a series of tutorials on how to create a Lamborghini Urus using WebGL / PlayCanvas.

In this part, we will look at what WebGL is and understand how the PlayCanvas web game engine works.
And also let's start preparing for creating the environment in the scene.

Be sure to watch the video below, this is how the project will look like. Liked? Well, let's get started...






Although the Urus car is used as an example, all the practices that are used in this project can be applied to archviz projects as well.
For example, you can create a configurator for kitchens, cottages, mobile phones, or whatever you can imagine.


This project is indicative and it "stuffed" quite a lot of different components to show all the possibilities. Therefore, after reading this lesson, you can make your own project, of almost any complexity.

What is WebGL

WebGL is a technology that allows you to view 3D graphics interactively. WebGL is built by default in all modern browsers and you don't need to install or configure anything. The main feature is cross-platform.

This is the advantage of WebGL, that you can simply share the link and anyone can see your project.
There is, of course, the other side of the coin to all this, this is the quality of the graphics. It will be much lower than, for example, Unity or Unreal Engine.

Nevertheless, games (even multiplayer ones), configurators, panorama viewers, 3D model viewers, etc. are created on WebGL.
The most famous examples: SketchFab, Google Earth, Reno website, etc.


Although WebGL uses a fairly simple programming language - JavaScript, we will still consider a more convenient option - PlayCanvas. Where programming skills will practically not be involved, and for some complex examples, you just need to copy a few lines.
And the whole process of working on the scene will not differ from the usual work in 3Ds Max.

PlayCanvas

playcanvas editor
Loading...
PlayCanvas is a visual development platform for interactive web content. Both the tools and the web apps you build are powered by HTML5. The platform is web hosted so there's nothing to install and you can access your work from any device that runs one of the supported web browsers.

For those who are interested in what features PlayCanvas has, you can follow the link below:

PlayCanvas Introduction


And, on the next page, you can see examples from other developers:

Examples


Why PlayCanvas? It is convenient, easy to learn, it has a large community, an excellent manual, a bunch of examples and has its own free store with different assets.
Despite the fact that this is a paid platform, you are given 1GB of free space to create your projects, which quite enough for several projects.

Well, don't waste time and register for:

https://playcanvas.com/


Registration is pretty easy, you can even sign in with Google OAuth. Click "Sign In" and follow the instructions.

We get into our account, go to the "Projects" tab - here we see a list of projects and various information. For example, you can click on "Docs" in the top right corner to open the manual. There are examples and a good description of how to use PlayCanvas, and by scrolling down the page, you can select "Russian language", which will be convenient for many users.
playcanvas account
Loading...

Create project

So, let's create the first project - go to the "Projects" tab and create a new project by clicking "New". You will see a window in which you need to select "Model Viewer Starter Kit".
playcanvas new project 2
Loading...
There are other options: create a regular empty project and a preconfigured VR project.

Do not forget to write the name of the project and click the "Create" button.
playcanvas project
Loading...

PlayCanvas Editor

After all the operations done, we get to the editor. It reminds me distantly of Unity.
playcanvas opened editor
Loading...
We are greeted by such a simple interface.

On the left is a panel with a list of objects. Below is the asset library. On the right is the object inspector.

The long panel on the left, these are buttons with basic functions, such as:

  • Move
  • Rotate
  • Scaling
  • Resizing a component
  • World/Local axis switch
  • Snaps
  • Focus on selected object
  • Undo last action
  • Redo last action
  • Light Mapper
  • Code editor
  • Publishing a project
From the hot keys I use: 1, 2, 3, these are moving, rotating and scaling, respectively. The same as in 3Ds Max - "W", "E", "R".
I also often use the F key to focus and zoom in on the selected object, analog "Z" buttons in 3Ds Max.

Let's see what our project looks like. Press the "Launch" button (hereinafter referred to as "Play") on the top right.
playcanvas press launch button
Loading...
Great, this is how the project starts. This is how the end user will see it.
playcanvas runtime
Loading...
As you can see, you can rotate around the object, move away with the mouse roller.
We have a default light, background and object. We can say that we have already created such a 3D model viewer and not a single gram of code. Great, isn't it?

Environment settings

playcanvas settings
Loading...
To configure the environment, you must click the "Settings" button, as shown in the screenshot on the left below. Next, go to the "Rendering" rollup and set the following settings as in the screenshot. These settings will help give the overall picture a bit of an artistry.
Once the scene is assembled, you can play around with these settings and see how they affect the scene.
But in general I achieved the effect of a bright faded picture with pale shadows.

The option to disable "Preferer WebGL 2.0" was disabled because shadows seemed to look worse with this option.

Conclusion

For more details on how the environment was created, read the next part of the lesson.

Go to the "Creating a Lamborghini Urus Project" Part 2


{{commentsMsg}}
  

No one has posted a comment yet
{{comment.lastname}} {{comment.name}} {{comment.date}}
{{comment.text}}


SUBSCRIBE TO OUR NEWSLETTER

{{subscribeMsg}}