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

[han7a]

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");
    }

    assetsManager.load();

 

//my skybox function elsewhere

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

 

 

[RaananW]

You could solve it on your end (as Babylon doesn't offer this functionality, as far as I know) - check if the user is on mobile and provide a different url or a whole configuration for each device type.

[han7a]

ok thanks, I'll check if mobile or desk and just generate different skyboxes

[Wingnut]

@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?    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

[jessepmason]

@Wingnut if you feel like tackling that:

 

...........

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?

.........

I might find it useful

[han7a]

@Wingnut - yes , so both, during load process first quick and fast in low res then medium and then finally fully res. That was my thought at the beginning, then for mobile we stop the process in medium or low res.

so, I wanted to do it with the assetsManager if he could load cubemap textures

[Wingnut]

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.

[GameMonetize]

Agree with Wingy

[jessepmason]

Thats kinda what I had in mind so thanks for posting!

[han7a]

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  

[Wingnut]

 

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!

[jessepmason]

Wingnut you are very entertaining, I think I followed the references

[hit2501]

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. 

[Wingnut]

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. 

 

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

[han7a]

@wingnut, http://www.bmw-autos...ch/de-de/stand/ No, I have not made this, it was an example, mine is not finished yet. I'll post when done.

@hit2501 that could be a nice approach, I try..

[Wingnut]

Ahh, sorry han... I jumped to some conclusion. 

 

I like panoramas.  I hope they get as popular as "selfies", someday.  Maybe we'll call them "here-ies".     Probably not, though.

[jessepmason]

@wingnut      with the push of 360 rigs/cameras you probley aren't wrong...here-ies could be a thing

[han7a]

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?

 

 

[dbawel]

Hey,

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.

Cheers,

DB