Search the Community

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