Canvas texture

15 October 2016 02:37 #12739
Hello I am trying to use canvas texures to make an application where the user upload an image and place it wherever he wants in the model, this is my code until now:

"use strict"

// register the application module
b4w.register("ropa", function(exports, require) {

// import modules used by the app
var m_app       = require("app");
var m_data      = require("data");
var m_tex       = require("textures");
var m_scenes    = require("scenes");
var m_cfg       = require("config");
var m_version   = require("version");

var DEBUG = (m_version.type() === "DEBUG");

 * export the method to initialize the app (called at the bottom of this file)
exports.init = function() {
        canvas_container_id: "main_canvas_container",
        callback: init_cb,
        show_fps: true,
        console_verbose: true,
        autoresize: true

 * callback executed when the app is initialized 
function init_cb(canvas_elem, success) {

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

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


 * load the scene data
function load() {
    m_data.load("ropa.json", load_cb);

 * callback executed when the scene is loaded
function load_cb(data_id) {

    // place your code here


function load_data()
    var playera = m_scenes.get_object_by_name("playera");
    var ctx_image = m_tex.get_canvas_ctx(playera, "Image")

    if (ctx_image)
        var img = new Image();
        img.src = "img/logo.jpg";
        img.onload = function()
            ctx_image.drawImage(img, 0, 0, ctx_image.canvas.width, 
            ctx_image.fillStyle = "rgba(255,0,0,255)";
            m_tex.update_canvas_ctx(playera, "Image");


// import the app module and start the app by calling the init method

and the result is this

I'ts placing the image in every face of the model. So my question is how can I modify the size and place of the image.

Maybe modifying ctx_image.drawImage, I was checking this page "LINK trying to modify it but it doesn't change anything the model just goes black.

Or its just a configuration in the model in blender? because I configured the model material basing on the Canvas texture demo.

15 October 2016 10:46 #12743
Hi, the pattern you are getting is due UV mapping of your model.
Development Lead | Twitter
16 October 2016 10:01 #12753
Yeah, you were right I forgot to unwrap the model so I assign two materials to the model (front and back) and the result is this (wich I like a lot):

This is the front

But the back turns black,this can be changed by code I suppose?.

And this line

ctx_image.drawImage(img, 0, 0, ctx_image.canvas.width, ctx_image.canvas.height);

If i'm not mistaken the two zeros are position and the other two parameters are obviously the size, but when I change them the model goes black like the back of the model but I can't find info about this .drawImage in the blend4web api, so where can I find some info? please.

I'm so close to do what I was wanting to do but its just this area of code that I don't know what to do (the first question about the faces of the model was my fault I just had to unwrap i'm so embarrassed).
17 October 2016 12:53 #12769
Hi! Does the back material have a canvas texture? If not then you can share the existed canvas texture between the two materials or create another canvas texture specially for the back to control it independently.
Blend4Web Team
21 October 2016 07:49 #12901
thanks for the help, I finally did it but the model still goes black :/ I dont know how to solve this and the image in the model has a transparent background but the model goes black

My page
21 October 2016 11:08 #12910
thanks for the help, I finally did it but the model still goes black
This is because you have a canvas texture on that material. It's black by default unless you draw some image on the canvas.
How the whole model should look like? Am I right when I suppose that a user can upload/control only an image placed on top of the standard model, which should have some color or texture (not just black)? This can be easily done via nodes by mixing the default model look with the canvas texture.

and place it wherever he wants in the model
This also can be done through changing the UV coordinates of the canvas texture by using the API.
I can give you an example if you need.
Blend4Web Team
23 October 2016 08:16 #12954
I have already done the changing thing of the UV coordinates with the api. So that's done.

I need an example of the nodes only, that's the only thing I don't know how to do it. I will be pleased if you can help me with that
25 October 2016 12:45 #13056
I've made the example (project attached). The main trick is to mix an image and a background in a node material.

The UV can be changed via the special "Value" node and its API: set_nodemat_value - this is done in the app through the sliders.

Blend4Web Team
Please register or log in to leave a reply.