Confused about Shaders vs Filters

[GBagley]

Hi,

 

I'm a little confused about these. In PIXI, I see that I can give a graphics object or sprite an array of filters (PIXI.AbstractFilter). Where the AbstractFilter has vertex & fragment shader sources, and uniforms defined. These are applied cumulatively. These are shaders, in the opengl/webgl sense of the word 'shader', right? I think 'filter' is just a different term than I'm used to for that. 

 

If that's the case, then what is a PIXI.Shader (and ShaderManager?) and how is it different from a filter? I remember reading that a 'Shader' in pixi was for Sprites only, but in PIXI.Sprite I see that the .shader property is actually expecting an AbstractFilter.

 

[xerver]

Filters are shaders, the word "filter" comes from flash. The reason we don't just call them shaders is because "shaders" just refers to a vertex/fragment pair that runs on the GPU, but filters are shaders that specifically run to add a post-processing effect to the object they are attached to. Filters also are more abstract in that they are not tied to a rendering context, whereas a Shader is. Filters create a Shader object for each context that the filter object runs in. Filters container shaders and methods for applying themselves using framebuffers. Shaders are just code bags.

The .shader property is a special case where you can assign a Filter object or a raw Shader object. Shaders are generally an internal-only concept as they are more low-level than the user generally needs to get. Shaders are used for managing code and interacting with the GPU (compiling, uploading uniforms, etc) which are things the end user usually doesn't need to do directly. Filters are more abstract, and useful. Therefore, we allow you to assign a filter to the shader property of a sprite, which will not be post-processing, but instead will override how we draw that sprite. Internally we reach into the Filter and grab the internally created Shader object for the webgl context you are rendering in and use that to draw the sprite.

Unless you are writing a new ObjectRenderer in a plugin, or contributing to pixi.js source, you probably only need to worry about Filters and pretend that the Shader object doesn't even exist

Hope this helps.

[GBagley]

Much clearer now. Thanks!