Rendering frame and UI during lengthy operations

Questions
1

I am performing lengthy operations in a loop - and I want to render the scene after certain milestones in the operations, or at a minimum update the UI - instead of firing up the Console in the browser, have logs about the operations taking place displayed in the UI.

Any recommendations for the mechanism for this?

2

You can either use a worker or you need to chunck the work to not do the entire loop in one frame.

JS being monothreaded, you do not have much more choices about this issue unfortunately.

1 Like
3

Let’s say I chunk it by iteration - I have 20 iterations and would like to update the UI after each iteration finishes - how do you accomplish this?

Calling scene.render inside loop at end of iteration doesn’t work. setTimeout? Promises?

4

It should work. Sharing a sample might be the easiest.

5

How do you do this is my question? Calling scene.render at end of iteration does not work.

6

A (simplified if necessary) sample of your project in the playground would help.

7

https://playground.babylonjs.com/#EHW8JM#1

You can take a look in this playground. It fills up a native array by chuncks of 10 elements across 120 frames.

1 Like
8

Here is the playground @JohnK :
https://playground.babylonjs.com/#TL1IIB#55

Look at the end of the playground

function longOperation() {
    labelComponents.forEach(function(lc) {        
        var lp = getLabelPlane(lc);         
        lp.locallyTranslate(new BABYLON.Vector3(0.2, 0, 0));

        // lengthy call
        getBusy();

        // render scene at end of each iteration
        // does not render after each iteration, instead it renders after everything is done
        scene.render();        
    }); 
    
}
9

Yup what I did here should be ok for pure maths:

https://playground.babylonjs.com/#EHW8JM#1

10

Can you explain what you are doing in your code or look at my playground and have it render after every getBusy call?

11

I am doing a bit of work every frame to ensure it fits in the 16ms frame budget, basically here filling 10 elements of a native array per frame but you could replace by any work you need to do.

Also please note a web worker can be better for really lengthy operations.

1 Like
12

Can you take a look at my playground - 20 position manipulations - would be nice for the scene to render 20 times and adjust each individual position instead of queue the rendering up and doing all of them at once.

13

This did it. Thank you

2 Likes