Forum

User posts Ivan Lyubovnikov
22 March 2017 12:25
Hi! Does the http://get.webgl.org/ work for you? If not can you show us what the chrome://gpu page tells about your GPU?
22 March 2017 12:03
Thanks for the correction and especially thanks for this nice explanation man!!!!
Nice, glad it helped!

Okay now please advice I am using the shape key to change the shape.
Is there any better more effective way of doing it or I am on the right path
Basically, changing the dimensions of an object is a simple scaling transformation. Unfortunately, blend4web doesn't support scaling on a certain axis, otherwise you would be able to use something like scale_x()/scale_y()/scale_z(). This feature can be implemented in the future, but as for now using shape keys is the easiest way.

Alternatively, the shape of an object can be changed via the procedural skeletal animation, when you can move/rotate a certain bone and transform the related vertices. For example, you can create a skeleton with 3 independent bones to control the sizes of a box - one for every dimension - and translate them along the correspondent axis.

Controlling individual bones can be a more convenient way for complex meshes and transformations, but this approach requires some additional work like painting weights for every bone in Blender. So, I think that using shape keys is quite effective in your case. Anyway, this is the example of the procedural animation via the Bone API, if you wonder what it looks like: Bone API

Also I would be needing to put wrapping materials onto these models so
this method would be effective for then as well
You can change some material parameters via the Material API, textures via the change_image method or replace the whole material via the inherit_material function. More info here: Material API and Inherit Material.
21 March 2017 11:39
Hi! There were some issues in your project. They're related with the b4w-application loading pipeline. So, let me explain this.

At first, those HTML-elements that're used with jquery ui in the constructor.js module should be already loaded prior to the moment when the sliders.init() method is called, otherwise they won't be available. Thus, placing the "b4w.require("sliders").init();" line in the end of the main module will not work, because it's executed immediately, before the rest of the DOM-tree is loaded. The earliest moment when you should call it is in the "init_cb" method of the main module, because it guarantees that the "window.onload" event is fired:
function init_cb(canvas_elem, success) {

    if (!success) {
        console.log("b4w init failure");
        return;
    }

    m_preloader.create_preloader();

    // ignore right-click on the canvas element
    canvas_elem.oncontextmenu = function(e) {
        e.preventDefault();
        e.stopPropagation();
        return false;
    };

    m_sliders.init();

    load();
}


But if you want to control scene objects you should also wait for a moment when the scene (and its content) is loaded. This is in the "load_cb" function. So, it would be better to split the init function from the constructor.js module into two parts:

- the one, which is called in "init_cb" (and can work with the fully loaded DOM content), just draws the interface:
    exports.init = function() {
        $("#accordion").accordion({
            active: false,
            collapsible: true,
            heightStyle: "fill"
        });

        $("#length").slider({
            range: "max",
            min: 0,
            max: 1,
            step: .001
        });

        $("#width").slider({
            range: "max",
            min: 0,
            max: 1,
            step: .001
        });

        $("#height").slider({
            range: "max",
            min: 0,
            max: 1,
            step: .001
        });
    }


- and the other one, which is called in "load_cb" (hence, it can work with the scene objects), assigns the "slide" callbacks:
    exports.set_callbacks = function() {
        var obj_Cube = m_scenes.get_object_by_name("Cube");
        var obj_Lid = m_scenes.get_object_by_name("Lid");
        m_trans.get_translation(obj_Lid, lid_pos);

        $("#length").slider("option", "slide", function(event, ui) {
            m_geom.set_shape_key_value(obj_Cube, "Width", ui.value);
            m_geom.set_shape_key_value(obj_Lid, "Width", ui.value);
        });

        $("#width").slider("option", "slide", function(event, ui) {
            m_geom.set_shape_key_value(obj_Cube, "Breath", ui.value);
            m_geom.set_shape_key_value(obj_Lid, "Breath", ui.value);
        });

        $("#height").slider("option", "slide", function(event, ui) {
            m_geom.set_shape_key_value(obj_Cube, "Height", ui.value);
            m_trans.set_translation(obj_Lid, lid_pos[0], lid_pos[1], lid_pos[2] + ui.value);
        });
    }


Here's the fixed files: BoxWorld.js, constructor.js, they should work without problems .
20 March 2017 10:56
Hi! It's hard to say what's wrong without a complete project. Can you export your project via the "Export Project" button and attach it here?
15 March 2017 19:27
Hi Phil! It's a very important question. This is about having some additional metadata for your custom application. Using metatags and naming conventions is not very convenient. Post processing JSON files is an evil thing, because as you said the format isn't documented and isn't intended to use in this way. Also, it tends to change over time, so no one can guarantee that your code will work after update.

