How to improve the performance of rendering

Hello Everyone

I have 5000 cubes which made from json file, when I rotate the camera or the cube the speed of rendering is slow and some times have 2 sec delay.

this is my project with 10 cubes:
https://www.babylonjs-playground.com/#ZEZLAT#17
is it possible to help me to know how can I improve the speed of rendering in my project?

Hi. You can use Solid Particle System - Babylon.js Documentation or use instances or thin instance

1 Like

Hi. Thank you for your recommend, But the problem is I must make each cube with the json file. each cube may have certain position and size and also color so I think I can’t use instances or thin instances and also solid particle system.

Hi. With instances you can change position, size and color. More information are available in the documentation:
https://doc.babylonjs.com/how_to/how_to_use_instances

PG example (come from the documentation):
https://www.babylonjs-playground.com/#YPABS1

2 Likes

Yes you can This PG is in the docs https://playground.babylonjs.com/#WCDZS#8

1 Like

Thanks a lot, I try to do in this way but I have just one problem. how can I use color Lerp in this way?

and is it possible to get the height, width and depth of each instance from json file?
when I use scale, I got an error.

With solid particles you can change color Solid Particle System - Babylon.js Documentation and other properties of each particle on each frame render maybe in onbeforerender and lerp your properties. How you lerp your properties now? In this way you can lerp properties in particle system

1 Like

I Lerped them in the for loop but now I don’t know how can I Lerp them with instance.

https://www.babylonjs-playground.com/#ZEZLAT#18

i think in your context better solid particles/ i think instances must share same material between all instances … docs say Each instance has the same material as the root mesh. They can vary on the following properties:

  • position
  • rotation
  • rotationQuaternion
  • setPivotMatrix
  • scaling

but in docs about thin instance i see this
As for regular instances, you can add custom attributes to thin instances.

To do so, register the attribute and set the value(s) for the thin instance(s):

sphere.thinInstanceRegisterAttribute("color", 4);
sphere.thinInstanceSetAttributeAt("color", idx, [1, 1, 0, 1]);
sphere.thinInstanceSetAttributeAt("color", idx2, [1, 0, 0, 1]);

so i think you can use thin instances with custom attributes or try add custom attribute to simple instance because docs say As for regular instances, you can add custom attributes to thin instances.

and maybe this help you
https://doc.babylonjs.com/how_to/optimizing_your_scene#scene-with-large-number-of-meshes
https://doc.babylonjs.com/how_to/how_to_use_instances
https://doc.babylonjs.com/how_to/how_to_use_thininstances#custom-attributes
https://doc.babylonjs.com/how_to/optimizing_your_scene_with_octrees
but solid particles its good solution because you can unteract with each particle as simple mesh

sorry now i dont have time try this in playground

1 Like

Thank yo so much. I’m going to try with solid particles.