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.
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.
And the whole process of working on the scene will not differ from the usual work in 3Ds Max.
For those who are interested in what features PlayCanvas has, you can follow the link below:
And, on the next page, you can see examples from other developers:
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:
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.
Do not forget to write the name of the project and click the "Create" button.
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:
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".
- Resizing a component
- World/Local axis switch
- Focus on selected object
- Undo last action
- Redo last action
- Light Mapper
- Code editor
- Publishing a project
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.
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?
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.
Go to the "Creating a Lamborghini Urus Project" Part 2