[p5.js 2.0 Bug Report]: p5.strands BLUR filter having some trouble with alpha blending

[davepagurek]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

2.2-rc2

Web browser and version

Chrome

Operating system

MacOS

Steps to reproduce this

Steps:

1. Clear the background
2. Draw something
3. Apply filter(BLUR)

Currently it looks like this:

If you use a white background instead of a clear one, it looks like this:

I think this is a regression in the 2.2 RC after I converted filter shaders to p5.strands and updated how premultiplied alpha works.

Previously:

• All textures coming into WebGL were premultiplied (so e.g. the red channel data you read in a shader is actually red * alpha, not just red)
• We would generally manually un-multiply textures before passing data into p5.strands, letting users work in unmultiplied alpha like how colors in the rest of p5 work
• We then multiply the resulting output color by alpha right at the end because we need to output premultiplied alpha
• In the blur filter specifically, though, we skip p5.strandswe would read the premultiplied data directly, average the premultiplied samples, and return the result

Now:

• All textures come in unmultiplied, eliminating the need for the manual unmultiplying step
• We still do the multiplication again right at the end before rendering
• The blur filter is now p5.strands, and so the blur samples come in unmultiplied. We average them unmultiplied, and then return that, and p5.strands automatically multiplies in the result after.

The main difference for the blur filter: before, samples were averaged with alpha multiplied in, and now they are averaged separately.

Since this used to work and now doesn't, I think that means we have to update the blur p5.strands filter to:

• read the texture, and then average sample * [sample.a, sample.a, sample.a, 1] instead of just sample to do the averaging with alpha included
• Return [avg.r / avg.a, avg.g / avg.a, avg.b / avg.a, avg.a] instead of just avg to still comply with p5.strands's expectation that you return unmultiplied colors

Snippet:

Live: https://editor.p5js.org/davepagurek/sketches/Ja7TcT9ia

async function setup() {
  await createCanvas(400, 400, WEBGL);
}

function draw() {
  clear();
  fill('red')
  noStroke();
  circle(0, 0, 100);
  filter(BLUR, 10);
}

[Piyushrathoree]

hey hiii , I think this same thing is working properly on my side

[davepagurek]

Hi, sorry, comment out the background(255) in the sketch :)

[Piyushrathoree]

ohk got it , could you please assign as well ?

[davepagurek]

You're still working on #8344 right? We generally try to have people just work on one thing at a time, but after that feel free to take this one on!

[Piyushrathoree]

@davepagurek I have raised PR for #8344 , now could you please assign this one.