Forum

User posts Alberto
21 October 2016 07:49
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
16 October 2016 10:01
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).
15 October 2016 02:37
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() {
    m_app.init({
        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");
        return;
    }

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

    load();
}

/**
 * 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) {
    m_app.enable_camera_controls();
    load_data();

    // 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.canvas.height);
            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
b4w.require("ropa").init();


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.

Thanks.
28 September 2016 19:59
I'll do that thanks a lot, the help is appreciated
28 September 2016 10:27
I knew there was a easy way for that. It was tricky at the beginning

Solar heater.html

There is the result but if you check it when you move in the scene you can kind of see the image along the cylinder (I subdivided the object and in the transform tools I used smooth) and if you get close enough you can actually see what kind of image I used.

I guess I have to "play" with the parameters in the material as you said in order to avoid that. Or can it be the image? maybe the colors, lightning or something like that? Maybe I need nodes for that?

Actually this helped me, so thanks a lot Nicolas I will try with another images to see if something changes
27 September 2016 00:44
Hi.

I'm trying to make a chrome/reflective style material like this image of a solar heater.
(because I'm trying to virtualize a solar heater for an online shop)


I'm new using materials and nodes so i'm struggling with that… In the package Blend4Web CE are files with examples about that material (like the sink demo) but there's a lot of images inside and nodes that I don't really know where they come from .

If someone has a tutorial about materials like that I will be pleased. Or maybe not a tutorial but if someone could just tell me what I need, to do a material like that, like steps (It doesn't matter if I have to research more) or something like that just to guide me in the right direction because I don't even know how to start.

I hope someone can understand me because english is not my native language.