Static objects are objects that cannot be moved, animated or changed in any other way while running the application. For performance purposes, such objects can be merged together if they have the same material.

Dynamic objects can be moved, animated or changed in other ways while running the application. They can also interact with other objects, including static ones. Dynamic objects are never combined with each other or with static objects.

Only MESH and EMPTY type objects can be either static or dynamic. All other object types, such as CAMERA and ARMATURE, are always dynamic.

Static MESH objects are rendered much faster then the dynamic ones, so, for better performance, it is advised to keep the number of dynamic meshes to a minimum. Objects of any other type, both static and dynamic, do not significantly affect performance.

The objects which have animation, physics or a parent, which is a dynamic object, are considered dynamic, as well as the objects controlled by the following logic nodes:

PlayAnimation

TransformObject

MoveTo

InheritMaterial

API methods that concern object movement, copying and animation (both object and node material) can only be applied to dynamic objects. In order to make the movement of the object without dynamic settings possible, it is necessary to activate ForceDynamicObject option in its settings.

Use the object as a billboard (i.e. automatically orient relative to the camera).

Billboard > Preserve Global Rotation

Take into account rotation of the billboard object (in the world space). The object will be directed toward the camera with its side which is visible when viewing along the Y axis in Blender. Becomes available after enabling the Billboard checkbox.

Billboard > Billboard Type

Billboard orientation mode. Spherical (by default) - the object is always oriented with one side toward the camera, regardless of view angle, Cylindrical - similar to Spherical, but rotation is limited to Blender’s world Z axis. Becomes available after enabling Billboard

The object will be reflected but will remain invisible itself. Becomes available after enabling Reflections>Reflexible.

Note

If the ReflexibleOnly parameter is enabled simultaneously with the Shadows>CastOnly parameter, the engine will not render the object itself, but will render its shadow and reflection, like it is shown on the picture below.

Reflections > Reflective

When enabled the object surface reflects other objects.

Reflections > Reflection Plane

Text field for name of an empty object which defines the reflection plane. Becomes available after enabling Reflections>Reflective.

This panel contains settings that concern object duplication. It does not feature any additional parameters in the Blend4Web mode; however, it should be noted that at the moment Blend4Web engine only supports Group duplication method.

The LimitDistance constraint can be emulated with the append_follow() method, though it should be noted that this method does not set a precise distance between objects (instead, it set a minimum and maximum possible distances).

the TrackTo constraint can be replaced with the append_track() method.

Other constraints do not have distinctive counterparts in the API, although their behavior can be to certain extent imitated using API methods.

This method can be used to attach the object to the other object using a semi-stiff constraint, meaning that the child object will move and rotate together with its parent, but it will also be possible to rotate it independently in the parent’s local space. A behavior similar to that of a tank turret can be created this way.

This method attaches the object to the other object using a stiff translation constraint. The child object moves together with its parent, but does not rotate along with it (it, however, can be rotated independently from the parent).

Can be used to attach the object to another object using a stiff translation/rotation constraint. In this case, the child object moves and rotates along with its parent, but does not scale in accord with it. However, the object still can be scaled independently from the parent.

Example: a smoke emitter attached to the tractor pipe; exhaustion effects are achieved by scaling the emitter.

Anchors can be used to attach annotations to 3D objects. The annotation is displayed near the object regardless of the camera position and even follows it throughout the animation.

Annotations can be created entirely in Blender. All you need to do is to place an Empty object in the required position and enable the Anchor property. The text for the annotations can be assigned in the Title and Description fields on the MetaTags panel.

Enable Anchor

This parameter enables the interface for adding anchors (2D tags) to objects. This is available for EMPTY objects only.

Type

Anchor type

Annotation - content is obtained from the meta tags assigned to the object and displayed in the standard section.

CustomElement - an arbitrary HTML element from the current web page is used as an anchor.

Generic - an anchor’s position can be detected using the anchors API module.

Default value is Annotation.

HTML Element ID

This specifies the ID of the HTML element that will be used as the anchor. This is available only if the Type parameter is set to CustomElement.

Detect Visibility

Detect whether the anchor object is overlapped by other objects. This is disabled by default. Turning this option on decreases performance and should be used only when necessary.

Max Width

This parameter limits the expanding info window by a predefined value (measured in CSS pixels). This is available only if the Type parameter is set to Annotation, and it is set to 250 by default.

Get the coordinates of the object’s center in world space. The method with a single argument returns a new vector (i.e. this is a non-optimized option) while the method with two arguments requires an additional vector to write the result down.

