+1 on that!

Thanks for the article, really helpful!

So I am now able to integrate a viewer for the 3D Models I want.
But how can I interact with these Models in the webplayer with HTML5 Buttons etc.? If i chosse Engine Binding type: external am I going with Webplayer+JSON or do I have to tick Webplayer+JSON in Project Manager? Then I have to edit all the webplayer.html files in the blend4web_ce\apps_dev\webplayer folder, right?

Thank you for your answer.

I took a look at the example, but some .js functions are outdated an differ from the source code provided in the latest release.
So i got some questions:

What do you mean when you say semi-transparent texture. In the X-mas blend file there is a canvas texture and seems to have no properties at all.

I tried to copy that to my box but it didn't work, see the attached project. How can you position a texture you can't see on a model?
Maybe someone can check my project and the source codes. I want to positon the text box in the upper right corner of the image box.

Then there is a function in the X-mAS source code called: function prepare_canvas()
what does this do? What does the changes to alpha values do?
Thank you!

Hi it's me again,

is it possible to use a transparent Image as Canvas Texture loaded dynamically in runtime? Or can I preset a transparent in Blender.

Background:
I want to have a html form where someone can type in a text. Then i want to draw the text on my 3D Object.

This is my code:

function load_text_on_frame() {
    var Text_Canvas = m_scenes.get_object_by_name("Text_Frame"); //== object in Blender names Image Canvas
    var ctx_text = m_tex.get_canvas_ctx(Text_Canvas, "Canvas_Text");
    
    
    
    if(ctx_text) {
        var img = new Image();
        img.src = APP_ASSETS_PATH + "dark_cardboard_tex.jpg";
        img.onload = function() {
			
          	ctx_text.drawImage(img,0,0,ctx_text.canvas.width, ctx_text.canvas.height);

            
        	ctx_text.fillStyle = "rgba(255,0,0,255)";
        	ctx_text.font = "100px Arial";
        	ctx_text.fillText("Hello World 2!",10,824);
        	console.log(ctx_text);
        	m_tex.update_canvas_ctx(Text_Canvas, "Canvas_Text");
        }
    }
}
});

It works but the problem is, that my background texture (the brown color) is overlayed by the canvas texture itself (see attachment)

Hi,

I'll give it a try and report back. Thanks for your informations!

Great,

thanks Ivan! The UV unwrap was the crucial point. Thank you very much for the hint!

Hi together,

I got some trouble to get the canvas texture working properly. Here is my code snippet:

function load_image_on_frame() {
    var Image_Canvas = m_scenes.get_object_by_name("Image_Canvas"); //== object in Blender names Image Canvas
    var ctx_image = m_tex.get_canvas_ctx(Image_Canvas, "Canvas_Frame"); //"Canvas_Frame" is texture in blender: Source Type: Canvas, Source Size 1024
    
    if (ctx_image) {
        var img = new Image();
        img.src = APP_ASSETS_PATH + "test.jpg";
        img.onload = function() {
            
            //var hRatio = ctx_image.canvas.width  / img.width    ;
   			//var vRatio =  ctx_image.canvas.height / img.height  ;
   			//var ratio  = Math.min ( hRatio, vRatio );
			
            ctx_image.drawImage(img,0,0);
           m_tex.update_canvas_ctx(Image_Canvas, "Canvas_Frame");
        }
    }
}

I get my test image workiing onto the canvas texture like here in the attachement.

But I have no idea, where the origin of this canvas is. I set the origin to (0,0) but it is nowhere near the origin of the test picture (attached). So i have doubts the canvas is initiallized in the right place.

The next problem is I cant scale the picture to fit the canvas size. I have to scale it down and then set a new origin. Otherwise it just appears as black… It seems it doesn't scale from the top left corner.

Other question is: What does the Source Size say ( I set it to 1024). Why isn't it possible to set a x*y value (like 512*767) so it fits a 4:3 ratio. As I see now it only works for quadratic faces and textures.

Maybe someone can help me.
Thanks.

Hello and thanks for your answer,

i need to change the material completely.
I have for example 3 node materials for a metal frame.
- carbon dark blue
- carbon dark violett
- glossy white

for changing from dark blue to dark violett i may use the animate value node via set_nodemat_value.
But i have no clue how to set the color to the glossy white color, without loading the whole new .json model…

So if i have some combinations like white frame with a green decor finish i have to create a new model for every variant and export it again. For a simple product configurator i get thousands of combinations…

Hi together,

in the API reference I found no possibility to change a node material dynamically with JavaScript. Is there a way to change it, maybe with inherti_material and loading a full library scene for the materials? I got it working with stack materials but i found no way with node materials so far.

I also read about changing (inheriting) materials wit the node logic editor (example from the SDK). I dont know if it is working the same way with node based materials…

Maybe someone can help me out.

Thanks!