From 0feb343c382218fb089692230bcd58861f05bf3e Mon Sep 17 00:00:00 2001 From: wong-justin Date: Thu, 7 Sep 2023 12:48:22 -0400 Subject: [PATCH 1/3] use luma for erode, dilate to match cpu method; see #6398 --- src/webgl/shaders/filters/dilate.frag | 14 +++++++++++++- src/webgl/shaders/filters/erode.frag | 14 +++++++++++++- 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/src/webgl/shaders/filters/dilate.frag b/src/webgl/shaders/filters/dilate.frag index 50f79d0e01..3209c4a7ef 100644 --- a/src/webgl/shaders/filters/dilate.frag +++ b/src/webgl/shaders/filters/dilate.frag @@ -7,8 +7,15 @@ varying vec2 vTexCoord; uniform sampler2D tex0; uniform vec2 texelSize; +float luma(vec3 color) { + // weighted grayscale with luminance values + // weights 77, 151, 28 taken from src/image/filters.js + return dot(color, vec3(0.300781, 0.589844, 0.109375)); +} + void main() { vec4 color = texture2D(tex0, vTexCoord); + float lum = luma(color.rgb); // set current color as the brightest neighbor color @@ -20,7 +27,12 @@ void main() { for (int i = 0; i < 4; i++) { vec4 neighborColor = neighbors[i]; - color = max(color, neighborColor); + float neighborLum = luma(neighborColor.rgb); + + if (neighborLum > lum) { + color = neighborColor; + lum = neighborLum; + } } gl_FragColor = color; diff --git a/src/webgl/shaders/filters/erode.frag b/src/webgl/shaders/filters/erode.frag index c2e5a6c791..6be0e78525 100644 --- a/src/webgl/shaders/filters/erode.frag +++ b/src/webgl/shaders/filters/erode.frag @@ -7,8 +7,15 @@ varying vec2 vTexCoord; uniform sampler2D tex0; uniform vec2 texelSize; +float luma(vec3 color) { + // weighted grayscale with luminance values + // weights 77, 151, 28 taken from src/image/filters.js + return dot(color, vec3(0.300781, 0.589844, 0.109375)); +} + void main() { vec4 color = texture2D(tex0, vTexCoord); + float lum = luma(color.rgb); // set current color as the darkest neighbor color @@ -20,7 +27,12 @@ void main() { for (int i = 0; i < 4; i++) { vec4 neighborColor = neighbors[i]; - color = min(color, neighborColor); + float neighborLum = luma(neighborColor.rgb); + + if (neighborLum < lum) { + color = neighborColor; + lum = neighborLum; + } } gl_FragColor = color; From 85e11074602f0abecd0c10dee27c1af9caa7e70a Mon Sep 17 00:00:00 2001 From: wong-justin Date: Thu, 7 Sep 2023 12:49:47 -0400 Subject: [PATCH 2/3] use floor() in threshold filter to match cpu method; see #6398 --- src/webgl/shaders/filters/threshold.frag | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/webgl/shaders/filters/threshold.frag b/src/webgl/shaders/filters/threshold.frag index f9e8b54078..597f7e3012 100644 --- a/src/webgl/shaders/filters/threshold.frag +++ b/src/webgl/shaders/filters/threshold.frag @@ -16,7 +16,8 @@ float luma(vec3 color) { void main() { vec4 color = texture2D(tex0, vTexCoord); float gray = luma(color.rgb); - float threshold = filterParameter; + // floor() used to match src/image/filters.js + float threshold = floor(filterParameter * 255.0) / 255.0; float blackOrWhite = step(threshold, gray); gl_FragColor = vec4(vec3(blackOrWhite), color.a); } From 3ae8a2a4d53da391fbb97a820523f8421cb63430 Mon Sep 17 00:00:00 2001 From: wong-justin Date: Fri, 8 Sep 2023 09:20:12 -0400 Subject: [PATCH 3/3] texelSize uses pixelDensity; see #6398, #6399 --- src/webgl/p5.RendererGL.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js index 81fb4ae511..1161908d42 100644 --- a/src/webgl/p5.RendererGL.js +++ b/src/webgl/p5.RendererGL.js @@ -1061,6 +1061,9 @@ p5.RendererGL = class RendererGL extends p5.Renderer { pg.clear(); // prevent undesirable feedback effects accumulating secretly + let pd = this._pInst.pixelDensity(); + let texelSize = [1 / (this.width * pd), 1 / (this.height * pd)]; + // apply blur shader with multiple passes if (operation === constants.BLUR) { @@ -1074,7 +1077,7 @@ p5.RendererGL = class RendererGL extends p5.Renderer { this.filterGraphicsLayerTemp.image(this, -this.width/2, -this.height/2); pg.shader(this.filterShader); - this.filterShader.setUniform('texelSize', [1/this.width, 1/this.height]); + this.filterShader.setUniform('texelSize', texelSize); this.filterShader.setUniform('steps', Math.max(1, filterParameter)); // horiz pass @@ -1096,7 +1099,7 @@ p5.RendererGL = class RendererGL extends p5.Renderer { else { pg.shader(this.filterShader); this.filterShader.setUniform('tex0', this); - this.filterShader.setUniform('texelSize', [1/this.width, 1/this.height]); + this.filterShader.setUniform('texelSize', texelSize); this.filterShader.setUniform('canvasSize', [this.width, this.height]); // filterParameter uniform only used for POSTERIZE, and THRESHOLD // but shouldn't hurt to always set