But there is the good news: in the latest (17.02) release we've made a little step toward the customization of the export output. It is possible to access some custom properties via the blend4web API. These properties should be coded in a custom script and then bound with the blend4web add-on. This functionality is still in development, so you can not do a lot here. As for now the best approach is to write your own add-on which defines additional properties in the interface for objects, materials and so on. This add-on should perform collecting of the needed metadata and should store it in a special property called "b4w_custom_prop" on a scene before the export.

Here's the small example:

bl_info = {
"name": "My Custom Addon",
"author": "I'm",
"version": (1, 0, 0),
"blender": (2, 78, 0),
"description": "My Custom Addon",
"category": "Development"
}

import bpy
import json

class CustomExport(bpy.types.Operator):
bl_idname = "export_scene.my_custom_export"
bl_label = "MY CUSTOM EXPORT"

def execute(self, context):
for addon in bpy.context.user_preferences.addons:
if addon.module == "blend4web":
store_metadata()
bpy.ops.export_scene.b4w_json("INVOKE_DEFAULT")
return {"FINISHED"}

self.report({"ERROR"}, "Blend4Web addon not found.")
return {"CANCELLED"}

def store_metadata():

metadata = {}
# obtain metadata somehow

for scene in getattr(bpy.data, "scenes"):
scene.b4w_custom_prop = json.dumps(metadata)

def register():
bpy.utils.register_module(__name__)
bpy.types.Scene.b4w_custom_prop = bpy.props.StringProperty(
name = "Custom Metadata",
description = "Custom Metadata",
default = "",
options = set()
)

def unregister():
bpy.utils.unregister_module(__name__)
del bpy.types.Scene.b4w_custom_prop


The main idea is to create a custom operator (CustomExport - in the example), which checks if the blend4web add-on is active and if so - performs the corresponding actions: obtains custom metadata and stores it in the scene.b4w_custom_prop property. After that this operator calls json export from the blend4web addon via "bpy.ops.export_scene.b4w_json("INVOKE_DEFAULT")". Blend4web knows about the "b4w_custom_prop" property and writes it into the JSON file. So, instead of the direct blend4web export you can use this operator to have your custom data included into the json.

The written metadata - is the data of your own format collected somehow (for example: by iterating through the all objects/materials/textures). As it's your custom add-on you can create a custom interface for convenient usage, for example, a dedicated checkbox for those "main object", which you mentioned. So, you can form the metadata object, which contains these settings, and store it as a JSON string.

This special property will be available for reading via the get_custom_prop method:
var data = JSON.parse(m_scenes.get_custom_prop())


However, this approach is still requires a big amount of work for a developer, but we're planning to improve and simplify it in the future.
15 March 2017 17:53
B4W WARN: Changing the clip range of the camera "Camera" from [0.001, 100] to [0.028992584002197227, 100] because of the 16bit depth buffer.
Это хак применяемый под Windows, из-за бага текстур глубины на AMD-шках. К сожалению в Firefox, информация о видеокарте не доступна, поэтому он применяется всегда. Хак сейчас принудительно выставляет 16-битную глубину, в следующем релизе мы планируем это исправить.

Как вернуть мои настройки клиппинга камеры или прежнюю битность? Спасибо
Текущий диапазон камеры слишком большой для 16 бит, поэтому приходится его урезать, например, с одной из сторон. Если есть визуальные баги, связанные с поднятой нижней границей клиппинга, то можно самому в блендере опустить верхнюю, например, сделать не 100, а 80м, тогда нижняя поднимется не так сильно. В случае 16 бит рекомендуется выставлять минимальный диапазон камеры, насколько этого позволяет сцена.
13 March 2017 11:05
Hi! Are you using the set_alpha_factor method? It's for controlling those parameter that's located in the Texture->Influence panel in Blender. If you want to change the opacity of an object you should use the set_diffuse_color method and change the last component of the "color" parameter:
m_mat.set_diffuse_color(cube, "MyMaterial", [1, 1, 1, 0.3]);

[EDIT] forgot to mention that this is for non-node materials only, if you're using nodes you can do it as jeanpierre3d suggests below
10 March 2017 19:06
So, do you want to customize the webplayer itself and change its layout and css rules? Then, you'll have to modify the source files, and rebuild the webplayer app. There was already a topic about it: link
10 March 2017 18:48
Опытным путем заметил на windows тормозят тени выше 2048. Причем если выставить 1024 или меньше то fps снова становиться нормальный.
а на какой видеокарте/браузере? и насколько сильно падает?
09 March 2017 10:28
Hi! You can use the <iframe> HTML element to insert a webplayer app into another page:

<iframe width="800" height="500" allowfullscreen src="/myproject/webplayer.html?load=/projects/myproject/myproject.json"></iframe>