Hi there, I’m sure you would agree that a good texturing is one of the basic steps of 3D Visualization. That’s a topic I’d like to discuss today in this blog post.
PBR stands for Physically Based Rendering, this an approach in computer graphics that uses our real-world physic to calculate how a shape should render thus making the game looking way more realistic and qualitative!
Every part of the game Wazana.io now uses PBR including the lobby webpage. You will notice that the background of the lobby has greatly improved thanks to that edit. In addition to PBR materials, there is something really important to get a great rendering quality: this is the environment texture. Basically the sky around you in the 3D world, this 360 degrees texture allows us to have a great gradient background clearly visible in the lobby here:
Having a beautiful sky gradient is interesting, but this is not what will make your scene looks great. To go further the environment texture also brings a lightmap. The same way you can see the colors of the sky in a 360 view, the lightmap store the light sources and colors in this same 360 view. And thanks to that, the scene will be able to draw every element skin depending on those light sources included in the environment texture making the scene looks real!
You will also notice that when changing the map color in the lobby, it can take some times before the new color is applied. This is due to that specific environment texture. Indeed to store the colors and the lightmap in a 360 view, this extended image can be heavy. Fortunately, I managed to optimize it to 1MB which gives enough image quality to have a good result but still not blazing fast to load.
If you are interested to know how to create and generate a full 360 environment texture and add it in a 3D online scene, do not hesitate to comment on this article. And if you like the texture used on Wazana.io you can download them here!
Let’s go back to PBR now: as you can see in the lobby image (the first screenshot of this article), the environment texture is really blue. And the lightmap associated with it will also emit a lot of blue light. This is something we will observe while playing and building your base in Wazana.io. In the second image (above) lots of blue shades can be seen, which is due to that blue light emission impacting the ground, the water, and the buildings. What PBR will do is that it takes all those light sources and reflect the result depending on 2 main parameters: roughness and metallic. This is where PBR is actually very powerful as any object around us reacts to light very differently depending on those 2 parameters. Here is the result it gaves when playing with metallic and roughness of a material.
Thanks to PBR and environment texture available in BabylonJS’s powerful engine, we managed to greatly improve the look and feel of Wazana.io lobby webpage and gameplay. We hope you will like that optimisation and that it will make the game experience more enjoyable.
As always if you have suggestions to improve the game Wazana.io or if you want to contribute, do not hesitate to message us at hello@wazana.io. We are currently looking for a 3D modeler to improve the buildings and mesh of the game BTW! Cheerz
