Editing PIXI DotFilter - Question

[Arron Ferguson]

Hi all,

I'm fairly new to Pixi and extremely new to fragment shaders and am trying to change the PIXI DotFilter fragment shader so that the holes are transparent (which I've done) but I want to set the foreground color to black or preferably any color. The first pic is what the PIXI DotFilter fragment shader renders without changes (i.e., by default) - which is black foreground on white background, and the second one is where I got it to now (transparency). The second picture (after I changed the color.a value to 0.0) has the color as white with the background knocked out.

The fragment shader code is as follows:

precision mediump float;

varying vec2 vTextureCoord;
varying vec4 vColor;

uniform vec4 filterArea;
uniform sampler2D uSampler;

uniform float angle;
uniform float scale;

float pattern()
{
   float s = sin(angle), c = cos(angle);
   vec2 tex = vTextureCoord * filterArea.xy;
   vec2 point = vec2(
       c * tex.x - s * tex.y,
       s * tex.x + c * tex.y
   ) * scale;
   return (sin(point.x) * sin(point.y)) * 4.0;
}

void main()
{
   vec4 color = texture2D(uSampler, vTextureCoord);
   float average = (color.r + color.g + color.b) / 3.0;
   gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);
}

Like I say, if I change that last line's color.a to 0.0 I knock out the background (which is what I want) but I want to change the color of the fill to black or any other color. I'm not sure what to change to do that.

Anyone know how to do this?

Thanks in advance!