Blend4Web, an open platform for creating three-dimensional web applications

The following is the contents of a review article about the Blend4Web platform , which I wrote for Mozilla Hacks, with changes and additions.

In March 2014, a team of Russian developers presented the first public release of Blend4Web, an open platform for creating three-dimensional web applications. This article discusses the history of the development of the platform and the prospects for its application.

What is Blend4Web?

In short, Blend4Web is an open platform for creating three-dimensional web applications. It uses Blender , the popular open source 3D modeling software package, as its main content creation tool. 3D graphics are displayed using WebGL technology, which is also an open standard. These two keywords - Blender and Web (GL) - most fully describe the purpose of this platform.

The full source code of the Blend4Web platform, as well as several examples of its use, are publicly available on the GitHub website under the GPLv3 license (a commercial license is also offered).

3D internet

On June 2, Apple introduced new operating systems - OS X Yosemite and iOS 8 - including WebGL support in the Safari browser. This event marked the end of the 5-year development cycle of WebGL technology, which began with the first unstable builds of browsers (such as the alpha version of Firefox 3.7). Currently, all major desktop and mobile browsers support this open standard for displaying 3D graphics, no longer requiring the installation of any plug-ins.

It was a long and difficult way that Blend4Web developers followed the development of WebGL technology. Broken functionality, hanging browser tabs, warnings about the "insecurity" of the technology from some major playersThe inaccessibility of technology in public browser releases was a source of certain risks. Still, the unique ability to play three-dimensional graphics (and sound) in browsers was worth it.


The first versions of the Blender 2.5x package appeared in the summer of 2010. It was then that, under the influence of the short film Syntel, developers began to learn the basics of 3D modeling. Blender allowed organizing a completely independent workflow based on open source tools (Linux was used as the operating system). Subsequently, talented artists from the Blender community joined the Blend4Web team.

Blend4Web evolution on the example of demo applications

Demonstration applications based on Blend4Web reflected the maturity of the platform itself. The first of these was Ostrov , an almost non-interactive application with fairly simple graphics. The demo appeared in 2011 and was somewhat polished before a public release. It was the first to implement a Blender-based workflow in which all resources were stored in separate (library) files and connected to the main file for use in scene design and further export (for this reason, some Blend4Web users call it “free Unity Pro”) .

In the "Fashion Show"Demonstrated clothing animation techniques. Post-processing effects, dynamic reflection effects, and particle systems were added later. After the public release of Blend4Web took place, clothing simulation techniques were outlined in one of the lessons .

"Farm" is a huge scene, especially from the point of view of browser applications: an area of ​​more than 25 hectares, with buildings, animated animals and vegetation. In the demo, some game moments are implemented, such as the ability to move in the first-person mode, interaction with objects, and driving a vehicle. The application involves positional sound sources (using Web Audio) and a physical subsystem (based on Bullet and Asm.js ). Related Developersby the Freedesktop project , we used this demo application for debugging drivers as part of Mesa.

The Still Life application demonstrated the platform's capabilities in the field of visualization. In this scene, carefully prepared textures and materials were used, as well as various graphic effects in order to increase realism. However, the technologies used to create it were simple and somewhat conservative, because at that time a tool for visual editing of shaders did not exist.

A new era in the development of the platform came after the implementation of support for the nodal materials of the Blender package. So, the artists of the Blend4Web team created more than 40 different materials for the Sportcar model: chrome coating, lacquered metal, glass, rubber for tires, leather seats, etc.

In one of the recently released versions in Blend4Web, an animation control function was added depending on the user's actions. As a result, interactive applications can be created without writing code. In order to demonstrate new opportunities, an interactive three-dimensional infographic of the Mi-34 light multi-purpose helicopter was presented .

This simple but effective tool (called by the NLA Script developers) can have a variety of applications: interactive three-dimensional web design, presentation of goods and services, visual training materials, story-based cartoons, point-and-click games and any other applications, which were previously usually created using Flash technology.

How it works

The threshold for entering the technology is extremely low - just download and install the add-on to the Blender program, as described in the following video tutorial:

One of the great features of the platform is the ability to export 3D scenes to a single HTML file, which can, for example, be sent by mail, posted on your own website or in the cloud - in a word, distributed in any way to taste. This is the fundamental difference between Blend4Web and numerous web services offering 3D content publishing services, as users are not forced to use one or another Internet resource.

For developers of complex interactive 3D web applications, a development kit (SDK) is offered . Some notable uses of the Application Programming Interface (API) are demonstrated in programming lessons.From web design to games.

Programming a 3D web application using the platform is not much more difficult than creating an average “rich” Internet application. Unlike some other WebGL-based frameworks, in Blend4Web the tasks of preparing graphic content, animation and sound are performed by the corresponding professionals. The programmer needs to load the scene ...

var m_data = require("data");
m_data.load("example.json", load_cb);

... and describe the logic according to which changes made by the artists take place in the 3D scene, for example, the animation of the object that was clicked is reproduced:

var m_scenes = require("scenes");
var m_anim = require("animation");
var myobj = m_scenes.pick_object(event.clientX, event.clientY);

As you can see, the API is structured in a modular style (in the style of CommonJS), which, according to the developers, is important for creating compact and fast web applications.


It is difficult to predict which way the development of Internet technologies (and information technologies in general) will go, however, it can be argued that the third dimension of the Network already has a solid foundation. It can be expected that an increasing number of users will change the idea of ​​how the Internet should look. In turn, the Blend4Web team continues to improve tools for web developers, improves stability and productivity, and implements support for new graphic effects.

Blend4Web developers are also watching with interest the development of the WebGL 2.0 standard , which will dramatically increase the ability to display three-dimensional graphics on the Web.

Information and Support

The Blend4Web developers blog regularly publishes news and training materials, which can also be read on Vkontakte and Google+ . The YouTube channel publishes video versions of demo applications and video tutorials. You can ask a question on the forum .

Also popular now: