Updated shader implementation

Author: erikhaandrikman

src/Accessibility/shaders/ColorShift.js

@@ -36,12 +36,13 @@ export default class ColorShift extends Lightning.shaders.WebGLDefaultShader {
   }
 
   setupUniforms(operation) {
-    const gl = this.gl
-
     super.setupUniforms(operation)
-    this._setUniform('brightness', this._brightness || 0.0, gl.uniform1f)
-    this._setUniform('contrast', this._contrast || 1.0, gl.uniform1f)
-    this._setUniform('gamma', this._gamma || 1.0, gl.uniform1f)
+    const gl = this.gl
+    this._setUniform(
+      'colorAdjust',
+      [this._brightness || 0.0, this._contrast || 1.0, this._gamma || 1.0],
+      gl.uniform3fv
+    )
   }
 }
 
@@ -53,36 +54,34 @@ ColorShift.before = `
     precision lowp float;
     # endif
     #endif
-
+        
     varying vec2 vTextureCoord;
     varying vec4 vColor;
     uniform sampler2D uSampler;
-    uniform float brightness;
-    uniform float contrast;
-    uniform float gamma;
-
+    uniform vec3 colorAdjust;
+    
     const mat3 RGBtoOpponentMat = mat3(0.2814, -0.0971, -0.0930, 0.6938, 0.1458,-0.2529, 0.0638, -0.0250, 0.4665);
-    const mat3 OpponentToRGBMat = mat3(1.1677, 0.9014, 0.7214, -6.4315, 2.5970, 0.1257, -0.5044, 0.0159, 2.0517);
+    const mat3 OpponentToRGBMat = mat3(1.1677, 0.9014, 0.7214, -6.4315, 2.5970, 0.1257, -0.5044, 0.0159, 2.0517);    
 `
 
-ColorShift.after = `
+ColorShift.after = `    
     vec3 brightnessContrast(vec3 value, float brightness, float contrast)
     {
         return (value - 0.5) * contrast + 0.5 + brightness;
-    }
-
+    }   
+    
     vec3 updateGamma(vec3 value, float param)
     {
         return vec3(pow(abs(value.r), param),pow(abs(value.g), param),pow(abs(value.b), param));
-    }
-
+    } 
+       
     void main(void){
-        vec4 fragColor = texture2D(uSampler, vTextureCoord);
-        vec4 color = vision(filter(fragColor)) * vColor;
-
-        vec3 bc = brightnessContrast(color.rgb,brightness,contrast);
-        vec3 ga = updateGamma(bc.rgb, gamma);
-
-        gl_FragColor = vec4(ga.rgb, color.a);
-    }
+        vec4 fragColor = texture2D(uSampler, vTextureCoord);        
+        vec4 color = filter(fragColor) * vColor;       
+        
+        vec3 bc = brightnessContrast(color.rgb,colorAdjust[0],colorAdjust[1]);        
+        vec3 ga = updateGamma(bc.rgb, colorAdjust[2]);  
+              
+        gl_FragColor = vec4(ga.rgb, color.a);          
+    }    
 `

src/Accessibility/shaders/DeuteranopiaShader.js

@@ -23,21 +23,21 @@ export default class DeuteranopiaShader extends ColorShift {}
 
 DeuteranopiaShader.fragmentShaderSource = `
     ${ColorShift.before}
-    vec4 filter( vec4 color )
-    {
-        vec3 opponentColor = RGBtoOpponentMat * vec3(color.r, color.g, color.b);
-        opponentColor.x -= opponentColor.y * 1.5;
-        vec3 rgbColor = OpponentToRGBMat * opponentColor;
-        return vec4(rgbColor.r, rgbColor.g, rgbColor.b, color.a);
-    }
-
     vec4 vision(vec4 color)
     {
         vec4 r = vec4( 0.43,  0.72, -0.15, 0.0 );
         vec4 g = vec4( 0.34,  0.57,  0.09, 0.0 );
         vec4 b = vec4(-0.02,  0.03,  1.00, 0.0 );
-
-        return vec4(dot(color, r), dot(color, g), dot(color, b), color.a);
+       
+        return vec4(dot(color, r), dot(color, g), dot(color, b), color.a);	
+    }
+       
+    vec4 filter( vec4 color )
+    {   
+        vec3 opponentColor = RGBtoOpponentMat * vec3(color.r, color.g, color.b);
+        opponentColor.x -= opponentColor.y * 1.5; 
+        vec3 rgbColor = OpponentToRGBMat * opponentColor;
+        return vision(vec4(rgbColor.r, rgbColor.g, rgbColor.b, color.a));    
     }
