Animation sometimes can't play before the full scene loaded

Questions
,
1

Sorry I can’t give a sample in playground. My code is just like:

import { Engine, Scene, SceneEventArgs } from 'react-babylonjs'
import {} from '@babylonjs/core'

const App: React.FC = () => {
    const createScene = function (e: SceneEventArgs) {
        const { canvas, scene } = e
        // blah blah blah
        return scene
    }
    return (
        <div>
            <Engine
              antialias
              adaptToDeviceRatio
              canvasId="babylonJS"
              canvasStyle={{ width: '100vw', height: '100vh' }}
            >
              <Scene onSceneMount={createScene}>
              </Scene>
            </Engine>
        </div>
    )
}

export default App

I just put everything in that ‘createScene’ function.
Some small meshes with animations played will be imported at the first, and then import some big meshes.
In most times it works without problem, but those animations seldom don’t play and can’t be triggered to play before ‘createScene’ fully executed.
Is that something with auto-optimization of the engine? How to prevent it?

2

Just to understand the process - you are generating basic meshes and apply animations to them, and then loading larger meshes. But from tim eto time the animations of the basic meshes don’t trigger?

1 Like
3

You can use CodeSandbox to show us React code :slight_smile:

4

Yes, that’s it. It seldom happens, hard to see that but the problem exists

5

I don’t have models those can be used to show in the sample, that’s why I can’t give it.

I may should explain these details at first. That ‘createScene’ function is like:

const createScene = function (e: SceneEventArgs) {
    const { canvas, scene } = e
    // ......
    SceneLoader.ImportMeshAsync('', url, 'file1.babylon', scene).then(result1 => {
        // ...... code controlling animations of result1
        SceneLoader.ImportMeshAsync('', url, 'file2.babylon', scene).then(result2 => {
            // ......
        })
    })
    // ......
    return scene
}

As expected, the animations should be able to be played after that ‘then’ of loading file1. But sometimes it doesn’t work until file2 loaded, this is my issue.

I guess it’s something with the engine, can be solved by changing some settings? Or, can it be prevented by using gltf file instead? Or, should I just wrap the second ‘ImportMeshAsync’ with a ‘setTimeout’?

6

Does it happen with different models? You could show the example with them.

Anyways, the sequence of events happening is:
1 - Load model 1
2 - Once model 1 is loaded, play the animations on model 1
3 - Load model 2
…?

In which case, what might be happening is that the second mesh’s loading function executes before the render loop where the first model’s animation would start executing. This is not any engine optimization, it’s an effect of Javascript not having “true” threading :slight_smile: Wrapping the second importMeshAsync in a setTimeout would delay it to after the render loop, so it can be a solution.