Set the object’s rotation quaternion measured in its parent’s space. The first function takes separate coordinates as arguments while the second one takes a four-component vector (Array or Float32Array).

Set the object’s scale in world space. Unity corresponds to the original scale of the object. Values less than unity mean scaling down, bigger than unity - scaling up. Note that not all objects can be scaled. Particularly, scaling is not allowed for physics objects.

Set the object’s rotation using Euler angles. An intrinsic YZX rotation system is used (that means the angles follow in the YZX order and the origin of coordinates rotates and takes up a new position for every angle).

If the selectable object has enabled EnableOutlining and OutlineonSelect checkboxes on the Object>Selection and Outlining panel, then the pick_object function call will activate outline glow animation.

Note

If the selected object is transparent (Blend, Add and Sort transparency types), outline glow will only be visible on the parts that have Alpha value higher than 0.5.

In case of simple copying the new object will share the mesh with the original object. Thus, if the original object’s mesh is changed, the copied object’s mesh will be changed too. To make simple copying possible, it’s enough to turn on the Blend4Web>ForceDynamicObject setting in the source object’s properties.

In case of deep copying, the new object will have unique properties, namely it will have its own mesh. Thus, if the original object’s mesh is changed, the copied object’s mesh will not be changed. Also, the canvas textures on the copied objects are different textures and not one and the same like it is the case with the simple copying. To make deep copying possible, it is required to enable the Rendering Properties > Dynamic Geometry checkbox for the source object.
|

Copying objects in runtime can be performed with the copy method of the objects.js module. This method requires three arguments: the id of the source object, a unique name for the new object and the boolean value to specify the copy mode (i.e. simple or deep). By default, simple copying will be performed.

The newly created object should be added to the scene. This can be performed with the append_object method of the scenes.js module. The new object should be passed to it as an argument.

Rotating a vector with a quaternion is more computationally expensive than rotating with a matrix.

It is difficult to use quaternions for non-rotation transformations (such as perspective or orthogonal projection).

The engine has a number of functions to make it more convenient to work with quaternions:

quat.multiply

Quaternion multiplication. Note that left-multiplying A quaternion by B quaternion A*B is a rotation by A. I.e. the object already has some rotation B which we supplement with a new rotation by A.

quat.setAxisAngle

A quaternion is an alternative presentation of rotation by an arbitrary angle relative to the arbitrary axis (vector). Positive direction of rotation is defined as anticlockwise when viewing from the vector’s end. For example the :code`quat.setAxisAngle([1, 0, 0], Math.PI/2, quat)` call forms a quaternion which can be used for rotating the object by 90 degrees (anticlockwise if viewing from the X axis’ end) relative to the X axis.

quat.slerp

Spherical interpolation of quaternions. Used for smoothing the object’s rotation and animation.

We need to rotate the object by 60 degrees in a horizontal plane to the right. We have a model named “Cessna” in Blender.

Let’s save a reference to the object in the aircraft variable:

varaircraft=m_scenes.get_object_by_name("Cessna");

Let’s rotate it:

A clockwise rotation corresponds to the rotation to the right (i.e. in the negative direction).

60 degrees = \(\pi/3\) radians.

As a result we get:

// compose quaternionvarquat_60_Z_neg=m_quat.setAxisAngle([0,0,1],-Math.PI/3,m_quat.create());// get old rotationvarquat_old=m_transform.get_rotation(aircraft);// left multiply: quat60_Z_neg * quat_oldvarquat_new=m_quat.multiply(quat_60_Z_neg,quat_old,m_quat.create());// set new rotationm_transform.set_rotation_v(aircraft,quat_new);

Blend4Web engine also features an option to render lines defined by sets of points.

API methods used for line rendering itself are located in the geometry module, while the style of a rendered line (i.e. its color and thickness) can be set with the set_line_params() method of the material module.

To use line rendering, at least one Empty type object with enabled LineRendering option needs to be present in the scene.

To render a line, you first have to retrieve a link to an Empty object. The origin point of this object will then be used as a center of coordinates when rendering lines.

The line itself can be rendered by calling the draw_line() API method. Its first parameter is a link to an Empty object (see above), while the second one is an array of vertices that will be used for building a line. The method is also has a third, optional, parameter, that defines the rendering mode: whether the method will produce a single line or a set of lines defined by pairs of vertices (in the latter case, the total number of vertices should be even).

If an Empty object is used to render more than one line at a time, only the last one will be visible. To render multiple lines, you will need to use multiple Empty objects.

