roman_44 Posted December 3, 2015 Share Posted December 3, 2015 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! Quote Link to comment Share on other sites More sharing options...
RaananW Posted December 3, 2015 Share Posted December 3, 2015 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. Quote Link to comment Share on other sites More sharing options...
roman_44 Posted February 15, 2016 Author Share Posted February 15, 2016 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 Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted February 16, 2016 Share Posted February 16, 2016 This is where the magic happens: https://github.com/BabylonJS/Babylon.js/blob/master/src/Tools/babylon.tools.ts#L345 NasimiAsl 1 Quote Link to comment Share on other sites More sharing options...
roman_44 Posted February 16, 2016 Author Share Posted February 16, 2016 12 hours ago, Deltakosh said: This is where the magic happens: https://github.com/BabylonJS/Babylon.js/blob/master/src/Tools/babylon.tools.ts#L345 I put request header for testing like in attached screenshot. 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. 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. 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!!! Quote Link to comment Share on other sites More sharing options...
adam Posted February 16, 2016 Share Posted February 16, 2016 You probably will need to modify this function: https://github.com/BabylonJS/Babylon.js/blob/master/src/Tools/babylon.tools.ts#L258 or this one: https://github.com/BabylonJS/Babylon.js/blob/030a1e648d20de305aace20cf84f1d1f85d96e09/src/babylon.engine.ts#L1645 Quote Link to comment Share on other sites More sharing options...
JCPalmer Posted February 16, 2016 Share Posted February 16, 2016 Yes, The magic might actually in the function just prior, LoadImage. It could call LoadFile eventually, but I am not at my Dev system, so only looking through GitHub Quote Link to comment Share on other sites More sharing options...
roman_44 Posted February 16, 2016 Author Share Posted February 16, 2016 11 minutes ago, adam said: You probably will need to modify this function: https://github.com/BabylonJS/Babylon.js/blob/master/src/Tools/babylon.tools.ts#L258 or this one: https://github.com/BabylonJS/Babylon.js/blob/030a1e648d20de305aace20cf84f1d1f85d96e09/src/babylon.engine.ts#L1645 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... Quote Link to comment Share on other sites More sharing options...
adam Posted February 16, 2016 Share Posted February 16, 2016 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(); Quote Link to comment Share on other sites More sharing options...
roman_44 Posted February 16, 2016 Author Share Posted February 16, 2016 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: 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.... Quote Link to comment Share on other sites More sharing options...
adam Posted February 16, 2016 Share Posted February 16, 2016 I would add the code in the loadImage function: https://github.com/BabylonJS/Babylon.js/blob/master/src/Tools/babylon.tools.ts#L258 Quote Link to comment Share on other sites More sharing options...
roman_44 Posted February 16, 2016 Author Share Posted February 16, 2016 1 minute ago, adam said: I would add the code in the loadImage function: https://github.com/BabylonJS/Babylon.js/blob/master/src/Tools/babylon.tools.ts#L258 But where in this function request is creating and sending? Where I can add my line request.setRequestHeaders('Test','test'); ??????? Quote Link to comment Share on other sites More sharing options...
roman_44 Posted February 17, 2016 Author Share Posted February 17, 2016 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..... Quote Link to comment Share on other sites More sharing options...
adam Posted February 17, 2016 Share Posted February 17, 2016 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; } Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted February 17, 2016 Share Posted February 17, 2016 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 =...) Quote Link to comment Share on other sites More sharing options...
roman_44 Posted February 17, 2016 Author Share Posted February 17, 2016 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 Quote Link to comment Share on other sites More sharing options...
adam Posted February 17, 2016 Share Posted February 17, 2016 53 minutes ago, roman_44 said: 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. Did you try the code I posted above? Quote Link to comment Share on other sites More sharing options...
adam Posted February 17, 2016 Share Posted February 17, 2016 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. Quote Link to comment Share on other sites More sharing options...
roman_44 Posted February 17, 2016 Author Share Posted February 17, 2016 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; }; Quote Link to comment Share on other sites More sharing options...
adam Posted February 17, 2016 Share Posted February 17, 2016 Just place it after your script tag for BabylonJS in your index file so that it replaces the BABYLON.Tools.LoadImage function. Quote Link to comment Share on other sites More sharing options...
roman_44 Posted February 17, 2016 Author Share Posted February 17, 2016 2 minutes ago, adam said: Just place it after your script tag for BabylonJS in your index file so that it replaces the BABYLON.Tools.LoadImage function. Oh, ok will try in a bit. Thanks! Quote Link to comment Share on other sites More sharing options...
adam Posted February 17, 2016 Share Posted February 17, 2016 There is some code at the beginning of the default LoadImage function to clean the url. You might need to include that in the new function. url = BABYLON.Tools.CleanUrl(url); Quote Link to comment Share on other sites More sharing options...
Pryme8 Posted February 17, 2016 Share Posted February 17, 2016 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? Quote Link to comment Share on other sites More sharing options...
roman_44 Posted February 17, 2016 Author Share Posted February 17, 2016 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. Quote Link to comment Share on other sites More sharing options...
Pryme8 Posted February 17, 2016 Share Posted February 17, 2016 Perfect, I love you long time! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.