After releasing our new version Herodote in January (see here), let’s start again our monthly review of the new features added in Naker, the Cool Features of the Month: February.
ICONS
As an editor tool, we use a lot of icons on our interface. We counted more than a hundred 💯 different icons only for the Naker editor. So, this is obviously a lot of work when you want to change them. Like many, we used a bank icon like nounproject to begin. And more precisely we used that icon collection by ProSymbols which is very complete and follow straight design rules. Because this is the hard part when you work with icons. This is easy to find icons which will represent what you want or need to express among all the banks that exist. But this is really hard to find icons which will work with each other, especially when you deal with a hundred icons.
That is why we decided to make our own icons thanks to the knowledge of our designer. AS we are a 3D editor, we look for inspiration in other 3D tools 🔧 like paint3D, Unity, 3ds Max, etc. The easy-to-understand and cute icons from paint3D convinced us the most and this is how we had the idea to use icons with different layers. Which was not especially a good idea at first because, for performance reason, icons are almost always generated with a font on the web. And a font only uses one layer/stroke, but we decided to try it anyway and see what would come out. And the result was quite interesting!
We use the app iconmoon in order to generate our font from svg icons, and the tool exported us what we could call HTML icons. The icons were drawn using several HTML nodes for every layer (Line, Back and Ground). And where it can seem annoying having to deal with all those nodes, we saw it as an opportunity to make really cool icons very easily. So, in addition to having brand new 3D icons, we can custom and animate their opacity and colours directly on the front end.
Finally, you have to admit the pizza icon we used was not the best one to express “use your own model”. 😆
HOTSPOT
Hotspot was added with the Herodote version. They are “call to action” which you can put along your journey to make your text appear. Thanks to your feedback we made some changes in order to make them more appealing. First, we added camera movement when you click on a hotspot so that the view focus 🔍 on what you want to show and thus reinforce the link between the content in your scene and what your user will read. Plus, it makes a pretty cool effect seeing the camera moving to the point of interest in addition to the classic scroll effect.
We also made some changes on the text part, we decided to limit the options on text and its length (300 letters) of your story in order to guarantee that your text will look great on any device (mobile, computer and VR). So even if we know this may be limiting, we think this is better to make sure for you that your story will be always accessible and readable. Plus we know that limitation can boost creativity and make your message more impactful.
PBR
Certainly the biggest improvement of this month is the use of PBR materials. PBR is for Physically Based Rendering! One problem we observed was that in many Naker scenes, there was a difference of light reaction 💡 between the model loaded and the object created directly from Naker. Another problem we had was that it could be hard to have very realistic materials using a standard one. We found out most of the model imported in Naker were using a material type called PBR. So we look into it and see how this specific material was working. We were surprised to see that this material was offering very nice effects and an improved quality of the rendering. It was enough to convince us and make the switch.
First, we had to perfectly understand how this material was working. PBR add a layer of complexity, we have to understand how far our users want to go but keeping in mind that it should be web friendly and understandable by everyone. The main thing that brings PBR is the metalness and roughness parameters which allow you to choose how your object will react to light and reflection texture giving very impressive glossy and metal effects 🔮. And for the rest, this is mainly the same things as colours and textures for diffuse, emissive, etc.
Plus, we also added a new option in the environment: this is the “scene reflection”! The PBR material uses a reflection texture to make the object bright or shiny because indeed in real life a metal will reflect the world around him 🌟. That is why if you want your scene to have that effect, you just have to set a reflection image and we take care of the rest.
Thanks to PBR we now have no more different light reaction on every object in the scene which makes the creation a lot easier and the result a lot better.
This is a very simple explanation of how PBR works and limited to how we use it in Naker but if you want more detail about PBR, here are some very useful links:
- https://www.youtube.com/watch?v=_LaVvGlkBDs
- https://marmoset.co/posts/basic-theory-of-physically-based-rendering/
And the Babylon documentation for those are familiar with coding:
- https://doc.babylonjs.com/how_to/physically_based_rendering
THANKS
If you want to try those new features, you can register freely on our tool HERE, we are always looking for feedback in order to know what will be the next big changes to help you make the web cool again.
Thanks to you all for reading this #CFM, we will keep you in touch next month with a lot of new features again! 😜
