RustySharpcloud Posted January 27, 2016 Share Posted January 27, 2016 Hi guys I realise my request is somewhat unusual, but I have a requirement to load base64encoded images to a skybox as the reflectionTexture. I can use base64 image strings quite easily for standard diffuse textures, but I could not find a way to do this for a skybox (which pre-loades 6 images by appending _nx.jpg etc) So the question is: Is there a way I can do this already? If not could it be added to babylon? I would like to have code like skyboxMaterial.reflectionTexture = new BABYLON.CubeTextureFromBase64(textureName, image64px, image64py, image64pz, image64nx, image64ny, image64nz, scene); I managed to work around the problem for now by editing babylon.js and changing the LoadImage function to detect specific pattern in the imagename and load the base64 string diirect as the src when I need it, but this is far from ideal going forward. (I'd happily prototype a function here too, but it's too complicated for me!!) Thanks in advance and keep up the amazing work. Constantly amazed at how cool babylonjs is. Rusty P.S. The reason I need to do this is because we have an offline version of our app the uses the WPF WebBrowser control. This works fine for normal images but created crossite exceptions in angular from babylon. Maybe there is another way to solve my problem, but base64 seemed easy and has solved the standard texture issue. Quote Link to comment Share on other sites More sharing options...
jerome Posted January 27, 2016 Share Posted January 27, 2016 maybe this will help : Quote Link to comment Share on other sites More sharing options...
RustySharpcloud Posted January 27, 2016 Author Share Posted January 27, 2016 Thanks Jerome. This shows me that I can use base64 as a texture (which is good), but my specific problem is using the CubeTexture. CubeTexture does some clever stuff under the hood, which I'd be afraid to try and replicate in my own code. I'm already using the base64 stuff from Standard Materials. I have worked around the skybox issue for now, but its a bit of a hack. Apologies in advance, if I have missing something obvious in your related post. Thanks Rusty Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted January 27, 2016 Share Posted January 27, 2016 Hello, you are right this is not supported so far because of the 6 textures loading chain Quote Link to comment Share on other sites More sharing options...
RustySharpcloud Posted January 27, 2016 Author Share Posted January 27, 2016 Thanks for the clarification Deltakosh. is it something that might be added? rusty Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted January 27, 2016 Share Posted January 27, 2016 I think so definitely. If you are open to share what you did Quote Link to comment Share on other sites More sharing options...
RustySharpcloud Posted January 27, 2016 Author Share Posted January 27, 2016 Thanks Deltakosh More than happy to share, but not sure how helpful it will be. The edits I made are highlighted in red. As I said a bit hacky. keep up the great work. I love bablylonjs!!! Tools.LoadImage = function (url, onload, onerror, database) { url = Tools.CleanUrl(url); var img = new Image(); if (url.substr(0, 5) !== "data:") img.crossOrigin = 'anonymous'; 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 () { if (window.external && window.external.IsDesktopApp) { if (url.substr(0, 14) === "./image/skybox") { url = window.external.getImage64(url.substring(8)); } } 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...
GameMonetize Posted January 28, 2016 Share Posted January 28, 2016 Ok a bit too hacky I need to think about it Quote Link to comment Share on other sites More sharing options...
RustySharpcloud Posted January 28, 2016 Author Share Posted January 28, 2016 LOL, very much agreed :-) From my perspective, I'd like to be able to make a cubtexture by passing in the src for each of the 6 images. If I happen to pass 64baseencoded, that is a bonus for me. Something like this: skyboxMaterial.reflectionTexture = new BABYLON.CubeTextureFromImages(textureName, image_px, image_py, image_pz, image_nx, image_ny, image_nz, scene); Maybe the existing CubeTexture could then call this with the extensions added, so its all joined up. BABYLON.CubeTexture(textureName, scene) { return CubeTextureFromImages(textureName, textureName+'_px.jpg', textureName+'_py.jpg', textureName+'_pz.jpg', textureName+'_nx.jpg', textureName+'_ny.jpg', textureName+'_nz.jpg', scene); } I'm sure there are very good reasons why its done the way it is... I tried to make the minimal edits to make it work for me... but I realise it will be a pain to maintain. Good luck and thanks again Rusty Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted January 28, 2016 Share Posted January 28, 2016 Tadammmm! http://www.babylonjs-playground.com/#AVG8L#1 adam, jerome, RustySharpcloud and 1 other 4 Quote Link to comment Share on other sites More sharing options...
RustySharpcloud Posted January 28, 2016 Author Share Posted January 28, 2016 You da man :-) but, I get Compilation error Object doesn't support property or method 'CreateFromImages' in the playground. :-( Does it need a newer version of babylonjs? Rusty Quote Link to comment Share on other sites More sharing options...
RustySharpcloud Posted January 29, 2016 Author Share Posted January 29, 2016 Hi Deltkosh Huge thanks. Its all working perfectly now... not sure what I did wrong. Rusty GameMonetize 1 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.