Blend4Web 15.06 Released!

If we used the traditional way to name versions of our framework, then we would call this release "Blend4Web 2.0" - that's how important the features implemented this time are! Among them, you will find the interface thoroughly revised, the new normal editor, support for all Blender's shading models, proper handling of Cycles nodes and many more.

The New Interface

In order to better describe the origin of the changes which took place, we would like to remind you of how the interface was structured up to this moment. As you know, authoring scenes for Blend4Web is provided by the add-on for Blender. Not only does this add-on export scene data, but it also adds new parameters to setup scene components (objects, materials etc). At the same time, Blender, which is the multi-functional suite for creating 3D graphics, has many settings and supporting all of them is neither practical nor possible in real-time engines.

As a result, our users were faced with the inconvenience of sorting through multiple settings which cluttered the interface yet were not supported by Blend4Web. Moreover, Blender Game Engine (BGE) contributed to this disarray as well, because you had to switch back and forth between different modes to setup physics and materials' transparency and other settings. Our users had to carefully study the documentation in order to understand all these nuances.

Together, with our community, we were able to work out a solution. First of all, we have added a new Blend4Web mode alongside with BGE and Cycles, to hide all unsupported settings upon switching to it.

Menu for switching between Blender's render engines.

Secondly, all supported settings were rearranged in functional groups. Blend4Web-specific parameters, Blender's native settings and BGE settings were combined to a single, structured system.

Settings in the Material tab, tidied up and consolidated. Enabling transparency is now straightforward. Click the image to enlarge.

Thirdly, we have added options to the render interface for automatic enabling of features when it is possible. As a result, our users no longer have to explicitly enable shadows, for example. The engine will take into account any shadow casting and receiving objects, if present in the scene, on its own.

Automation options in the global settings.

We took the opportunity and made many other minor improvements in the interface: some settings were renamed, for some others we have changed the default value and so on. All changes occured are reflected in the user manual.

We believe that all this effort applied marks an important milestone on the path of Blend4Web becoming convenient and an integrated environment for developing interactive web applications. We express our thanks to Blender developers and personally to the Blender Foundation chairman, Ton Roosendaal, for reviewing and approving our patch (D1188) which allowed us to implement this crucial functionality for our users.

The New Normal Editor

As we promised, we have included our new normal editor in this release. It is difficult to overestimate the significance of this tool for creating content for real-time graphics. In computer graphics, normals (mathematically, vectors) describe surface inclination, which illuminance level depends on. By editing normals, an artist can manually add shadowing in needed places of a model, thus avoiding adding resource-hungry geometry. This tool makes it possible to create high quality content for interactive web applications, which strictly require high performance and low network traffic.

On the left - the original model, on the right - the same model after editing normals. Below, the wireframe and direction of normals are shown. Click the image to enlarge.

The features of the new normal editor are described in a separate article.

Due to multiple inquiries about the functionality and terms of use of this tool, we would like to clarify some aspects here. Firstly, the new normal editor, unlike the old one, works with skeletal animation. Secondly, commercial project teams can use this tool for free, including authoring content for other engines such as Three.js or Unity.

Automated Re-export

Another useful tool we have implemented in response to wishes of our users is what we call Mass Reexporter (you can find it at the very bottom of the Render tab). As a rule, a newly released version of Blend4Web requires exporting your scene files again. In order to automatically export files - which some projects can have a great amount of - you could use the dedicated Python script from the SDK. From today on, this operation can be performed simply by pressing a button in Blender.

Re-exporting files of the upcoming Capri project.

All you need to do is to select the root directory where your exported scenes are stored (both in JSON and HTML format). The script will recursively iterate through subdirectories to find the corresponding blend file for each exported file, and will try to re-export it using the same file name. The results will be logged in the info window. In the case of an export failure, the window will display the path to the source file highlighted in red, so you can check this file manually.

SDK Installation and Updates

The number of the SDK installation steps has decreased a bit because the SDK directory path is now detected automatically. Also, Blend4Web can now check for updates - upon every startup of Blender it will request blend4web.com (this option is off by default).

Add-on preferences window.

The button Report a Bug now opens the forum section intended for reporting bugs. We will no longer pass on your complaints to Blender devs.

Materials

After implementing the diffuse shading algorithms Toon and Minnaert and the specular shading algorithm Blinn, Blend4Web started supporting the full range of Blender's shading algorithms.

The Geometry node is fully supported after we have implemented its outputs Local and Orco. In order to stabilize workflow for node materials, we have added stubs for the to-be supported nodes RGB Curves, Vector Curves, ColorRamp and for all Cycles nodes. Nevertheless, some Cycles nodes were implemented partially or in full, to the extent it is possible in the viewport.

Geometry node. To-be supported nodes RGB Curves and ColorRamp.

To further improve consistency, we reproduced Blender behavior in case of absence of the Output node (black color will be displayed instead of erroneous magenta).

Ray Casting and Decals

Ray casting is a widely used method in interactive graphics and in game development, for example, for measuring distances, detecting visibility of objects and confirming the outcome of shots fired. This method is based on checking the intersection of an imaginary line with objects.

For this release, we substantially extended the possibilities of ray casting. You can now obtain the coordinates and the normal at the collision point (before, only distance could be obtained), and also the reference to the object itself. Practical use of this functionality can be seen in this simple yet funny demo.

Ray casting demo.

Please pay attention to traces left by mouse clicks - they are implemented with textured planes aka decals.

Other Improvements

API methods were added to control the motion blur effect.

Vertex group weights can now influence Hair particle size (field Vertex Groups -> Length).

The method scenes.marker_frame() was added to retrieve the frame number for a marker on the Blender timeline. As a result, the starting and ending frames for playing back a strip of animation can now be visually defined - much more convenient than defining their numeric values in the app code!

The markers for animation strips used for the upcoming visualization of dairy manufacturing.

Two new modules, rgb and rgba, were added to the API to facilitate conversions between color encoding systems customary in 3D graphics and web development. You may recall that in Blender and Blend4Web color channels are stored in a range from 0 to 1 (in linear space), whereas in HTML and CSS colors are encoded from 0 to 255 (in sRGB space). These new APIs also support hexadecimal colors (hex).

Now, the camera smoothing factor can be tweaked with the get/set_camera_smooth_factor() methods of the app.js add-on. In order to control camera smoothing when pointer lock is active, the corresponding methods of the mouse.js add-on should be used instead.

Conclusion

The presented Blend4Web release is compatible with Blender 2.75. The full list of changes and fixed bugs can be seen in the release notes. Blend files for all examples mentioned in this article are included in the Blend4Web SDK. Please leave your comments in this forum topic.