Thin instances not being rendered after engine is disposed and then recreated

Hi there!

I’ve run into a bug regarding thin instances. Basically, when I initially create my scene I’m also creating some thin instances of a mesh, which works fine. If I later dispose of the Babylon engine and initialize a new one, the thin instances don’t seem to be created, although everything else seems to be working ok.

I’m not sure if it is possible to reproduce this bug in a PG as I would need to dispose of the engine and create a new one. I made a short HTML file minimally reproducing the issue, which you can download and open in your browser: https://raw.githubusercontent.com/dav793/babylonjs-playground-uploads/main/restart-engine-example.html. In it I’m loading a scene with a basic box mesh (not a thin instance) which I use to make sure the engine is working after I reset it. Around that box I create a plane out of some thin instances of a smaller plane. At the top is a button which when pressed will dispose of the old engine, create a new one, and recreate the scene. At this point you can see the thin instances are not showing up again.

By the way, if it is indeed possible to do this in the Playground, feel free to provide some pointers as to how you would do that :slight_smile:

In case you may wonder why this is a problem I will explain. I’m working on an app using Babylon and Angular. As the user navigates through the routes, different views are loaded in and out of the DOM, and they contain various canvas elements where I need to render stuff with Babylon. Therefore, I need to be able to create new engines and dispose of old ones as needed, without forcing a refresh of the entire page. Some of these canvases will need to render quite a lot of meshes, although many are identical so I am grouping them as thin instances. Having to go without thin instances in these cases would hurt performance too much, unfortunately.

If anyone has any insight as to why this is happening or how to solve it I would be very grateful! Thank you in advance :pray:

I moved your function into the more appropriate place, and it works as expected now :slight_smile: - Babylon.js example
(if you want to separate it you’ll need to pass some parameters).

1 Like

Wow, I can’t believe the solution was that simple, I feel rather silly :sweat_smile:

Thank you very much for your quick help! After a little testing I realized I can keep the function separate as long as I pass the scene as a parameter. I will implement the solution in the Angular project now, I expect it will be smooth sailing but if I can’t make it work I will ask again :raised_hands:

1 Like

Now it should be smooth :slight_smile: