Can you share the model? I will gladly help you to find a solution. 
Edit: sorry, I’ve just realized that it’s available in the PG you have provided. I will check it.
1 Like
Hey @James1!
First of all this is valid JS but it’s not doing the thing you want 
This is what you want:
But in your case Cube.001 is not a Mesh but a TransformNode so you have to to use scene.getTransformNodeByName instead.
Make sure to access the meshes on the scene after the model has been loaded not before.
The second thing, you are missing the whole thInnIze function so it’s obviously not working. I think you don’t need the thinnizator code at all, you can just add the thin instances like in this PG with each building replicated 100 times and still running at 144 FPS. You can see there are only 25 mesh objects on the scene, the other are just thin instances. (Thin Instances | Babylon.js Documentation) The active indices count is ~50 million. I can go as high as 250.000.000 still at 144 FPS (however I think my notebook will blow up in a second 
)
The code is really simple, but if you need some explanation, just ask.
R.
2 Likes
Thanks for this It must be my computer then in all cases as I’m only running at 5fps! 
The larger model that I will be using has 500 buildings in, a mix of about 50 different building types, some are objects with one mesh which is no problem and there’s ones like this where it has two meshes. Would get instance by transform node still work? And with 50 different building types, would that change your view on using the thinnizer? there’s 460,000 triangles in the scene.
You are welcome!
If a mesh has multiple materials the mesh is split into single meshes with a single material when exporting to the glb file (primitives). Your buildings has two materials this is why you get a TransformNode with two primitives:
primitive_0:
primitive_1:
You need to create thin instances from every primitive. This is what am I doing here. Getting all child meshes of the TransformNode, looping through the list of child meshes with forEach and adding thin instances to every primitive mesh.
const meshes = tn.getChildMeshes()
meshes.forEach(m => {
if (m.thinInstanceAdd) {
m.thinInstanceAdd(matrix)
}
})
460.000 triangles is not much if you are using thin instances. Rule number one is to minimize draw calls (communication between the CPU and the GPU). Your houses are static so the thin instances are a perfect solution.
I am working on a project which uses thin instances and look at this insane number of indices and faces still running at 53 FPS (I didn’t optimize the draw calls yet, currently at 175 calls, so I believe it will go up to 100 FPS after the optimalization) So you don’t have to be afraid…
Will you create your buildings dynamically in code from a prefab mesh? Or do you plan to put them into the glb and transform the meshes into thin instances afterwards?
EDIT:
Another solution could be to join the meshes in Blender (or whatever you use) into one mesh and freeze the mesh after loading (Optimizing Your Scene | Babylon.js Documentation) so you don’t have to deal with thin instances at all and still running smoothly.
1 Like
It’s all designed in Blender and exported as a glb into Babylon js. I’ve tried to look into how to reduce the ones with two materials into one but it’s very complicated (UV editing etc. from what I gather). I assume it’s two materials rather than two seprate meshes in the same object. I didn’t create the model but I have it for my project to edit.
As I wrote it is only separated after you export it and load into babylon.js. This is how it works and you don’t need to reduce anything. 
Are you running my PG at 5 FPS?? What is your HW configuration?
If you can share the model I can propose a solution exactly for your model. If you don’t want to go public you can send it in a private message.
Intel(R) Core™ i7-6700HQ CPU @ 2.60GHz 2.60 GHz MSI laptop so not the worse but a couple of years old now.
I’d love to but can’t go public / risk sharing to anyone just yet. I’ll go live in a few weeks, that’s the aim. I’ve been working on the smaller model’s like the I shared and once I have the code working, I transfer it over to my main model.
It would be good to remake all your textures to 2048 or even better to 1024 i possible. Some of them are too big without real need.
Here is a small example of “Thin City”, not actually optimized but still quite smooth for almost 5 000 000 indices - https://playground.babylonjs.com/#ZRM05R#79.
For your case it would be possible to create a simplied LOD version (for the far view) with less geometry and less materials.
Also, don’t forget about a fog - you may achieve nice cyberpunk effects with it
Cool city, I’ve got a lot to try and implement from here. I’ll let you know how I get on with the last few comments today. I’ve also got the fog in the bag already but I’ve just removed it for now to keep my code as simple as possible. It’s definitely helped me annotate everything given how basic my knowledge is
I’ve still got the highlight problem to sort out, camera angles and the popup box for individual items to finalise the code for. I feel I’m at about 50% for each one of them. Some progress but some issues too. Mainly around selecting the right Item which Roland helped with some code so hopefully I can nail most of them with that.
Quick question - Can I double click rather than single click to open the pop-up boxes? With 500 buildings, nearly everywhere you click will be a building which may be poor for the user viewing.
BABYLON.ActionManager.OnDoublePickTrigger : Raised when the user double touches/clicks on a mesh. - Actions | Babylon.js Documentation
Or
You may use the right click too, it would let to avoid clicking errors.
2 Likes
Thank you, I’ll have a think - I could always change it I guess.
1 Like
Keep us posted, I am pretty curious 
a few weeks away from lauch
Thanks for pointing that out @sebavan ! I’ll be looking into that. I’ve never had a problem accessing so good to know.
1 Like
I need to redirect the http: to https: so this link is working now. i think a standard www. address goes to a http address.