Is there any way to avoid blocking the main loop while loading some large 3d models?

[Johnny007]

Hi all,

I want to dynamically add some 3d models into the scene, but then I found that the main loop of the render will be blocked if I tried to load some large models(eg. 15M+).

So I hope someone can give me some suggestions to avoid it.

 

Thanks in advance!

[Wingnut]

Hi @Johnny007, welcome to the BabylonJS forum.

Sorry it has taken so long to get information.  I know we have some webworker-enhanced systems (such as collisions). A forum search for 'webworker' returns some hits.  

About a year ago, @jerome was seen talking about XHR transfers on webworker threads... which sounds promising.  That entire thread topic is interesting, so scroll up/down, too.

I found another webpage with interesting talk, too.  Hope this helps.  Perhaps smarter people than I... will comment soon.  Welcome again.

[GameMonetize]

Unfortunately this is due to Javascript being mono thread.

 

Loading resource on webworker won't work as web worker cannot create webgl resources.

[Dal]

The only way I can think of is to write some "fake threading" code that gets called every frame, reads a fixed number of bytes each frame, then saves where it was up to and yields....   then the next frame it picks up from that point and continues. So your large import can be gradually built up over a number of frames without freezing.
Would be good if someone could write such a loader for Babylon

[Wingnut]

Interesting thread... thanks everyone.  Boy, I still have to lean in the direction of @NasimiAsl's shaderBulder and geometryBuilder... if you really want to clutter-up a scene with pretty stuff, and have plenty of leftover scene horsepower.  It's a little slow to first fire-up, but man, it can produce things.

http://www.babylonjs-playground.com/#FT2RY#68

That's just a crapload of pretty for a single playground.  Phew.  The glass... you can look through it and see another building, and look thru IT's glass and see another building, etc, etc.  So nice. 

And there's no significant loading, and the calc/assembly is done on the GPU side, I believe.  That's... pretty cool.  Shaders that build geometry.  Fast, out of the CPU's way, hmm.  We're just BEGINNING to learn what can be done with shader-based geometry-building, me thinks.

I think he made a tree, too.  Need to cover your landscape in forest?  Snow banks?  Sand dunes?  Cactus?  Grass?  Those kinds of things... might work well in the GPU.  But, yeah, yeah, I know.  It's model BUILDING not model loading.

And, since it is not creating resources, model-building can be done in webworkers, too, I suspect.  Got skyskraper-building code?  Got tree growers?

Why am I still talking?  Oh yeah, I have no life.  Ok, carry on, team. 

[NasimiAsl]

we have some good experience in melyon.ir for this stuff

i test this with 20M Object  

result : 

1. parse Obj File  (without any material ) 8 sec latency with block all browser (i think we can make that in thread because just we make a array and no need blocking )

2. load and prepare texture (images) that take a true latency for large scene

 

 

 

we just have latency when we wanna load images 

i think we can make image element in the html and when all needed images loaded (per each mesh) we can prepare other material with that images

and may be we just have a short time lose some part of fps an no block i work on parse data in geometry builder

and have one tools for thread looping

may be this help a lot 

in this case i make loop from requestAnimationFrame function 

and this loop wait to complete step before go to next step:

 

usage and source  : 

 

 new th_for( arrayref, function (tid, p) { 
        
      // your source here for  each arrayref item
      // use "p.item"
      // when end your process call  "th_e(tid);" that request next 
                        
 }, function (e) {  return 0; /*end all step*/ }).start();

// thread


th_ide = 0;
function th_s(f) {
    id = th_ide++;
    waitState += "," + id + ",";
    lastThread = id;
    return id;
}

function th_e(id) {
    endState += "," + id + ",";

    lastThread = 0;
}


function thread(f, tid, e, p, master) {

    if (f != null && f != undefined) {
        function fhelper() {

            f(tid, p, master);
        }
        requestAnimationFrame(fhelper);
    }
}

function th_in(tid) {
    return tid != 0 && endState.indexOf("," + tid + ",") == -1;
}


th_for.prototype = { a: [], i: 0, tid: 0, cid: 0 };


var waitState = "", endState = "";


function th_for(a, f, e) {

    // initialize
    if (a != null && a != undefined) {

        if (def(a.slice))
            this.a = a.slice();
        else
            this.a = a;
        this.i = -1;
        this.f = f;
        this.e = e;
        this.tid = th_s(this.fHelper);
        return this;
    }
}
var th_id = 0;
th_for.prototype = {
    a: [],
    i: 0,
    tid: 0,
    cid: 0,
    id: 0,
    f: null,
    e: null,
    cHelper: function (cid, p, th) {
        th.f(cid, p, th);
        thread(th.fHelper, cid, null, null, th);
    },
    fHelper: function (tid, p, th) {
        if (th.cid != 0 && th_in(th.cid)) {
            thread(th.fHelper, tid, null, null, th);
        }
        else {
            th.i++;
            if (th.i < th.a.length) {
                th.cid = th_s(th.cHelper);
                thread(th.cHelper, th.cid, function () {
                    th_e(th.cid);
                    thread(th.fHelper, th.tid, null, null, th);
                }, { item: th.a[th.i], index: th.i, mid: th.tid }, th);
            }
            else {

                th_e(th.tid);
                th.e(th);
            }
        }
    },
    start: function (ms) {
        var th = this;
        th.id = th_id++;
        if (ms != null && ms != undefined)
            setTimeout(function () { th.start() }, ms);
        else thread(th.fHelper, th.tid, null, null, th);
        return th;
    }
};

 

 

 

[Johnny007]

On 8/8/2016 at 9:56 AM, Wingnut said:

Hi @Johnny007, welcome to the BabylonJS forum.

Sorry it has taken so long to get information.  I know we have some webworker-enhanced systems (such as collisions). A forum search for 'webworker' returns some hits.  

About a year ago, @jerome was seen talking about XHR transfers on webworker threads... which sounds promising.  That entire thread topic is interesting, so scroll up/down, too.

I found another webpage with interesting talk, too.  Hope this helps.  Perhaps smarter people than I... will comment soon.  Welcome again.

Hi @Wingnut, thank you to make it live, and thanks all of you!   I tried to use webworker these days, but it's a pity that I did not get successful.    As I tested, the render loop is blocked by model-building phrase, all others have no effect to the loop, so I want to move the model-building function to webworker, but I failed.

 

I will continue to have a try, and hope somebody can make it possible.

 

Thanks again.

[Nabroski]

Hello

i think the best workaround for this is to preload your files and then set them as isVisibel= false; and when needed to true

If you look at professional Games, i think, their is no on the fly model loading, everything fires up on start, the the players(s) choose a map or waiting for connection. 

what you can try i to increase the time between each part of the model is loading. 
 

[Pryme8]

Do a fake async loop with a completion listener.

 

summon the object with that async loop through fake recursion using the scenes timeout loop or create a sub timeout loop if it does not cause over recursion to the main loop. 

 

But the asset should already be loaded on runtime... I would make the asset then set disable it from the render loop and then when you need it clone the disabled object as a new object and bam.  Plus then if you need to call it a bunch you will save on draw calls.

[Johnny007]

On 8/19/2016 at 2:05 AM, Nabroski said:

Hello

i think the best workaround for this is to preload your files and then set them as isVisibel= false; and when needed to true

If you look at professional Games, i think, their is no on the fly model loading, everything fires up on start, the the players(s) choose a map or waiting for connection. 

what you can try i to increase the time between each part of the model is loading. 
 

Hi @Nabroski, can you tell me how to preload the model?  I found that the main loop will be blocked once the model begin to be created, reading from file stage and rendering stage will not block it. So is there any way to preload the model? thank you!

[Nabroski]

@Johnny007


Hey Whaz up ?

Befor WebGl people where preploding images, its the same thing! 

read how to, and also about indexeddb, browser cache

I have no time to code, here are some playground that i already made an modify them a bit,

http://babylonjs-playground.com/#1I2WPW#1

http://www.babylonjs-playground.com/#1RDUXN#7

make sure you make also some scene optimization somewhere is a good tutorial an this
https://doc.babylonjs.com/tutorials/Optimizing_your_scene

&&& more on this doc page ...

you also stressed your graphic card make sure you have the right settings (low end for very fast image loading etc)

This is a more advanced task to load models on the go, as long as you are loading them with the (spinning babylonjs icon) everything should be fine

Good Luck! 

[Johnny007]

7 hours ago, Nabroski said:

@Johnny007


Hey Whaz up ?

Befor WebGl people where preploding images, its the same thing! 

read how to, and also about indexeddb, browser cache

I have no time to code, here are some playground that i already made an modify them a bit,

http://babylonjs-playground.com/#1I2WPW#1

http://www.babylonjs-playground.com/#1RDUXN#7

make sure you make also some scene optimization somewhere is a good tutorial an this
https://doc.babylonjs.com/tutorials/Optimizing_your_scene

&&& more on this doc page ...

you also stressed your graphic card make sure you have the right settings (low end for very fast image loading etc)

This is a more advanced task to load models on the go, as long as you are loading them with the (spinning babylonjs icon) everything should be fine

Good Luck! 

@Nabroski, thank you very much and your references help me a lot.