Custom filters

slstlr · February 18, 2014

Hi,

I'm trying to create a simple custom filter. I want it to create a thin white border.

Here's the code:

PIXI.BorderFilter = function() {    PIXI.AbstractFilter.call(this);    this.passes = [ this ];    this.uniforms = {        borderWidth: {type: '1f', value: 2.},    };    this.fragmentSrc = [        'precision mediump float;',        'uniform vec2 resolution;',        'const vec4 broderColour = vec4(1., 1., 1., 1.);',        'uniform float borderWidth;',        'void main(void) {',            'if((gl_FragCoord.x < borderWidth) ||',              '(gl_FragCoord.y < borderWidth) ||',              '((resolution.x - gl_FragCoord.x) < borderWidth) ||',              '((resolution.y - gl_FragCoord.y) < borderWidth)) {',                'gl_FragColor = broderColour;',            '}',        '}'    ];};PIXI.BorderFilter.prototype = Object.create(PIXI.AbstractFilter.prototype);PIXI.BorderFilter.prototype.constructor = PIXI.BorderFilter;Object.defineProperty(PIXI.BorderFilter.prototype, 'borderWidth', {    get: function() {        return this.uniforms.borderWidth.value;    },    set: function(value) {        this.uniforms.borderWidth.value = value;    }});

Whey I apply this filter, my entire sprite becomes white. I don't see any errors.

I'm trying to apply the filter to this code http://www.goodboydigital.com/pixijs/examples/1/

Please note that when I try my shader here http://glsl.heroku.com/e

it works just fine.

Thanks.

rich · February 18, 2014

Looks like your shader is expecting resolution as a uniform, which never gets set (glsl.heroku sets it automatically for you).

slstlr · February 19, 2014

That's a very good point, thank you.

However when I reduce my filter to just that:

border_filter.js

PIXI.BorderFilter = function() {    PIXI.AbstractFilter.call(this);    this.passes = [ this ];    this.fragmentSrc = [        'precision mediump float;',        'void main(void) {',        	'if((gl_FragCoord.x < 2.) || (gl_FragCoord.y < 2.)) {',        		'gl_FragColor = vec4(1., 1., 1., 1.);',        	'}',        '}'    ];};PIXI.BorderFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );PIXI.BorderFilter.prototype.constructor = PIXI.BorderFilter;

My sprite just disappears. I still don't get any errors.

I don't understand where the problem is. According to the GLSL spec my fragment is fine. Could it be that something is different in WebGL or I'm not doing something right in pixi? Here's my pixi client code:

index.html

