Hey everyone, I love some of the demos I’ve seen on here and I want to use Babylonjs on a website I’m building theblockcity .com. the problem I’m having is when I’ve exported a glb file and tested that in the sandbox, it’s unbelievably slow. As you can see from my website the design is quite resource intensive so I was hoping if someone could advise me the best way to showcase the city model that I have so it loads without an issue. I was starting to lean away from Babylon but I’m sure there must be a way forward with it.
I’m not a coder and this is all new to me so I was hoping I could upload it and share it on my website via the WordPress plugin. I was also looking to have a map like this one campus Albano. I’ll need to learn the coding for this of course.
Hi. We can’t give your suggestions without some more info about your scene. I think you need cubes with tiled textures as skyscrapers and you need use instances for repeated buildings. More suggestions i can take you if you show your scene.
Show some poly objects and total poly count of scene and textures sizes or better share scene because in any way your scene can be loaded from browser when you publish your app. But for scene analysis i need full info about polycount, materials and textures. And you can read something like this for better understanding of your task. Optimizing Your Scene | Babylon.js Documentation Optimizing scenes for better WebGL performance - Soft8Soft
I see your scene as instanced primitives or very low poly meshes with textures and max size something like 50 megabytes.
I think you need retopology for all your objects 2) resize your textures and tile them 3) load original objects once and reuse with instances or thin instances but i don’t know if blender can export instances. Maybe you need something like points in your main scene and in this points positions you can place your instances.
I’ve got to admit, this is all very new to me. Blender and babylon.gs. I’m going to spend tomorrow running through the links you suggested and having a go at optimising the file. The coding part of Babylon is all new to me too so quite a steep learning curve ahead.
I paid someone to develop the city for me and the last part, getting it onto my website is my task. I’ve added a few more photos below.
Even for Blender, 800 MB is a big scene, so once in a webGL engine it’s not surprising if the scene lag without any realtime-tricks.
kvasss already said some advices. Considering the level of details you’ve made, I suppose navigation is a FPV kind? Actually even if it’s a fly-through, you may be interested by LOD (you have to manually create them).
For a first time doing a realtime scene, this one is quite huge But you’ve already done a lot of work
Thanks for the suggestions everyone. I’m going to decompress the file in blender so it comes out to around 100mb and then use the techniques mentioned to hopefully improve it even further. I had a look into retropology but it’s not my skill set unfortunately and my laptop struggles to process anything on there. I’ll have a read of the instances though to see if I can do anything there also.
A lot of reading and suggestions to take on board but hopefully I’ll have something super exciting to share at the end.
It’s going to be a 3d map with pop out tabs for each building. I wondered if I could partially load sections at a time. Something else to look into I guess.
Really the problem is this is way too big. The real way to fix this is to change some stuff in Blender. Couple of things:
first, someone already asked how much geometry you have. In Blender, look in the bottom right, and post the value next to the Tris label. That is the number of triangles. This is important, because the GLB format has both geometry & texture files all in one file. A clue to how much of each would be the number of tris.
As far as things you could probably change yourself, you might see if the your artist may have done a lot of “extra” smoothing. If you go through each of the meshes, check the modifiers to see if a there is one called Subdivision. This modifier makes things very smooth, but at a great cost to the number of tris. I have found sometimes artists not caring about real time put this in & keep increasing the viewport level until you can no-longer see improvement. For real-time, you need to drop this down to a value can live with. Every less number drops your tris almost exponentially.
Your material picture is showing a lot of the geometry is baked being baked for the cyberpunk building. So, it not be a case of excessive smoothing, but might be important to load some of these files to see the dimensions they are made to. If they are bigger than 1k x 1k, you might see if dropping the resolution with a program like gimp is something you can live with.
Finally, compression of the file format reduces your transmission time, but does increase cpu time expanding it back. There can be a good overall load time reduction, but does nothing for frame rate. You need to think in terms of a budget for how many tris, meshes you use, as Partick Ryan says. Frame rate is something which can be improved post load though.
I took a closer look as one of the images above (see Image1 below). The roof area (A) is littered with a lot of geometry - is it all necessary? Is the roof(s) seen all the time?
The sides of the building appear to have geometry created from Blender Text Object (1-6 below image) - another huge impact on verts and tris. Can they be replaced with billboard signs?
I’ve created a simple “skyscraper” - one box and a texture in a playground. HERE. The file size for the .babylon file is 1.78 KB
I did want to use it as both an aerial view and also VR in the future so I didn’t want to lose too much detail. I may have been a bit naive as maybe you can’t have the best of both worlds. Maybe I was thinking it would be like a gaming engine where it would load different areas as they come into view.
The lower geometry models were an option but I wanted to take it to the next level with the detail which is why I went for the complex ones. Maybe for the 3d aerial view, I can sacrifice some of this detail though like you say.
@James1 : It is always best to start out creating a scene thinking “low poly”. Then as you build think about where you need to add more detail. Much easier than starting with “hi poly” and trying to work backwards.
Do you have the Blend file for that model I took a look at above? Much easier to look at the model than try to assess it from an image.
And for skyscraper textures, here is a link Textures.com . I used one of the “night” textures for my simple model which I added the lines too.
Nice dog in your icon The little dog I use, is one I walk each week
Thanks, that’s a good shout re low poly start. I’m going through and decimating the geometry (using the modifier) for my objects so that should cut quite a lot out. I’d love to share but I’d get in trouble with the developer just in case any of his assets were let loose on the web.
Nice little yourself too thanks for the link. I probably won’t delve too far into the editing side of blender as far as I can get away with it but you never know! I’m using it far more than I hoped I would being a complete newbie.
I’ve noticed all the similar objects are instanced in blender surprisingly, even with the volume of faces and triangles. Is there something else I can use in Babylon to help in terms of instancing
@James1 : To create instances of a mesh, Select the mesh ->Duplicate Linked. You can then move, rotate and scale the mesh. However, all the meshes must have the same material and texture.
Best way to learn the software - use it. And that is what you are doing. Too bad about not being able to post a Blend file. Only wanted one “tower”. You could send it, or a link, by a PM message on the forum. No need for it to be public,
But you’ve already done a lot of work 
800Mb is a lot for a model in WebGL
I was hoping for a nice quick win there.
yourself too 
thanks for the link. I probably won’t delve too far into the editing side of blender as far as I can get away with it but you never know! I’m using it far more than I hoped I would being a complete newbie.