Forum

Problem with canvas

22 November 2018 16:30
Hello,
Im working on a project, where user will be able to upload a photo and it would appear on 3d model in browser. For this Im trying to use canvas, but I cant manage to make it work. First of all I took the canvas code from code snippets and removed all unnecessary code from js file, and left only the world image to appear on model.
Second I made a model, setted same parameters as in snippet model and exported json to assets folder. But I cant find, why it is not working, any one got an idea? Been trying work this out almost for a week. I would appreciate any kind of help !
I attached the project folder.
22 November 2018 16:32
import b4w from "blend4web";

var m_tex     = b4w.textures;
var m_data    = b4w.data;
var m_app     = b4w.app;
var m_main    = b4w.main;
var m_sfx     = b4w.sfx;
var m_scenes  = b4w.scenes;
var m_cfg     = b4w.config;
var m_version = b4w.version;

var DEBUG = (m_version.type() === "DEBUG");
var APP_ASSETS_PATH = m_cfg.get_assets_path("testingcanvas");

export function init() {
    m_app.init({
        canvas_container_id: "main_canvas_container",
        callback: init_cb,
        show_fps: true,
        physics_enabled: false,
        background_color: [1, 1, 1, 1],
        alpha: true,
        autoresize: true,
        assets_dds_available: !DEBUG,
        assets_min50_available: !DEBUG,
        console_verbose: true
    });
}

function init_cb(canvas_elem, success) {

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

function load() {
    m_data.load(APP_ASSETS_PATH + "example.json", load_cb);
}

function load_cb(data_id) {
    m_app.enable_camera_controls(false, false, false, null, true);
    load_data();
}

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

    if (ctx_image) {
        var img = new Image();
        img.src = APP_ASSETS_PATH + "earth.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)";
            ctx_image.font = "250px Arial";
            ctx_image.fillText("Hello, World!", 300, 300);
            m_tex.update_canvas_ctx(cube, "Image");
        }
    }

}



init();
23 November 2018 10:03
You forgot to set the texture's source type to "Canvas". Yours is set to "None". Go to the texture tab of the material, scroll to Export Options, and select "Canvas" as the source type. Use 2048.


After changing this and exporting, I got a working result with your project:


Always keep an eye on the browser console and any errors it reports!
23 November 2018 12:05
Hey, thank you so much! Im so dumb;D
30 November 2018 19:00
Hello again,
I encountered another issue. On project manager when you change the canvas image and when reopening the scene - the image changes. But when I deploy project on my server and change the source image of canvas texture it doesnt change. It seems that my brovser saves in cache that image. How could I avoid this? Also I noticed that I cant make canvas text to be dynamic. It seems that it is always the same after compiling. Can it be so?
30 November 2018 21:05
Can you upload or link to your project? If you want to suppress caching, add random strings to your URLs/file names. See also:

https://www.blend4web.com/en/forums/topic/4623/
 
Please register or log in to leave a reply.