webgl's filter function exhibits different behavior in handling transparency than in 1.7.0

[inaridarkfox4231]

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
• Internalization
• Friendly Errors
• Other (specify if possible)

p5.js version

1.8.0

Web browser and version

Chrome

Operating System

Windows11

Steps to reproduce this

Steps:

1. Apply filter(INVERT) to images with transparent background.
2. Paste it onto an opaque canvas.
3. The results obtained are different between 1.7.0 and 1.8.0.

Snippet:

function setup() {
  createCanvas(400, 400);
  let gr=createGraphics(100,100);
  gr.textAlign(CENTER,CENTER);
  gr.textSize(80);
  gr.text("🦊",50,50);
  gr.filter(INVERT);

  background(128);
  image(gr,100,100);
}

version 1.7.0

version 1.8.0

I'm going to report this as a bug, but I don't know if it can be considered a bug just because the behavior is different.

[inaridarkfox4231]

For filters other than INVERT, the results when applied to transparent images seem to be different between 1.7.0 and 1.8.0.
APPLY_FILTER_TO_ALPHA

let img;

function preload(){
  img = loadImage("https://inaridarkfox4231.github.io/assets/season/summer_small.png");
}
function setup(){
  createCanvas(img.width, img.height);
  background(img, 64);
  filter(BLUR, 4);
}

version 1.7.0 BLUR

version 1.8.0 BLUR

[perminder-17]

I've noticed some unusual and hazy behavior when attempting to render images using filters in a WebGL renderer. I'm not sure if this is a limitation of using fast GPU filters or if it's a bug. @davepagurek , if you could pinpoint where this buggy behavior is occurring, it would be very helpful.

[davepagurek]

@perminder-17 my initial guess is that this is also caused by not clearing the canvas in enough places. Similar to how I was suggesting adding a clear() in the non-blur branch of filter, we might need to add a clear() in the blur branch of the if statement here, probably before each pg.rect() call:

p5.js/src/webgl/p5.RendererGL.js

Lines 1096 to 1112 in 611941a

	pg.shader(this.filterShader);
	this.filterShader.setUniform('texelSize', texelSize);
	this.filterShader.setUniform('canvasSize', [this.width, this.height]);
	this.filterShader.setUniform('radius', Math.max(1, filterParameter));
	// horiz pass
	this.filterShader.setUniform('direction', [1, 0]);
	this.filterShader.setUniform('tex0', tmp);
	pg.rect(-this.width/2, -this.height/2, this.width, this.height);
	// read back to temp buffer
	tmp.image(pg, -this.width/2, -this.height/2);
	// vert pass
	this.filterShader.setUniform('direction', [0, 1]);
	this.filterShader.setUniform('tex0', tmp);
	pg.rect(-this.width/2, -this.height/2, this.width, this.height);

Hopefully that fixes it? Otherwise there might be some additional we have to do in the blur shader with how alpha is handled.

[davepagurek]

This has now been resolved by #6503, so I'm going to close this branch for organizational purposes. Let me know if there are any other cases not covered that we still need to fix!