triumphllc/blend4web

Blend4Web is a tool for interactive 3D visualization on the Internet

Blend4Web: Award-Winning 3D Web Solution

Blend4Web is a tool for creating interactive, web-based 3D content. The framework can be used for showcasing products, e-learning, game development, advertising and web design.

Why Blend4Web?

• It works right in the web browser without installing any plug-ins (thanks to WebGL);
• Not only does it render 3D graphics but it also integrates realistic physics and spatial audio;
• It is extremely simple to use because it is based on Blender in which 3D scenes can be made and then directly exported, even as a standalone web page;
• It is available as a fully functional open source version or as under a paid commercial license.
• It does not depend on any non-free components or cloud services.

This repo mirrors the community edition SDK distribution which can also be downloaded from the official site.

---

---

Demos

Tutorials

Getting Started

You need a compatible version of Blender installed in order to use Blend4Web.

Step 1 - Specify the Scripts Path

• Run Blender, load the default scene File > New;
• Open the user preferences window File > User Preferences...;
• Go to the File tab, choose the path to the blender_scripts directory in the Scripts field;
• Click Save User Settings and restart Blender.

Step 2 - Enable the Add-on

• Again load the default scene;
• Open the user preferences window;
• Go to the Add-ons tab and select Import-Export. Turn on the Import-Export: Blend4Web checkbox;
• Click Save User Settings.

What's Next. Basics

To reveal the engine settings, select Blend4Web from the upper panel menu.

Fast Preview

Preview scenes using Fast Preview button, located both at the bottom of the 3D View window and under the Render tab. In this case the scene will be exported inside some temporary storage and opened with the Scene Viewer.

Export

Select either Blend4Web (.html) or Blend4Web (.json) option from the File > Export menu.

Exported HTML files are self-contained and can be opened with a generic browser right away. On the other hand, exported JSON (together with BIN) files should be opened with the stock Web Player or loaded into your own 3D web app. See this tutorial for more info.

SDK Index Page

Under the Render tab click SDK Index. The SDK index page will be opened in the default browser. Look through the demos, read the docs, run the Project Manager.

Support

We are always glad to answer your questions on the Blend4Web forums. We also offer assistance for Blend4Web PRO owners with any technical issues which may arise (more here).

blend4web's Issues

pegjs grammar isn't valid?

If I paste https://github.com/TriumphLLC/Blend4Web/blob/master/tools/glsl/pegjs/glsl_parser.pegjs into https://pegjs.org/online then it errors:

Line 1923, column 27: Possible infinite loop when parsing (repetition used with an expression that may not consume any input).

on

line_continuation = "\\" ((!(line_terminator_sequence)_)+ / "") line_terminator_sequence

Missing a license file

https://www.blend4web.com/en/downloads/ says that this application is released under the GPL, but I don't see any license file (or copyright headers, but the license file is even more important). Could you add https://www.gnu.org/licenses/gpl-3.0.txt as COPYING.txt to your repository?

Thanks!

Clarify GPL version.

The program itself (source code) doesn't specify which version of the GNU GPL it's under or if it's upgradable to a later version.

Blender Add-On - Normal Editor

Is there a way to read the currently selected vertex's normal vector values?

Selecting an normal and trying to adapt only one axis (e.g. Z) does not work because on selection the normal vector isn't set to the current state in the UI.

B4W ERROR: Object Selection is not available on the scene (Fullscreen HMD Mode, Android Mobile)

We are developing a VR game using Blend4Web, based off of the structure of the Space Disaster example. When playing in Fullscreen HMD Mode on an Android device, we are not able to select objects using the Scenes API. The error message reads: "B4W ERROR: Object Selection is not available on the scene"

The error traceback led to: objects.js:1712 > scenes.js:4305, this function:

exports.pick_color = function(scene, canvas_x, canvas_y) {
   var subs_color_pick = get_subs(scene, m_subs.COLOR_PICKING);
   if (subs_color_pick) {
       // NOTE: rewrite camera.proj_matrix and camera.view_proj_matrix
       // restoring not needed
       var canvas = m_cont.get_canvas();
       var h = canvas.clientHeight;
       var w = canvas.clientWidth;
       m_cam.set_color_pick_proj(subs_color_pick.camera, canvas_x, canvas_y, w, h);

       // NOTE: may be some delay since exports.update() execution
       m_prerender.prerender_subs(subs_color_pick, subs_color_pick.camera);
       if (subs_color_pick.do_render)
           m_render.draw(subs_color_pick);

       var subs_color_pick_xray = get_subs(scene, m_subs.COLOR_PICKING_XRAY);
       if (subs_color_pick_xray) {
           m_mat4.copy(subs_color_pick.camera.proj_matrix,
                   subs_color_pick_xray.camera.proj_matrix);
           m_mat4.copy(subs_color_pick.camera.view_proj_matrix,
                   subs_color_pick_xray.camera.view_proj_matrix)
           m_util.extract_frustum_planes(
                   subs_color_pick_xray.camera.view_proj_matrix,
                   subs_color_pick_xray.camera.frustum_planes);
           m_prerender.prerender_subs(subs_color_pick_xray, subs_color_pick_xray.camera);
           if (subs_color_pick_xray.do_render)
               m_render.draw(subs_color_pick_xray);
       }

       if (subs_color_pick.do_render ||
               subs_color_pick_xray && subs_color_pick_xray.do_render)
           return m_render.read_pixels(subs_color_pick_xray?
                   subs_color_pick_xray.camera.framebuffer:
                   subs_color_pick.camera.framebuffer, 0, 0);
       else
           return null;
   } else
       m_print.error("Object Selection is not available on the scene");

   return null;
}

The author of this post seemed to be having a similar problem, but was able to fix the problem by setting Object Selection = ON (instead of AUTO) in Blender. This did not fix the problem for us.

What does the getsubs() method do and is there anything we can do to make sure it returns a value in HMD mode?

Unusable Grey Export, 0 draw calls on all exports

When using the latest blend4web addon (sdk) with blender v 2.7.6 (arch linux, blender-bin) I will get a grey preview & export html with zero content on anything I export.

An exported HTML file will always contain nothing, there are no errors logged to the browser's console.

I can run the example HTML files successfully, when opening the assosiated .blender files and running export/preview on them I will get the same grey result.

Installing the SDK within blender-2.8beta is not possible, it claims I'd need to update to blender-2.8.x

I'm new to blend4web and would really like to include it in upcoming development work and would appreciate any debugging help.

The same happens when running the project server via python3 scripts/project_server.py. When creating a new project (web UI), and building it, the standard logo cube seems like to be very far zoomed in as I am getting the following output:

I can drag & will see a slight change of white and blue.

EDIT: turns out that what I'm seeing is the sky

Blender 2.8 Add-on branch?

Hello,
will you create add-on version for new Blender 2.8 beta?
I'm particularly wanting the normal editor.
Perhaps it could exist as "2.8 beta" branch.

how to use

sorry for the potential missunderstanding, have u finished the normal editor already? is that it?: https://github.com/TriumphLLC/Blend4Web/blob/master/addons/blend4web/vertex_normals.py
I'm crazy to use it!

Cycles IES lighting support within Blend4Web?

My scene uses actual .ies files (lighting data) within the Cycles engine, specifically this: https://gist.github.com/AngryLoki/4364512

How to use this data with blen4web correctly?

I can see the lamp data within 3D object wireframe view however, upon export to html or json all lighting appears to default to the regular Blender engine using spot, sun, etc.

Please advise.

ERROR - this language feature is only supported for ECMASCRIPT6 mode or better: arrow function. Use --language_in=ECMASCRIPT6 or ECMASCRIPT6_STRICT or higher to enable ES6 features.

I want to create a project in blender for web using es6 modules.

I changed the connection as written in documentation.

"use strict"
import b4w from "blend4web";
import m_app from "app";
import m_cfg from "config";
import m_data from "data";
import m_preloader from "preloader";
import m_ver from "version";

...


init();

But when the project compiles I get an error.

Building project: soundcheckbox
    --------------------------------
    Converting ES6: soundcheckbox.js
    --------------------------------
    --------------------------------------------------------------
/tmp/tmptcf5ykz7.js:126591: ERROR - this language feature is only supported for ECMASCRIPT6 mode or better: arrow function. Use --language_in=ECMASCRIPT6 or ECMASCRIPT6_STRICT or higher to enable ES6 features.
      value.forEach((item, index) => { if (util.isObject(item) || Array.isArray(item)) util.makeImmutable(item) })
                    ^

Where to add flags in blender 4 web project --language_in=ECMASCRIPT6 or ECMASCRIPT6_STRICT ?

Bad method call in ext/math.js

Hi,

In ext/math.js there is an import that looks like this:

/**
 * Set the parametric line initial point.
 * @method module:math.set_pline_point
 * @param {ParametricLine} pline Parametric line.
 * @param {Vec3} vec3 Point.
 */
exports.set_pline_initial_point = m_math.set_pline_initial_point;

So in JSDoc i see that this function has a name of "set_pline_point" and it is used like that in whole file. The problem is that there is no such a function because in exports You set it name to "set_pline_initial_point". Remember to change function names also in documentation and other calls of this function when do a refactor like this ;)

Is this abandoned

Hi,
is this abandoned or further in development?
The last deployment was on the 31. juli 2018.

Cheers

What should happen when applying opacity less than 1 to a node with descendants?

Hello Alex and Yuri,

I'd like your opinion:

If we have a node in a 3D scene, and it has many descendants (a sub tree), what should happen when we apply opacity with a value less than 1 to it?

1. It, and all of it's children should become transparent, multiplying opacities down the scene graph.
2. It's content should become transparent but not that of its descendants.
3. Same as (1), but the whole object should be flattened into a plane.

The reason I want your opinion is because the new specs for CSS 3D (css-transforms) state here that the answer is (3).

To see what I mean, view these two examples in Chrome 53 or higher:

• https://jsfiddle.net/trusktr/ymonmo70/16
• https://jsfiddle.net/trusktr/ymonmo70/17

The second example has opacity applied to the node that contains all the sub-nodes which compose the car. The opacity, according to spec, flattens the car into a plane (turns it into paper!).

I'm asking various 3D engine authors for opinions of what the correct or most expected behavior should be.

All the best,
~ Joe

Firefox 30+ fails to run demos. Deprecation errors

Log from developer panel of Firefox

window.controllers is deprecated. Do not use it for UA detection. https-everywhere.js:364
Use of getUserData() or setUserData() is deprecated. Use WeakMap or element.dataset instead. requestNotifier.js:63
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://graph.facebook.com/?id=http://www.blend4web.com/ru/article/22. This can be fixed by moving the resource to the same domain or enabling CORS. graph.facebook.com
Use of getUserData() or setUserData() is deprecated. Use WeakMap or element.dataset instead. requestNotifier.js:63
Error: WebGL: getExtension('MOZ_WEBGL_depth_texture'): MOZ_ prefixed WebGL extension strings are deprecated. Support for them will be removed in the future. Use unprefixed extension strings. To get draft extensions, set the webgl.enable-draft-extensions preference. b4w.min.js:63
Error: WebGL: getExtension('MOZ_WEBGL_compressed_texture_s3tc'): MOZ_ prefixed WebGL extension strings are deprecated. Support for them will be removed in the future. Use unprefixed extension strings. To get draft extensions, set the webgl.enable-draft-extensions preference. b4w.min.js:63
Use of getUserData() or setUserData() is deprecated. Use WeakMap or element.dataset instead. requestNotifier.js:63
Error: WebGL: getExtension('MOZ_WEBGL_depth_texture'): MOZ_ prefixed WebGL extension strings are deprecated. Support for them will be removed in the future. Use unprefixed extension strings. To get draft extensions, set the webgl.enable-draft-extensions preference. b4w.min.js:63
Error: WebGL: getExtension('MOZ_WEBGL_compressed_texture_s3tc'): MOZ_ prefixed WebGL extension strings are deprecated. Support for them will be removed in the future. Use unprefixed extension strings. To get draft extensions, set the webgl.enable-draft-extensions preference. b4w.min.js:63
Use of getUserData() or setUserData() is deprecated. Use WeakMap or element.dataset instead. requestNotifier.js:63
Error: WebGL: linkProgram: a fragment shader used in this program failed to compile, with this log:
ERROR: too many uniforms
b4w.min.js:134
Error: WebGL: useProgram: program was not linked successfully b4w.min.js:118
Error: WebGL: useProgram: program was not linked successfully b4w.min.js:119
Error: WebGL: Drawing without vertex attrib 0 array enabled forces the browser to do expensive emulation work when running on desktop OpenGL platforms, for example on Mac. It is preferable to always draw with vertex attrib 0 array enabled, by using bindAttribLocation to bind some always-used attribute to location 0. b4w.min.js:92
Error: WebGL: Integer overflow trying to construct a fake vertex attrib 0 array for a draw-operation with -1 vertices. Try reducing the number of vertices. b4w.min.js:92
Error: WebGL: useProgram: program was not linked successfully b4w.min.js:119
Error: WebGL: Integer overflow trying to construct a fake vertex attrib 0 array for a draw-operation with -1 vertices. Try reducing the number of vertices. b4w.min.js:92
Error: WebGL: useProgram: program was not linked successfully b4w.min.js:119
Error: WebGL: Integer overflow trying to construct a fake vertex attrib 0 array for a draw-operation with -1 vertices. Try reducing the number of vertices. b4w.min.js:92
Error: WebGL: useProgram: program was not linked successfully b4w.min.js:119
Error: WebGL: Integer overflow trying to construct a fake vertex attrib 0 array for a draw-operation with -1 vertices. Try reducing the number of vertices. b4w.min.js:92
Error: WebGL: useProgram: program was not linked successfully b4w.min.js:119
Error: WebGL: Integer overflow trying to construct a fake vertex attrib 0 array for a draw-operation with -1 vertices. Try reducing the number of vertices. b4w.min.js:92
Error: WebGL: useProgram: program was not linked successfully b4w.min.js:119
Error: WebGL: Integer overflow trying to construct a fake vertex attrib 0 array for a draw-operation with -1 vertices. Try reducing the number of vertices. b4w.min.js:92
Error: WebGL: useProgram: program was not linked successfully b4w.min.js:119
Error: WebGL: Integer overflow trying to construct a fake vertex attrib 0 array for a draw-operation with -1 vertices. Try reducing the number of vertices. b4w.min.js:92
Error: WebGL: useProgram: program was not linked successfully b4w.min.js:119
Error: WebGL: Integer overflow trying to construct a fake vertex attrib 0 array for a draw-operation with -1 vertices. Try reducing the number of vertices. b4w.min.js:92
Error: WebGL: No further warnings will be reported for this WebGL context (already reported 32 warnings) b4w.min.js:92

custom element Anchors capture object picking

I ran into an esoteric bug:

Custom element anchors were picked by pick_object(x, y) from the scene module using version 16.12.1. on GNU/Linux (which I guess is not relevant)

This bug was also experienced by at least one other person, see this post

I made a self-contained example:

example

To reproduce just unzip the archive in your b4w project directory. Open the anchor_bug.html from the project manager. Click to different points on the anchor fixed black divs (I disabled the pointer events on them), and on certain mouse positions the anchors will be picked instead of the cubes, you will see it in the js console. Of course the error also occurs when you click next to a div.

I found the cause and made a dirty fix or workaround, however I did not spend enough time on it, so it is possible that this change will disable some other functionality:

@@ -1749,11 +1749,6 @@ exports.pick_object = function(canvas_x, canvas_y) {
         return null;
     }
 
-    var anchor = m_anchors.pick_anchor(canvas_x, canvas_y);
-
-    if (anchor)
-        return anchor;
-
     var color = m_scenes.pick_color(main_scene, canvas_x, canvas_y);
 
     if (!color)

My suggestion is that anchor picking code should be separated from the pick_object function to its own function to avoid confusions like this.

Conflict with FLIP Fluids addon: AttributeError: 'RNA_Types' object has no attribute 'PHYSICS_PT_add'

Hi,

I develop a liquid simulation Blender addon called FLIP Fluids. We have had some users report that there is a conflict between the Blend4Web addon and the FLIP Fluids addon. An AttributeError is encountered when installing FLIP Fluids if the Blend4Web addon is enabled and installed.

I have tested this issue using the blend4web_addon_18_05_0.zip addon downloaded from https://www.blend4web.com/en/downloads/

Here is a minimal script that reproduces the error when run from the Blender text editor:

import bpy
print(bpy.types.PHYSICS_PT_add)

When Blend4Web is enabled, an error is produced:

AttributeError: 'RNA_Types' object has no attribute 'PHYSICS_PT_add'

When Blend4Web is disabled, the script runs to completion:

<class 'bl_ui.properties_physics_common.PHYSICS_PT_add'>

Building HTML doesn't minify correctly

Building a project does not remove line breaks from HTML, but substitutes them with spaces, which will not make the code smaller.

Example:

<!DOCTYPE html> <html> <head> <title>Blessed</title> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <link type="text/css" rel="stylesheet" href="blessed.min.css?v=19042018172614"> <script type="text/javascript" src="./b4w.simple.min.js?v=19042018172614"></script> <script type="text/javascript" src="lib/blessed.min.js?v=19042018172614"></script> <script type="text/javascript" src="blessed.min.js?v=19042018172614"></script> </head> <body> <div id="main_canvas_container"></div> </body> </html>

The expected result is:

<!DOCTYPE html><html><head><title>Blessed</title><meta charset="utf-8"><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><link type="text/css" rel="stylesheet" href="blessed.min.css?v=19042018172614"><script type="text/javascript" src="./b4w.simple.min.js?v=19042018172614"></script><script type="text/javascript" src="lib/blessed.min.js?v=19042018172614"></script><script type="text/javascript" src="blessed.min.js?v=19042018172614"></script></head><body><div id="main_canvas_container"></div></body></html>

I use pug, so it should not be a problem, except the deployer (???) remove my linked scripts if the input HTML is minified.

My Blend4Web version is 17.12.0

blend4web WEBGL INVALID_OPERATION: bindTexture

Hello there,

when i disable the texture cache in blend4web (on init enable_texture_cache: false), I get a lot of errors in the console when I use replace_image on a texture:

WebGL: INVALID_OPERATION: bindTexture: attempt to use a deleted object.
WebGL: INVALID_OPERATION: getTexParameter: no texture bound to target.
WebGL: INVALID_ENUM: texParameter: invalid parameter.
WebGL: GL_INVALID_ENUM: Texture filter not recognized.

I can't use the texture cache because I generate and load a bunch of images from the web, so it would fill up until it's out of memory. Does anyone have an ideas? Is this a known bug? Many thanks in advance!