Filter performance, tilt shift - WebGL

[s4m_ur4i]

Hello everyone,

I have made a little test by putting a stage and a graphic via pixi.js, now I have applied the tiltshift filter (which is more than awesome to have!).
The performance hit is down to 40 frames on latest MBP fully upgraded. in latest Chrome available and node-webkit as well.

This makes the further developement , using the filter, and pixiJS - impossible.
So is it known to be slow using just one filter? or is it this filter specially... really need it, considering changing to native then webGL.

here is the example code: (just for testing)

// create an new instance of a pixi stage
	var stage = new PIXI.Stage(0x66FF99);
	// create a renderer instance.
	var renderer = PIXI.autoDetectRenderer(1280, 720);
	// add the renderer view element to the DOM
	document.body.appendChild(renderer.view);


  // create a texture from an image path
  	var texture = PIXI.Texture.fromImage("assets/test2.png");
    var texture2 = PIXI.Texture.fromImage("assets/test.png");
  	// create a new Sprite using the texture
  	var bunny = new PIXI.Sprite(texture);
    var test = new PIXI.Sprite(texture2);

  	// center the sprites anchor point
  	bunny.anchor.x = 0.5;
  	bunny.anchor.y = 0.5;
    bunny.width = 2076;
    bunny.height = 1318;
  	bunny.position.x = 800;
  	bunny.position.y = 100;
    test.x = 500;
    test.y = 500;
    test.width = 200;



tiltshiftmode = new PIXI.filters.TiltShiftFilter();
tiltshiftmode.blurnumber = 120;
tiltshiftmode.gradientBlur = 1400;
//tiltshiftmode.start = 0;
//tiltshiftmode.end = 720;
tiltshiftmode.padding = 20;




var World = new PIXI.Container();
stage.addChild(World);
World.addChild(bunny);
World.addChild(test);

stage.filters = [tiltshiftmode];



document.addEventListener('keydown', onKeyDown);

function onKeyDown(key) {
    key.preventDefault();
    // W Key is 87
    // Up arrow is 87
    if (key.keyCode === 87 || key.keyCode === 38) {
      World.y += 14;
    }

    // S Key is 83
    // Down arrow is 40
    if (key.keyCode === 83 || key.keyCode === 40) {
        World.y -= 14;
    }

    // A Key is 65
    // Left arrow is 37
    if (key.keyCode === 65 || key.keyCode === 37) {
        World.x += 14;
    }

    // D Key is 68
    // Right arrow is 39
    if (key.keyCode === 68 || key.keyCode === 39) {
        World.x -= 14;
    }
}





//stage.filters = [tiltshiftmode];







	requestAnimationFrame( animate );
	function animate() {
    stats.begin();
		stats.end();
      // just for fun, lets rotate mr rabbit a little
      	    test.rotation += 0.05;

	    // render the stage

      renderer.render(stage);
      requestAnimationFrame( animate );

	}

regards,

Sam

[ivan.popelyshev]

Filters use off-screen buffers to proceed, so there are two ways of fixing this:

1) dont apply filter to large images, at least specify filterArea that actually FITS THE SCREEN. If your container size is 7000x5000, applying filter without specifying the area will be very tragic.

2) You can try to use it as a shader.

sprite.shader = tiltshiftmode;

It worked for some people, I dont know if it will work for you, please test it, its not documented.

[s4m_ur4i]

@ivan.popelyshev thanks a lot! I will test it now! give you feedback anyway  thanks!

EDIT:  Is there a way to specify an area (not a container, it has to be an area ) were I can aply the filter?
- for example the bottom of the visible screen etc.

[xerver]

http://pixijs.github.io/docs/PIXI.Container.html#filterArea

[GBear]

sprite.shader = tiltshiftmode;

does this get more performance  than sprite.filter?

 

[s4m_ur4i]

@GBear - sprite.shader = filterName;
can not see any performance boost. Same same.


@xerver thank's will work it out and then give feedback.

[s4m_ur4i]

applied the filter - is that right?

 

var tiltShift = new PIXI.filters.TiltShiftFilter();

var graphics = new PIXI.Graphics();
	graphics.beginFill(0xFFFF00);
	graphics.drawRect(0, 0, 1280, 720);

World.filterArea = graphics;
World.filters = [tiltShift];

can not see any performance improvement, the rectangle area is the size of the screen (0,0,1280,720) or (0,0,1920,1080);
Performance drops anyway from 60 down to 40. (only one effect, one graphics,.... there is not much).

any ideas? Do I made a mistake?

[chg]

Why would there be a performance improvement? The shader is only evaluated on rasterised pixels...

btw, I doubt it's related to the issue but I think the original post's code has a typo ("blurnumber" instead of "blur")

tiltshiftmode.blurnumber = 120;

[s4m_ur4i]

@chg
ya, was a typo, it's blurnumber = 123;
in my live code it is written right, so ... it was not the issue.

[bubamara]

yes, should be : 

World.blur = 120;
World.filterArea = new PIXI.Rectangle(0, 0, 1280, 720);

try to lower number of passes in tiltShift.frag

for (float t = -30.0; t <= 30.0; t++)

[s4m_ur4i]

@bubamara tiltShift.frag is not defined, not really knowing what you mean - sorry my fault, I am not so familiar with PIXI yet.
Hope you are so kind and explain it for me ?

[bubamara]

You need to clone Pixi repo from github, find that file and recompile. Not behind comp right now, but should be located in filters subdirectory

[xerver]

4 hours ago, SamTheMighty said:

applied the filter - is that right?

 

var tiltShift = new PIXI.filters.TiltShiftFilter();

var graphics = new PIXI.Graphics();
	graphics.beginFill(0xFFFF00);
	graphics.drawRect(0, 0, 1280, 720);

World.filterArea = graphics;
World.filters = [tiltShift];

can not see any performance improvement, the rectangle area is the size of the screen (0,0,1280,720) or (0,0,1920,1080);
Performance drops anyway from 60 down to 40. (only one effect, one graphics,.... there is not much).

any ideas? Do I made a mistake?

Filter area is a rectangle, not a Graphics object.

filterArea = new PIXI.Rectangle(0, 0, width, height);

 

[s4m_ur4i]

@xerver yeah it is, but it's the same context. In fact makes no difference on the framerates, if you use a blur filter, size as of screen resolution pixi performance is really bad. Even if you only have one Sprite drawn to your game. It gets in native app just around 40-45 fps. In chrome 40-44 fps. No performance increasement at all.

[s4m_ur4i]

@bubamara solved! You were right, just noticed pixi uses gulp. super easy, thank you for that! You know what the passes are actually for? (times of rendering?)
by lowering these to -20, 20 I got stable 60 FPS. The tiltShift Effect seems not changed / no seeable frameglitches.

[s4m_ur4i]

now I wanted to see if I could transfer it into PhaserJS, since it supports PIXIJS Filters:
But the Sprite is rendered trough one color instead the real image... or some effect. any idea?
The Code: (Image attached below)

var game = new Phaser.Game(1280, 720, Phaser.WEBGL, this, false, false),
		init = function(){};
init.prototype = {
	preload: function(){
    game.load.script('grayX', 'filters/tiltshiftfilterx.js');
		game.load.script('grayY', 'filters/tiltshiftfiltery.js');
		game.load.script('gray', 'filters/tilshiftfilter.js');

    game.load.image("test", "assets/test.png");
	},
	create: function(){

    var testSprite = game.add.sprite(0,0,'test');
    var tiltShift = new PIXI.TiltShiftFilter();

    console.log(tiltShift);

    tiltShift.blurnumber = 3;
    tiltShift.gradientBlur = 1500;

    testSprite.filters = [tiltShift];

	}
}
game.state.add('init', init);
game.state.start('init');

 

[bubamara]

you need to edit \filters\pixi\TiltShiftXFilter.js and TiltShiftYFilter.js files

change all occurrences of window.screenWidth to window.innerWidth and window.screenHeight to window.innerHeight