Repository navigation
[p5.js 2.0 Bug Report]: p5.strands BLUR filter having some trouble with alpha blending #8345
Description
Activity
hey hiii , I think this same thing is working properly on my side
Hi, sorry, comment out the
background(255)in the sketch :)ohk got it , could you please assign as well ?
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!
Reacted by PIYUSH RATHORE@davepagurek I have raised PR for #8344 , now could you please assign this one.
Reacted by Dave Pagurek@davepagurek
Hi,
It looks like the BLUR shader is now averaging unmultiplied texture samples without accounting for alpha after the move to p5.strands. Previously this worked because WebGL textures were premultiplied, so the blur math implicitly included alpha. With unmultiplied inputs, transparent pixels seem to be contributing color during the blur, which shows up when using clear(). It might be worth updating the blur shader to weight samples by sample.a during averaging and then un-multiply before returning, so the math matches the old behavior while still returning unmultiplied output for p5.strands.I think
avg += weight * texture2D(tex0, sampleCoord);this line is a caused a issue, beacuse assumes a specific alpha format of the texture is no longer valid in p5.js 2.2-rc2.It can be solved by
vec4 s = texture2D(tex0, sampleCoord); avg += weight * vec4(s.rgb * s.a, s.a);After a loop to ignore the runtime error
avg /= total if (avg.a > 0.0) { avg.rgb /= avg.a; }@davepagurek Hi, It looks like the BLUR shader is now averaging unmultiplied texture samples without accounting for alpha after the move to p5.strands. Previously this worked because WebGL textures were premultiplied, so the blur math implicitly included alpha. With unmultiplied inputs, transparent pixels seem to be contributing color during the blur, which shows up when using clear(). It might be worth updating the blur shader to weight samples by sample.a during averaging and then un-multiply before returning, so the math matches the old behavior while still returning unmultiplied output for p5.strands.
I think
avg += weight * texture2D(tex0, sampleCoord);this line is a caused a issue, beacuse assumes a specific alpha format of the texture is no longer valid in p5.js 2.2-rc2.It can be solved by
vec4 s = texture2D(tex0, sampleCoord); avg += weight * vec4(s.rgb * s.a, s.a);After a loop to ignore the runtime error
avg /= total if (avg.a > 0.0) { avg.rgb /= avg.a; }yeah , you're right thanks for it
@Piyushrathoree
Hi, are you currently working on this issue ?@Piyushrathoree
Hi, are you currently working on this issue ?Yup , and this is resolved , I was having some more thing to discuss that's why I didn't raise the PR , will be raising it in some time.
Reacted by D.Deepak Bajpai
Most appropriate sub-area of p5.js?
p5.js version
2.2-rc2
Web browser and version
Chrome
Operating system
MacOS
Steps to reproduce this
Steps:
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:
Now:
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:
sample * [sample.a, sample.a, sample.a, 1]instead of justsampleto do the averaging with alpha included[avg.r / avg.a, avg.g / avg.a, avg.b / avg.a, avg.a]instead of justavgto still comply with p5.strands's expectation that you return unmultiplied colorsSnippet:
Live: https://editor.p5js.org/davepagurek/sketches/Ja7TcT9ia