Convert Gradient Shader to 4.0.1

[wtmark]

This gradient shader works great on 3.x:

precision mediump float;

varying vec2 vTextureCoord;
uniform vec3 topColor;
uniform vec3 bottomColor;

void main(void) 
{
	vec3 difference = (topColor.xyz - bottomColor.xyz) * vTextureCoord.y;

	gl_FragColor.r = topColor.x - difference.x;
	gl_FragColor.g = topColor.y - difference.y;
	gl_FragColor.b = topColor.z - difference.z;
	gl_FragColor.a = 1.0;
}

However, on 4.0.1 it colors the sprite black instead of with the desired gradient.

I know that filters were changed in 4.0.1 but I have yet to find any sort of documentation describing how they were changed. As such, I have no idea how to get my gradient shader working again. Any help would be greatly appreciated.

[ivan.popelyshev]

varying vec2 vTextureCoord;
uniform vec3 topColor;
uniform vec3 bottomColor;
uniform mat3 mappedMatrix;

void main(void) 
{
    vec3 mappedCoord = vec3(vTextureCoord, 1.0) * mappedMatrix;
	vec3 difference = (topColor.xyz - bottomColor.xyz) * mappedCoord.y;

	gl_FragColor.r = topColor.x - difference.x;
	gl_FragColor.g = topColor.y - difference.y;
	gl_FragColor.b = topColor.z - difference.z;
	gl_FragColor.a = 1.0;
}

MyFilter.prototype.apply = function(filterManager, input, output) {
    filterManager.calculateNormalizedScreenSpaceMatrix(this.uniforms.mappedMatrix);
    filterManager.applyFilter(this, input, output);
};

Something like that, hm? Oh, I've got it, you want SHADER for a SPRITE. Sorry, in v4 its not possible unless you create your own renderer plugin for it. Please look at https://github.com/pixijs/pixi-plugin-example . It all happened because Sprites now have multi-texture renderer which is kinda scary.

Now everyone has to overload the sprite to use something else  I hope we'll return to old way . just "sprite.shader=myShader". On the other note, now its easier to create both shader and renderer for new type of sprite. For SHADER you can use your old glsl code, "mappedMatrix" doesnt make sence there

[wtmark]

Thanks for your reply. To clarify, I don't necessarily need a shader for a sprite -- my end goal is to create a gradient background for the entire stage. Is there a way to achieve that without applying a shader to a sprite?

[ivan.popelyshev]

Yeah, take that filter I gave you, add it to the background element. Background element can be anything, just graphics rect 10x10 will work fine, the only thing you has to do is to assign filter to it and specify "filterArea = new Rectangle(0,0,renderer.width,renderer.height)". 

The other way (2x more performance) is to use that plugin example to make renderer for your own type of sprite and put that sprite in the scene.