<!DOCTYPE HTML><html>	<head>		<meta charset="UTF-8" />		<title>BorderFilter</title>		<style>			body {				margin: 0;				padding: 0;				background-color: #000000;			}		</style>		<script src="https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js"></script>		<script src="border_filter.js"></script>	</head>	<body>		<script>			var stage = new PIXI.Stage(0x01FFFF);			var renderer = PIXI.autoDetectRenderer(800, 600);			document.body.appendChild(renderer.view);			var bunny = new PIXI.Sprite.fromImage("http://www.goodboydigital.com/pixijs/examples/1/bunny.png");			bunny.position.x = 100;			bunny.position.y = 100;			var borderFilter = new PIXI.BorderFilter();			bunny.filters = [borderFilter];			stage.addChild(bunny);			requestAnimFrame(animate);			function animate() {				requestAnimFrame(animate);				renderer.render(stage);			}		</script>	</body></html>

I'm testing on firefox 27.0.1 and windows 8.1. The WebGL renderer is used.

Thanks.

rich · February 19, 2014

Don't you actually need the resolution though? I meant just add it in as a uniform so pixi has it

slstlr · February 19, 2014

Yes but lets first make this simple example work. It should create just two broder rectangles.

Since I'm new to JavaScript and WebGL, I don't really know how to approach the problem.

I hope someone experienced like you can help me

Thanks.

xerver · February 19, 2014

Can a fragment shader not export a color? I was under the impression that the fragment shader *must* export a color:

this.fragmentSrc = [    'precision mediump float;',    'varying vec4 vColor;',    'void main(void) {',        'if((gl_FragCoord.x < 2.) || (gl_FragCoord.y < 2.)) {',       	    'gl_FragColor = vec4(1., 1., 1., 1.);',        '} else {',            'gl_FragColor = vColor;',        '}',    '}'];

slstlr · February 19, 2014

I finally made some progress. It turned out that I had to sample the texture in order to find the colour of every pixel. Here's what I have now:

this.fragmentSrc = [    'precision mediump float;',    //'layout(origin_upper_left) in vec4 gl_FragCoord;',    'varying vec2 vTextureCoord;',    'uniform sampler2D uSampler;',    'uniform vec2 origin;',    'uniform vec2 size;',	'void main(void) {',	    'if(((gl_FragCoord.x - origin.x) < 2.) || ((gl_FragCoord.y - origin.y) < 2.) ||',	      '(((origin.x + size.x) - gl_FragCoord.x) < 2.) || (((origin.y + size.y) - gl_FragCoord.y) < 2.)) {',	   	'gl_FragColor = vec4(1., 1., 1., 1.);',	    '} else {',	    	'gl_FragColor = texture2D(uSampler, vTextureCoord);',	    '}',	'}'];

This works and does exactly what I want but there's one problem.

Notice the commented out line. By default gl_FragCoord has its origin in the lower left corner while in HTML5 canvas/webgl everything originates from the upper left corner. This means that I have to do the following:

borderFilter.origin = {x : bunny.position.x, y : height - bunny.position.y - bunny.height};

to transform the y-axis.

According to the GLSL spec http://www.opengl.org/registry/doc/GLSLangSpec.4.40.pdf section 4.4.1.3

I should be able to redeclare gl_FragCoord exactly like in the commented out line to make the gl_FragCoord origin the same as everything else.

However when I uncomment this line my shader cannot be compiled or I don't know what exactly. I get the following error:

[23:35:31.218] Error: WebGL: attachShader: shader: null object passed as argument @ https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:4301[23:35:31.218] Error: WebGL: linkProgram: this program doesn't have both a vertex shader and a fragment shader @ https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:4302[23:35:31.218] Error: WebGL: useProgram: program was not linked successfully @ https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:4369[23:35:31.218] Error: WebGL: useProgram: program was not linked successfully @ https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:7524[23:35:31.218] Error: WebGL: vertexAttribPointer: index -1 is invalid. That probably comes from a getAttribLocation() call, where this return value -1 means that the passed name didn't correspond to an active attribute in the specified program. @ https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:7540[23:35:31.218]'>https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:7540[23:35:31.218] Error: WebGL: vertexAttribPointer: index -1 is invalid. That probably comes from a getAttribLocation() call, where this return value -1 means that the passed name didn't correspond to an active attribute in the specified program. @ https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:7543[23:35:31.215] "ERROR: 0:2: 'layout' : syntax error [23:35:31.218] "Could not initialise shaders"[23:35:31.231] Error: WebGL: useProgram: program was not linked successfully @ https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:7524[23:35:31.231] Error: WebGL: vertexAttribPointer: index -1 is invalid. That probably comes from a getAttribLocation() call, where this return value -1 means that the passed name didn't correspond to an active attribute in the specified program. @ https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:7540[23:35:31.231]'>https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:7540[23:35:31.231] Error: WebGL: vertexAttribPointer: index -1 is invalid. That probably comes from a getAttribLocation() call, where this return value -1 means that the passed name didn't correspond to an active attribute in the specified program. @ https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:7543[23:35:31.703] GET http://www.goodboydigital.com/pixijs/examples/1/bunny.png [HTTP/1.1 304 Not Modified 257ms][23:35:31.695] Error: WebGL: useProgram: program was not linked successfully @ https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:7524[23:35:31.695] Error: WebGL: vertexAttribPointer: index -1 is invalid. That probably comes from a getAttribLocation() call, where this return value -1 means that the passed name didn't correspond to an active attribute in the specified program. @ https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:7540[23:35:31.695]'>https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:7540[23:35:31.695] Error: WebGL: vertexAttribPointer: index -1 is invalid. That probably comes from a getAttribLocation() call, where this return value -1 means that the passed name didn't correspond to an active attribute in the specified program. @ https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:7543[23:35:31.737] Error: WebGL: useProgram: program was not linked successfully @ https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:7524[23:35:31.737] Error: WebGL: vertexAttribPointer: index -1 is invalid. That probably comes from a getAttribLocation() call, where this return value -1 means that the passed name didn't correspond to an active attribute in the specified program. @ https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:7540[23:35:31.737]'>https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:7540[23:35:31.737] Error: WebGL: vertexAttribPointer: index -1 is invalid. That probably comes from a getAttribLocation() call, where this return value -1 means that the passed name didn't correspond to an active attribute in the specified program. @ https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:7543[23:35:31.770] Error: WebGL: useProgram: program was not linked successfully @ https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:7524[23:35:31.770] Error: WebGL: vertexAttribPointer: index -1 is invalid. That probably comes from a getAttribLocation() call, where this return value -1 means that the passed name didn't correspond to an active attribute in the specified program. @ https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:7540[23:35:31.770]'>https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:7540[23:35:31.770] Error: WebGL: vertexAttribPointer: index -1 is invalid. That probably comes from a getAttribLocation() call, where this return value -1 means that the passed name didn't correspond to an active attribute in the specified program. @ https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:7543[23:35:31.813] Error: WebGL: useProgram: program was not linked successfully @ https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:7524[23:35:31.813] Error: WebGL: vertexAttribPointer: index -1 is invalid. That probably comes from a getAttribLocation() call, where this return value -1 means that the passed name didn't correspond to an active attribute in the specified program. @ https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:7540[23:35:31.813]'>https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:7540[23:35:31.813] Error: WebGL: vertexAttribPointer: index -1 is invalid. That probably comes from a getAttribLocation() call, where this return value -1 means that the passed name didn't correspond to an active attribute in the specified program. @ https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:7543[23:35:31.848] Error: WebGL: useProgram: program was not linked successfully @ https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:7524[23:35:31.848] Error: WebGL: vertexAttribPointer: index -1 is invalid. That probably comes from a getAttribLocation() call, where this return value -1 means that the passed name didn't correspond to an active attribute in the specified program. @ https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:7540[23:35:31.849]'>https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:7540[23:35:31.849] Error: WebGL: vertexAttribPointer: index -1 is invalid. That probably comes from a getAttribLocation() call, where this return value -1 means that the passed name didn't correspond to an active attribute in the specified program. @ https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:7543[23:35:31.881] Error: WebGL: useProgram: program was not linked successfully @ https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:7524[23:35:31.881] Error: WebGL: vertexAttribPointer: index -1 is invalid. That probably comes from a getAttribLocation() call, where this return value -1 means that the passed name didn't correspond to an active attribute in the specified program. @ https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:7540[23:35:31.881]'>https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:7540[23:35:31.881] Error: WebGL: vertexAttribPointer: index -1 is invalid. That probably comes from a getAttribLocation() call, where this return value -1 means that the passed name didn't correspond to an active attribute in the specified program. @ https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:7543[23:35:31.890] Error: WebGL: useProgram: program was not linked successfully @ https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:7524[23:35:31.890] Error: WebGL: vertexAttribPointer: index -1 is invalid. That probably comes from a getAttribLocation() call, where this return value -1 means that the passed name didn't correspond to an active attribute in the specified program. @ https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:7540[23:35:31.890]'>https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:7540[23:35:31.890] Error: WebGL: vertexAttribPointer: index -1 is invalid. That probably comes from a getAttribLocation() call, where this return value -1 means that the passed name didn't correspond to an active attribute in the specified program. @ https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:7543[23:35:31.915] Error: WebGL: useProgram: program was not linked successfully @ https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:7524[23:35:31.915] Error: WebGL: vertexAttribPointer: index -1 is invalid. That probably comes from a getAttribLocation() call, where this return value -1 means that the passed name didn't correspond to an active attribute in the specified program. @ https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:7540[23:35:31.916]'>https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:7540[23:35:31.916] Error: WebGL: No further warnings will be reported for this WebGL context (already reported 32 warnings) @ https://raw.github.com/GoodBoyDigital/pixi.js/master/bin/pixi.dev.js:7540

Actually I see this exact same error message regardless of the problem.

So how should I redeclare gl_FragCoord to originate from the upper left corner?

Thanks.

xerver · February 20, 2014

WebGL is OpenGL ES v2.0, that documentation is for OpenGL v4.4. Not everything in that manual will work in WebGL since it is designed for a different system.

slstlr · February 20, 2014

You're right, this is not specified in http://www.opengl.org/registry/doc/GLSLangSpec.Full.1.10.59.pdf

I have one last question. Is there a better way to obtain the origin and size of the display objects my filter is applied to?

At the moment I set the origin and size to my filter and then my filter passes them as uniforms. But that seems silly, perhaps there's a generic way to obtain information about the display object from within the filter?

Thanks.

Sign In

Custom filters

Recommended Posts

slstlr

Link to comment

Share on other sites

rich

Link to comment

Share on other sites

slstlr

Link to comment

Share on other sites

rich

Link to comment

Share on other sites

slstlr

Link to comment

Share on other sites

xerver

Link to comment

Share on other sites

slstlr

Link to comment

Share on other sites

xerver

Link to comment

Share on other sites

slstlr

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Browse

Activity