Gradient shader

gradient.glsl

precision mediump float;

varying vec2 vTextureCoord;
varying vec2 aVertexPosition;

uniform sampler2D uSampler;

uniform vec4 startColor;
uniform vec4 endColor;

void main() {
	vec4 mixCol = mix(endColor, startColor, aVertexPosition.x);
	vec4 fg = texture2D(uSampler, vTextureCoord);

	gl_FragColor = mix(fg, mixCol, 0.1);
}

gradient_vert.glsl

varying vec2 aVertexPosition;

uniform mat3 projectionMatrix;

varying vec2 vTextureCoord;

uniform vec4 inputSize;
uniform vec4 outputFrame;

vec4 filterVertexPosition( void )
{
	vec2 position = aVertexPosition * max(outputFrame.zw, vec2(0.)) + outputFrame.xy;

	return vec4((projectionMatrix * vec3(position, 1.0)).xy, 0.0, 1.0);
}

vec2 filterTextureCoord( void )
{
	return aVertexPosition * (outputFrame.zw * inputSize.zw);
}

void main(void)
{
	gl_Position = filterVertexPosition();
	vTextureCoord = filterTextureCoord();
}

index.js

import { Filter, utils } from 'pixi.js';

import vertex from 'shaders/gradient/gradient_vert.glsl';
import fragment from 'shaders/gradient/gradient.glsl';

export default class GradientFilter extends Filter {
	constructor(startColor = 0x00ff00, endColor = 0xff0000) {
		super(vertex, fragment);

		// this.startColor = startColor;
		// this.endColor = endColor;
        this.uniforms.startColor = Float32Array.from([0x00, 0xff, 0x00, 0.5]);

        this.uniforms.endColor = Float32Array.from([0xff, 0x0, 0x00, 0.5]);
	}

	// set startColor(startColor) {
	// 	const startColorVec = utils.hex2rgb(startColor);
	// 	startColorVec.push(0.5); // transparency
	// 	this.uniforms.startColor = startColorVec;
	// }

	// set endColor(endColor) {
	// 	const endColorVec = utils.hex2rgb(endColor);
	// 	endColorVec.push(0.5); // transparency
	// 	this.uniforms.endColor = endColorVec;
	// }
}