📜 ⬆️ ⬇️

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

The following is the content of an overview article about the Blend4Web platform that I wrote for the Mozilla Hacks resource, 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 , a popular open source 3D modeling package, as its main content creation tool. Display of three-dimensional graphics is carried out using WebGL technology, which is also an open standard. These two keywords, Blender and Web (GL), best describe the purpose of this platform.

The full source code for the Blend4Web platform, as well as several examples of its use, are publicly available on GitHub , 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 — which include support for WebGL in Safari. This event marked the end of the 5-year development cycle of WebGL technology, which began with the first unstable browser builds (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 path that the Blend4Web developers followed the development of the WebGL technology. Non-working functionality, freezing browser tabs, warnings about the technology's “insecurity” from some major players , and the inaccessibility of technology in public releases of browsers were sources of certain risks. Yet the unique ability to play three-dimensional graphics (and sound) in browsers was worth it.

Blender


The first versions of Blender 2.5x appeared in the summer of 2010. It was then that, under the impression of the short film Sintel, the developers began to learn the basics of 3D modeling. Blender made it possible to organize 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.

Evolution of Blend4Web on the example of demo applications


The demo applications created on the basis of Blend4Web reflected the maturity of the platform itself. The first of these was the "Island" , a practically non-interactive application with fairly simple graphics. The demo appeared in 2011 and was somewhat polished before the public release. It first implemented 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, a dynamic reflection effect and particle systems were added later. After the Blend4Web public release took place, the techniques for simulating clothes were outlined in one of the lessons .

“Farm” is a huge scene, especially from the point of view of browser applications: 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 the physical subsystem (based on Bullet and Asm.js ). The developers associated with the Freedesktop project used this demo application to debug the drivers in Mesa.



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



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

In one of the recently released versions, the animation control function was added to Blend4Web, depending on user actions. As a result, interactive applications can be created without the need to write software code. In order to demonstrate the new opening possibilities, an interactive three-dimensional infographic of a light multipurpose Mi-34 helicopter was presented.



This simple but effective tool (named by the developers of NLA Script) can be used in a variety of ways: interactive web design in three dimensions, presentation of products and services, visual training materials, plot-selection movies, point-and-click games, and any other applications. previously previously created using Flash technology.

How it works


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



One of the great features of the platform is the ability to export a 3D scene into a single HTML file, which can be, for example, mailed, posted on its 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, since 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, relevant professionals are engaged in the preparation of graphic content, animation, and sound. 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 artists occur in the 3D scene, for example, the animation of an object that was clicked with the mouse is reproduced:

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

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

Perspectives


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

The developers of Blend4Web are also following with interest the development of the WebGL 2.0 standard, which will dramatically increase the possibilities for displaying three-dimensional graphics on the Web.

Information and support


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

Source: https://habr.com/ru/post/240907/


All Articles