[SOLVED] Performance gap of large number of quads with Babylon.js

Help & Support Gaussian Splatting
1

Hi all, I am trying to render a large number of quads with instances. I have tried both PlayCanvas and Babylon.js, but in most cases, the framerate is lower in PlayCanvas.

There are two code snippets:
Babylon demo: https://playground.babylonjs.com/#8Y719R#4
PlayCanvas demo: https://jsfiddle.net/vz3cLw4n/1/

You can adjust the numInstances and numQuadsPerInstance to adapt to different environments.

The two snippets are both simple, and I have compared their draw calls with Spector.js; they are also very similar.

I wonder what might be causing this performance gap? It seems to be some sort of configuration that I missed.

2

How do you compare the performance? Both are running at full 144 FPS for me.

1 Like
3

Thanks LeXXik. You may increase the values of numInstances and/or numQuadsPerInstance at the beginning. On my desktop with an NVIDIA 1060, when numInstances is set to 30,000, the FPS of the PlayCanvas snippet will be around 33. If your machine is better, perhaps 100,000 will be sufficient?

import * as pc from 'playcanvas-mjs';

const numInstances = 10000; // try to increase this value
const numQuadsPerInstance = 128;
4

I increased the count to 500 000 on both, got the following results:

PlayCanvas: 21 FPS
Babylon: 11 FPS

If you want to get any meaningful readings, I would create both examples on localhost and record the performance log from dev tools in Chrome. You can then see what exactly takes time in both cases.

1 Like
5

That may be the screen size issue? Since the default layout of the JSFiddle page will show a very small canvas.

If you choose the column layout as follows and drag the left code panel to make the canvas take a similar size to the Babylon Playground, I believe the results would differ.
image.

By the way, I have already set up a local environment and have obtained similar results. The online snippets are for easy reproduction. I have run profiler of chrome and found the CPU payload very small in both cases, so I believe the problem is with GPU. And I have compare the usage of drawElementsInstanced of both cases (from Spector.js plugin), their data size and GL states are almost the same.

So I wonder do you have any more suggestions. :heart:

1 Like
6

Adjusting the panels to similar sizes, I see:

PlayCanvas: 6 FPS
Babylon: 11 FPS

I am not sure what could be the cause. Perhaps @mvaligursky could have an idea.

1 Like
7

He’s on holiday at the moment, pinging @slimbuck instead

1 Like
8

PC is rendering to 4xMSAA framebuffer and babylon isn’t.

Change the creation of application to this:

const app = new pc.Application(canvas, {
	antialias: false
});
2 Likes
9

Thanks you! I added the antialias option, but the fps does not change. Can you see a performance gap after setting antialias?

Setting antialias false, https://jsfiddle.net/yvgwhost/
Setting antialias true, https://jsfiddle.net/yvgwhost/1/

There seems to be no difference for me, both with fps around 29. I am running on a windows chrome desktop with nvidia 2080.

10

Try

const app = new pc.Application(canvas, {
	graphicsDeviceOptions: {
  	   antialias: false
   }
});
1 Like
11

Sorry I should have tested before posting, it should be:

const app = new pc.Application(canvas, {
  graphicsDeviceOptions: {
		antialias: false
  }
});
3 Likes
12

Oh my bad, problem solved! Thank you all! :heart:

1 Like
13

Hi @slimbuck, I noticed in the SuperSplat project there is also an antialiasing option:

// main.ts
// ...
    // create the graphics device
    const graphicsDevice = await createGraphicsDevice(editorUI.canvas, {
        deviceTypes: ['webgl2'],
        antialias: false, // here
        depth: false,
        stencil: false,
        xrCompatible: false,
        powerPreference: 'high-performance'
    });
// ...

When I switch the antialias option here between true and false, the framerate does not change at all. I tried a splat ply with 500 million points, the framerate is 33 on my 1060 machine, with both antialias options.

I wonder why does changing the antialias setting in the above code snippet experiment cause a large framerate difference, but not in SuperSplat?

Thanks~

14

That’s because SS renders to a render target which isn’t multisampled, see supersplat/src/camera.ts at main · playcanvas/supersplat · GitHub.

1 Like
15

Got it, thanks!