Forum

Image Texture setup

05 March 2019 02:16
So I am making a website using Blend4Web that uses a 3d model of a shirt, and I am dynamically taking the images displayed in a list on the webpage(by search usually) and displaying them in a section on the shirt.

Unfortunately, I can't seem to get the images to display, only a black box.


html/java for display
<body>
<div class="sidenav">
<div id="main_canvas_container"></div>
</div>

<div id="resultsTable">

</div>

<script>
"use strict";

var load_image;
var m_app;
var m_cfg;
var m_data;
var m_preloader;
var m_ver;
var m_tex;
var m_scenes;

var DEBUG;
var APP_ASSETS_PATH;

b4w.register("TeeShirt_main", function (exports, require) {


m_app = require("app");
m_cfg = require("config");
m_data = require("data");
m_preloader = require("preloader");
m_ver = require("version");
m_tex = require("textures");

m_scenes = require("scenes");

DEBUG = (m_ver.type() == "DEBUG");
APP_ASSETS_PATH = m_cfg.get_std_assets_path();


exports.init = function () {
m_app.init({
canvas_container_id: "main_canvas_container",
callback: init_cb,
show_fps: 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() {

var preloader_cont = document.getElementById("preloader_cont");
m_data.load("./TeeShirtToExport.json", load_cb);
}

function preloader_cb(percentage) {
var prelod_dynamic_path = document.getElementById("prelod_dynamic_path");
var percantage_num = prelod_dynamic_path.nextElementSibling;

prelod_dynamic_path.style.width = percentage + "%";
percantage_num.innerHTML = percentage + "%";
if (percentage == 100) {
var preloader_cont = document.getElementById("preloader_cont");
preloader_cont.style.visibility = "hidden";
return;
}
}

function load_cb(data_id, success) {
if (!success) {
console.log("b4w load failure");
return;
}
m_app.enable_camera_controls(false, false, false, null, true);

}

load_image = function (image) {
var shirt = m_scenes.get_object_by_name("T-Shirt");
m_tex.replace_image(shirt, "Texture", image);
}
function create_interface(obj) {

}
});

b4w.require("TeeShirt_main").init();
</script>
</body>


html list
@model IEnumerable<OpenSourceTees.Models.RankedEntity<OpenSourceTees.Models.Image>>
@{
ViewBag.Title = "Search";
}

<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.Entity.ImageUrl)
</th>
<th>
@Html.DisplayNameFor(model => model.Entity.DesignName)
</th>
<th>
@Html.DisplayNameFor(model => model.Entity.Description)
</th>
<th>
@Html.DisplayNameFor(model => model.Entity.Price)
</th>
<th></th>
</tr>

@foreach (var item in Model)
{
<tr>
<td>
<img class="img-responsive" src="@item.Entity.ImageUrl" style="height: 128px;width:128px;" alt="" onclick="load_image(this)">

@*<a href="@Url.Action("DeleteImage", "Design",new { id = item.Id })" class="btn btn-default btn-block">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</a>*@
</td>
<td>
@Html.DisplayFor(modelItem => item.Entity.DesignName)
</td>
<td>
@Html.DisplayFor(modelItem => item.Entity.Description)
</td>
<td>
@Html.DisplayFor(modelItem => item.Entity.Price)
</td>
</tr>
}

</table>


attached is both the files I;m using live and the blender file I exported from, I had a modeler look at it and she said I had it set up right, even tweaked the area the image goes in a bit for me. But maybe we missed something. The images are in a blob storage online, I have tried to set them to factors of 2 but still get the "GuestIndex:1 [.WebGL-000001570A00F5A0]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering." warnings.
Also attached is an image of what I see on my end. images on the right are just that, images of a model.

On another note, I need help trying to get a color picker set up for the shirt to change the color of the shirt itself. And I have no idea where to start.

Known issues if you're still bored - Shirt is super small when it loads, would like it to almost fit the area completely. Shirt starts at angle would like it inline with the camera view.

known issues I will take care of - shirt's backface culling isn't set right at this time

Thanks again for any and all help, and sorry if I posted to much or to the wrong place.

github repo - https://github.com/KodaRayTominus/OpenSourceTees
05 March 2019 20:26
It's possible that you get the error because the image data is simply not there at the moment you execute the m_tex.replace_image() method. You must ensure this by using an onload event:
var your_image = new Image();
your_image.onload = function() {
  m_tex.replace_image(your_object_reference, "your_texture_name", your_image);
}
your_image.src = "your_path_and_filename_or_reference_to_the_image_data";

Also, you must link the src after attaching the onload event…

Right:
your_image.onload = …
your_image.src = …

Wrong:
your_image.src = …
your_image.onload = …

…because in the second example the source may already be loaded before the onload event is attached and then the event will not fire at all.
06 March 2019 01:13
same issue after changing the code, and changing the call to guarantee it passes as a string


load_image = function (imageURL) {
var my_image = new Image();
var shirt = m_scenes.get_object_by_name("T-Shirt");
my_image.onload = function () {
m_tex.replace_image(shirt, "Texture", my_image);
}
my_image.src = imageURL;
}


[.WebGL-00000217C59954C0]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.
06 March 2019 02:13
[.WebGL-000002488655A470]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.

it also happens when using the images from the example here as well https://www.blend4web.com/apps/code_snippets/code_snippets.html?scene=change_image
06 March 2019 03:05
Sorry, now I remember your project. Are you using a canvas texture? You cannot use replace_image with the canvas texture type.

I would suggest to either use a "normal" image texture. Then you can use m_tex.replace_image() to get your image on the shirt. You can use the code we discussed above and it should work.

Or you use a canvas texture, but then you must use .drawImage() to place the image. This is demonstrated in the Canvas Texture example from the Code Snippets and you would use code like this:
var ctx_image = m_tex.get_canvas_ctx(cube, "Image");

if (ctx_image) {
    var img = new Image();
    img.onload = function() {
        ctx_image.drawImage(img, 0, 0, ctx_image.canvas.width, 
                ctx_image.canvas.height);
        m_tex.update_canvas_ctx(cube, "Image");
    }
    img.src = APP_ASSETS_PATH + "earth.jpg";
}
07 March 2019 01:11
No, I switched everything over to a normal image texture. I even got with a modeler and made sure the model was set up right.

here's the repo, feel free to pull the "OnePage" branch as it's the most up-to-date version.

here's what I have currently again


load_image = function (imageURL) {
var my_image = new Image();
var shirt = m_scenes.get_object_by_name("T-Shirt");
my_image.src = imageURL;
my_image.onload = function () {
m_tex.replace_image(shirt, "Texture", my_image);
}
}


I moved the src call up above as that's how it is done here https://www.blend4web.com/apps/code_snippets/code_snippets.html?scene=change_image

even with it like

load_image = function (imageURL) {
var my_image = new Image();
var shirt = m_scenes.get_object_by_name("T-Shirt");
my_image.onload = function () {
m_tex.replace_image(shirt, "Texture", my_image);
}
my_image.src = imageURL;
}


it doesn't work. I would suggest downloading the repo and looking at it, at least so you have a better Idea of where I am at. All the blend4Web javascript code is in the _Layout.chtml page
07 March 2019 01:35
No, I switched everything over to a normal image texture.
You need to re-EXPORT the project in Blender (after every change), otherwise your changes won't go into the JSON/BIN files.
07 March 2019 04:14
I did…..
07 March 2019 09:58
Oh boy, I totally overlooked your Blender file that you posted right in the first post. I'm so dumb. The error is right there: You didn't load an image for the texture "Texture" in Blender. You must not leave this empty. That should be it.
07 March 2019 09:58
Oh…. how do I do that lol
 
Please register or log in to leave a reply.