Preloading image sequence for use in BABYLON.Layer

Hi everyone,

I’m trying to do something that is a bit hard to explain so please bare with me :slightly_smiling_face:
I’m creating a project that is composed of two main parts:
A- a rendered (3dsmax,Corona) image sequence of a camera rotating around a building
B- the same project exported to BabylonJS in GLTF from 3dsmax in order to mimic the rotation from the rendered sequence

The idea is to overlay some interaction (B) on top of the rendered rotation sequence (A)

I’m using the BABYLON.Layer in order to display my image sequence but I’m having a hard time preloading it.
I don’t know how to assign the texture to BABYLON.layer without having to reload the image which leads to significant lag the first time the user rotates around the building (until all images have been loaded once)
On this playground, line 28 to 40 is where i’m preloading the image.

I then track the mouse movement in order to jump either forward or backward in my image sequence.

My 2 questions are:
-Do you know how to preload a texture in order to use it in the BABYLON.Layer?
-Is there a better way than using BABYLON.Layer to create a sequence slider?



Hi @christopheC,

You can set the texture property of the layer, so then you can do:

layer.texture = task[pad(i, 3)].texture;

Thanks Gijs, obviously now that I know the answer it was super easy…
I don’t know why but I assumed that task[pad(i, 3)] = assetsManager.addTextureTask(“SPIN_0000”, imageToBePreloaded, true, false); returned a texture object so that my task[pad(i, 3)] would be the texture. So I had tried layer.texture = task[pad(i, 3)] but for evident reasons it did not work…

Anyways, thanks a lot for your help!

Regarding my second question, would anyone think about alternative ways to make a sequence slider other than BABYLON.Layer? It seems to work and I have no problem with it, I’m just wondering if it’s the most efficient way to do it.


Maybe you can make a video from your rotated sequence and use the VideoTexture class to display it.

You could write a 3dsMax script to project 3D points to the camera screen then used a 2D canvas to render it instead of BJS…:joy: :rofl:

This is what I did to make this kind of app (and I think it’s what you want to do) :

That is quite interesting for sure and yes this is very much in line with what I am working on. Would you mind telling me a bit more about how you did this?

I made a maxscript to transform clickable areas to screen coordinates (camera projection), then I export a json files with all the projected points + 72 images (5° x 72 = 360), then I used a canvas 2d framework to display everything.

Hope this help

The main problem with this technical is that you can’t do much things…but it’s very efficient…but for example I can’t make animation like a car in the streets.

So Babylon could still be a good choice if you render the building in a transparent mesh but with picking activated, you will also have to sync the 3d camera with the 2d world. This is what I would do if I had to do it today : a 2D canvas or a Babylon Layer in the background, and an invisible mesh for picking.

Cool thanks for the info. The link you shared is really great, looking good!
What you mentioned re Babylon is is exactly what I did, I created the babylon layer in the background with invisible mesh for picking, I also matched the Babylon camera to my 3dsmax one so things line up properly. It allows me to add a bit more of interactivity, I’m also linking the available apartments to a database and I can have more 3d shapes than the canvas.

Thanks for your input!