Dynamically adjusting maxPixelRatio for optimized camera blurring?

Chris · April 20, 2021, 3:21pm

Hey guys, would adjusting the maxPixelRatio dynamically as the camera moves to both simulate blurring and optimize rendering be a reasonable thing to do?
How expensive is it to update the canvas pixel ratio?

I tested it out and it looks pretty cool, but the console is getting spammed with FRAMEBUFFER_INCOMPLETE_ATTACHMENT errors. It seems like updating the pixel ratio below 1.0 causes these errors. (My screen pixel ratio is 1.0, so I’m assuming there’s no errors for change it above 1.0 is because it doesn’t actually do anything?)

mvaligursky · April 20, 2021, 3:36pm

Performance wise, this would reallocate framebuffers each frame and that is very expensive … I recall some strong ‘not recommended’ messages regarding webgl somewhere online as some implementations suffer more than others.

To optimize rendering, this is a valid thing to do, but usually you would set this up at the level start or similar, or at least not too often.

But there are a lot nicer and performant ways to blur the image, if that’s the main goal.

Chris · April 20, 2021, 3:41pm

Thanks! That’s the answer I was looking for. I see why reallocating the buffer would be expensive. The main goal was to potentially improve performance. Blurring was more of a convenient side effect. I’m assuming any operation to blur the scene would be heavier than whatever I have now, correct?

mvaligursky · April 20, 2021, 3:48pm

yes, it’d have some cost, but basic shader blurs can be very cheap

Chris · April 20, 2021, 3:48pm

Good to know, thanks!

mvaligursky · April 20, 2021, 3:53pm

you could probably start with copying bloom post effect to your project as a base for blur … as it does it internally … just some small changes would be needed to skip only picking the bright pixels and use all.

github.com

playcanvas/engine/blob/master/scripts/posteffects/posteffect-bloom.js

// --------------- POST EFFECT DEFINITION --------------- //
var SAMPLE_COUNT = 15;

function computeGaussian(n, theta) {
    return ((1.0 / Math.sqrt(2 * Math.PI * theta)) * Math.exp(-(n * n) / (2 * theta * theta)));
}

function calculateBlurValues(sampleWeights, sampleOffsets, dx, dy, blurAmount) {
    // Look up how many samples our gaussian blur effect supports.

    // Create temporary arrays for computing our filter settings.
    // The first sample always has a zero offset.
    sampleWeights[0] = computeGaussian(0, blurAmount);
    sampleOffsets[0] = 0;
    sampleOffsets[1] = 0;

    // Maintain a sum of all the weighting values.
    var totalWeights = sampleWeights[0];

    // Add pairs of additional sample taps, positioned

This file has been truncated. show original

Or actually maybe just setting threshold to 0, and changing this to not be additive:

from this

                // Combine the two images.
        "    gl_FragColor = base + bloom;",

to this (untested)

                // Combine the two images.
        "    gl_FragColor = bloom;",

Chris · April 20, 2021, 4:14pm

Thanks for the reference @mvaligursky! Unfortunately, something in the scene isn’t playing nice, I’m seeing planes getting rendered at some weird angles in the scene. We have another render target in the scene that includes a clipping plane related to water refraction, I think it might be causing trouble. I’ll have to revisit this one, but thanks for providing a starting place, it was very helpful.