diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 4fca7c8..fb00c44 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -198,7 +198,7 @@ { var gl = this.renderer.gl; - this.renderer.setRenderTarget( outputTarget ); + this.renderer.setRenderTarget(outputTarget); if (clear) { @@ -208,6 +208,7 @@ // set the shader this.renderer.shaderManager.setShader(shader); + // TODO (cengler) - Can this be cached and not `toArray`ed each frame? shader.uniforms.projectionMatrix.value = this.renderer.currentRenderTarget.projectionMatrix.toArray(true); //TODO can this be optimised? diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 4fca7c8..fb00c44 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -198,7 +198,7 @@ { var gl = this.renderer.gl; - this.renderer.setRenderTarget( outputTarget ); + this.renderer.setRenderTarget(outputTarget); if (clear) { @@ -208,6 +208,7 @@ // set the shader this.renderer.shaderManager.setShader(shader); + // TODO (cengler) - Can this be cached and not `toArray`ed each frame? shader.uniforms.projectionMatrix.value = this.renderer.currentRenderTarget.projectionMatrix.toArray(true); //TODO can this be optimised? diff --git a/src/filters/index.js b/src/filters/index.js index 8500a11..5a0f033 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -26,6 +26,7 @@ // NormalMapFilter: require('./NormalMapFilter'), // PixelateFilter: require('./PixelateFilter'), // RGBSplitFilter: require('./RGBSplitFilter'), + ShockwaveFilter: require('./shockwave/ShockwaveFilter'), // SepiaFilter: require('./SepiaFilter'), // SmartBlurFilter: require('./SmartBlurFilter'), // TiltShiftFilter: require('./TiltShiftFilter'), diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 4fca7c8..fb00c44 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -198,7 +198,7 @@ { var gl = this.renderer.gl; - this.renderer.setRenderTarget( outputTarget ); + this.renderer.setRenderTarget(outputTarget); if (clear) { @@ -208,6 +208,7 @@ // set the shader this.renderer.shaderManager.setShader(shader); + // TODO (cengler) - Can this be cached and not `toArray`ed each frame? shader.uniforms.projectionMatrix.value = this.renderer.currentRenderTarget.projectionMatrix.toArray(true); //TODO can this be optimised? diff --git a/src/filters/index.js b/src/filters/index.js index 8500a11..5a0f033 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -26,6 +26,7 @@ // NormalMapFilter: require('./NormalMapFilter'), // PixelateFilter: require('./PixelateFilter'), // RGBSplitFilter: require('./RGBSplitFilter'), + ShockwaveFilter: require('./shockwave/ShockwaveFilter'), // SepiaFilter: require('./SepiaFilter'), // SmartBlurFilter: require('./SmartBlurFilter'), // TiltShiftFilter: require('./TiltShiftFilter'), diff --git a/src/filters/shockwave/ShockwaveFilter.js b/src/filters/shockwave/ShockwaveFilter.js new file mode 100644 index 0000000..2d22b26 --- /dev/null +++ b/src/filters/shockwave/ShockwaveFilter.js @@ -0,0 +1,81 @@ +var core = require('../../core'); + +/** + * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA + * color and alpha values of every pixel on your displayObject to produce a result + * with a new set of RGBA color and alpha values. It's pretty powerful! + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function ShockwaveFilter() +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync(__dirname + '/shockwave.frag', 'utf8'), + // custom uniforms + { + center: { type: 'v2', value: { x: 0.5, y: 0.5 } }, + params: { type: 'v3', value: { x: 10, y: 0.8, z: 0.1 } }, + time: { type: 'f', value: 0 } + } + ); +} + +ShockwaveFilter.prototype = Object.create(core.AbstractFilter.prototype); +ShockwaveFilter.prototype.constructor = ShockwaveFilter; +module.exports = ShockwaveFilter; + +Object.defineProperties(ShockwaveFilter.prototype, { + /** + * Sets the center of the shockwave + * + * @member {object} + * @memberof ShockwaveFilter# + */ + center: { + get: function () + { + return this.uniforms.center.value; + }, + set: function (value) + { + this.uniforms.center.value = value; + } + }, + /** + * Sets the params of the shockwave + * + * @member {object} + * @memberof ShockwaveFilter# + */ + params: { + get: function () + { + return this.uniforms.params.value; + }, + set: function (value) + { + this.uniforms.params.value = value; + } + }, + /** + * Sets the elapsed time of the shockwave + * + * @member {number} + * @memberof ShockwaveFilter# + */ + time: { + get: function () + { + return this.uniforms.time.value; + }, + set: function (value) + { + this.uniforms.time.value = value; + } + } +}); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 4fca7c8..fb00c44 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -198,7 +198,7 @@ { var gl = this.renderer.gl; - this.renderer.setRenderTarget( outputTarget ); + this.renderer.setRenderTarget(outputTarget); if (clear) { @@ -208,6 +208,7 @@ // set the shader this.renderer.shaderManager.setShader(shader); + // TODO (cengler) - Can this be cached and not `toArray`ed each frame? shader.uniforms.projectionMatrix.value = this.renderer.currentRenderTarget.projectionMatrix.toArray(true); //TODO can this be optimised? diff --git a/src/filters/index.js b/src/filters/index.js index 8500a11..5a0f033 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -26,6 +26,7 @@ // NormalMapFilter: require('./NormalMapFilter'), // PixelateFilter: require('./PixelateFilter'), // RGBSplitFilter: require('./RGBSplitFilter'), + ShockwaveFilter: require('./shockwave/ShockwaveFilter'), // SepiaFilter: require('./SepiaFilter'), // SmartBlurFilter: require('./SmartBlurFilter'), // TiltShiftFilter: require('./TiltShiftFilter'), diff --git a/src/filters/shockwave/ShockwaveFilter.js b/src/filters/shockwave/ShockwaveFilter.js new file mode 100644 index 0000000..2d22b26 --- /dev/null +++ b/src/filters/shockwave/ShockwaveFilter.js @@ -0,0 +1,81 @@ +var core = require('../../core'); + +/** + * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA + * color and alpha values of every pixel on your displayObject to produce a result + * with a new set of RGBA color and alpha values. It's pretty powerful! + * + * @class + * @extends AbstractFilter + * @namespace PIXI.filters + */ +function ShockwaveFilter() +{ + core.AbstractFilter.call(this, + // vertex shader + null, + // fragment shader + require('fs').readFileSync(__dirname + '/shockwave.frag', 'utf8'), + // custom uniforms + { + center: { type: 'v2', value: { x: 0.5, y: 0.5 } }, + params: { type: 'v3', value: { x: 10, y: 0.8, z: 0.1 } }, + time: { type: 'f', value: 0 } + } + ); +} + +ShockwaveFilter.prototype = Object.create(core.AbstractFilter.prototype); +ShockwaveFilter.prototype.constructor = ShockwaveFilter; +module.exports = ShockwaveFilter; + +Object.defineProperties(ShockwaveFilter.prototype, { + /** + * Sets the center of the shockwave + * + * @member {object} + * @memberof ShockwaveFilter# + */ + center: { + get: function () + { + return this.uniforms.center.value; + }, + set: function (value) + { + this.uniforms.center.value = value; + } + }, + /** + * Sets the params of the shockwave + * + * @member {object} + * @memberof ShockwaveFilter# + */ + params: { + get: function () + { + return this.uniforms.params.value; + }, + set: function (value) + { + this.uniforms.params.value = value; + } + }, + /** + * Sets the elapsed time of the shockwave + * + * @member {number} + * @memberof ShockwaveFilter# + */ + time: { + get: function () + { + return this.uniforms.time.value; + }, + set: function (value) + { + this.uniforms.time.value = value; + } + } +}); diff --git a/src/filters/shockwave/shockwave.frag b/src/filters/shockwave/shockwave.frag new file mode 100644 index 0000000..f25870c --- /dev/null +++ b/src/filters/shockwave/shockwave.frag @@ -0,0 +1,29 @@ +precision lowp float; + +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; + +uniform vec2 center; +uniform vec3 params; // 10.0, 0.8, 0.1 +uniform float time; + +void main() +{ + vec2 uv = vTextureCoord; + vec2 texCoord = uv; + + float dist = distance(uv, center); + + if ( (dist <= (time + params.z)) && (dist >= (time - params.z)) ) + { + float diff = (dist - time); + float powDiff = 1.0 - pow(abs(diff*params.x), params.y); + + float diffTime = diff * powDiff; + vec2 diffUV = normalize(uv - center); + texCoord = uv + (diffUV * diffTime); + } + + gl_FragColor = texture2D(uSampler, texCoord); +}