Jump to content

how to load a cubeTexture in diferent sizes for mobile & desktop


Recommended Posts

Hi all, I would like to load the textures for a cubeTexture in different sizes, so that first only a small resolution is loaded and then the normal textures. like LOD

I would like to use the assetsManager?


var assetsManager = new BABYLON.AssetsManager(scene);
    var textureTask = assetsManager.addTextureTask("image task", "example/blabla.png");//?url
    textureTask.onSuccess = function(task) {


//my skybox function elsewhere
        createSkybox(task.texture);// dont work

console.log("cubetexture loaded");



//my skybox function elsewhere

 createSkybox("example/blabla");// fine



Link to comment
Share on other sites

@han7a - Did you get your question answered?  :)  I read your message differently... so I am checking.


Are you asking how to get skybox textures to load in low-rez quick/first, then maybe medium-rez, and then finally full-rez? 


Essentially... during-load texture LOD changes? 


And you want that to work on mobile and desktop


Or, none of that?  :)  Likely, I misunderstood the question.  Or did Raanan?  Or is everything fine? 


Where am I?  :D  Never mind me, I'm just the telephone guy, climbing a local pole.  We had a report of possible mis-communicating, so I had to test the wires.  heh

Link to comment
Share on other sites

Well guys, I have no idea how to do that.  Sorry. 


I am far from an expert, but I would suspect that you would not be able to use the assetsManager, but maybe pieces of it.


I would think the order of events might be like this...


1.  Get a skybox with colors only, quick.  Render it.  (or provide ANYTHING to entertain the user during loads, like SVG spirograph flowers)  :)

2.  Do device checking... try to determine your needed max rez.

3.  Change out the skybox texture to low rez TEXTURES.  Render it.

4.  Determine if you want to load the next rez level.

5.  Load and render hi-rez as necessary.


As Raanan mentioned, somewhere in the sequence... you will know your device.  At that point, you could completely branch, and essentially "stock" a scene... specifically designed for mobiles, or specifically designed for desktop.  Essentially, two different scenes.  Stay modular, of course, so you get maximum code reuse.  Special config.  Mobile profile or desktop profile.  *shrug*  Sorry that I don't have many/any usable ideas, guys.

Link to comment
Share on other sites

I'm doing a 360 panorama with several rooms, text photo info points video etc. like this..  http://www.bmw-autosalon.ch/de-de/stand/ .. and there you can see how the images are loaded progressively. so I wanted something similar with a maximum code reuse, and with the ability to save unnecessary resources in small devices.

the whole thing is quite simple with Babylon, and does not have much code, so I can write a version for each device. but I wanted one for all :P 

Link to comment
Share on other sites



Just to add a bit of Wingnut philosophy, a few of us have heard of the term "MVC".  It stands for Model-View-Controller.  (Model != mesh.  We are talking about the DATA modeI... which we could call the Scene Graph).   I hobbied in XUL for a number of years, particularly in the "views" department.  I made GUI "listViews" and "treeViews" and dialogs... and pretty much got a lot of tumors from it.  :)


To get to the point... let's talk about the "view" part of MVC.  If you think about it, you can render a BabylonJS scene... in HTML.  In Ascii!  In SVG.  In VRML, or X3D.  A view is simply a representation of a model (scene graph).


So, a person might start with a base class called "View".  It has a connector to "SuperFast Universal Proxy Data-Sniffer" class, but that's for later.  :)


Think about BabylonJS.Scene.  Know why that puppy sits at the top level in SRC/ ... right next to Engine.ts?  Cuz it earned the right to be there!  :)


Scene is a big dog class... but that doesn't mean we can't still abuse it.


I can't remember what point I was trying to make, other than... a "view" can be a snap-on connector.  A plugin.  A module.  Want to render your scene in HTML (as a big table - no webGL)?  Just route through the HTML "view" plugin.  Want it in SVG (maybe as an arc graph)?  Same deal - route through the SVG view plugin.


The same COULD work for your mobile vs. desktop thing.  The mobile "view-class" would possibly make heavy use of Babylon's LOD features.


Just thinkin' and yappin'.  :)  Party on!

Link to comment
Share on other sites

Hi han7a


I don´t know much about HTML5 but an suggestion would be use a mix of <picture> label and Babylon, because <picture> allow to set diferent images and let the navigator choose what image is closer to the size of the screen.


It seems easy to use: http://www.hongkiat.com/blog/html5-picture/


In this example you can shrink the navigator window to see diferent positions (images) of a kitty: http://googlechrome.github.io/samples/picture-element/


crazy idea but I think its possible. 

Link to comment
Share on other sites

I am off-topic, but, han...  http://www.bmw-autosalon.ch/de-de/stand/ is nice nice nice!  Yum!  Well done!  Having a mouse dead-zone in the center of the pointerDown area might be cool.  Also, maybe a pan-sensitivity slider / adjust.  Panning speeds got a little fast/sensitive for me, and I felt a bit sea-sick.  :D


But... wow!  Real nice, a tasty interaction interface, and beautiful photography! 

Link to comment
Share on other sites

  • 2 months later...

Hi guys, I have a new problem when I run the application local, chrome and firefox conditionally block the content .. Chrome says:  " Image from origin 'file://' has been blocked from loading by Cross-Origin Resource Sharing policy: Invalid response. Origin 'null' is therefore not allowed access. "

Chrome block all textures, Firefox just a few, IE show all textures

online runs everything.

is that really CORS? or I have missed something?



Link to comment
Share on other sites


I wish I had the time and enough experience to develop more quickly in babylon - since I would love to see 2 new extension, which would most likely be used in EVERY bjs scene if these existed. The first would be an extension which identifies device, browser, and most importantly (perhaps only this) device resolution. Many of the posts on this forum deal with issues which are device and resolution dependant. If any developer could automatically identify the display resolution of the device in which they are rendering, this would be invaluable. In addition, then it would be great to know what device, OS, and any other specific of the device.

Secondly, an LOD extension would also be invaluable. Utilizing the first extension, functions which render optimized textures, modifies the optimization and  tesselation of meshes, and other optimizing features such as # of lights, mesh inclusions and exclusions, etc. would be an extension I would use in every scene.

I'm doing my very best to try and reach the very baseline of where some of you developers out there are, since it probably takes me 10X as much time to write a new function with any substance. And once I reach this point, I will be happy to contribute beyond the advice I might have from my unique experiences in production. If I thought I were able to accomplish efficiently and in reasonable time, I would love to be able to build such extensions. However, I need to be realistic, as I'm already streching my development experience in WebGL and Javascript, in building the applications currently for use in production. Although, the work we're doing on the server side should benefit everyone in the future.

So I thought I would mention these two extensions, as they would most likely be used in every scene developed in the future. I'm sure they would become a part of the master file eventually, as this is necessary sometime in the future - it's just to mention that now would be better than later if someone more proficient than I could find the time to build these.



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.

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.


  • Recently Browsing   0 members

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