Issue in loading image

[masterdon]

Hi Everyone,

 

var scalingObject = BABYLON.Mesh.CreatePlane("scalez", 1, scene, false);
    scalingObject.material = new BABYLON.StandardMaterial("outputplane", scene);
    scalingObject.position = scalorPosition
    if (isXScalor)
        scalingObject.material.diffuseTexture = new BABYLON.Texture("../images/icons/icons-Resize-Horizontal.png", scene);
    else
        scalingObject.material.diffuseTexture = new BABYLON.Texture("../images/icons/icons-Resize-Vertical.png", scene);

    scalingObject.rotate(BABYLON.Axis.X, 1.5, BABYLON.Space.LOCAL);

I am using above code to create little boxes as re-sizable controllers. i have set a image icon material as texture to plane for giving them look of resizable controller . However the background of material(or color of mesh) is coming black instead of transparent. what could be the reason? 

[brianzinn]

Did you try setting hasAlpha? http://doc.babylonjs.com/classes/3.0/basetexture#hasalpha-boolean I think you need to split up your assignment and texture creation to set a property:

var horizontalTexture = new BABYLON.Texture("../images/icons/icons-Resize-Horizontal.png", scene)
horizontalTexture.hasAlpha = true
scalingObject.material.diffuseTexture = horizontalTexture;

There is more info in the tutorial as well like: https://doc.babylonjs.com/tutorials/materials, so you may need:

scalingObject.material.useAlphaFromDiffuseTexture (for alpha blending).  If that doesn't work maybe a full PG - encode your image as base64

[masterdon]

Perfect....thanks a lot

[dbawel]

I know this doesn't relate to your current issue, but I thought I'd provide an answer to a seperate problem which appears often when loading a large # of textures for a scene - where the last few image files don't buffer and appear black in your scene. Again, that's not what's happenning here, but it occurs so often for myself and others, that I tought it might be valuable to methion for future reference by others.

As an example, I have a GUI which requires approx. 30 power of 2 image files to use as GUI buttons, and the last one or two appear black as they don't load before the scene is initialized. The code is as follows:

    var assets = []; 

    var loader = new BABYLON.AssetsManager(scene);

//Load textures for GUI
    var toLoad = [
        {name : "bgnd_color", src : "./textures/bgnd_color.png" },
        {name : "color_picker", src : "./textures/color_picker.png" },
        {name : "brush_size_icon", src : "./textures/brush_size_icon.png" },
        {name : "increase_brush", src : "./textures/increase_brush.png" },
        {name : "decrease_brush", src : "./textures/decrease_brush.png" },
        {name : "eraser", src : "./textures/eraser.png" },
        {name : "video_slate", src : "./textures/video_slate.png" },
        {name : "button_d", src : "./textures/3d_icon.png" },
        {name : "frame_start", src : "./textures/frame_start.png" },
        {name : "frame_end", src : "./textures/frame_end.png" },
        {name : "video_pause", src : "./textures/video_pause.png" },
        {name : "video_play", src : "./textures/video_play.png" },
        {name : "button_play", src : "./textures/button_play.png" },
        {name : "button_pause", src : "./textures/button_pause.png" },
        {name : "button_rev", src : "./textures/button_rev.png" },
        {name : "button_fwd", src : "./textures/button_fwd.png" },
        {name : "button_notes", src : "./textures/session_notes.png" },
        {name : "button_slider1", src : "./textures/slider1.png" },
        {name : "button_slider2", src : "./textures/slider2.png" },
        {name : "admin_button", src : "./textures/admin_button.png" },
        {name : "console_button", src : "./textures/console_button.png" },
        {name : "s_notes_button", src : "./textures/s_notes.png" },
        {name : "m_list_button", src : "./textures/m_list.png" },
        {name : "login_button", src : "./textures/login_button.png" },
        {name : "about_button", src : "./textures/about_button.png" },
        {name : "erase_all", src : "./textures/erase_all_button.png" },
    {name : "brush_size", src : "./textures/brush_size.png" },
    {name : "undo_icon", src : "./textures/undo_icon.png" },
    {name : "redo_icon", src : "./textures/redo_icon.png" },

    ];

    toLoad.forEach(function(obj) {
        var img = loader.addTextureTask(obj.name, obj.src);
        img.onSuccess = function(t) {
            assets[t.name] = t.texture;
        };
    });

    loader.onFinish = function() { /* I initialize my scene, canvas, GUI extension, etc from this point forward within this function*/

        };

As you can see, I attempt to verify that all textures are loaded before I initialize the scene and canvas, yet practically 50% of the time, one or many more of my GUI images and textures are not loaded and appear black in the scene.

The only solution I've found for this is to load additional "dummy images" into my texture array which are not used. This allows me to always load all essential textures into the texture array, as the loader still skips loading all textures, but will miss the last one or more textures I call simply to ensure all textures are loaded. In the following case, I load two additional "dummy textures" immediately following my rquired textures which the two dummy textures are never called in my scene:

        {name : "dummy_image", src : "./textures/dummy_image.png" },
        {name : "dummy_image_2", src : "./textures/dummy_image_2.png" },

As I find that missing textures and other assets to be a problem when loading large scenes and/or large dynamic GUIs, adding these "dummy textures" or other assets always assure that I do load the assets my scene requires as the loader will load from the list in order, missing only the last textures I'm loading ito my image array.

Again, this doesn't apply to the initial question in this post, but as I thought this might initially be the problem until I read through the post, I thought I'd add this scenario ad solution so others don't have to waste considerable time on a solution when it happens to them - and if you are building large scenes, it almost always will happen to you at some time.

DB

[brianzinn]

var toLoad = [
   {name : "bgnd_color", src : "./textures/bgnd_color.png" },
   {name : "color_picker", src : "./textures/color_picker.png" },
   ...
];

let loadedImageCount = 0

toLoad.forEach(function(obj) {
   var img = loader.addTextureTask(obj.name, obj.src);
   img.onSuccess = function(t) {
       assets[t.name] = t.texture;
       loadedImageCount++

       if (loadedImageCount === toLoad.length) {
          loadScene(...)
       }
   };
});

This is a bit hacky, but so is adding dummy textures!  This would only work if all the textures loaded successfully (could always add a onTaskError otherwise)... there must be something else going on, though.  I was looking at the code from http://www.babylonjs.com/scenes/assets/ and has what you have followed by assetsManager.load();  Anyway, I've never used the assets manager, but will add it at some point to my game.