What is FragmentShader and how to use it?

[Darker]

I am rendering pixel grid in my game and it's really not very effective at the moment. I asked about that on GitHub and I was advised to use something called FragmentShader. But I have no idea what that is and how to use it.

I tried to find it in documentation but there isn't anything but a list of parameters (not even mention what type are these parameters): https://pixijs.github.io/docs/PIXI.TextureShader.html

 

So my question is:

 

1. How to initialize and append texture shader to PIXY application?
2. How to provide source of pixels or otherwise define them.
3. How to redraw it.

[xerver]

Custom shaders are implemented in PIXI using Filter objects. There is nothing called FragmentShader. A fragment shader is a specific shader in the GL programmatic pipeline. It is used to decide what color a pixel on the display should be.

 

You can create a Filter object that has a custom fragment shader to draw what you want. You then assign that filter to the shader or filters properties of a sprite to use it. The filters property will apply the shader as a post-processing effect, the shader property will override the normal drawing behavior of that sprite to use that shader instead.

[JakeCake]

Shaders have a steep learning curve, as it is very low level; right down on the GPU, but take a look at http://glslsandbox.com. These are all shaders written in GLSL (Open GL Shader Language) that can pretty much be copy-pasted into a Pixi filter as the filter is just a layer on top of the shader.

 

Shader's are powerful, but hard to do properly, so don't expect great results immediately. They are fun to play around with though

[Darker]

Ok, thanks. Can you just tell me how does that C code translate to the browser? Or we can send C code samples right to webGL?

[xerver]

It isn't C, it is GLSL. It is compiled by WebGL and uploaded to the GPU where it runs.

[Darker]

Yeah, thanks a lot, I've already started researching. Thanks for this great sample, I can see how to create such a filter in Pixi. Right now I'm actually stuck on replicating that behavior, so I think I did some beginner mistake. Even if I write filter like this:

#define I GIVE UPnope nope nope

I still get no errors. I also tried to make a filter that renders all black, with no effect:

void main(void){   gl_FragColor = vec4(0,0,0,0);}

I first tried to assign the filter to PIXI.Graphics object. Since it didn't work, I used texture instead:

    var filter = new GameShader(gameShaderSrc);        var bg = PIXI.Sprite.fromImage("image/playerai.png");    bg.scale.set(2,2);    bg.filters = [filter];    this.stage.addChild(bg);

The image appears, but no change is applied to it. I uploaded the files here.

 

The circle behind new player message is the image playerai.png:

 

 

The sourcecode is here: http://demo-project-darker2.c9.io/rendering.js

 

I apply the filter on line 43 and I call rendering loop at line 139. The rendering object can be accessed as game.renderer from the global scope.

 

PS: I found XSS exploit on the examples page. Check this out: pixijs.github.io/examples/index.html?s=basics&f=custom-filter.js&title=x%3Cstyle%3E*%20%7Bdisplay%3Anone%3B%7D%3C%2Fstyle%3E Somebody more badass could probably smuggle a script tag too. I don't know where to report it, maybe you do.

[chg]

Yeah, thanks a lot, I've already started researching. Thanks for this great sample, I can see how to create such a filter in Pixi. Right now I'm actually stuck on replicating that behavior, so I think I did some beginner mistake. Even if I write filter like this:

#define I GIVE UPnope nope nope

I still get no errors. I also tried to make a filter that renders all black, with no effect:

void main(void){   gl_FragColor = vec4(0,0,0,0);}

Try modifying your glsl fragment main() like so:

 

void main(void){   gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);}

ie. floating point values intead of ints and 1.0 for the alpha channel

Depending on your code and how much you have changed may need to keep the junk above main(), I'm too lazy to look up what is meant to happen if your vertex shader / binds don't match your fragment shader, but it's probably best to keep atleast everything bar customUniform (assuming you also remove it from the JavaScript filter code)

[Darker]

No, modifiyng the shader to anything just has no effect. I tried to add the floating point, but the image still appears instead of being black.

 

The shader is here btw: http://demo-project-darker2.c9.io/shader.txt

 

and according to the Network panel it's downloaded and applied.

[xerver]

Can you create an example page where your filter isn't working so I can debug? Thanks.

[Darker]

Shame on me, I found the problem while creating test case. It was my fault of course. Sorry