AssetManager and Skybox texture?

[jellix]

Hi,

when I setup a ReflectionTexture for a Skybox, I give a path to the six textures and the frameworks loads the textures automatically.

I would like to preload these textures before with the AssetManager and afterwards use them for my skybox.

So how is the correct workflow for that?

Thanks for tips!

[Wingnut]

Hi @jellix

  Have you seen the assetsManager docs?  http://doc.babylonjs.com/tutorials/How_to_use_AssetsManager

There's some image/texture info in there... might help.  Sorry for the slow reply.

[jellix]

HI @Wingnut

the examples just show how to load one file per texture. A Skybox has a CubeTexture that consist of 6 files.

So I could preload the 6 files with the AssetManager and afterwards create the CubeTexture like:

new BABYLON.CubeTexture(this._skyboxPath, scene);

But by that the six files are loaded again. And in that case not with the AssetManager.

Maybe I should change my question to "How do I load a CubeTexture (that consists of six files) with the AssetManager"?

[Wingnut]

Hi again, J.  That is a great question... and likely needs someone smarter than I... to answer.

The situation MIGHT be automatic, though.  Let me show you what I found.

First,  let's visit https://github.com/BabylonJS/Babylon.js/blob/master/src/Materials/Textures/babylon.cubeTexture.js  See line 20?  It seems that cubeTexture goes to the cache FIRST, and then uses standard loading if that fails.  Let's take a look at the _getFromCache function... which resides on an ancestor called baseTexture.

https://github.com/BabylonJS/Babylon.js/blob/master/src/Materials/Textures/babylon.baseTexture.js#L101

Looks like it digs-into scene.getEngine().getLoadedTexturesCache();  That's sounds good to us, right? 

So, although I am no expert, I would say (guess/assume/speculate) that you are automatically in good shape.  BabylonJS looks in its cache FIRST, to get needed textures.  Seemingly, it goes to the web (at cubeTexture construction time) ONLY as a fallback to the cache-fetch.  But I'm not sure.

Hopefully, smarter people than I... can verify that to be true.  You might be able to do some tests to PROVE it's true, too, though I'm not sure how to structure that test.

I tried a test where I pre-fetched the skybox textures with the assetsManager, and put the entire cubeTexture source code... into the playground (an act I call hijacking).

http://playground.babylonjs.com/#NBVF0#1

If you watch your JS console, you can see that the skybox is using OUR in-playground (hijacked) cubeTexture code, and not the default cubeTexture class from the framework itself.  You can also see notifications from the pre-loads.

I was hoping to ONLY enable cache loading, and disable run-time loading (within the hijacked code, somehow).  But, I'm not sure how to do that.  Maybe you'll have better success.  Perhaps others will help us.

All in all, it's a good testing playground to cause trouble-within.  It still doesn't PROVE that this skybox is using cached/prefetched images, though.  Not yet.  I was hoping to prove our theory, and I haven't.  Experts?  Help?  (thx, everyone).

[chicagobob123]

I am not sure what you are asking exactly but I am going to try to help. 

I needed several ground image tiles 512x512 to load before I built my ground. 

I organized the image names to make them easy to load then used a simple counter 

        var cnt = 1;
        for(var i=0;i<4;i++) 
         {

       for(var j=0;j< 6;j++) 
           {

            grnd[cnt].src="texture/ground/r"+(i+1)+"_c"+(j+1)+".png";          
            grnd[cnt].onload=function() 
             { // tiles are square
              grndcnt++;
             };

            cnt++;

          } 

       }

In 

      scene.registerBeforeRender(function()
       {
      

        if(grndcnt==cnt)
         {
          createDynamicGround();
          grndcnt=0; 
         }

Hope this helps a bit.