Mesh rendered much slower with geometry at close position?

Questions
, ,
1

Hello all, I am trying to draw a mesh consisting of a large number of quads.

If these quads are randomly placed at different positions, the FPS would be 60. Example 1

/// random position
let randX = 100 * (Math.random() - 0.5) * 0.01,
randY = 100 * (Math.random() - 0.5) * 0.01,
randZ = 100 * (Math.random() - 0.5) * 0.01;
vertexData.positions.push(
-2 + randX, -2 + randY, 0 + randZ, 
2 + randX, -2 + randY, 0 + randZ, 
2 + randX,  2 + randY, 0 + randZ, 
-2 + randX,  2 + randY, 0 + randZ);

However, when all the quads are placed close to each other, the FPS drops to 30. Example 2.

/// random position multiply 0.01, quite close to each other
let randX = 100 * (Math.random() - 0.5) * 0.01,
randY = 100 * (Math.random() - 0.5) * 0.01,
randZ = 100 * (Math.random() - 0.5) * 0.01;
vertexData.positions.push(
-2 + randX, -2 + randY, 0 + randZ, 
2 + randX, -2 + randY, 0 + randZ, 
2 + randX,  2 + randY, 0 + randZ, 
-2 + randX,  2 + randY, 0 + randZ);

Why does this happen and how can I improve it?

Thanks!

P.S. Draw large number of quads at same position sounds strange, I am doing this because I want to use the webgl pipeline to do Gaussian Splatting, some kind of point based differentiable rendering.

2

I’m not sure why there is such a big difference in performance. A way for you to try to get better performance might be to use instances instead of a new mesh for each quad.

If you can fit your problem to use Thin instances, performance will be even better!

Thin Instances | Babylon.js Documentation (babylonjs.com)

3

Haha thank you @srzerbetto
I was just trying to replace instancing with common mesh due to performance issue.
In my case large number of geometry (quads) are placed in a single mesh with one single draw call, so instancing does not help (actually worse haha).