# How to improve the performance of rendering

**URL:** <https://forum.babylonjs.com/t/how-to-improve-the-performance-of-rendering/13373>\
**Category:** Questions\
**Tags:** material\
**Created:** [August 14, 2020, 7:37am UTC](https://forum.babylonjs.com/t/how-to-improve-the-performance-of-rendering/13373 "2020-08-14T07:37:53Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Arash\_Bagheri](https://avatars.discourse-cdn.com/v4/letter/a/dfb087/32.png) [@Arash\_Bagheri](https://forum.babylonjs.com/u/Arash_Bagheri)\
**Post date:** [August 14, 2020, 7:37am UTC](https://forum.babylonjs.com/t/how-to-improve-the-performance-of-rendering/13373/1 "2020-08-14T07:37:53Z")

</div>

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](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?

 ![Screen Shot 1399-04-29 at 15.47.56](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/5/512641fb9557db2c6af44db546b6cd31f90ef461.png)

---

<div class="post-metadata">

**Author:** ![kvasss](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kvasss/32/3774_2.png) [@kvasss](https://forum.babylonjs.com/u/kvasss)\
**Post date:** [August 14, 2020, 10:57am UTC](https://forum.babylonjs.com/t/how-to-improve-the-performance-of-rendering/13373/2 "2020-08-14T10:57:13Z")

</div>

Hi. You can use [Solid Particle System - Babylon.js Documentation](https://doc.babylonjs.com/how_to/solid_particles) or use instances or thin instance

---

<div class="post-metadata">

**Author:** ![Arash\_Bagheri](https://avatars.discourse-cdn.com/v4/letter/a/dfb087/32.png) [@Arash\_Bagheri](https://forum.babylonjs.com/u/Arash_Bagheri)\
**Post date:** [August 14, 2020, 11:19am UTC](https://forum.babylonjs.com/t/how-to-improve-the-performance-of-rendering/13373/3 "2020-08-14T11:19:49Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![LeJohn](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lejohn/32/35093_2.png) [@LeJohn](https://forum.babylonjs.com/u/LeJohn)\
**Post date:** [August 14, 2020, 11:31am UTC](https://forum.babylonjs.com/t/how-to-improve-the-performance-of-rendering/13373/4 "2020-08-14T11:31:06Z")

</div>

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](https://doc.babylonjs.com/how_to/how_to_use_instances)

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

---

<div class="post-metadata">

**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\
**Post date:** [August 14, 2020, 12:39pm UTC](https://forum.babylonjs.com/t/how-to-improve-the-performance-of-rendering/13373/5 "2020-08-14T12:39:35Z")

</div>

> [@Arash\_Bagheri](#):
>
> 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 … solid particle system.

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

---

<div class="post-metadata">

**Author:** ![Arash\_Bagheri](https://avatars.discourse-cdn.com/v4/letter/a/dfb087/32.png) [@Arash\_Bagheri](https://forum.babylonjs.com/u/Arash_Bagheri)\
**Post date:** [August 14, 2020, 12:45pm UTC](https://forum.babylonjs.com/t/how-to-improve-the-performance-of-rendering/13373/6 "2020-08-14T12:45:55Z")

</div>

> [@JohnK](#):
>
> [https://playground.babylonjs.com/#WCDZS#8](https://playground.babylonjs.com/#WCDZS#8)

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?

> **[Babylon.js Playground](https://www.babylonjs-playground.com/#ZEZLAT%2318)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

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.

> **[Babylon.js Playground](https://www.babylonjs-playground.com/#ZEZLAT%2320)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![kvasss](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kvasss/32/3774_2.png) [@kvasss](https://forum.babylonjs.com/u/kvasss)\
**Post date:** [August 14, 2020, 12:52pm UTC](https://forum.babylonjs.com/t/how-to-improve-the-performance-of-rendering/13373/7 "2020-08-14T12:52:22Z")

</div>

With solid particles you can change color [Solid Particle System - Babylon.js Documentation](https://doc.babylonjs.com/how_to/solid_particles#colors-and-uvs) 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

---

<div class="post-metadata">

**Author:** ![Arash\_Bagheri](https://avatars.discourse-cdn.com/v4/letter/a/dfb087/32.png) [@Arash\_Bagheri](https://forum.babylonjs.com/u/Arash_Bagheri)\
**Post date:** [August 14, 2020, 12:56pm UTC](https://forum.babylonjs.com/t/how-to-improve-the-performance-of-rendering/13373/8 "2020-08-14T12:56:20Z")

</div>

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](https://www.babylonjs-playground.com/#ZEZLAT#18)

---

<div class="post-metadata">

**Author:** ![kvasss](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kvasss/32/3774_2.png) [@kvasss](https://forum.babylonjs.com/u/kvasss)\
**Post date:** [August 14, 2020, 1:53pm UTC](https://forum.babylonjs.com/t/how-to-improve-the-performance-of-rendering/13373/9 "2020-08-14T13:53:48Z")

</div>

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):

```auto
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/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_instances)  
[https://doc.babylonjs.com/how\_to/how\_to\_use\_thininstances#custom-attributes](https://doc.babylonjs.com/how_to/how_to_use_thininstances#custom-attributes)  
[https://doc.babylonjs.com/how\_to/optimizing\_your\_scene\_with\_octrees](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

---

<div class="post-metadata">

**Author:** ![Arash\_Bagheri](https://avatars.discourse-cdn.com/v4/letter/a/dfb087/32.png) [@Arash\_Bagheri](https://forum.babylonjs.com/u/Arash_Bagheri)\
**Post date:** [August 14, 2020, 3:05pm UTC](https://forum.babylonjs.com/t/how-to-improve-the-performance-of-rendering/13373/10 "2020-08-14T15:05:40Z")

</div>

> [@kvasss](#):
>
> [https://doc.babylonjs.com/how\_to/optimizing\_your\_scene\_with\_octrees](https://doc.babylonjs.com/how_to/optimizing_your_scene_with_octrees)

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