I have noticed an interesting phenomenon during my rendering experiments. When attempting to render a large number of quads with instances, I observed that adding a PostProcess significantly increase (not decrease ) the framerates on a Mac retina screen, but not on a standard 1080p screen.
You can replicate this by running the following two playgrounds on a Mac retina screen:
If your device is powerful enough to handle both at 60 FPS, you can increase the numInstances variable at the beginning to slow down rendering, making the performance gap more evident.
const numInstances = 10000; /// increase to slow down rendering
const numQuadsPerInstance = 128;
The only distinction between these two playgrounds is that the latter utilizes a post-process:
const postProcess = new BABYLON.PassPostProcess("Scene copy", 1.0, camera);
I want to understand why this is happening, I thought a PostProcess could only slow down the rendering, but it looks exactly the opposite. And how I can achieve the same framerate without using a PostProcess.
Thank you all!
P.S. This strange thing was noticed when I attempted to increase the framerates of Babylon’s Gaussian Splatting to match those of PlayCanvas.
Thanks! I use Spector.js to captured the PG and I see a viewport (1788x1886) under drawElementInstanced() , which is exactly the retina resolution of a Mac.
Draw State
DITHER: true
VIEWPORT: 0, 0, 1788, 1886
FRONT_FACE: CCW
FRAGMENT_SHADER_DERIVATIVE_HINT_OES: Extension OES_standard_derivatives is unavailable.
RASTERIZER_DISCARD: false
FRAGMENT_SHADER_DERIVATIVE_HINT: 4352
Can this confirm that the rendering size is full? Also, if the actual rendering size is somehow half, I would expect the rendering results after adding the PostProcess to be different, but they do not become low.
Yes, it shouldn’t, but maybe there’s a bug somewhere. You should compare the first PG when antialias is false/true and verify there’s a difference. You should also compare the output with your second PG.
Thank you for the reminder! Setting antialiasing in the first Playground does not affect framerates or output quality. As described here, antialiasing only becomes effective when an additional pass is introduced and the number of samples is set to a value greater than 1.
Regarding quality, both Playgrounds are identical. As a comparison, when adaptToDeviceRatio is set to false during Engine creation, the quality decreases while the framerates increase.
I tried on a mac with retina screen and can not repro either. What browser/version are you using ? it is really weird we can not repro on similar devices.
I am on an old MacBook Pro 2019 (Intel CPU + AMD GPU) with Chrome 127.0.6533.100. Do you mean both PG are running at 60fps on your machine? If that is the case, you may increase the numInstances at the beginning to make one of them running under full framerate, otherwise the performance difference may not be visible.
I thought about this too, is there some sort of flag or config so that I could verify & compare? Since the two PGs share the same rendering quality and it does not look like some sort of supersampling.
Thank you @sebavan I tried setting depth to true , but the frame rate did not change.
var createEngine = function() {
var engine = new BABYLON.Engine(canvas, false, {
antialias: false,
depth: true, ///// here
stencil: false,
xrCompatible: false,
preserveDrawingBuffer: true,
powerPreference: 'high-performance'
}, true);
return engine;
}
In this case, the quads are actually transparent and will be blended during rendering. This is to simulate splats of Gaussian Splatting.
I have also added a PostProcess locally to test a real GS. The frame rate did increase, and the quality did not change, as in this PG. If there is something like a depth test, I guess the rendering result of GS would be completely messed up.
Sorry, I started a new thread because I thought this PostProcess issue seemed like an independent one. I will not update the other two threads then.
Thank you, I will try to launch an issue next week and post it here. (I will try to compare it on other browsers or different ANGLE backends before submitting.)
By the way, I noticed you mentioned that on your M1 Max machine the framerates are the same. I’m curious whether they are both running at a full framerate (perhaps 60 FPS). If they are, would you consider increasing the numInstances at the beginning of the Playground to make it run at a lower framerate? If both Playgrounds are running at a full framerate, the performance difference may not be visible.
) the framerates on a Mac retina screen, but not on a standard 1080p screen.
(~3X FPS for 2nd PG)
(same FPS for both PG’s)
not much we could do/see on our end. You could try reporting it to the chromium team.