Firefox bad performance

[pirex360]

Only in firefox i had issues, like 10 fps.... any fix ?

I tested, opera, safari, chrome, vivaldi, edge all fine.

[jwagner]

Hi Pirex,

This bug report contains very little information.
Do you have an isolated benchmark to reproduce the problem that you could share?
Under what exact conditions did you observe that difference?
Did you report that regression to Mozilla?

Thanks,
Jonas

[pirex360]

This the code :

let noise = new SimplexNoise();

function draw(e) {
    let xCount = 35;
    let yCount = 80;
    let iXCount = 1 / (xCount - 1);
    let iYCount = 1 / (yCount - 1);
    let time = e * 0.00009;
    let timeStep = 0.01;
    let grad = ctx.createLinearGradient(-width, 0, width, height);
    let t = time % 1;
    let tSide = floor(time % 2) === 0;
    let hueA = tSide ? 340 : 210;
    let hueB = !tSide ? 340 : 210;
    let colorA = hsl(hueA, 100, 50);
    let colorB = hsl(hueB, 100, 50);
    grad.addColorStop(map(t, 0, 1, THIRD, ZERO), colorA);
    grad.addColorStop(map(t, 0, 1, TWO_THIRDS, THIRD), colorB);
    grad.addColorStop(map(t, 0, 1, ONE, TWO_THIRDS), colorA);
    ctx.globalAlpha = map(cos(time), -1, 1, 0.15, 0.3);
    background(grad);
    ctx.globalAlpha = 1;
    beginPath();
    for(let j = 0; j < yCount; j++) {
        let tj = j * iYCount;
        let c = cos(tj * TAU + time) * 0.1;
        for(let i = 0; i < xCount; i++) {
            let t = i * iXCount;
            let n = noise.noise3D(t, time, c);
            let y = n * height_half;
            let x = t * (width + 20) - width_half - 10;
            (i ? lineTo : moveTo)(x, y);
        }
        time += timeStep;
    }
    compositeOperation(compOper.lighter);
    ctx.filter = 'blur(15px)';
    stroke(grad, 5);
    ctx.filter = 'blur(30px)';
    stroke(hsl(0, 0, 100, 0.8), 2);
}

[jwagner]

This is not an isolated test case, nor is it runnable or complete @pirex360.
Most of that code deals with drawing things on a canvas.
How do you conclude from that code that simplex-noise.js has "bad performance" in Firefox.

[pirex360]

Sorry, you are right. It's not simplex-noise.js fault... it's firefox way to deal with canvas, somehow the ctx.filter in this context has bad performance! I will try using this lib: http://github.com/flozz/StackBlur

[pirex360]

It only works with this - https://github.com/davidenke/context-filter-polyfill

[jwagner]

Thanks for the update @pirex360