Model rendered as white silhouette

[phenry20]

Expected Result:

Actual Result:

When using multi views (Use Multiple Canvases with one Engine - Babylon.js Documentation) sometimes the canvases render the model as a white silhouette and I’m not sure why. At first it renders correctly, then after some time of disposing and recreating the scene, it shows a grayish white silhouette and then it becomes all white.

Each time I display the canvas I recreate the scene again and then when I’m done with the canvas I dispose it using scene.dispose().

What’s odd is that:

1. I can’t seem to reproduce the issue on production, only localhost. Edit: I did more testing and I was able to reproduce on production (see my reply below)
2. Only the model is affected, not the skybox or the plane.

This is how I’m loading the model

const scene = await SceneLoader.LoadAsync("", fetchedModels[0].uri, engine, () => {}, ".glb");
scene.clearColor = new Color4(0.52, 0.81, 0.92, 1);
scene.createDefaultCameraOrLight(true, true, true);

And then I add the skybox and the plane to the ground after the scene has been created.

Is this a known issue? Or is there any speculation as to what could be going on? I’d be happy to hear everyone’s thoughts on the matter.

Thanks in advance

[gbz]

Since the issue is only reproducible on localhost, maybe this is a CORS issue? Are you getting a 404 error on trying to load your asset (can be seen in console log)?

[phenry20]

Hi @gbz I was just able to reproduce it on staging so it’s not a localhost issue and the model is being retrieved. The problem seems to occur when the scene is disposed mid creation.

When I quickly create and dispose of the scene, the next time I create a scene it renders as a silhouette and doesn’t get fixed unless I refresh the page. What’s also interesting is that if I render another scene in another view after the silhouette occurs then the same effect happens. So basically if it happens once, it affects every other scene using that engine leading me to believe that the drawing canvas is corrupted somehow.

However the one thing that’s throwing me off is that once the silhouette happens, not every model is affected all the time. It seems like the more complex models are affected every time, but simplistic models (Ex: A Cube) are affected 50% of the time.

Weird stuff is happening, but I’m pretty sure that if a scene gets disposed prematurely, it affects the engine somehow.

[gbz]

@phenry20 , very interesting how the bug only sometimes appears for certain models. Is it possible to reproduce this bug in a Babylon Playground?

[phenry20]

I don’t think it’s possible to make a playground for this example since I’m using views. I would need multiple canvases and I don’t think the playground supports that.

[Deltakosh]

Maybe on jsfiddle with a reference to babylon.max.js ?

[Pryme8]

https://doc.babylonjs.com/how_to/multi_canvases
I think this works on the PG.
You can inject on the page whatever you need to through the scene script as well.

[phenry20]

I believe I’ve solved the issue but I don’t fully understand why. While debugging I realized that there were edge cases where the scene wasn’t being disposed so duplicate scenes were being created. I at first figured that it was drawing the same scene multiple times and that’s why I got the white silhouette, but if you look at my runRenderLoop function, it should only draw a scene once.

if (!engine.activeView) {
    return;
}

const scene = engine.scenes.find((scene) => scene.metadata && engine.activeView.target === scene.metadata.view);
if (scene) {
    scene.render(true, false);
}

So that lead me to believe that since my destroy function wasn’t called

if (scene) {
     engine.unRegisterView(canvas, scene.activeCamera);
     scene.dispose();
}

the view was still registered so it was drawing the scene to the same canvas X amount of times which caused the silhouette. However what’s weird is that in my fix, I just dispose the scene and I don’t unregister the view, yet everything works fine so I’m not sure if scene.dispose takes care of unregistering the view or if there’s something else that caused the silhouette, but it’s working now so I guess that’s all that matters

[sebavan]

You could look with Spector to see what causes the issue ?

[phenry20]

Oh cool. I never heard of Spector before, but I’ll check it out in a few days.