var core = require('../../core'); /** * @author Vico @vicocotea * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/ */ /** * A TiltShiftXFilter. * * @class * @extends AbstractFilter * @namespace PIXI.filters */ function TiltShiftXFilter() { core.AbstractFilter.call(this, // vertex shader null, // fragment shader require('fs').readFileSync(__dirname + '/tiltShift.frag', 'utf8'), // custom uniforms { blur: { type: '1f', value: 100 }, gradientBlur: { type: '1f', value: 600 }, start: { type: 'v2', value: { x: 0, y: window.innerHeight / 2 } }, end: { type: 'v2', value: { x: 600, y: window.innerHeight / 2 } }, delta: { type: 'v2', value: { x: 30, y: 30 } }, texSize: { type: 'v2', value: { x: window.innerWidth, y: window.innerHeight } } } ); this.updateDelta(); } TiltShiftXFilter.prototype = Object.create(core.AbstractFilter.prototype); TiltShiftXFilter.prototype.constructor = TiltShiftXFilter; module.exports = TiltShiftXFilter; /** * Updates the filter delta values. * */ TiltShiftXFilter.prototype.updateDelta = function () { var dx = this.uniforms.end.value.x - this.uniforms.start.value.x; var dy = this.uniforms.end.value.y - this.uniforms.start.value.y; var d = Math.sqrt(dx * dx + dy * dy); // TODO (cengler) - These two lines are the only lines that are different between // the TileShiftXFilter and TiltShiftYFilter.... this.uniforms.delta.value.x = dx / d; this.uniforms.delta.value.y = dy / d; }; Object.defineProperties(TiltShiftXFilter.prototype, { /** * The strength of the blur. * * @member {number} * @memberof TilttShiftXFilter# */ blur: { get: function () { return this.uniforms.blur.value; }, set: function (value) { this.uniforms.blur.value = value; } }, /** * The strength of the gradient blur. * * @member {number} * @memberof TilttShiftXFilter# */ gradientBlur: { get: function () { return this.uniforms.gradientBlur.value; }, set: function (value) { this.uniforms.gradientBlur.value = value; } }, /** * The X value to start the effect at. * * @member {Point} * @memberof TilttShiftXFilter# */ start: { get: function () { return this.uniforms.start.value; }, set: function (value) { this.uniforms.start.value = value; this.updateDelta(); } }, /** * The X value to end the effect at. * * @member {Point} * @memberof TilttShiftXFilter# */ end: { get: function () { return this.uniforms.end.value; }, set: function (value) { this.uniforms.end.value = value; this.updateDelta(); } } });