Merge pull request #6405 from wong-justin/filters-luma-fix

processing · Oct 7, 2023 · bb78e67 · bb78e67
2 parents 3598675 + 3ae8a2a
commit bb78e67
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 5 deletions.
diff --git 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

diff --git 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
@@ -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;

diff --git 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);
 }