Model loading rendering


I have a problem now. I have too many models. If I load them all at once, the rendering will crash
So I don’t know what I should do to optimize my rendering, or any other better solution
This is my load script

If you haven’t used scene optimization techniques such as using TransformNodes, then here are the docs:

In using these you can use the camera frustum and check if your models are in the render view. There are also many other functions and techniques that can be used, so this info is invaluable.


Scene optimization techniques I’ve seen: freezing world matrices, reducing shader overhead, etc

But the effect is not obvious, because there are too many models, what I have in mind is to only render the model that the camera can see, and let the model that can’t see be deleted dynamically, but at present, I don’t know how to change with the camera

can you merge your meshes offline maybe? What is the crash error message?

There is no error, because the number of models is too much, I use dynamic loading, and then after loading, rendering, crashed, should be a one-time to render the model too many, so the page crash

Ok gotcha. So what about merging meshes that share the same material to reduce the number of meshes?

How many meshes are we talking about?

538 grid

I don’t know how to merge grids
beforeThe solution I wanted to do was render the model that the camera saw,

So it loads but if you render it crashes?

Because 538 grids is not a lot. Did you try to use instances?Use Instances - Babylon.js Documentation

I each model is separate, not the same model, and each model has its own function in the later stage, and can not be instantiated

I think the total memory of the model is nearly 500 megabytes due to the rendering problem

And each model has an internal structure

Which should still work (at least on a desktop)

Can’t render, even if the model is relatively small, but the camera can see a lot of models at a time, the FPS will be reduced immediately, what’s more, if all the models are loaded, the number is too much,Cmera rendering so many models at the same time, the performance consumption will be reduced

Can you repro in the playground? I see no other way to help you going further

I’m only loading these models so far, and the FPS is already very low

This project belongs to the company project. I can’t release it

So for examples, all your trees should only be instances (Use Instances - Babylon.js Documentation)

Objects with same material should be merged with Mesh.MergeMeshes api

the goal is to reduce draw calls

@ranwei-001 I think you need to revisit the scene optimisation documentation again. There’s a lot you could do.

In addition to what Deltakosh said you could use billboards or imposters for trees and similar.

You could reduce geometric detail, merge meshes, reduce number and size of textures, use LODs, only show internal details where applicable (i.e. when inside a building, or better yet, when on a particular floor or in a particular room).

You simply can’t throw a large, detailed CAD model like that at any real-time 3D engine and expect it to perform without employing some optimisations and tricks.

1 Like

@ranwei-001 The screenshot is too low resolution to tell for sure but it looks to me like there’s a lot of unnecessary geometric detail in that perimeter fence (or is it a prison wall?). You could instance or merge that (the fence and guard towers are just repeating meshes by the looks) or replace the fence geometry with a simple chain-link wire fence textured plane for instant savings.

But as I say it’s hard to tell where the detail is without a higher resolution wireframe screenshot.