-    ${ColorShift.after}
+    ${ColorShift.after}    
 `

src/Accessibility/shaders/MonochromacyShader.js

@@ -24,14 +24,9 @@ export default class MonochromacyShader extends ColorShift {}
 MonochromacyShader.fragmentShaderSource = `
     ${ColorShift.before}
     vec4 filter( vec4 color )
-    {
+    {   
         float grey = dot(color.rgb, vec3(0.299, 0.587, 0.114));
-        return vec4(vec3(grey, grey, grey), 1.0 );
-    }
-
-    vec4 vision(vec4 color)
-    {
-        return color;
+        return vec4(vec3(grey, grey, grey), 1.0 ); 
     }
     ${ColorShift.after}
 `

src/Accessibility/shaders/NormalShader.js

@@ -27,10 +27,5 @@ NeutralShader.fragmentShaderSource = `
     {
         return color;
     }
-
-    vec4 vision(vec4 color)
-    {
-        return color;
-    }
     ${ColorShift.after}
 `

src/Accessibility/shaders/ProtanopiaShader.js

@@ -22,22 +22,22 @@ import ColorShift from './ColorShift'
 export default class ProtanopiaShader extends ColorShift {}
 
 ProtanopiaShader.fragmentShaderSource = `
-    ${ColorShift.before}
-    vec4 filter( vec4 color )
-    {
-        vec3 opponentColor = RGBtoOpponentMat * vec3(color.r, color.g, color.b);
-        opponentColor.x -= opponentColor.y * 1.5;
-        vec3 rgbColor = OpponentToRGBMat * opponentColor;
-        return vec4(rgbColor.r, rgbColor.g, rgbColor.b, color.a);
-    }
-
+    ${ColorShift.before}    
     vec4 vision(vec4 color)
     {
         vec4 r = vec4( 0.20,  0.99, -0.19, 0.0);
         vec4 g = vec4( 0.16,  0.79,  0.04, 0.0);
         vec4 b = vec4( 0.01, -0.01,  1.00, 0.0);
-
-        return vec4(dot(color, r), dot(color, g), dot(color, b), color.a);
+       
+        return vec4(dot(color, r), dot(color, g), dot(color, b), color.a);	
     }
-    ${ColorShift.after}
+    
+    vec4 filter( vec4 color )
+    {   
+        vec3 opponentColor = RGBtoOpponentMat * vec3(color.r, color.g, color.b);
+        opponentColor.x -= opponentColor.y * 1.5; 
+        vec3 rgbColor = OpponentToRGBMat * opponentColor;
+        return vision(vec4(rgbColor.r, rgbColor.g, rgbColor.b, color.a));      
+    }    
+    ${ColorShift.after} 
 `

src/Accessibility/shaders/TritanopiaShader.js

@@ -22,22 +22,22 @@ import ColorShift from './ColorShift'
 export default class TritanopiaShader extends ColorShift {}
 
 TritanopiaShader.fragmentShaderSource = `
-    ${ColorShift.before}
-    vec4 filter( vec4 color )
-    {
-        vec3 opponentColor = RGBtoOpponentMat * vec3(color.r, color.g, color.b);
-        opponentColor.x -= ((3.0 * opponentColor.z) - opponentColor.y) * 0.25;
-        vec3 rgbColor = OpponentToRGBMat * opponentColor;
-        return vec4(rgbColor.r, rgbColor.g, rgbColor.b, color.a);
-    }
-
+    ${ColorShift.before}    
     vec4 vision(vec4 color)
     {
         vec4 r = vec4( 0.97,  0.11, -0.08, 0.0 );
         vec4 g = vec4( 0.02,  0.82,  0.16, 0.0 );
         vec4 b = vec4(-0.06,  0.88,  0.18, 0.0 );
-
-        return vec4(dot(color, r), dot(color, g), dot(color, b), color.a);
-    }
-    ${ColorShift.after}
+       
+        return vec4(dot(color, r), dot(color, g), dot(color, b), color.a);	
+    }   
+    
+    vec4 filter( vec4 color )
+    {   
+        vec3 opponentColor = RGBtoOpponentMat * vec3(color.r, color.g, color.b);
+        opponentColor.x -= ((3.0 * opponentColor.z) - opponentColor.y) * 0.25;
+        vec3 rgbColor = OpponentToRGBMat * opponentColor;
+        return vision(vec4(rgbColor.r, rgbColor.g, rgbColor.b, color.a));
+    }   
+    ${ColorShift.after} 
 `