BlendMode（MULTIPLY) is slow in Firefox

p5.js
1

Hello!

I have noticed quite a difference in rendering speed between browsers depending on blendMode.
When I run the following code, it runs fast in Chrome and Edge, but slow in Firefox.

function setup() {
  let c = createCanvas(400, 400);
  
  blendMode(MULTIPLY);
  
  //c.drawingContext.globalCompositeOperation = 'multiply';
}

function draw() {
  clear();
  
  for(let i=0;i<1000;i++){
    fill(random(255),random(255),random(255));
    circle(random(400),random(400),10);
  }
}

It seems that the MULTIPLY calculation is taking a long time, since there is no difference in blendMode(BLEND).

I tried JS native blendMode instead of p5js blendMode, but it is still slow MULTIPLY.

Is there any workaround for this?
If anyone knows, I would appreciate it if you could let me know!

2

I independently just ran into the same thing…

I made this quick and dirty test… I find that the performance degrades very quickly after 170 circles in same frame. No idea why. Does it do the same for you?

function setup() {
  createCanvas(400, 400);
  blendMode(MULTIPLY);
  colorMode(HSB, 1);
}

let total = 0;
let fr = 0;
let circles = 50;
let totalFrames = 50;

function draw() {
  if(fr >= 50) 
  {
    console.log(" circles:"+circles+" avg time (ms):"+total/fr);
    circles+=10;
    fr = 0;
    total = 0;
    return;
  }
  fr++;
  let timer = millis();
  for(var i = 0;i < circles; i++)
  {
    fill(.9);
    noStroke();
    circle(100, 100, 100);
  }
  total+=millis()-timer;
}
1 Like
3

Hello Ryan! Thank you for your comment, I appreciate it.
I ran your code in my chrome and Firefox, and as you said, Firefox is about 50 times slower.

You and I seem to have the same problem. I am beginning to think this is difficult to avoid. Hmmm…

4

Unfortunately, this only gets worse with larger canvases. I’ve had to abandon blend mode in my art piece. and stick to BLEND and ADD as the only safe blend modes.

1 Like
5

I might do the same…
On another subject, shader is also slow in FF.
FF is troublesome.