Forum

Change text // place logo in runtime

18 July 2017 18:03
Hi Community,

I'm new to 3D, Blender and Blend4Web, but good at programming :)
I've roughly checked documentation and API, played a bit with Blender and Blend4Web, but can't find a precise info about my requirements.

The idea is to allow a user to configure a product in a way, that user is able to upload a logo (or any other image) and apply it to some part of a product. Like here: https://www.wanzl.com/fileadmin/3d_product_visualization/online/dist/?type=el&lang=en_DE
I only can't get, how a 3D model needs to be prepared for such a manipulation: should there be an invisible object (mesh ?) with a size, limited for texture, placed above the real object. And then a texture (uploaded logo) is applied to this "fake" object (mesh ?). Or is it possible somehow to control the position of a texture, like "10% from top, 3 % from left, do not stretch"?

Or instead of logo, one should be able to insert a free text, which should be rendered in runtime on a product. Something like here: https://www.helmade.com/en/helmets/scooter/helmade-one-50-50.html (you need to click on "Signature" icon in configurator to see a text-input field).

Is this all possible. If so, can I be pointed into right documentation or examples?

Thank you in advance.
22 July 2017 21:27
I only can't get, how a 3D model needs to be prepared for such a manipulation
You just have to change images dynamically. Here is an example:

https://www.blend4web.com/apps/code_snippets/code_snippets.html?scene=change_image
23 July 2017 03:01
Or instead of logo, one should be able to insert a free text
In the example you linked, the text is most likely converted to an image texture before being applied to the 3D mesh.
Have a look at this YouTube video to get the basics of how UV mapping works in Blender.
Generally, you want your images to be power-of-two like 512 X 512. This plays nicely with WebGL rendering (the B4W engine will automatically adjust your image if it is not POT).
Once you get the hang of applying image textures to your 3D model, the link provided by Blend4Life above will show you how to swap them out for other images.
25 July 2017 17:54
Thank you for your answers!

Meanwhile I've found, that it is possible to get CanvasRenderingContext2D for a texture, which needs to be defined of "None" type in Blender: https://www.blend4web.com/doc/en/textures.html#special-texture-types via
m_tex.get_canvas_ctx(obj, "MaterialTexture");


Then one can render a text via CanvasRendering and apply newly rendered texture via
m_tex.update_canvas_ctx(obj, "MaterialTexture");
25 July 2017 18:03
Cool. I have never done that before. Now I have to go try it
26 July 2017 11:46
Or is it possible somehow to control the position of a texture, like "10% from top, 3 % from left, do not stretch"?
This can be done via the special node material setup, when you have several "Value" nodes for changing the UV map for a texture. These nodes can be controlled via the set_nodemat_value method.

Have a look this file: nodemat_value.blend - here you'll have a Value node for controlling the Y coordinate of the UV map. You can try the following code to play with it:
var cube = m_scenes.get_object_by_name("Cube"); 
m_material.set_nodemat_value(cube, ["Material", "Value"], 2.5);
Blend4Web Team
 
Please register or log in to leave a reply.