Forum

Change text // place logo in runtime

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_DEI 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?

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.

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