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:
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)
Only the model is affected, not the skybox or the plane.
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)?
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.
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.
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
I was getting this bug using React while setting up my scene in a useEffect. In development mode, all effects are run twice and since I wasn’t disposing my scene it was causing my models to either appear white, speckled with black and white triangles for lighting or normal depending on what I can only assume was some kind of race condition caused by the useEffect running my scene twice without disposing it.
Fixed by explicitly disposing my scene in the useEffect cleanup function.