The following example shows a part of the coordinate axes object in the picture above rendered using lines:

varm_scenes=require("scenes");varm_material=require("material");varm_geometry=require("geometry");varm_rgba=require("rgba");...//setting up Empty object for line renderingvarline_1=m_scenes.get_object_by_name("MyEmpty_1");//setting up style parameters for the linesm_material.set_line_params(line_1,{width:3color:m_rgba.from_values(0,0,0,1.0)});//coordinates for main axesvarpoints_1=newFloat32Array([0,0,0,5,0,0,0,0,0,0,5,0,0,0,0,0,0,5]);//drawing main axesm_geometry.draw_line(line_1,points_1,true);

This code listing produces only the main axes of the object, because listing all of its elements will make the code long and repetitive. The other elements of the object are drawn it the same way.

LODs, or levels of detail, are versions of a single object with various amounts of detail. Levels of detail are used for the purpose of optimization, and the idea here is that if an object is far from the camera, you can render more simple version of it – for example, the one with less polygons and simpler material. This can reduce the burden on the GPU without decreasing the quality of the render, as most of the details of the original object won’t be visible from the distance.

LODs are often used in large-scale scenes with high object count. More compact scenes may not gain a major performance boost from using this feature. Video game locations such as islands, countrysides or town streets are most suitable for using LODs.

There, you can set levels of detail and distances at which they will be used for an individual object. Each level of detail is a separate object. The main rule is obvious: the lower the level of detail is positioned in the list, the simpler the corresponding object should be.

You can make your objects simpler in different ways: by decreasing its polycount, by making the materials less complex (this is especially true for node materials) or by turning off various effect such as shadows, animations or Wind Bending.

The number of levels can be set as you see fit, depending on the overall scale of the scene.

Levels of detail for trees: original object at the left, its LOD on the right

Setting up LODs and using them in the engine has some specifics. Also, BGE mode in Blender has its own LOD system that is mostly identical to the one used in Blend4Web, but still has some differences that are mentioned below.

When you are applying a LOD object to some other object, the position of the LOD object will not change. So, if you want the objects to occupy the same place in the runtime, you should manually place them in the same location in Blender. This is different from BGE, where a selected LOD object is automatically moved to the center of the main object.

If you need to set the same LOD object for multiple different objects (for example, same-type trees, building, cars or shrubs), you should make a copy of it for every object (i.e., make as many copies as there are objects that will use this object as a LOD) and set these copies as LODs. Unlike BGE, copies are not generated automatically when you select the same LOD object for multiple base objects. To simplify creating same-type object, we recommend to put the base object and all its LODs to one group and then duplicate this group using Empty objects.

If the object is supposed to change its position in the runtime, you should attach its LODs to it in Blender using parent-child link so LOD object would copy its transformations.

One of the most notable shortcomings of the LOD system is the abrupt switching between levels of detail which is easy to notice and can be annoying.

The engine supports smooth transition between LODs based on alpha test.

Smooth transition between the original object and its LOD.

The option used for this is called LODSmoothTransitions and can be found on the Scene->ObjectClustering&LODpanel.

It is intended for enabling smooth LOD transition and setting object types that this transition will be applied to. It should be noted that enabling this option might significantly decrease performance (it depends on the number of LOD objects and their materials).

Note

Smooth LOD transition is not always required. For example, if you instantly transport your camera to some distant object, you probably don’t want LOD switching to occur right in front of it. In cases like this, the lod_leap_smooth_threshold parameter should be used. It defines the threshold distance (in meters) that the camera can cover in one frame. If this value is exceeded, LODs are switched instantaneously. This can be used to disable smooth LOD transition when camera is teleported to a new location or simply moves very fast.

LODs are switched at certain distances from the object. These level borders are set up on the LevelsofDetail panel. If the camera is moving near a border like this, it can cross it often, which results in frequent LOD switching. Under such circumstances, LOD switching becomes very apparent and thus undesirable.

This problem can be negated with the MaxLODHysteresisInterval parameter located on the Scene->ObjectClustering&LODpanel. It sets an interval (in meters) that is used as a gap between two LOD levels.

For example, if MaxLODHysteresisInterval is set to 4 meters while the distance between detail levels is equal to the 20 meters, one level will be turned on at the distance of 18 meters and the other, at the distance of 22 meters. Using this option eliminates frequent LOD switching, as levels of detail no longer have definite border between them. The setting is adaptive and can adjust to different LOD distances, reducing the set interval, if needed.