WebGL Filters

[brokedRobot]

  "webGL Filters

this is from the front page:

 

When using webGL, Pixi let’s you use a huge set of existing, familiar filters such as blurs and pixelations but also allows users to create their own unique filters such as bespoke displacements and halftone effects."

 

This has been described as straightforward but I can't seem to find the answer.

How would one go from having a fragment shader like this:

uniform x

main(){

         return vec4(0.0,0.0,0.0,1.0);

}

to a:

var filter = new PIXI.filters.myFilter();

I've tried making prototype copies of the existing filters that apparently call AbstractFilter as their super.  I've only just begun looking at this, but I was hoping someone could give me a tip.  

I know it has to be wrapped up in javascript in a certain way with the uniforms supplied, but I can't find the way to create a customized glsl filter, every time I add the copies into a container or sprite's .filter array, it causes a runtime error.   Thanks, sorry for having a hard time with this, maybe not looking in the right place.  Am I correct in my thinking about how this should be done?

[xerver]

There are a bunch of filters made already that you can use as templates:

 

https://github.com/GoodBoyDigital/pixi.js/tree/master/src/filters

https://github.com/pixijs/pixi-extra-filters/tree/master/src/filters

 

What are you getting stuck on? What have you tried? Do you have an example of something you think should work but doesn't?

 

A dead-simple filter using the frag you posted (but fixed to be actual glsl code):

function MyFilter() {    PIXI.filters.AbstractFilter.call(this,        null,        'void main() { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); }'    );}MyFilter.prototype = Object.create(PIXI.filters.AbstractFilter.prototype);MyFilter.prototype.constructor = MyFilter;

[brokedRobot]

Well, the test code I was working with is actually the panda example.  As you can see with the commented out NewFilter code, I was attempted to do something similar to what you suggest.  I think this may just be something else in my code that I'm doing wrong but I keep getting an error, so I'll keep looking, like I said I just started messing with this, here's the modification:
 

function MyFilter() {PIXI.filters.AbstractFilter.call(this,null,'main() { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); }');}MyFilter.prototype = Object.create(PIXI.filters.AbstractFilter.prototype);MyFilter.prototype.constructor = MyFilter;//function MySprite() {}/*PIXI.filters.NewFilter = function() {}PIXI.filters.NewFilter.prototype = Object.create( PIXI.filters.NoiseFilter.prototype );PIXI.filters.NewFilter.prototype.constructor = PIXI.filters.NewFilter;//MySprite.prototype.someOtherFunction = function() {};var t1 = new PIXI.filters.NoiseFilter();var t2 = new PIXI.filters.NewFilter();*/var renderer = PIXI.autoDetectRenderer(800, 600);document.body.appendChild(renderer.view);// create the root of the scene graphvar stage = new PIXI.Container();stage.interactive = true;var bg = PIXI.Sprite.fromImage('_assets/BGrotate.jpg');bg.anchor.set(0.5);bg.position.x = renderer.width / 2;bg.position.y = renderer.height / 2;var filter = new MyFilter();var container = new PIXI.Container();container.position.x = renderer.width / 2;container.position.y = renderer.height / 2;var bgFront = PIXI.Sprite.fromImage('_assets/SceneRotate.jpg');bgFront.anchor.set(0.5);container.addChild(bgFront);var light2 = PIXI.Sprite.fromImage('_assets/LightRotate2.png');light2.anchor.set(0.5);container.addChild(light2);var light1 = PIXI.Sprite.fromImage('_assets/LightRotate1.png');light1.anchor.set(0.5);container.addChild(light1);var panda =  PIXI.Sprite.fromImage('_assets/panda.png');panda.anchor.set(0.5);container.addChild(panda);stage.addChild(container);//panda.filters = [filter];container.filters = [filter];var count = 0;var switchy = false;stage.on('click', onClick);stage.on('tap', onClick);function onClick(){switchy = !switchy;if (!switchy){stage.filters = [filter];}else{stage.filters = null;}}var help = new PIXI.Text('Click to turn filters on / off.', { font: 'bold 12pt Arial', fill: 'white' });help.position.y = renderer.height - 25;help.position.x = 10;stage.addChild(help);requestAnimationFrame(animate);function animate() {bg.rotation += 0.01;bgFront.rotation -= 0.01;light1.rotation += 0.02;light2.rotation += 0.01;panda.scale.x = 1 + Math.sin(count) * 0.04;panda.scale.y = 7 + Math.cos(count) * 0.04;count += 0.1;//var matrix = filter.matrix;//matrix[1] = Math.sin(count) * 3;//matrix[2] = Math.cos(count);//matrix[3] = Math.cos(count) * 1.5;//matrix[4] = Math.sin(count / 3) * 2;//matrix[5] = Math.sin(count / 2);//matrix[6] = Math.sin(count / 4);renderer.render(stage);requestAnimationFrame(animate);}

I was trying to set panda.filters and container.filters.  And here's the error I get:

Sorry if this is something I'm doing wrong.  I'm just not sure how to debug this error yet.

[xerver]

NewFilter will throw for sure because you never call the parent constructor. You inherit from NoiseFilter, but then never call the ctor so the shader never gets setup properly.

The reason you get the error you describe when using "MyFilter" is because you copy-pasted my example directly, which has an error. My example should have been "void main()" not just "main()", changing that makes your example run perfectly fine.

[brokedRobot]

Augh, so sorry.  Wow, I turned it from black to white instantly.  And set it to the panda o.o  That's awesome.  And so everything is then ordered by...the order added to the stage?  So you 'just' reorder some drawing layer system?  I think I saw an example already with textures as uniform inputs.  Sorry for being daft, I see the info everywhere...I just need to read more.  I will read more.