# SPS freezing on updates

**URL:** <https://forum.babylonjs.com/t/sps-freezing-on-updates/52213>\
**Category:** Questions\
**Tags:** sps\
**Created:** [July 20, 2024, 4:36pm UTC](https://forum.babylonjs.com/t/sps-freezing-on-updates/52213 "2024-07-20T16:36:23Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Luthem](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/luthem/32/41445_2.png) [@Luthem](https://forum.babylonjs.com/u/Luthem)\
**Post date:** [July 20, 2024, 4:36pm UTC](https://forum.babylonjs.com/t/sps-freezing-on-updates/52213/1 "2024-07-20T16:36:23Z")

</div>

Hey, I have a doubt about my implementation on the SPS in my game.

The problem:

> I have a scene, X,Y,Z with blocks.  
> Client asks Server for chunks (16x16) as they move around the world.  
> User freezes a second each time a new chunk is built or modified.  
> Users need to be able to place and remove blocks.

- I use only one material, is an atlas with a bunch of 32x32 pixels textures.
- I decided each chunk to have its own SPS, to avoid rebuilding the entire world mesh on each chunk update. _(not sure if ok)_

**Chunk.SPS:**

```auto
this._SPS = new SolidParticleSystem(
`sps_${x}_${z}`, this._scene, {
  isPickable: true,
  expandable: true,
  updatable: true
});

material.diffuseTexture = textureAtlas;
SPS.mesh.material = material;

```

**Chunk.Blocks**

For each Block in Chunk.blocks, I create a disposable box.

```auto
const opts = { faceUV: [Vector4, Vector4, Vector4...])
const box = MeshBuilder.CreateBox(`box`, opts, this.scene);
this.chunk._SPS.addShape(box, 1);
box.dispose();

```

then I build the mesh once:

`this.chunk._SPS.buildMesh();`

* * *

Is it normal for the scene to freeze entirely during the built?  
I dont see it to be happening [in this PG here](https://playground.babylonjs.com/#X1T859), they all continue to spin.

Is not that the building of the chunk is taking too long, it seems reasonable but id expect the user to be responsive in the meanwhile.

Can’t reproduce in PG, is it a loop-related-thing I ignore?

Thank you.

* * *

Edit to add video evidence:

Basically you stop for a second every time you walk over a chunk limit, which is annoyingly noticeable.

(You may recognize a model from [orion3dgames/t5c](https://github.com/orion3dgames/t5c) as I needed a quick boilerplate)

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [July 21, 2024, 4:14am UTC](https://forum.babylonjs.com/t/sps-freezing-on-updates/52213/2 "2024-07-21T04:14:14Z")

</div>

> [@Luthem](#):
>
> For each Block in Chunk.blocks, I create a disposable box.

You need one box only and call `addShape(box, 16 * 16)`. Create a tile texture. Assign texture to SPS mesh. Assign correct UVs.

Why do you even need a box here? Use a `plane`.

See this example:

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

Regarding your tiling system:  
You should prerender tiles in the direction the player is moving. I would opt for a `plane` with `16` segments, you don’t need SPS. One tile texture. Correct UVs.

---

<div class="post-metadata">

**Author:** ![Luthem](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/luthem/32/41445_2.png) [@Luthem](https://forum.babylonjs.com/u/Luthem)\
**Post date:** [July 21, 2024, 6:22am UTC](https://forum.babylonjs.com/t/sps-freezing-on-updates/52213/3 "2024-07-21T06:22:11Z")

</div>

Hi Roland,

Please ignore the current flatness of the word. The key is in this part:

> Users need to be able to place and remove blocks.

I see that particle.uvs expects a Vector4, not an array of UV faces. That’s why I was creating each box individually, to make use of the faceUV property.

Do you know a way to change UVs **per face** in a particle?  
I can, as you say, build the “block” using 6 plane particles, one Vector4 each.

Some walls for better example (top and side uvs are different)  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/1/8/18e644db0665e819522ffdaec4920411361cf7d8.jpeg)

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [July 21, 2024, 6:36am UTC](https://forum.babylonjs.com/t/sps-freezing-on-updates/52213/4 "2024-07-21T06:36:38Z")

</div>

> [@Luthem](#):
>
> I see that particle.uvs expects a Vector4

Each is a `Vector4(u1, v1, u2, v2)` so it defines an UV area. So if you’ll have a tile texture with 4 tiles each covering 1/4 of the texture and the layout is `2x2` you’ll end up with UVs:  
tile1 - `(0,0, 0.5,0.5)`  
tile2 - `(0.5,0, 1,0.5)`  
tile3 - `(0,0.5, 0.5,1)`  
tile4 - `(0.5,0.5, 1,1)`

if the texture layout is `4x1`:  
`(0,0, 0.25,1)`  
`(0.25,0, 0.5,1)`  
`(0.5,0, 0.75,1)`  
`(0.75,0, 1,1)`

---

<div class="post-metadata">

**Author:** ![jerome](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jerome/32/22_2.png) [@jerome](https://forum.babylonjs.com/u/jerome)\
**Post date:** [July 21, 2024, 6:30pm UTC](https://forum.babylonjs.com/t/sps-freezing-on-updates/52213/5 "2024-07-21T18:30:45Z")

</div>

Hi,  
Adding or removing solid particles from a SPS is quite expensive as its whole geometry and all its vertex buffers are rebuilt from scratch (and this adds also more work to the GC to sweep the former geometry and buffers, so a lot of data).  
If you have to regurlary add and remove some particles, knowing in advance their shapes, maybe a good solution would be to create a pool of some extra solid particles with the right geometry, then set them as invisible/disabled (so they aren’t computed at all) and use or recycle them when needed.

In this very old example [StarFighter](https://jerome.bousquie.fr/BJS/OfficeGames/StarFighter/StarFighter.html) there’s a constant number of : gliding stars, purple laser impacts, fading out in the distance purple laser dots, orange enemy cross fires and cannons blue laser lines… in a single SPS.  
Everything is set in a pool, say, max 10 simultaneous laser lines, 60 enemy cross fires, 30 dots in the distance, 20 impacts, 60 gliding stars, etc because all their geometry are know in advance.  
Even if each frame, only 45 stars are displayed because noone shoots at all.  
Everything is enabled when needed, then recycled in the pool.

The same for this old example : [Test Babylon SP Terrain](https://jerome.bousquie.fr/BJS/test/terrainSP.html)  
The logical terrain is huge but a recycled SPS is used to display on each known position the right solid particles with the right (know in advance) shape. Nothing is added nor removed. The SPS is just a pool of a certain number of expected shapes, enough of each kind to be seen in a single frame.

Hope this could be helpful 😉

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [July 22, 2024, 2:13am UTC](https://forum.babylonjs.com/t/sps-freezing-on-updates/52213/6 "2024-07-22T02:13:11Z")

</div>

> [@jerome](#):
>
> The same for this old example : [Test Babylon SP Terrain](https://jerome.bousquie.fr/BJS/test/terrainSP.html)

😻 😻 😻

Maybe thin instances pool can be more convenient to handle.

A long time ago a created this, it’s reusing thin instances:

> [@Sci-Fi tunnel + Space Invader 3D shooter with fast GPU instancing](https://forum.babylonjs.com/t/sci-fi-tunnel-space-invader-3d-shooter-with-fast-gpu-instancing/18882):
>
> Hi, here is the first working version of the prototype using GPU instancing. Wireframe and glow are not working on the tunnel yet. [https://playground.babylonjs.com/#YSKAH2#4](https://playground.babylonjs.com/#YSKAH2#4) - SWITCH TO BABYLON.JS 4.2.1! SPACE = Toggle settings You can create your own enemy by editing the enemyMatrix. I created two materials for the enemy, R means use red solid block, O means white wireframe and finally \_ means empty space. const enemyMatrix = [[R, \_, O, \_, \_, \_, \_, \_, O, \_, R], [\_, \_, \_, O,…

---

<div class="post-metadata">

**Author:** ![jerome](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jerome/32/22_2.png) [@jerome](https://forum.babylonjs.com/u/jerome)\
**Post date:** [July 22, 2024, 6:58am UTC](https://forum.babylonjs.com/t/sps-freezing-on-updates/52213/7 "2024-07-22T06:58:21Z")

</div>

Both have their pros and cons depending on your needs.  
And thin instances are really cool.

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [July 22, 2024, 5:18pm UTC](https://forum.babylonjs.com/t/sps-freezing-on-updates/52213/8 "2024-07-22T17:18:23Z")

</div>

\< unrelated\> @jerome so cool to see you here !!! \< /unrelated\>

---

<div class="post-metadata">

**Author:** ![jerome](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jerome/32/22_2.png) [@jerome](https://forum.babylonjs.com/u/jerome)\
**Post date:** [July 22, 2024, 5:52pm UTC](https://forum.babylonjs.com/t/sps-freezing-on-updates/52213/9 "2024-07-22T17:52:48Z")

</div>

thanks buddy 😉

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [July 22, 2024, 7:35pm UTC](https://forum.babylonjs.com/t/sps-freezing-on-updates/52213/10 "2024-07-22T19:35:03Z")

</div>

Can’t agree more 🙂