diff --git a/src/image/filterRenderer2D.js b/src/image/filterRenderer2D.js index 40f0c52685..bd9da38d9b 100644 --- a/src/image/filterRenderer2D.js +++ b/src/image/filterRenderer2D.js @@ -44,6 +44,7 @@ class FilterRenderer2D { console.error('WebGL not supported, cannot apply filter.'); return; } + this.gl.pixelStorei(this.gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true); this.textures = new Map(); @@ -381,7 +382,7 @@ class FilterRenderer2D { get canvasTexture() { if (!this._canvasTexture) { - this._canvasTexture = new Texture(this._renderer, this.parentRenderer.wrappedElt); + this._canvasTexture = new Texture(this._renderer, this.parentRenderer); } return this._canvasTexture; } diff --git a/test/unit/visual/cases/webgl.js b/test/unit/visual/cases/webgl.js index 6e05ddc06f..fd0cb09d0a 100644 --- a/test/unit/visual/cases/webgl.js +++ b/test/unit/visual/cases/webgl.js @@ -272,6 +272,37 @@ visualSuite('WebGL', function() { screenshot(); }); + + for (const mode of ['webgl', '2d']) { + visualTest(`Transparent background colors are correct in ${mode} mode`, function(p5, screenshot) { + p5.createCanvas(50, 50, p5.WEBGL); + const g = p5.createGraphics(50, 50, mode === 'webgl' ? p5.WEBGL : p5.P2D); + if (mode === 'webgl') g.translate(-p5.width/2, -p5.height/2); + g.noStroke(); + g.fill(255, 0, 0, 100); + g.rect(10, 10, 30, 30); + g.filter(p5.BLUR, 4); + p5.imageMode(p5.CENTER); + p5.image(g, 0, 0); + screenshot(); + }); + + visualTest(`Multiple filter passes work correctly on a p5.Graphics in ${mode} mode`, function(p5, screenshot) { + p5.createCanvas(50, 50, p5.WEBGL); + const g = p5.createGraphics(50, 50, mode === 'webgl' ? p5.WEBGL : p5.P2D); + if (mode === 'webgl') g.translate(-g.width/2, -g.height/2); + g.background(255); + g.noStroke(); + g.fill(0); + g.rect(10, 10, 6, 6); + g.filter(p5.BLUR, 2); + g.rect(30, 30, 6, 6); + g.filter(p5.BLUR, 2); + p5.imageMode(p5.CENTER); + p5.image(g, 0, 0); + screenshot(); + }); + } }); visualSuite('Lights', function() { @@ -1164,7 +1195,7 @@ visualSuite('WebGL', function() { p5.plane(50, 50); screenshot(); }); - + visualSuite('auto-return for shader hooks', () => { visualTest('auto-returns input struct when return is omitted', (p5, screenshot) => { p5.createCanvas(50, 50, p5.WEBGL); diff --git a/test/unit/visual/screenshots/WebGL/filter/Multiple filter passes work correctly on a p5.Graphics in 2d mode/000.png b/test/unit/visual/screenshots/WebGL/filter/Multiple filter passes work correctly on a p5.Graphics in 2d mode/000.png new file mode 100644 index 0000000000..88030f07cc Binary files /dev/null and b/test/unit/visual/screenshots/WebGL/filter/Multiple filter passes work correctly on a p5.Graphics in 2d mode/000.png differ diff --git a/test/unit/visual/screenshots/WebGL/filter/Multiple filter passes work correctly on a p5.Graphics in 2d mode/metadata.json b/test/unit/visual/screenshots/WebGL/filter/Multiple filter passes work correctly on a p5.Graphics in 2d mode/metadata.json new file mode 100644 index 0000000000..2d4bfe30da --- /dev/null +++ b/test/unit/visual/screenshots/WebGL/filter/Multiple filter passes work correctly on a p5.Graphics in 2d mode/metadata.json @@ -0,0 +1,3 @@ +{ + "numScreenshots": 1 +} \ No newline at end of file diff --git a/test/unit/visual/screenshots/WebGL/filter/Multiple filter passes work correctly on a p5.Graphics in webgl mode/000.png b/test/unit/visual/screenshots/WebGL/filter/Multiple filter passes work correctly on a p5.Graphics in webgl mode/000.png new file mode 100644 index 0000000000..88030f07cc Binary files /dev/null and b/test/unit/visual/screenshots/WebGL/filter/Multiple filter passes work correctly on a p5.Graphics in webgl mode/000.png differ diff --git a/test/unit/visual/screenshots/WebGL/filter/Multiple filter passes work correctly on a p5.Graphics in webgl mode/metadata.json b/test/unit/visual/screenshots/WebGL/filter/Multiple filter passes work correctly on a p5.Graphics in webgl mode/metadata.json new file mode 100644 index 0000000000..2d4bfe30da --- /dev/null +++ b/test/unit/visual/screenshots/WebGL/filter/Multiple filter passes work correctly on a p5.Graphics in webgl mode/metadata.json @@ -0,0 +1,3 @@ +{ + "numScreenshots": 1 +} \ No newline at end of file diff --git a/test/unit/visual/screenshots/WebGL/filter/Transparent background colors are correct in 2d mode/000.png b/test/unit/visual/screenshots/WebGL/filter/Transparent background colors are correct in 2d mode/000.png new file mode 100644 index 0000000000..eb51606a3d Binary files /dev/null and b/test/unit/visual/screenshots/WebGL/filter/Transparent background colors are correct in 2d mode/000.png differ diff --git a/test/unit/visual/screenshots/WebGL/filter/Transparent background colors are correct in 2d mode/metadata.json b/test/unit/visual/screenshots/WebGL/filter/Transparent background colors are correct in 2d mode/metadata.json new file mode 100644 index 0000000000..2d4bfe30da --- /dev/null +++ b/test/unit/visual/screenshots/WebGL/filter/Transparent background colors are correct in 2d mode/metadata.json @@ -0,0 +1,3 @@ +{ + "numScreenshots": 1 +} \ No newline at end of file diff --git a/test/unit/visual/screenshots/WebGL/filter/Transparent background colors are correct in webgl mode/000.png b/test/unit/visual/screenshots/WebGL/filter/Transparent background colors are correct in webgl mode/000.png new file mode 100644 index 0000000000..eb51606a3d Binary files /dev/null and b/test/unit/visual/screenshots/WebGL/filter/Transparent background colors are correct in webgl mode/000.png differ diff --git a/test/unit/visual/screenshots/WebGL/filter/Transparent background colors are correct in webgl mode/metadata.json b/test/unit/visual/screenshots/WebGL/filter/Transparent background colors are correct in webgl mode/metadata.json new file mode 100644 index 0000000000..2d4bfe30da --- /dev/null +++ b/test/unit/visual/screenshots/WebGL/filter/Transparent background colors are correct in webgl mode/metadata.json @@ -0,0 +1,3 @@ +{ + "numScreenshots": 1 +} \ No newline at end of file diff --git a/test/unit/visual/visualTest.js b/test/unit/visual/visualTest.js index f921fefdbf..b761665d9c 100644 --- a/test/unit/visual/visualTest.js +++ b/test/unit/visual/visualTest.js @@ -64,7 +64,6 @@ export function visualSuite( suiteFn(name, () => { let lastShiftThreshold; let lastPrefix; - let lastDeviceRatio = window.devicePixelRatio; beforeAll(() => { lastPrefix = namePrefix; namePrefix += escapeName(name) + '/'; @@ -72,16 +71,12 @@ export function visualSuite( if (newShiftThreshold !== undefined) { shiftThreshold = newShiftThreshold; } - - // Force everything to be 1x - window.devicePixelRatio = 1; }); callback(); afterAll(() => { namePrefix = lastPrefix; - window.devicePixelRatio = lastDeviceRatio; shiftThreshold = lastShiftThreshold; }); }); @@ -398,9 +393,12 @@ export function visualTest( suiteFn(testName, function() { let name; let myp5; + let lastDeviceRatio = window.devicePixelRatio; beforeAll(function() { name = namePrefix + escapeName(testName); + // Force everything to be 1x + window.devicePixelRatio = 1; return new Promise(res => { myp5 = new p5(function(p) { p.setup = function() { @@ -411,6 +409,7 @@ export function visualTest( }); afterAll(function() { + window.devicePixelRatio = lastDeviceRatio; myp5.remove(); });