Jump to content

Another way of getting picture for new BABYLON.Texture(path, scene)


roman_44
 Share

Recommended Posts

Hi, Babylon Professors!

I'm changing textures of my objects by dragging and dropping some stuff inside my html document.

And when I'm calling this line:

scene.materials[x].diffuseTexture = new BABYLON.Texture(givenFilePath, scene);

Babylon makes a GET request to the server in order to get an image.

But I need to add some headers to this request and some times even try to take this picture locally. Is it any predefined functions or ways to change GET request, or to upload this picture for example from browser web storage?

Thanks!

Link to comment
Share on other sites

Hi Roman,

The loading function is pretty fixed (but can be changed, it is an open source project ;) ). But there are other ways to do that. One of them is to load the image by yourself, convert it to base 64 and use this string to load the image. This way you could also abstract the local-vs-remote texture loading.

Link to comment
Share on other sites

  • 2 months later...

Hey Babylon citizens!

Now extremely need your help.

I do need to add cookie to each xmlHttp request header which Babylon makes when I'm trying to call new BABYLON.Texture(givenFilePath, scene);.

Trying to look through babylon.js file but cannot find place where I can do that.

Thanks

 

Link to comment
Share on other sites

12 hours ago, Deltakosh said:

I put request header for testing like in attached screenshot.

56c34856c1556_ScreenShot2016-02-16at8.02

When my scene is loading from name.babylon file, it downloads a lot of pictures. And they are not downloading through this function. All requests are sending without my Test Header. 

56c3497a40c36_ScreenShot2016-02-16at8.08

There is a lot of pictures, but all of them are without my test header.

But when I'm trying to run music file  musicService.music = new BABYLON.Sound('Music', fileName, scene, function () { callback();} - in request I can see my Test Header.

56c349f5b43cd_ScreenShot2016-02-16at8.10

And what is interesting though is that cookie automatically added to this request. It is what I finally need.

Looks like requesting for pictures is going another way...   Maybe there is another function which uses to download image files? 

I use Crome Incognito window to test it. So pictures are not coming from browser cache....

Thanks for help!!!

Link to comment
Share on other sites

11 minutes ago, adam said:

I will definitely try to look more precisely to all code. But I cannot understand where in LoadImage function we are creating XMLHTTP request? It is a lot of stuff which I don't understand, but cannot find request creation. 

And in second CreateTexure function it calls eventually LoadFile function....

Also I found 4 places in all library where xmlhttp request is creating and put console.log('something') near each of them. And no one is calling when images are loading. Only my music file calls LoadFile one time.

Really confused. But desperately need to put cookies to this image requests...

 

Link to comment
Share on other sites

I think you are going to have to use XMLHttpRequest in order to set the request header.  

Maybe something like this:

var img = new Image();
var url = "";

var xhr = new XMLHttpRequest();
xhr.setRequestHeader("[KEY]", "[VALUE]");
xhr.open("GET", url);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    img.src = url;

    //img.src = 'data:image/jpeg;base64,' + window.btoa(unescape(encodeURIComponent(xhr.response)));
  }
}
xhr.send();

Link to comment
Share on other sites

5 hours ago, adam said:

I think you are going to have to use XMLHttpRequest in order to set the request header.  

Maybe something like this:

var img = new Image();
var url = "";

var xhr = new XMLHttpRequest();
xhr.setRequestHeader("[KEY]", "[VALUE]");
xhr.open("GET", url);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    img.src = url;

    //img.src = 'data:image/jpeg;base64,' + window.btoa(unescape(encodeURIComponent(xhr.response)));
  }
}
xhr.send();

BABYLON.SceneLoader.Load function call this xmlhttp object sending stuff. So I just need to find place where it is happening and add xhr.setRequestHeader("[KEY]", "[VALUE]"); this line of code. And I already did that:

56c3a7eab3490_ScreenShot2016-02-16at2.50

But that is not working, because Babylon makes requests from another function which I cannot find. Because I can see my Test Header in music upload request, but not on all images requests. And I have uploaded some screenshots and explanation earlier....

