Cool Features

#CFM - Cool Features of the Month: May

by Pich
5/6/2020

It's been a while we didn't provide an update of our new improvements made in our main tool: Naker.Story. We've been working hard these last months on our viewer, adding key features asked by our users to even more personalize your 3D interactive scenes such as color mapping and scroll effects. Let's check this out!

Viewer: In search of rendering quality

Since the beginning of Naker’s adventure, we’ve been searching to get the best quality ever in our viewer. This has always been our first priority 👆 Our viewer’s main job is to reflect your project and the job you’ve done with our tool. We want it to be super-efficient as well so that your watcher would be amazed by your 3D interactive scene and be excited to play with it.

Our challenge is to provide the same quality as Disney’s animated movie. From now on, your content will look sharper and more real than ever, in our last version of our Naker.Story viewer. Check the before/after hereunder 👇

The difference in quality rendering is even more visible when focusing on the logo.

This was possible thanks to two main things:

  • First, we made really deep research on how we could improve this rendering quality when there is no movement anymore in the 3D scene. Indeed, the moment when the 3D scene is static, that’s when you’ll focus and check all the tiniest details. In our previous version, we only pushed the rendering quality and the way it was done was not really performant. Now, our viewer pushes every parameter possible in the scene in order to obtain a perfect result. Once this is done, we render only one frame 👆 to keep the performance needs low. Thus, this frame can be considered as a perfect screenshot of your 3D content, greatly improving the general quality of your global scene.
  • Some of our users told us that the quality was not as good as expected on mobile devices. It’s true that today, most of our smartphones have greater pixelization than our computers and other screens. Therefore, to keep this same quality on every device, we pushed the global rendering when watching the 3D scene on mobile. In addition, some effects were altered depending on the screen size (like the Depth of Field or the Vignetting). So, we made some adjustments to provide the same result and quality no matter the device screen used by the watcher.

Color mapping: personalize your environment

This is one thing we didn’t know about, to be honest 😁. Célia, a great 3D web artist, helped us on a project and had this specific request: She wanted to adjust the atmosphere of its scene in Naker by using color mapping!
After some research, this turned out to be totally doable thanks to the engine we use: Babylon.js.

HSV input example from c4d

The color mapping is set by three parameters: Hue, Saturation, and Lightness 🌈 (HSV as some of you may already know). It leads to this kind of input which you might have already seen in any image edition tool.
In Naker, you have now the possibility to adjust this input when you are in the Environment tab. That way, you can design the atmosphere and vibe you’d like your scene to reflect. Moreover, you can find it in our Journey tab as well, to have the possibility to personalize the environment of your 3D scene throughout the scroll experience.

Scroll Magic: step-by-step, inertia and speed

One important feature in Naker is the camera movement that follows the scroll 🖱️ of your page or container. In the past, the viewer experience was not always the same because it really depends on the device used by the watcher (computer, mobile, tablet, …). If you scroll from your touchpad, from your mouse wheel or from the screen of your smartphone, it is not handled the same way by the browsers (go figure 🙄).

So, how do we handle this now? We are individually managing each case in order to, again, have a consistent experience whatever the device and platform you’re using.

We also added new options that enable you to be more precise in the way the camera is following the scroll. (In Naker, go to the Journey tab to check these options). You can find three main ones:

  • Scroll step by step: Switch on/off to choose if the progress will be step by step or not. Indeed, sometimes you don’t want the camera to stop on your SceneViews but just to be free and go back or forward without having to stop at each step.
  • Scroll inertia: this manages how slowly the camera movement is catching the real progress position. In fact, when the finger is lifted after swiping, it continues scrolling and slows to a stop. A higher value of Scroll inertia causes the camera to go smoother from one SceneView to another.
  • Scroll speed: you can set how fast the scene progresses from start to end for the same amount of scroll by the user. That way you can force your watcher to take its time and enjoy the show for instance 😆.
    Note: this option will not be taken into account if your content is in the body of your webpage. In that case, it’s the scroll of the window which will define the speed.

Conclusion

Again and again, we are continuously trying to become better according to your feedback and needs. We even rethought our way to prioritize our development feature based on those needs. So please do keep sharing with us what you like and dislike in Naker by contacting us in the chat or at frisbee — at — naker.io. This is really important for us!

Share