Jump to content

Convert Gradient Shader to 4.0.1


wtmark
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...