Link to comment
Share on other sites

Look at this screenshot. Last table column is INITIATOR field. And you can see that last music file comes from babylon.js and I can see my test headers in it. But all pictures are go from "Other". Which means that I don't know where these requests comes from.

I already put this line:

xhr.setRequestHeader("Test", "dummy data");

before all 5 xhr.send() places in babylon.js main file.

And still all my files uploads on some magic way, and I cannot figure it out.

Please help.....

Screen Shot 2016-02-16 at 4.03.10 PM.png

Link to comment
Share on other sites

I would simply start by replacing LoadImage with this:

BABYLON.Tools.LoadImage = function(url, onload, onerror, database) {
    
    var img = new Image();
    var xhr = new XMLHttpRequest();

    //replace this with the headers you want to set
    //xhr.setRequestHeader("[KEY]", "[VALUE]");
    xhr.open("GET", url);
    xhr.responseType = "blob";
    xhr.onload = function() {
      img.src = window.URL.createObjectURL(xhr.response);
    }
    xhr.send();
    
    return img;
    
}

Link to comment
Share on other sites

30 minutes ago, Deltakosh said:

Your problem comes from this file:

https://github.com/BabylonJS/Babylon.js/blob/master/src/Tools/babylon.tools.ts#L258

 

Images are NOT loaded using xhr but using IMG object (img.src =...)

Oh finally!

Now I've got what is happening here!!! Thanks Deltakosh!

That means that it creates html image element and request sends somewhere from browser. Same as usual img element on my html. But now it is become even more complicated :) Because why my img elements from my html documents makes request with my cookie automatically, and this Image objects which generated by Babylon are not. Maybe it is because this img elements are not in DOM? So is the only way to resolve it is replace IMG object from LoadImage function to xhr? It sounds pretty challenging for me :) It is really a lot of in this function that I don't understand. And I feels like I will screw up this function rather than update it :) 

 

Some update:

http://stackoverflow.com/questions/16426745/how-to-add-headers-to-the-request-url-in-img-src

Link to comment
Share on other sites

1 hour ago, adam said:

I just made an update to the code above.  I'm pretty sure that will work for you.  Just place that code right after your script tag for BabylonJS.

Hi Adam!

Thanks for your help!

So this is LoadImage function. Where exectly do you want me to put your code? This is pretty big function with a lot of ifs. Do you really want to replace whole function to your code? 

