slstlr

Custom filters

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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;',        '}',    '}'];

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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...

  • Recently Browsing   0 members

    No registered users viewing this page.