Blend4Web

Overview

The Blend4Web framework leverages Blender to edit 3D scenes. Content rendering relies on WebGL, Web Audio, WebVR and other web standards, without the use of plug-ins.

It is dual-licensed and is distributed under an open source GPLv3 and a commercial license; the source code is hosted on GitHub.

A 3D scene can be prepared in Blender and then exported as a pair of JSON and binary files to load in a web application. It can also be exported as a single, self-contained HTML file, in which exported data, the web player GUI and the engine itself are packed. The HTML option is considered to be the simplest way . The resulting file, which has a minimum size of 1 MB, can be embedded in a web page using a standard iframe HTML element. Blend4Web-powered web applications can be deployed on popular social networking websites such as Facebook.

The Blend4Web toolchain consists of JavaScript libraries, the Blender add-on and a set of tools for tweaking 3D scene parameters, debugging and optimization.

Developed by Moscow-based company Triumph in 2010, Blend4Web was publicly released on March 28, 2014.

Features

The framework has a number of components typically found in game engines, including positional audio system, physics engine (a fork of Bullet ported to JavaScript), animation system and an abstraction layer for game logic programming.

Up to 8 different types of animations can be assigned to a single object, including skeletal and per-vertex animation. The speed and the direction of animation (forward/backward play), as well as particle system parameters (size, initial velocity and count) can be changed though the API.

Among other supported features are scene data dynamic loading and unloading, subsurface scattering simulation and image-based lighting.

Some out-of-box options exist for rendering extended outdoor environments, including foliage-wind interaction, water, atmosphere and sunlight simulation. One example demonstrating these effects is "The Farm" tech demo, which also features multiple animated NPCs and the ability to walk, interact with objects and drive a vehicle in first-person mode.

Being based on the cross-browser WebGL API, Blend4Web runs in the majority of web browsers, including mobile ones. There are some caveats for browsers with experimental WebGL support, such as Internet Explorer. There are also applications developed to run on Tizen-powered devices such as Samsung Gear S2 smartwatch.

Advanced features include draw call batching, hidden surface determination, threaded physics simulation and ocean simulation.

In version 14.09, Blend4Web introduced the possibility of adding interactivity to 3D scenes using a visual programming tool. The tool is reminiscent of the BGE's logic editor as it uses logic blocks which are placed inside Blender. It plays back animation tracks authored by an artist when the user interacts with predefined 3D objects.

Since version 15.03, Blend4Web has supported attaching HTML elements (such as information windows) to 3D objects ("annotations") and copying objects in run time ("instancing").

The following post-processing effects are supported: glow, bloom, depth of field, crepuscular rays, motion blur and screen space ambient occlusion.

Virtual reality devices have been supported since the end of 2015. Specifically, Oculus Rift head-mounted display works over experimental WebVR API. The software also now includes preliminary support for gamepads, based on the Gamepad API.

Blender integration

The Blender add-on is written in Python and C and can be compiled for the Linux x86/x64, OS X x64 and MS Windows x86/x64 platforms.

A Blend4Web-specific profile can be activated in the add-on settings. When switching to this profile, the Blender interface changes so that it only reveals settings relevant to Blend4Web.

Blend4Web supports a set of Blender-specific features such as the node material editor (a tool for visual shader programming) and the particle system. There is basic support for Blender's non-linear animation (NLA) editor for creating simple scenarios.

Blend4Web is essentially based on Blender's real-time GLSL rendering engine, which users are recommended to use in order to enable WYSIWYG editing.

Blender Game Engine

Similar to the Blender Game Engine, Blend4Web directly loads and plays back scene data extracted from Blender, without the use of an intermediate editor. Being a web framework, it targets web browsers while a BGE executable must be run offline. It provides its own JavaScript API rather than a Python-based API. A web development approach is taken instead of a combination of logic blocks and Python scripting used in the BGE.

Unity

Unity has offered a WebGL build option since version 5. A survey by a Unity game developer was conducted to compare these two engines. Two interactive web-based presentations of a turbofan were created using Blend4Web and Unity. Although the author noted that both engines produced similar visual quality, Unity's WebGL build had a total file size of 142 Mb (uncompressed) while the Blend4Web's exported HTML file for the same scene was only 1.8 Mb (uncompressed).

According to their WebGL roadmap, Unity has no plans to support mobile devices, positional audio system and video textures in the near future.

Three.js

The popular WebGL library, Three.js, is reported to require programming for trivial tasks, thus demanding more competence from users and offering a slow learning curve. In Blend4Web, most of the work in preparing online presentations can be done without any programming.

Notable uses

NASA developed an interactive web application called Experience Curiosity to celebrate the 3rd anniversary of the Curiosity rover landing on Mars. This Blend4Web-based app makes it possible to operate the rover, control its cameras and the robotic arm and reproduces some of the prominent events of the Mars Science Laboratory mission. The application was presented at the beginning of the WebGL section at SIGGRAPH 2015.

Dassault Systèmes presented an interactive card to greet its customers with the upcoming Christmas holidays.

Greenpeace created interactive 3D infographics to back Greenpeace's Detox campaign in Russia.

Tallink featured an interactive 3D presentation of its MS Megastar vessel to allow the visitors to browse details of the ship.