Tools.LoadImage = function (url, onload, onerror, database) {
            if (url instanceof ArrayBuffer) {
                url = Tools.EncodeArrayBufferTobase64(url);
            }
            url = Tools.CleanUrl(url);
            var img = new Image();
            if (url.substr(0, 5) !== "data:") {
                if (Tools.CorsBehavior) {
                    switch (typeof (Tools.CorsBehavior)) {
                        case "function":
                            var result = Tools.CorsBehavior(url);
                            if (result) {
                                img.crossOrigin = result;
                            }
                            break;
                        case "string":
                        default:
                            img.crossOrigin = Tools.CorsBehavior;
                            break;
                    }
                }
            }
            img.onload = function () {
                onload(img);
            };
            img.onerror = function (err) {
                Tools.Error("Error while trying to load texture: " + url);
                img.src = "data:image/jpg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QBmRXhpZgAATU0AKgAAAAgABAEaAAUAAAABAAAAPgEbAAUAAAABAAAARgEoAAMAAAABAAIAAAExAAIAAAAQAAAATgAAAAAAAABgAAAAAQAAAGAAAAABcGFpbnQubmV0IDQuMC41AP/bAEMABAIDAwMCBAMDAwQEBAQFCQYFBQUFCwgIBgkNCw0NDQsMDA4QFBEODxMPDAwSGBITFRYXFxcOERkbGRYaFBYXFv/bAEMBBAQEBQUFCgYGChYPDA8WFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFv/AABEIAQABAAMBIgACEQEDEQH/xAAfAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgv/xAC1EAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+fr/xAAfAQADAQEBAQEBAQEBAAAAAAAAAQIDBAUGBwgJCgv/xAC1EQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/APH6KKK+FP76Pl+iiivuj+BT6gooor4U/vo+X6KKK+6P4FPqCiiivhT++j5fooor7o/gU+oKKKK+FP76Pl+iiivuj+BT6gooor4U/vo+X6KKK+6P4FPqCiiivhT++j5fooor7o/gU+oKKKK+FP76Pl+iiivuj+BT6gooor4U/vo+X6KKK+6P4FCiiigD6gooor4U/vo+X6KKK+6P4FPqCiiivhT++j5fooor7o/gU+oKKKK+FP76Pl+iiivuj+BT6gooor4U/vo+X6KKK+6P4FPqCiiivhT++j5fooor7o/gU+oKKKK+FP76Pl+iiivuj+BT6gooor4U/vo+X6KKK+6P4FPqCiiivhT++gooooA+X6KKK+6P4FPqCiiivhT++j5fooor7o/gU+oKKKK+FP76Pl+iiivuj+BT6gooor4U/vo+X6KKK+6P4FPqCiiivhT++j5fooor7o/gU+oKKKK+FP76Pl+iiivuj+BT6gooor4U/vo+X6KKK+6P4FPqCiiivhT++j5fooor7o/gUKKKKAPqCiiivhT++j5fooor7o/gU+oKKKK+FP76Pl+iiivuj+BT6gooor4U/vo+X6KKK+6P4FPqCiiivhT++j5fooor7o/gU+oKKKK+FP76Pl+iiivuj+BT6gooor4U/vo+X6KKK+6P4FPqCiiivhT++j5fooor7o/gU+oKKKK+FP76CiiigD5fooor7o/gU+oKKKK+FP76Pl+iiivuj+BT6gooor4U/vo+X6KKK+6P4FPqCiiivhT++j5fooor7o/gU+oKKKK+FP76Pl+iiivuj+BT6gooor4U/vo+X6KKK+6P4FPqCiiivhT++j5fooor7o/gU+oKKKK+FP76Pl+iiivuj+BQooooA+oKKKK+FP76Pl+iiivuj+BT6gooor4U/vo+X6KKK+6P4FPqCiiivhT++j5fooor7o/gU+oKKKK+FP76Pl+iiivuj+BT6gooor4U/vo+X6KKK+6P4FPqCiiivhT++j5fooor7o/gU+oKKKK+FP76Pl+iiivuj+BT6gooor4U/voKKKKAPl+iiivuj+BT6gooor4U/vo+X6KKK+6P4FPqCiiivhT++j5fooor7o/gU+oKKKK+FP76Pl+iiivuj+BT6gooor4U/vo+X6KKK+6P4FPqCiiivhT++j5fooor7o/gU+oKKKK+FP76Pl+iiivuj+BT6gooor4U/vo+X6KKK+6P4FCiiigD6gooor4U/vo+X6KKK+6P4FPqCiiivhT++j5fooor7o/gU+oKKKK+FP76Pl+iiivuj+BT6gooor4U/vo+X6KKK+6P4FPqCiiivhT++j5fooor7o/gU+oKKKK+FP76Pl+iiivuj+BT6gooor4U/vo+X6KKK+6P4FPqCiiivhT++gooooA+X6KKK+6P4FPqCiiivhT++j5fooor7o/gU+oKKKK+FP76Pl+iiivuj+BT6gooor4U/vo+X6KKK+6P4FPqCiiivhT++j5fooor7o/gU+oKKKK+FP76Pl+iiivuj+BT6gooor4U/vo+X6KKK+6P4FPqCiiivhT++j5fooor7o/gUKKKKAPqCiiivhT++j5fooor7o/gU+oKKKK+FP76Pl+iiivuj+BT6gooor4U/vo+X6KKK+6P4FPqCiiivhT++j5fooor7o/gU+oKKKK+FP76Pl+iiivuj+BT6gooor4U/vo+X6KKK+6P4FPqCiiivhT++j5fooor7o/gU+oKKKK+FP76CiiigD5fooor7o/gU+oKKKK+FP76Pl+iiivuj+BT6gooor4U/vo+X6KKK+6P4FPqCiiivhT++j5fooor7o/gU+oKKKK+FP76Pl+iiivuj+BT6gooor4U/vo+X6KKK+6P4FPqCiiivhT++j5fooor7o/gU+oKKKK+FP76Pl+iiivuj+BQooooA+oKKKK+FP76Pl+iiivuj+BT6gooor4U/vo+X6KKK+6P4FPqCiiivhT++j5fooor7o/gU+oKKKK+FP76Pl+iiivuj+BT6gooor4U/vo+X6KKK+6P4FPqCiiivhT++j5fooor7o/gU+oKKKK+FP76Pl+iiivuj+BT6gooor4U/voKKKKAPl+iiivuj+BT6gooor4U/vo+X6KKK+6P4FPqCiiivhT++j5fooor7o/gU+oKKKK+FP76Pl+iiivuj+BT6gooor4U/vo+X6KKK+6P4FPqCiiivhT++j5fooor7o/gU+oKKKK+FP76Pl+iiivuj+BT6gooor4U/vo+X6KKK+6P4FCiiigD6gooor4U/vo+X6KKK+6P4FPqCiiivhT++j5fooor7o/gU+oKKKK+FP76Pl+iiivuj+BT6gooor4U/vo+X6KKK+6P4FPqCiiivhT++j5fooor7o/gU+oKKKK+FP76Pl+iiivuj+BT6gooor4U/vo+X6KKK+6P4FPqCiiivhT++gooooA+X6KKK+6P4FPqCiiivhT++j5fooor7o/gU+oKKKK+FP76Pl+iiivuj+BT6gooor4U/vo+X6KKK+6P4FPqCiiivhT++j5fooor7o/gU+oKKKK+FP76Pl+iiivuj+BT6gooor4U/vo+X6KKK+6P4FPqCiiivhT++j5fooor7o/gUKKKKAPqCiiivhT++j5fooor7o/gU+oKKKK+FP76Pl+iiivuj+BT6gooor4U/vo+X6KKK+6P4FPqCiiivhT++j5fooor7o/gU+oKKKK+FP76Pl+iiivuj+BT6gooor4U/vo+X6KKK+6P4FPqCiiivhT++j5fooor7o/gU+oKKKK+FP76P//Z";
                onload(img);
            };
            var noIndexedDB = function () {
                img.src = url;
            };
            var loadFromIndexedDB = function () {
                database.loadImageFromDB(url, img);
            };
            //ANY database to do!
            if (database && database.enableTexturesOffline && BABYLON.Database.IsUASupportingBlobStorage) {
                database.openAsync(loadFromIndexedDB, noIndexedDB);
            }
            else {
                if (url.indexOf("file:") === -1) {
                    noIndexedDB();
                }
                else {
                    try {
                        var textureName = url.substring(5);
                        var blobURL;
                        try {
                            blobURL = URL.createObjectURL(BABYLON.FilesInput.FilesTextures[textureName], { oneTimeOnly: true });
                        }
                        catch (ex) {
                            // Chrome doesn't support oneTimeOnly parameter
                            blobURL = URL.createObjectURL(BABYLON.FilesInput.FilesTextures[textureName]);
                        }
                        img.src = blobURL;
                    }
                    catch (e) {
                        img.src = null;
                    }
                }
            }
            return img;
        };

Link to comment
Share on other sites

2 minutes ago, Pryme8 said:

this is kinda off topic, but can you load a image generated on separate HTML canvas element into the Babylon Scene for construction of textures?

Yeah, look at this example: http://www.babylonjs-playground.com/#17YNKA

First you have to get your image from canvas as base64 string with help of this https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

You can read more about this format here  https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs

Second - just take given babylon-playground example and take a look to the function in 25's line to get your texture.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...