Jump to content

Filter performance, tilt shift - WebGL


s4m_ur4i
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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;
Link to comment
Share on other sites

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);

 

Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

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');

 

Bildschirmfoto 2016-01-17 um 21.05.44.png

Link to comment
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...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...