Blend4Web 16.07 Released

We are glad to present a new release of Blend4Web, an open source solution for creating 3D web experiences. This version delivers hardware-accelerated geometry instancing, multi-touch support, upgraded depth of field effect (now with bokeh!) and multiple improvements in the audio subsystem including implementation of the Doppler effect.

Geometry Instancing

In one of the previous releases we already mentioned instancing in the context of API for copying objects in run-time. This time we'll speak about another common CG technique called geometry instancing. This technique allows the engine to render multiple object copies in just one draw call, which significantly reduces memory footprint and improves overall performance, especially on mobile devices where memory is scarce.

Instancing is currently available for HAIR particle systems, typically used for placing vast foliage such as trees, bushes and grass. In the demo below the amount of video memory occupied by geometry decreased by almost 80 times (from 160 Mb to 2.1 Mb) after this technique was applied!

Hardware-accelerated instancing in WebGL 1.0 is provided by the ANGLE_instanced_arrays extension which is widely present across desktop and mobile platforms. This functionality is also included in the core of upcoming WebGL 2.0 specification written against OpenGL ES 3.0 standard. Blend4Web enables geometry instancing automatically on supported systems and falls back to non-instanced rendering in the rare case when this API is not available.

Multi-touch and Picking

Blend4Web API now support multi-touch events! This simple code snippet demonstrates how you can setup this feature in your mobile applications.

Try to tap everything!

Moreover, thanks to our optimization efforts, the latency of picking objects has been significantly decreased. This was technically accomplished by rendering a scene with a very narrow camera frustum into a 1x1 pixel framebuffer. As a result, interactive scenes were made very responsive, especially on touch-screen devices. Check this old demo on your mobile device - playing piano is now far more comfortable than before!

Playing this piano is now easier.

DOF with Bokeh

Today we present an amazing upgrade for depth of field. Firstly, the effect was made more realistic by taking scene depth into account so that it now affects the amount of blur. And secondly, bokeh, an interesting photographic effect when blurred highlights appear at light spots, was added to greatly improve the perception of 3D images.

You can tweak this effect in real-time in the Scene Viewer using parameters described in the User Manual. We are going to make bokeh even more configurable by the next release.

DOF settings are located under camera's Object Data tab.

Audio and Doppler

The engine's positional audio subsystem built over the Web Audio standard has been further pushed ahead. First, the audio context is now automatically created if any sound sources are present in a scene. Consequently, the Audio checkbox has been removed from the user interface.

As the Doppler effect was removed in the recent editions of the Web Audio specification, Blend4Web now offers its own implementation of this highly entertaining feature. Just animate your speaker in Blender and switch the feature on with Enable Doppler. Check out this small demo!

Doppler shift in action.

We didn't stop there - the user interface for setting up global audio parameters was reworked in order to follow Blender's native settings as closely as possible. Namely, Volume, Distance Model, Speed and Doppler are now all supported by Blend4Web.

Global audio settings are located under Scene tab.

Speakers themselves obtained a new Auto-play option - when enabled, an audio source will start playing sound after a scene is loaded.

Audio settings for individual sound sources are located under Object Data tab.

Finally, sound professionals will appreciate the possibility to generate advanced audio loops. Using the new Loop Start and Loop End options as well as the sfx.loop_stop() API method you can create start, loop and stop sections in a single audio buffer. Particularly, you can create basic ADSR envelopes (stands for attack, decay, sustain, release) using this new API.

More Improvements

Following the feedback from our users who struggled a lot trying to set up a preloader for their apps, we introduced a simple API method, create_preloader(). This method does not depend on any HTML elements yet it is still configurable, and it allows developers to easily add a box-shaped preloader bar to calm down the most impatient users. This preloader is automatically added when you create a new application with the Project Manager.

This minimalistic preloader is available by default in newly created projects.

Upon user request we have added the possibility to limit the FPS via configuration API.

And, in what is seemingly becoming a monthly tradition, we added new materials as well as usage examples to the material library raising the total number to 27. New materials include human skin, car paint, carbon fiber, metals and others.

Some new entries in the material library.

In Closing

The full list of what we were able to accomplish this month can be found in the release notes. As usual, all source files of the demos presented on this page are included both in the Community Edition and PRO distributions. Feel free to leave your feedback on the forums!