diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 228b419..d2f618d 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -34,7 +34,7 @@ var type = splitLine[1]; var name = splitLine[2]; - var size = mapSize(type); + var size = 1; if(name.indexOf('[') > -1) { diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 228b419..d2f618d 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -34,7 +34,7 @@ var type = splitLine[1]; var name = splitLine[2]; - var size = mapSize(type); + var size = 1; if(name.indexOf('[') > -1) { diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index b443cf4..0c426a5 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -277,7 +277,7 @@ //check if its a point.. if(uniforms[i].x !== undefined) { - val = shader.uniforms[i]; + val = shader.uniforms[i] || new Float32Array(2); val[0] = uniforms[i].x; val[1] = uniforms[i].y; shader.uniforms[i] = val; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 228b419..d2f618d 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -34,7 +34,7 @@ var type = splitLine[1]; var name = splitLine[2]; - var size = mapSize(type); + var size = 1; if(name.indexOf('[') > -1) { diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index b443cf4..0c426a5 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -277,7 +277,7 @@ //check if its a point.. if(uniforms[i].x !== undefined) { - val = shader.uniforms[i]; + val = shader.uniforms[i] || new Float32Array(2); val[0] = uniforms[i].x; val[1] = uniforms[i].y; shader.uniforms[i] = val; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 6c35186..91b500e 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -21,7 +21,7 @@ { core.Filter.call(this, // vertex shader - glslify('./colorMatrix.vert'), + glslify('../fragments/default.vert'), // fragment shader glslify('./colorMatrix.frag') ); @@ -186,34 +186,34 @@ ColorMatrixFilter.prototype.hue = function (rotation, multiply) { rotation = (rotation || 0) / 180 * Math.PI; - + var cosR = Math.cos(rotation), sinR = Math.sin(rotation), sqrt = Math.sqrt; - + /*a good approximation for hue rotation This matrix is far better than the versions with magic luminance constants formerly used here, but also used in the starling framework (flash) and known from this old part of the internet: quasimondo.com/archives/000565.php - + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive implementation as a shader not a general matrix: https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - + This is the source for the code: see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 */ - + var w = 1/3, sqrW = sqrt(w);//weight is var a00 = cosR + (1.0 - cosR) * w; var a01 = w * (1.0 - cosR) - sqrW * sinR; var a02 = w * (1.0 - cosR) + sqrW * sinR; - + var a10 = w * (1.0 - cosR) + sqrW * sinR; var a11 = cosR + w*(1.0 - cosR); var a12 = w * (1.0 - cosR) - sqrW * sinR; - + var a20 = w * (1.0 - cosR) - sqrW * sinR; var a21 = w * (1.0 - cosR) + sqrW * sinR; var a22 = cosR + w * (1.0 - cosR); diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 228b419..d2f618d 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -34,7 +34,7 @@ var type = splitLine[1]; var name = splitLine[2]; - var size = mapSize(type); + var size = 1; if(name.indexOf('[') > -1) { diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index b443cf4..0c426a5 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -277,7 +277,7 @@ //check if its a point.. if(uniforms[i].x !== undefined) { - val = shader.uniforms[i]; + val = shader.uniforms[i] || new Float32Array(2); val[0] = uniforms[i].x; val[1] = uniforms[i].y; shader.uniforms[i] = val; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 6c35186..91b500e 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -21,7 +21,7 @@ { core.Filter.call(this, // vertex shader - glslify('./colorMatrix.vert'), + glslify('../fragments/default.vert'), // fragment shader glslify('./colorMatrix.frag') ); @@ -186,34 +186,34 @@ ColorMatrixFilter.prototype.hue = function (rotation, multiply) { rotation = (rotation || 0) / 180 * Math.PI; - + var cosR = Math.cos(rotation), sinR = Math.sin(rotation), sqrt = Math.sqrt; - + /*a good approximation for hue rotation This matrix is far better than the versions with magic luminance constants formerly used here, but also used in the starling framework (flash) and known from this old part of the internet: quasimondo.com/archives/000565.php - + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive implementation as a shader not a general matrix: https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - + This is the source for the code: see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 */ - + var w = 1/3, sqrW = sqrt(w);//weight is var a00 = cosR + (1.0 - cosR) * w; var a01 = w * (1.0 - cosR) - sqrW * sinR; var a02 = w * (1.0 - cosR) + sqrW * sinR; - + var a10 = w * (1.0 - cosR) + sqrW * sinR; var a11 = cosR + w*(1.0 - cosR); var a12 = w * (1.0 - cosR) - sqrW * sinR; - + var a20 = w * (1.0 - cosR) - sqrW * sinR; var a21 = w * (1.0 - cosR) + sqrW * sinR; var a22 = cosR + w * (1.0 - cosR); diff --git a/src/filters/colormatrix/colorMatrix.vert b/src/filters/colormatrix/colorMatrix.vert deleted file mode 100644 index 787220d..0000000 --- a/src/filters/colormatrix/colorMatrix.vert +++ /dev/null @@ -1,10 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void){ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 228b419..d2f618d 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -34,7 +34,7 @@ var type = splitLine[1]; var name = splitLine[2]; - var size = mapSize(type); + var size = 1; if(name.indexOf('[') > -1) { diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index b443cf4..0c426a5 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -277,7 +277,7 @@ //check if its a point.. if(uniforms[i].x !== undefined) { - val = shader.uniforms[i]; + val = shader.uniforms[i] || new Float32Array(2); val[0] = uniforms[i].x; val[1] = uniforms[i].y; shader.uniforms[i] = val; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 6c35186..91b500e 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -21,7 +21,7 @@ { core.Filter.call(this, // vertex shader - glslify('./colorMatrix.vert'), + glslify('../fragments/default.vert'), // fragment shader glslify('./colorMatrix.frag') ); @@ -186,34 +186,34 @@ ColorMatrixFilter.prototype.hue = function (rotation, multiply) { rotation = (rotation || 0) / 180 * Math.PI; - + var cosR = Math.cos(rotation), sinR = Math.sin(rotation), sqrt = Math.sqrt; - + /*a good approximation for hue rotation This matrix is far better than the versions with magic luminance constants formerly used here, but also used in the starling framework (flash) and known from this old part of the internet: quasimondo.com/archives/000565.php - + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive implementation as a shader not a general matrix: https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - + This is the source for the code: see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 */ - + var w = 1/3, sqrW = sqrt(w);//weight is var a00 = cosR + (1.0 - cosR) * w; var a01 = w * (1.0 - cosR) - sqrW * sinR; var a02 = w * (1.0 - cosR) + sqrW * sinR; - + var a10 = w * (1.0 - cosR) + sqrW * sinR; var a11 = cosR + w*(1.0 - cosR); var a12 = w * (1.0 - cosR) - sqrW * sinR; - + var a20 = w * (1.0 - cosR) - sqrW * sinR; var a21 = w * (1.0 - cosR) + sqrW * sinR; var a22 = cosR + w * (1.0 - cosR); diff --git a/src/filters/colormatrix/colorMatrix.vert b/src/filters/colormatrix/colorMatrix.vert deleted file mode 100644 index 787220d..0000000 --- a/src/filters/colormatrix/colorMatrix.vert +++ /dev/null @@ -1,10 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void){ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index aa18fda..32276a1 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -19,7 +19,8 @@ core.Filter.call(this, // vertex shader - glslify('./displacement.vert'), +// glslify('./displacement.vert'), + glslify('../fragments/default-filter-matrix.vert'), // fragment shader glslify('./displacement.frag') @@ -29,7 +30,7 @@ this.maskMatrix = maskMatrix; this.uniforms.mapSampler = sprite.texture; - this.uniforms.otherMatrix = maskMatrix.toArray(true); + this.uniforms.filterMatrix = maskMatrix.toArray(true); this.uniforms.scale = { x: 1, y: 1 }; if (scale === null || scale === undefined) @@ -48,7 +49,7 @@ { var ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); - this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); + this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); this.uniforms.scale.x = this.scale.x * ratio; this.uniforms.scale.y = this.scale.y * ratio; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 228b419..d2f618d 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -34,7 +34,7 @@ var type = splitLine[1]; var name = splitLine[2]; - var size = mapSize(type); + var size = 1; if(name.indexOf('[') > -1) { diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index b443cf4..0c426a5 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -277,7 +277,7 @@ //check if its a point.. if(uniforms[i].x !== undefined) { - val = shader.uniforms[i]; + val = shader.uniforms[i] || new Float32Array(2); val[0] = uniforms[i].x; val[1] = uniforms[i].y; shader.uniforms[i] = val; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 6c35186..91b500e 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -21,7 +21,7 @@ { core.Filter.call(this, // vertex shader - glslify('./colorMatrix.vert'), + glslify('../fragments/default.vert'), // fragment shader glslify('./colorMatrix.frag') ); @@ -186,34 +186,34 @@ ColorMatrixFilter.prototype.hue = function (rotation, multiply) { rotation = (rotation || 0) / 180 * Math.PI; - + var cosR = Math.cos(rotation), sinR = Math.sin(rotation), sqrt = Math.sqrt; - + /*a good approximation for hue rotation This matrix is far better than the versions with magic luminance constants formerly used here, but also used in the starling framework (flash) and known from this old part of the internet: quasimondo.com/archives/000565.php - + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive implementation as a shader not a general matrix: https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - + This is the source for the code: see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 */ - + var w = 1/3, sqrW = sqrt(w);//weight is var a00 = cosR + (1.0 - cosR) * w; var a01 = w * (1.0 - cosR) - sqrW * sinR; var a02 = w * (1.0 - cosR) + sqrW * sinR; - + var a10 = w * (1.0 - cosR) + sqrW * sinR; var a11 = cosR + w*(1.0 - cosR); var a12 = w * (1.0 - cosR) - sqrW * sinR; - + var a20 = w * (1.0 - cosR) - sqrW * sinR; var a21 = w * (1.0 - cosR) + sqrW * sinR; var a22 = cosR + w * (1.0 - cosR); diff --git a/src/filters/colormatrix/colorMatrix.vert b/src/filters/colormatrix/colorMatrix.vert deleted file mode 100644 index 787220d..0000000 --- a/src/filters/colormatrix/colorMatrix.vert +++ /dev/null @@ -1,10 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void){ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index aa18fda..32276a1 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -19,7 +19,8 @@ core.Filter.call(this, // vertex shader - glslify('./displacement.vert'), +// glslify('./displacement.vert'), + glslify('../fragments/default-filter-matrix.vert'), // fragment shader glslify('./displacement.frag') @@ -29,7 +30,7 @@ this.maskMatrix = maskMatrix; this.uniforms.mapSampler = sprite.texture; - this.uniforms.otherMatrix = maskMatrix.toArray(true); + this.uniforms.filterMatrix = maskMatrix.toArray(true); this.uniforms.scale = { x: 1, y: 1 }; if (scale === null || scale === undefined) @@ -48,7 +49,7 @@ { var ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); - this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); + this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); this.uniforms.scale.x = this.scale.x * ratio; this.uniforms.scale.y = this.scale.y * ratio; diff --git a/src/filters/displacement/displacement.frag b/src/filters/displacement/displacement.frag index c989687..e7e4053 100644 --- a/src/filters/displacement/displacement.frag +++ b/src/filters/displacement/displacement.frag @@ -1,4 +1,4 @@ -varying vec2 vMapCoord; +varying vec2 vFilterCoord; varying vec2 vTextureCoord; uniform vec2 scale; @@ -10,7 +10,7 @@ void main(void) { - vec4 map = texture2D(mapSampler, vMapCoord); + vec4 map = texture2D(mapSampler, vFilterCoord); map -= 0.5; map.xy *= scale; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 228b419..d2f618d 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -34,7 +34,7 @@ var type = splitLine[1]; var name = splitLine[2]; - var size = mapSize(type); + var size = 1; if(name.indexOf('[') > -1) { diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index b443cf4..0c426a5 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -277,7 +277,7 @@ //check if its a point.. if(uniforms[i].x !== undefined) { - val = shader.uniforms[i]; + val = shader.uniforms[i] || new Float32Array(2); val[0] = uniforms[i].x; val[1] = uniforms[i].y; shader.uniforms[i] = val; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 6c35186..91b500e 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -21,7 +21,7 @@ { core.Filter.call(this, // vertex shader - glslify('./colorMatrix.vert'), + glslify('../fragments/default.vert'), // fragment shader glslify('./colorMatrix.frag') ); @@ -186,34 +186,34 @@ ColorMatrixFilter.prototype.hue = function (rotation, multiply) { rotation = (rotation || 0) / 180 * Math.PI; - + var cosR = Math.cos(rotation), sinR = Math.sin(rotation), sqrt = Math.sqrt; - + /*a good approximation for hue rotation This matrix is far better than the versions with magic luminance constants formerly used here, but also used in the starling framework (flash) and known from this old part of the internet: quasimondo.com/archives/000565.php - + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive implementation as a shader not a general matrix: https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - + This is the source for the code: see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 */ - + var w = 1/3, sqrW = sqrt(w);//weight is var a00 = cosR + (1.0 - cosR) * w; var a01 = w * (1.0 - cosR) - sqrW * sinR; var a02 = w * (1.0 - cosR) + sqrW * sinR; - + var a10 = w * (1.0 - cosR) + sqrW * sinR; var a11 = cosR + w*(1.0 - cosR); var a12 = w * (1.0 - cosR) - sqrW * sinR; - + var a20 = w * (1.0 - cosR) - sqrW * sinR; var a21 = w * (1.0 - cosR) + sqrW * sinR; var a22 = cosR + w * (1.0 - cosR); diff --git a/src/filters/colormatrix/colorMatrix.vert b/src/filters/colormatrix/colorMatrix.vert deleted file mode 100644 index 787220d..0000000 --- a/src/filters/colormatrix/colorMatrix.vert +++ /dev/null @@ -1,10 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void){ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index aa18fda..32276a1 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -19,7 +19,8 @@ core.Filter.call(this, // vertex shader - glslify('./displacement.vert'), +// glslify('./displacement.vert'), + glslify('../fragments/default-filter-matrix.vert'), // fragment shader glslify('./displacement.frag') @@ -29,7 +30,7 @@ this.maskMatrix = maskMatrix; this.uniforms.mapSampler = sprite.texture; - this.uniforms.otherMatrix = maskMatrix.toArray(true); + this.uniforms.filterMatrix = maskMatrix.toArray(true); this.uniforms.scale = { x: 1, y: 1 }; if (scale === null || scale === undefined) @@ -48,7 +49,7 @@ { var ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); - this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); + this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); this.uniforms.scale.x = this.scale.x * ratio; this.uniforms.scale.y = this.scale.y * ratio; diff --git a/src/filters/displacement/displacement.frag b/src/filters/displacement/displacement.frag index c989687..e7e4053 100644 --- a/src/filters/displacement/displacement.frag +++ b/src/filters/displacement/displacement.frag @@ -1,4 +1,4 @@ -varying vec2 vMapCoord; +varying vec2 vFilterCoord; varying vec2 vTextureCoord; uniform vec2 scale; @@ -10,7 +10,7 @@ void main(void) { - vec4 map = texture2D(mapSampler, vMapCoord); + vec4 map = texture2D(mapSampler, vFilterCoord); map -= 0.5; map.xy *= scale; diff --git a/src/filters/displacement/displacement.vert b/src/filters/displacement/displacement.vert deleted file mode 100644 index 42be4b6..0000000 --- a/src/filters/displacement/displacement.vert +++ /dev/null @@ -1,15 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -uniform mat3 otherMatrix; - -varying vec2 vMapCoord; -varying vec2 vTextureCoord; - -void main(void) -{ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; - vMapCoord = ( otherMatrix * vec3( aTextureCoord, 1.0) ).xy; -} diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 228b419..d2f618d 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -34,7 +34,7 @@ var type = splitLine[1]; var name = splitLine[2]; - var size = mapSize(type); + var size = 1; if(name.indexOf('[') > -1) { diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index b443cf4..0c426a5 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -277,7 +277,7 @@ //check if its a point.. if(uniforms[i].x !== undefined) { - val = shader.uniforms[i]; + val = shader.uniforms[i] || new Float32Array(2); val[0] = uniforms[i].x; val[1] = uniforms[i].y; shader.uniforms[i] = val; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 6c35186..91b500e 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -21,7 +21,7 @@ { core.Filter.call(this, // vertex shader - glslify('./colorMatrix.vert'), + glslify('../fragments/default.vert'), // fragment shader glslify('./colorMatrix.frag') ); @@ -186,34 +186,34 @@ ColorMatrixFilter.prototype.hue = function (rotation, multiply) { rotation = (rotation || 0) / 180 * Math.PI; - + var cosR = Math.cos(rotation), sinR = Math.sin(rotation), sqrt = Math.sqrt; - + /*a good approximation for hue rotation This matrix is far better than the versions with magic luminance constants formerly used here, but also used in the starling framework (flash) and known from this old part of the internet: quasimondo.com/archives/000565.php - + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive implementation as a shader not a general matrix: https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - + This is the source for the code: see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 */ - + var w = 1/3, sqrW = sqrt(w);//weight is var a00 = cosR + (1.0 - cosR) * w; var a01 = w * (1.0 - cosR) - sqrW * sinR; var a02 = w * (1.0 - cosR) + sqrW * sinR; - + var a10 = w * (1.0 - cosR) + sqrW * sinR; var a11 = cosR + w*(1.0 - cosR); var a12 = w * (1.0 - cosR) - sqrW * sinR; - + var a20 = w * (1.0 - cosR) - sqrW * sinR; var a21 = w * (1.0 - cosR) + sqrW * sinR; var a22 = cosR + w * (1.0 - cosR); diff --git a/src/filters/colormatrix/colorMatrix.vert b/src/filters/colormatrix/colorMatrix.vert deleted file mode 100644 index 787220d..0000000 --- a/src/filters/colormatrix/colorMatrix.vert +++ /dev/null @@ -1,10 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void){ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index aa18fda..32276a1 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -19,7 +19,8 @@ core.Filter.call(this, // vertex shader - glslify('./displacement.vert'), +// glslify('./displacement.vert'), + glslify('../fragments/default-filter-matrix.vert'), // fragment shader glslify('./displacement.frag') @@ -29,7 +30,7 @@ this.maskMatrix = maskMatrix; this.uniforms.mapSampler = sprite.texture; - this.uniforms.otherMatrix = maskMatrix.toArray(true); + this.uniforms.filterMatrix = maskMatrix.toArray(true); this.uniforms.scale = { x: 1, y: 1 }; if (scale === null || scale === undefined) @@ -48,7 +49,7 @@ { var ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); - this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); + this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); this.uniforms.scale.x = this.scale.x * ratio; this.uniforms.scale.y = this.scale.y * ratio; diff --git a/src/filters/displacement/displacement.frag b/src/filters/displacement/displacement.frag index c989687..e7e4053 100644 --- a/src/filters/displacement/displacement.frag +++ b/src/filters/displacement/displacement.frag @@ -1,4 +1,4 @@ -varying vec2 vMapCoord; +varying vec2 vFilterCoord; varying vec2 vTextureCoord; uniform vec2 scale; @@ -10,7 +10,7 @@ void main(void) { - vec4 map = texture2D(mapSampler, vMapCoord); + vec4 map = texture2D(mapSampler, vFilterCoord); map -= 0.5; map.xy *= scale; diff --git a/src/filters/displacement/displacement.vert b/src/filters/displacement/displacement.vert deleted file mode 100644 index 42be4b6..0000000 --- a/src/filters/displacement/displacement.vert +++ /dev/null @@ -1,15 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -uniform mat3 otherMatrix; - -varying vec2 vMapCoord; -varying vec2 vTextureCoord; - -void main(void) -{ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; - vMapCoord = ( otherMatrix * vec3( aTextureCoord, 1.0) ).xy; -} diff --git a/src/filters/fragments/default-filter-matrix.vert b/src/filters/fragments/default-filter-matrix.vert new file mode 100755 index 0000000..75f1824 --- /dev/null +++ b/src/filters/fragments/default-filter-matrix.vert @@ -0,0 +1,15 @@ +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; + +uniform mat3 projectionMatrix; +uniform mat3 filterMatrix; + +varying vec2 vTextureCoord; +varying vec2 vFilterCoord; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy; + vTextureCoord = aTextureCoord; +} \ No newline at end of file diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 228b419..d2f618d 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -34,7 +34,7 @@ var type = splitLine[1]; var name = splitLine[2]; - var size = mapSize(type); + var size = 1; if(name.indexOf('[') > -1) { diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index b443cf4..0c426a5 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -277,7 +277,7 @@ //check if its a point.. if(uniforms[i].x !== undefined) { - val = shader.uniforms[i]; + val = shader.uniforms[i] || new Float32Array(2); val[0] = uniforms[i].x; val[1] = uniforms[i].y; shader.uniforms[i] = val; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 6c35186..91b500e 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -21,7 +21,7 @@ { core.Filter.call(this, // vertex shader - glslify('./colorMatrix.vert'), + glslify('../fragments/default.vert'), // fragment shader glslify('./colorMatrix.frag') ); @@ -186,34 +186,34 @@ ColorMatrixFilter.prototype.hue = function (rotation, multiply) { rotation = (rotation || 0) / 180 * Math.PI; - + var cosR = Math.cos(rotation), sinR = Math.sin(rotation), sqrt = Math.sqrt; - + /*a good approximation for hue rotation This matrix is far better than the versions with magic luminance constants formerly used here, but also used in the starling framework (flash) and known from this old part of the internet: quasimondo.com/archives/000565.php - + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive implementation as a shader not a general matrix: https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - + This is the source for the code: see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 */ - + var w = 1/3, sqrW = sqrt(w);//weight is var a00 = cosR + (1.0 - cosR) * w; var a01 = w * (1.0 - cosR) - sqrW * sinR; var a02 = w * (1.0 - cosR) + sqrW * sinR; - + var a10 = w * (1.0 - cosR) + sqrW * sinR; var a11 = cosR + w*(1.0 - cosR); var a12 = w * (1.0 - cosR) - sqrW * sinR; - + var a20 = w * (1.0 - cosR) - sqrW * sinR; var a21 = w * (1.0 - cosR) + sqrW * sinR; var a22 = cosR + w * (1.0 - cosR); diff --git a/src/filters/colormatrix/colorMatrix.vert b/src/filters/colormatrix/colorMatrix.vert deleted file mode 100644 index 787220d..0000000 --- a/src/filters/colormatrix/colorMatrix.vert +++ /dev/null @@ -1,10 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void){ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index aa18fda..32276a1 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -19,7 +19,8 @@ core.Filter.call(this, // vertex shader - glslify('./displacement.vert'), +// glslify('./displacement.vert'), + glslify('../fragments/default-filter-matrix.vert'), // fragment shader glslify('./displacement.frag') @@ -29,7 +30,7 @@ this.maskMatrix = maskMatrix; this.uniforms.mapSampler = sprite.texture; - this.uniforms.otherMatrix = maskMatrix.toArray(true); + this.uniforms.filterMatrix = maskMatrix.toArray(true); this.uniforms.scale = { x: 1, y: 1 }; if (scale === null || scale === undefined) @@ -48,7 +49,7 @@ { var ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); - this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); + this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); this.uniforms.scale.x = this.scale.x * ratio; this.uniforms.scale.y = this.scale.y * ratio; diff --git a/src/filters/displacement/displacement.frag b/src/filters/displacement/displacement.frag index c989687..e7e4053 100644 --- a/src/filters/displacement/displacement.frag +++ b/src/filters/displacement/displacement.frag @@ -1,4 +1,4 @@ -varying vec2 vMapCoord; +varying vec2 vFilterCoord; varying vec2 vTextureCoord; uniform vec2 scale; @@ -10,7 +10,7 @@ void main(void) { - vec4 map = texture2D(mapSampler, vMapCoord); + vec4 map = texture2D(mapSampler, vFilterCoord); map -= 0.5; map.xy *= scale; diff --git a/src/filters/displacement/displacement.vert b/src/filters/displacement/displacement.vert deleted file mode 100644 index 42be4b6..0000000 --- a/src/filters/displacement/displacement.vert +++ /dev/null @@ -1,15 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -uniform mat3 otherMatrix; - -varying vec2 vMapCoord; -varying vec2 vTextureCoord; - -void main(void) -{ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; - vMapCoord = ( otherMatrix * vec3( aTextureCoord, 1.0) ).xy; -} diff --git a/src/filters/fragments/default-filter-matrix.vert b/src/filters/fragments/default-filter-matrix.vert new file mode 100755 index 0000000..75f1824 --- /dev/null +++ b/src/filters/fragments/default-filter-matrix.vert @@ -0,0 +1,15 @@ +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; + +uniform mat3 projectionMatrix; +uniform mat3 filterMatrix; + +varying vec2 vTextureCoord; +varying vec2 vFilterCoord; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy; + vTextureCoord = aTextureCoord; +} \ No newline at end of file diff --git a/src/filters/fragments/default.vert b/src/filters/fragments/default.vert new file mode 100755 index 0000000..1b744d2 --- /dev/null +++ b/src/filters/fragments/default.vert @@ -0,0 +1,12 @@ +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; + +uniform mat3 projectionMatrix; + +varying vec2 vTextureCoord; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + vTextureCoord = aTextureCoord; +} \ No newline at end of file diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 228b419..d2f618d 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -34,7 +34,7 @@ var type = splitLine[1]; var name = splitLine[2]; - var size = mapSize(type); + var size = 1; if(name.indexOf('[') > -1) { diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index b443cf4..0c426a5 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -277,7 +277,7 @@ //check if its a point.. if(uniforms[i].x !== undefined) { - val = shader.uniforms[i]; + val = shader.uniforms[i] || new Float32Array(2); val[0] = uniforms[i].x; val[1] = uniforms[i].y; shader.uniforms[i] = val; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 6c35186..91b500e 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -21,7 +21,7 @@ { core.Filter.call(this, // vertex shader - glslify('./colorMatrix.vert'), + glslify('../fragments/default.vert'), // fragment shader glslify('./colorMatrix.frag') ); @@ -186,34 +186,34 @@ ColorMatrixFilter.prototype.hue = function (rotation, multiply) { rotation = (rotation || 0) / 180 * Math.PI; - + var cosR = Math.cos(rotation), sinR = Math.sin(rotation), sqrt = Math.sqrt; - + /*a good approximation for hue rotation This matrix is far better than the versions with magic luminance constants formerly used here, but also used in the starling framework (flash) and known from this old part of the internet: quasimondo.com/archives/000565.php - + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive implementation as a shader not a general matrix: https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - + This is the source for the code: see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 */ - + var w = 1/3, sqrW = sqrt(w);//weight is var a00 = cosR + (1.0 - cosR) * w; var a01 = w * (1.0 - cosR) - sqrW * sinR; var a02 = w * (1.0 - cosR) + sqrW * sinR; - + var a10 = w * (1.0 - cosR) + sqrW * sinR; var a11 = cosR + w*(1.0 - cosR); var a12 = w * (1.0 - cosR) - sqrW * sinR; - + var a20 = w * (1.0 - cosR) - sqrW * sinR; var a21 = w * (1.0 - cosR) + sqrW * sinR; var a22 = cosR + w * (1.0 - cosR); diff --git a/src/filters/colormatrix/colorMatrix.vert b/src/filters/colormatrix/colorMatrix.vert deleted file mode 100644 index 787220d..0000000 --- a/src/filters/colormatrix/colorMatrix.vert +++ /dev/null @@ -1,10 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void){ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index aa18fda..32276a1 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -19,7 +19,8 @@ core.Filter.call(this, // vertex shader - glslify('./displacement.vert'), +// glslify('./displacement.vert'), + glslify('../fragments/default-filter-matrix.vert'), // fragment shader glslify('./displacement.frag') @@ -29,7 +30,7 @@ this.maskMatrix = maskMatrix; this.uniforms.mapSampler = sprite.texture; - this.uniforms.otherMatrix = maskMatrix.toArray(true); + this.uniforms.filterMatrix = maskMatrix.toArray(true); this.uniforms.scale = { x: 1, y: 1 }; if (scale === null || scale === undefined) @@ -48,7 +49,7 @@ { var ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); - this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); + this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); this.uniforms.scale.x = this.scale.x * ratio; this.uniforms.scale.y = this.scale.y * ratio; diff --git a/src/filters/displacement/displacement.frag b/src/filters/displacement/displacement.frag index c989687..e7e4053 100644 --- a/src/filters/displacement/displacement.frag +++ b/src/filters/displacement/displacement.frag @@ -1,4 +1,4 @@ -varying vec2 vMapCoord; +varying vec2 vFilterCoord; varying vec2 vTextureCoord; uniform vec2 scale; @@ -10,7 +10,7 @@ void main(void) { - vec4 map = texture2D(mapSampler, vMapCoord); + vec4 map = texture2D(mapSampler, vFilterCoord); map -= 0.5; map.xy *= scale; diff --git a/src/filters/displacement/displacement.vert b/src/filters/displacement/displacement.vert deleted file mode 100644 index 42be4b6..0000000 --- a/src/filters/displacement/displacement.vert +++ /dev/null @@ -1,15 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -uniform mat3 otherMatrix; - -varying vec2 vMapCoord; -varying vec2 vTextureCoord; - -void main(void) -{ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; - vMapCoord = ( otherMatrix * vec3( aTextureCoord, 1.0) ).xy; -} diff --git a/src/filters/fragments/default-filter-matrix.vert b/src/filters/fragments/default-filter-matrix.vert new file mode 100755 index 0000000..75f1824 --- /dev/null +++ b/src/filters/fragments/default-filter-matrix.vert @@ -0,0 +1,15 @@ +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; + +uniform mat3 projectionMatrix; +uniform mat3 filterMatrix; + +varying vec2 vTextureCoord; +varying vec2 vFilterCoord; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy; + vTextureCoord = aTextureCoord; +} \ No newline at end of file diff --git a/src/filters/fragments/default.vert b/src/filters/fragments/default.vert new file mode 100755 index 0000000..1b744d2 --- /dev/null +++ b/src/filters/fragments/default.vert @@ -0,0 +1,12 @@ +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; + +uniform mat3 projectionMatrix; + +varying vec2 vTextureCoord; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + vTextureCoord = aTextureCoord; +} \ No newline at end of file diff --git a/src/filters/godray/GodrayFilter.js b/src/filters/godray/GodrayFilter.js deleted file mode 100644 index 28c9a42..0000000 --- a/src/filters/godray/GodrayFilter.js +++ /dev/null @@ -1,91 +0,0 @@ -var core = require('../../core'); -var glslify = require('glslify'); - -/** - * This filter applies a twist effect making display objects appear twisted in the given direction. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -function GodrayFilter() -{ - core.Filter.call(this, - // vertex shader - - glslify('./godray.vert', 'utf8'), - // fragment shader - glslify('./godray.frag', 'utf8') - ); - - this.uniforms.exposure = 0.0034; - this.uniforms.decay = 1.0; - this.uniforms.density = 0.84; - this.uniforms.weight = 5.65; - - this.uniforms.lightPositionOnScreen[0] = 0.5;///0.5; - this.uniforms.lightPositionOnScreen[1] = 0.5;//; -} - -GodrayFilter.prototype = Object.create(core.Filter.prototype); -GodrayFilter.prototype.constructor = GodrayFilter; -module.exports = GodrayFilter; - -GodrayFilter.prototype.apply = function (filterManager, input, output, clear) -{ - - filterManager.applyFilter(this, input, output, clear); -}; - -Object.defineProperties(GodrayFilter.prototype, { - /** - * This point describes the the offset of the twist. - * - * @member {PIXI.Point} - * @memberof PIXI.filters.GodrayFilter# - */ - offset: { - get: function () - { - return this.uniforms.offset; - }, - set: function (value) - { - this.uniforms.offset = value; - } - }, - - /** - * This radius of the twist. - * - * @member {number} - * @memberof PIXI.filters.GodrayFilter# - */ - radius: { - get: function () - { - return this.uniforms.radius; - }, - set: function (value) - { - this.uniforms.radius = value; - } - }, - - /** - * This angle of the twist. - * - * @member {number} - * @memberof PIXI.filters.GodrayFilter# - */ - angle: { - get: function () - { - return this.uniforms.angle; - }, - set: function (value) - { - this.uniforms.angle = value; - } - } -}); diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 228b419..d2f618d 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -34,7 +34,7 @@ var type = splitLine[1]; var name = splitLine[2]; - var size = mapSize(type); + var size = 1; if(name.indexOf('[') > -1) { diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index b443cf4..0c426a5 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -277,7 +277,7 @@ //check if its a point.. if(uniforms[i].x !== undefined) { - val = shader.uniforms[i]; + val = shader.uniforms[i] || new Float32Array(2); val[0] = uniforms[i].x; val[1] = uniforms[i].y; shader.uniforms[i] = val; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 6c35186..91b500e 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -21,7 +21,7 @@ { core.Filter.call(this, // vertex shader - glslify('./colorMatrix.vert'), + glslify('../fragments/default.vert'), // fragment shader glslify('./colorMatrix.frag') ); @@ -186,34 +186,34 @@ ColorMatrixFilter.prototype.hue = function (rotation, multiply) { rotation = (rotation || 0) / 180 * Math.PI; - + var cosR = Math.cos(rotation), sinR = Math.sin(rotation), sqrt = Math.sqrt; - + /*a good approximation for hue rotation This matrix is far better than the versions with magic luminance constants formerly used here, but also used in the starling framework (flash) and known from this old part of the internet: quasimondo.com/archives/000565.php - + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive implementation as a shader not a general matrix: https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - + This is the source for the code: see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 */ - + var w = 1/3, sqrW = sqrt(w);//weight is var a00 = cosR + (1.0 - cosR) * w; var a01 = w * (1.0 - cosR) - sqrW * sinR; var a02 = w * (1.0 - cosR) + sqrW * sinR; - + var a10 = w * (1.0 - cosR) + sqrW * sinR; var a11 = cosR + w*(1.0 - cosR); var a12 = w * (1.0 - cosR) - sqrW * sinR; - + var a20 = w * (1.0 - cosR) - sqrW * sinR; var a21 = w * (1.0 - cosR) + sqrW * sinR; var a22 = cosR + w * (1.0 - cosR); diff --git a/src/filters/colormatrix/colorMatrix.vert b/src/filters/colormatrix/colorMatrix.vert deleted file mode 100644 index 787220d..0000000 --- a/src/filters/colormatrix/colorMatrix.vert +++ /dev/null @@ -1,10 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void){ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index aa18fda..32276a1 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -19,7 +19,8 @@ core.Filter.call(this, // vertex shader - glslify('./displacement.vert'), +// glslify('./displacement.vert'), + glslify('../fragments/default-filter-matrix.vert'), // fragment shader glslify('./displacement.frag') @@ -29,7 +30,7 @@ this.maskMatrix = maskMatrix; this.uniforms.mapSampler = sprite.texture; - this.uniforms.otherMatrix = maskMatrix.toArray(true); + this.uniforms.filterMatrix = maskMatrix.toArray(true); this.uniforms.scale = { x: 1, y: 1 }; if (scale === null || scale === undefined) @@ -48,7 +49,7 @@ { var ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); - this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); + this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); this.uniforms.scale.x = this.scale.x * ratio; this.uniforms.scale.y = this.scale.y * ratio; diff --git a/src/filters/displacement/displacement.frag b/src/filters/displacement/displacement.frag index c989687..e7e4053 100644 --- a/src/filters/displacement/displacement.frag +++ b/src/filters/displacement/displacement.frag @@ -1,4 +1,4 @@ -varying vec2 vMapCoord; +varying vec2 vFilterCoord; varying vec2 vTextureCoord; uniform vec2 scale; @@ -10,7 +10,7 @@ void main(void) { - vec4 map = texture2D(mapSampler, vMapCoord); + vec4 map = texture2D(mapSampler, vFilterCoord); map -= 0.5; map.xy *= scale; diff --git a/src/filters/displacement/displacement.vert b/src/filters/displacement/displacement.vert deleted file mode 100644 index 42be4b6..0000000 --- a/src/filters/displacement/displacement.vert +++ /dev/null @@ -1,15 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -uniform mat3 otherMatrix; - -varying vec2 vMapCoord; -varying vec2 vTextureCoord; - -void main(void) -{ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; - vMapCoord = ( otherMatrix * vec3( aTextureCoord, 1.0) ).xy; -} diff --git a/src/filters/fragments/default-filter-matrix.vert b/src/filters/fragments/default-filter-matrix.vert new file mode 100755 index 0000000..75f1824 --- /dev/null +++ b/src/filters/fragments/default-filter-matrix.vert @@ -0,0 +1,15 @@ +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; + +uniform mat3 projectionMatrix; +uniform mat3 filterMatrix; + +varying vec2 vTextureCoord; +varying vec2 vFilterCoord; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy; + vTextureCoord = aTextureCoord; +} \ No newline at end of file diff --git a/src/filters/fragments/default.vert b/src/filters/fragments/default.vert new file mode 100755 index 0000000..1b744d2 --- /dev/null +++ b/src/filters/fragments/default.vert @@ -0,0 +1,12 @@ +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; + +uniform mat3 projectionMatrix; + +varying vec2 vTextureCoord; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + vTextureCoord = aTextureCoord; +} \ No newline at end of file diff --git a/src/filters/godray/GodrayFilter.js b/src/filters/godray/GodrayFilter.js deleted file mode 100644 index 28c9a42..0000000 --- a/src/filters/godray/GodrayFilter.js +++ /dev/null @@ -1,91 +0,0 @@ -var core = require('../../core'); -var glslify = require('glslify'); - -/** - * This filter applies a twist effect making display objects appear twisted in the given direction. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -function GodrayFilter() -{ - core.Filter.call(this, - // vertex shader - - glslify('./godray.vert', 'utf8'), - // fragment shader - glslify('./godray.frag', 'utf8') - ); - - this.uniforms.exposure = 0.0034; - this.uniforms.decay = 1.0; - this.uniforms.density = 0.84; - this.uniforms.weight = 5.65; - - this.uniforms.lightPositionOnScreen[0] = 0.5;///0.5; - this.uniforms.lightPositionOnScreen[1] = 0.5;//; -} - -GodrayFilter.prototype = Object.create(core.Filter.prototype); -GodrayFilter.prototype.constructor = GodrayFilter; -module.exports = GodrayFilter; - -GodrayFilter.prototype.apply = function (filterManager, input, output, clear) -{ - - filterManager.applyFilter(this, input, output, clear); -}; - -Object.defineProperties(GodrayFilter.prototype, { - /** - * This point describes the the offset of the twist. - * - * @member {PIXI.Point} - * @memberof PIXI.filters.GodrayFilter# - */ - offset: { - get: function () - { - return this.uniforms.offset; - }, - set: function (value) - { - this.uniforms.offset = value; - } - }, - - /** - * This radius of the twist. - * - * @member {number} - * @memberof PIXI.filters.GodrayFilter# - */ - radius: { - get: function () - { - return this.uniforms.radius; - }, - set: function (value) - { - this.uniforms.radius = value; - } - }, - - /** - * This angle of the twist. - * - * @member {number} - * @memberof PIXI.filters.GodrayFilter# - */ - angle: { - get: function () - { - return this.uniforms.angle; - }, - set: function (value) - { - this.uniforms.angle = value; - } - } -}); diff --git a/src/filters/godray/godray.frag b/src/filters/godray/godray.frag deleted file mode 100644 index 3dbd533..0000000 --- a/src/filters/godray/godray.frag +++ /dev/null @@ -1,31 +0,0 @@ -varying vec2 vTextureCoord; -uniform float exposure; -uniform float decay; -uniform float density; -uniform float weight; -uniform vec2 lightPositionOnScreen; -uniform sampler2D uSampler; - -const int NUM_SAMPLES = 100; - -void main() -{ - vec2 deltaTextCoord = vec2( vTextureCoord - lightPositionOnScreen.xy ); - vec2 textCoo = vTextureCoord; - deltaTextCoord *= 1.0 / float(NUM_SAMPLES) * density; - float illuminationDecay = 1.0; - - for(int i=0; i < NUM_SAMPLES ; i++) - { - textCoo -= deltaTextCoord; - vec4 sample = texture2D(uSampler, textCoo ); - - sample *= illuminationDecay * weight; - - gl_FragColor += sample; - - illuminationDecay *= decay; - } - - gl_FragColor *= exposure; -} diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 228b419..d2f618d 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -34,7 +34,7 @@ var type = splitLine[1]; var name = splitLine[2]; - var size = mapSize(type); + var size = 1; if(name.indexOf('[') > -1) { diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index b443cf4..0c426a5 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -277,7 +277,7 @@ //check if its a point.. if(uniforms[i].x !== undefined) { - val = shader.uniforms[i]; + val = shader.uniforms[i] || new Float32Array(2); val[0] = uniforms[i].x; val[1] = uniforms[i].y; shader.uniforms[i] = val; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 6c35186..91b500e 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -21,7 +21,7 @@ { core.Filter.call(this, // vertex shader - glslify('./colorMatrix.vert'), + glslify('../fragments/default.vert'), // fragment shader glslify('./colorMatrix.frag') ); @@ -186,34 +186,34 @@ ColorMatrixFilter.prototype.hue = function (rotation, multiply) { rotation = (rotation || 0) / 180 * Math.PI; - + var cosR = Math.cos(rotation), sinR = Math.sin(rotation), sqrt = Math.sqrt; - + /*a good approximation for hue rotation This matrix is far better than the versions with magic luminance constants formerly used here, but also used in the starling framework (flash) and known from this old part of the internet: quasimondo.com/archives/000565.php - + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive implementation as a shader not a general matrix: https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - + This is the source for the code: see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 */ - + var w = 1/3, sqrW = sqrt(w);//weight is var a00 = cosR + (1.0 - cosR) * w; var a01 = w * (1.0 - cosR) - sqrW * sinR; var a02 = w * (1.0 - cosR) + sqrW * sinR; - + var a10 = w * (1.0 - cosR) + sqrW * sinR; var a11 = cosR + w*(1.0 - cosR); var a12 = w * (1.0 - cosR) - sqrW * sinR; - + var a20 = w * (1.0 - cosR) - sqrW * sinR; var a21 = w * (1.0 - cosR) + sqrW * sinR; var a22 = cosR + w * (1.0 - cosR); diff --git a/src/filters/colormatrix/colorMatrix.vert b/src/filters/colormatrix/colorMatrix.vert deleted file mode 100644 index 787220d..0000000 --- a/src/filters/colormatrix/colorMatrix.vert +++ /dev/null @@ -1,10 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void){ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index aa18fda..32276a1 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -19,7 +19,8 @@ core.Filter.call(this, // vertex shader - glslify('./displacement.vert'), +// glslify('./displacement.vert'), + glslify('../fragments/default-filter-matrix.vert'), // fragment shader glslify('./displacement.frag') @@ -29,7 +30,7 @@ this.maskMatrix = maskMatrix; this.uniforms.mapSampler = sprite.texture; - this.uniforms.otherMatrix = maskMatrix.toArray(true); + this.uniforms.filterMatrix = maskMatrix.toArray(true); this.uniforms.scale = { x: 1, y: 1 }; if (scale === null || scale === undefined) @@ -48,7 +49,7 @@ { var ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); - this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); + this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); this.uniforms.scale.x = this.scale.x * ratio; this.uniforms.scale.y = this.scale.y * ratio; diff --git a/src/filters/displacement/displacement.frag b/src/filters/displacement/displacement.frag index c989687..e7e4053 100644 --- a/src/filters/displacement/displacement.frag +++ b/src/filters/displacement/displacement.frag @@ -1,4 +1,4 @@ -varying vec2 vMapCoord; +varying vec2 vFilterCoord; varying vec2 vTextureCoord; uniform vec2 scale; @@ -10,7 +10,7 @@ void main(void) { - vec4 map = texture2D(mapSampler, vMapCoord); + vec4 map = texture2D(mapSampler, vFilterCoord); map -= 0.5; map.xy *= scale; diff --git a/src/filters/displacement/displacement.vert b/src/filters/displacement/displacement.vert deleted file mode 100644 index 42be4b6..0000000 --- a/src/filters/displacement/displacement.vert +++ /dev/null @@ -1,15 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -uniform mat3 otherMatrix; - -varying vec2 vMapCoord; -varying vec2 vTextureCoord; - -void main(void) -{ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; - vMapCoord = ( otherMatrix * vec3( aTextureCoord, 1.0) ).xy; -} diff --git a/src/filters/fragments/default-filter-matrix.vert b/src/filters/fragments/default-filter-matrix.vert new file mode 100755 index 0000000..75f1824 --- /dev/null +++ b/src/filters/fragments/default-filter-matrix.vert @@ -0,0 +1,15 @@ +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; + +uniform mat3 projectionMatrix; +uniform mat3 filterMatrix; + +varying vec2 vTextureCoord; +varying vec2 vFilterCoord; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy; + vTextureCoord = aTextureCoord; +} \ No newline at end of file diff --git a/src/filters/fragments/default.vert b/src/filters/fragments/default.vert new file mode 100755 index 0000000..1b744d2 --- /dev/null +++ b/src/filters/fragments/default.vert @@ -0,0 +1,12 @@ +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; + +uniform mat3 projectionMatrix; + +varying vec2 vTextureCoord; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + vTextureCoord = aTextureCoord; +} \ No newline at end of file diff --git a/src/filters/godray/GodrayFilter.js b/src/filters/godray/GodrayFilter.js deleted file mode 100644 index 28c9a42..0000000 --- a/src/filters/godray/GodrayFilter.js +++ /dev/null @@ -1,91 +0,0 @@ -var core = require('../../core'); -var glslify = require('glslify'); - -/** - * This filter applies a twist effect making display objects appear twisted in the given direction. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -function GodrayFilter() -{ - core.Filter.call(this, - // vertex shader - - glslify('./godray.vert', 'utf8'), - // fragment shader - glslify('./godray.frag', 'utf8') - ); - - this.uniforms.exposure = 0.0034; - this.uniforms.decay = 1.0; - this.uniforms.density = 0.84; - this.uniforms.weight = 5.65; - - this.uniforms.lightPositionOnScreen[0] = 0.5;///0.5; - this.uniforms.lightPositionOnScreen[1] = 0.5;//; -} - -GodrayFilter.prototype = Object.create(core.Filter.prototype); -GodrayFilter.prototype.constructor = GodrayFilter; -module.exports = GodrayFilter; - -GodrayFilter.prototype.apply = function (filterManager, input, output, clear) -{ - - filterManager.applyFilter(this, input, output, clear); -}; - -Object.defineProperties(GodrayFilter.prototype, { - /** - * This point describes the the offset of the twist. - * - * @member {PIXI.Point} - * @memberof PIXI.filters.GodrayFilter# - */ - offset: { - get: function () - { - return this.uniforms.offset; - }, - set: function (value) - { - this.uniforms.offset = value; - } - }, - - /** - * This radius of the twist. - * - * @member {number} - * @memberof PIXI.filters.GodrayFilter# - */ - radius: { - get: function () - { - return this.uniforms.radius; - }, - set: function (value) - { - this.uniforms.radius = value; - } - }, - - /** - * This angle of the twist. - * - * @member {number} - * @memberof PIXI.filters.GodrayFilter# - */ - angle: { - get: function () - { - return this.uniforms.angle; - }, - set: function (value) - { - this.uniforms.angle = value; - } - } -}); diff --git a/src/filters/godray/godray.frag b/src/filters/godray/godray.frag deleted file mode 100644 index 3dbd533..0000000 --- a/src/filters/godray/godray.frag +++ /dev/null @@ -1,31 +0,0 @@ -varying vec2 vTextureCoord; -uniform float exposure; -uniform float decay; -uniform float density; -uniform float weight; -uniform vec2 lightPositionOnScreen; -uniform sampler2D uSampler; - -const int NUM_SAMPLES = 100; - -void main() -{ - vec2 deltaTextCoord = vec2( vTextureCoord - lightPositionOnScreen.xy ); - vec2 textCoo = vTextureCoord; - deltaTextCoord *= 1.0 / float(NUM_SAMPLES) * density; - float illuminationDecay = 1.0; - - for(int i=0; i < NUM_SAMPLES ; i++) - { - textCoo -= deltaTextCoord; - vec4 sample = texture2D(uSampler, textCoo ); - - sample *= illuminationDecay * weight; - - gl_FragColor += sample; - - illuminationDecay *= decay; - } - - gl_FragColor *= exposure; -} diff --git a/src/filters/godray/godray.vert b/src/filters/godray/godray.vert deleted file mode 100644 index 507b40f..0000000 --- a/src/filters/godray/godray.vert +++ /dev/null @@ -1,12 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void) -{ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} - diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 228b419..d2f618d 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -34,7 +34,7 @@ var type = splitLine[1]; var name = splitLine[2]; - var size = mapSize(type); + var size = 1; if(name.indexOf('[') > -1) { diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index b443cf4..0c426a5 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -277,7 +277,7 @@ //check if its a point.. if(uniforms[i].x !== undefined) { - val = shader.uniforms[i]; + val = shader.uniforms[i] || new Float32Array(2); val[0] = uniforms[i].x; val[1] = uniforms[i].y; shader.uniforms[i] = val; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 6c35186..91b500e 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -21,7 +21,7 @@ { core.Filter.call(this, // vertex shader - glslify('./colorMatrix.vert'), + glslify('../fragments/default.vert'), // fragment shader glslify('./colorMatrix.frag') ); @@ -186,34 +186,34 @@ ColorMatrixFilter.prototype.hue = function (rotation, multiply) { rotation = (rotation || 0) / 180 * Math.PI; - + var cosR = Math.cos(rotation), sinR = Math.sin(rotation), sqrt = Math.sqrt; - + /*a good approximation for hue rotation This matrix is far better than the versions with magic luminance constants formerly used here, but also used in the starling framework (flash) and known from this old part of the internet: quasimondo.com/archives/000565.php - + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive implementation as a shader not a general matrix: https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - + This is the source for the code: see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 */ - + var w = 1/3, sqrW = sqrt(w);//weight is var a00 = cosR + (1.0 - cosR) * w; var a01 = w * (1.0 - cosR) - sqrW * sinR; var a02 = w * (1.0 - cosR) + sqrW * sinR; - + var a10 = w * (1.0 - cosR) + sqrW * sinR; var a11 = cosR + w*(1.0 - cosR); var a12 = w * (1.0 - cosR) - sqrW * sinR; - + var a20 = w * (1.0 - cosR) - sqrW * sinR; var a21 = w * (1.0 - cosR) + sqrW * sinR; var a22 = cosR + w * (1.0 - cosR); diff --git a/src/filters/colormatrix/colorMatrix.vert b/src/filters/colormatrix/colorMatrix.vert deleted file mode 100644 index 787220d..0000000 --- a/src/filters/colormatrix/colorMatrix.vert +++ /dev/null @@ -1,10 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void){ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index aa18fda..32276a1 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -19,7 +19,8 @@ core.Filter.call(this, // vertex shader - glslify('./displacement.vert'), +// glslify('./displacement.vert'), + glslify('../fragments/default-filter-matrix.vert'), // fragment shader glslify('./displacement.frag') @@ -29,7 +30,7 @@ this.maskMatrix = maskMatrix; this.uniforms.mapSampler = sprite.texture; - this.uniforms.otherMatrix = maskMatrix.toArray(true); + this.uniforms.filterMatrix = maskMatrix.toArray(true); this.uniforms.scale = { x: 1, y: 1 }; if (scale === null || scale === undefined) @@ -48,7 +49,7 @@ { var ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); - this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); + this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); this.uniforms.scale.x = this.scale.x * ratio; this.uniforms.scale.y = this.scale.y * ratio; diff --git a/src/filters/displacement/displacement.frag b/src/filters/displacement/displacement.frag index c989687..e7e4053 100644 --- a/src/filters/displacement/displacement.frag +++ b/src/filters/displacement/displacement.frag @@ -1,4 +1,4 @@ -varying vec2 vMapCoord; +varying vec2 vFilterCoord; varying vec2 vTextureCoord; uniform vec2 scale; @@ -10,7 +10,7 @@ void main(void) { - vec4 map = texture2D(mapSampler, vMapCoord); + vec4 map = texture2D(mapSampler, vFilterCoord); map -= 0.5; map.xy *= scale; diff --git a/src/filters/displacement/displacement.vert b/src/filters/displacement/displacement.vert deleted file mode 100644 index 42be4b6..0000000 --- a/src/filters/displacement/displacement.vert +++ /dev/null @@ -1,15 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -uniform mat3 otherMatrix; - -varying vec2 vMapCoord; -varying vec2 vTextureCoord; - -void main(void) -{ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; - vMapCoord = ( otherMatrix * vec3( aTextureCoord, 1.0) ).xy; -} diff --git a/src/filters/fragments/default-filter-matrix.vert b/src/filters/fragments/default-filter-matrix.vert new file mode 100755 index 0000000..75f1824 --- /dev/null +++ b/src/filters/fragments/default-filter-matrix.vert @@ -0,0 +1,15 @@ +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; + +uniform mat3 projectionMatrix; +uniform mat3 filterMatrix; + +varying vec2 vTextureCoord; +varying vec2 vFilterCoord; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy; + vTextureCoord = aTextureCoord; +} \ No newline at end of file diff --git a/src/filters/fragments/default.vert b/src/filters/fragments/default.vert new file mode 100755 index 0000000..1b744d2 --- /dev/null +++ b/src/filters/fragments/default.vert @@ -0,0 +1,12 @@ +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; + +uniform mat3 projectionMatrix; + +varying vec2 vTextureCoord; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + vTextureCoord = aTextureCoord; +} \ No newline at end of file diff --git a/src/filters/godray/GodrayFilter.js b/src/filters/godray/GodrayFilter.js deleted file mode 100644 index 28c9a42..0000000 --- a/src/filters/godray/GodrayFilter.js +++ /dev/null @@ -1,91 +0,0 @@ -var core = require('../../core'); -var glslify = require('glslify'); - -/** - * This filter applies a twist effect making display objects appear twisted in the given direction. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -function GodrayFilter() -{ - core.Filter.call(this, - // vertex shader - - glslify('./godray.vert', 'utf8'), - // fragment shader - glslify('./godray.frag', 'utf8') - ); - - this.uniforms.exposure = 0.0034; - this.uniforms.decay = 1.0; - this.uniforms.density = 0.84; - this.uniforms.weight = 5.65; - - this.uniforms.lightPositionOnScreen[0] = 0.5;///0.5; - this.uniforms.lightPositionOnScreen[1] = 0.5;//; -} - -GodrayFilter.prototype = Object.create(core.Filter.prototype); -GodrayFilter.prototype.constructor = GodrayFilter; -module.exports = GodrayFilter; - -GodrayFilter.prototype.apply = function (filterManager, input, output, clear) -{ - - filterManager.applyFilter(this, input, output, clear); -}; - -Object.defineProperties(GodrayFilter.prototype, { - /** - * This point describes the the offset of the twist. - * - * @member {PIXI.Point} - * @memberof PIXI.filters.GodrayFilter# - */ - offset: { - get: function () - { - return this.uniforms.offset; - }, - set: function (value) - { - this.uniforms.offset = value; - } - }, - - /** - * This radius of the twist. - * - * @member {number} - * @memberof PIXI.filters.GodrayFilter# - */ - radius: { - get: function () - { - return this.uniforms.radius; - }, - set: function (value) - { - this.uniforms.radius = value; - } - }, - - /** - * This angle of the twist. - * - * @member {number} - * @memberof PIXI.filters.GodrayFilter# - */ - angle: { - get: function () - { - return this.uniforms.angle; - }, - set: function (value) - { - this.uniforms.angle = value; - } - } -}); diff --git a/src/filters/godray/godray.frag b/src/filters/godray/godray.frag deleted file mode 100644 index 3dbd533..0000000 --- a/src/filters/godray/godray.frag +++ /dev/null @@ -1,31 +0,0 @@ -varying vec2 vTextureCoord; -uniform float exposure; -uniform float decay; -uniform float density; -uniform float weight; -uniform vec2 lightPositionOnScreen; -uniform sampler2D uSampler; - -const int NUM_SAMPLES = 100; - -void main() -{ - vec2 deltaTextCoord = vec2( vTextureCoord - lightPositionOnScreen.xy ); - vec2 textCoo = vTextureCoord; - deltaTextCoord *= 1.0 / float(NUM_SAMPLES) * density; - float illuminationDecay = 1.0; - - for(int i=0; i < NUM_SAMPLES ; i++) - { - textCoo -= deltaTextCoord; - vec4 sample = texture2D(uSampler, textCoo ); - - sample *= illuminationDecay * weight; - - gl_FragColor += sample; - - illuminationDecay *= decay; - } - - gl_FragColor *= exposure; -} diff --git a/src/filters/godray/godray.vert b/src/filters/godray/godray.vert deleted file mode 100644 index 507b40f..0000000 --- a/src/filters/godray/godray.vert +++ /dev/null @@ -1,12 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void) -{ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} - diff --git a/src/filters/gray/GrayFilter.js b/src/filters/gray/GrayFilter.js deleted file mode 100644 index af51b3e..0000000 --- a/src/filters/gray/GrayFilter.js +++ /dev/null @@ -1,47 +0,0 @@ -var core = require('../../core'); -// @see https://github.com/substack/brfs/issues/25 -var glslify = require('glslify'); - -/** - * This greyscales the palette of your Display Objects. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -function GrayFilter() -{ - core.Filter.call(this, - // vertex shader - glslify('./gray.vert', 'utf8'), - // fragment shader - glslify('./gray.frag', 'utf8') - ); - - this.uniforms.gray = 1; - - this.glShaderKey = 'gray'; -} - -GrayFilter.prototype = Object.create(core.Filter.prototype); -GrayFilter.prototype.constructor = GrayFilter; -module.exports = GrayFilter; - -Object.defineProperties(GrayFilter.prototype, { - /** - * The strength of the gray. 1 will make the object black and white, 0 will make the object its normal color. - * - * @member {number} - * @memberof PIXI.filters.GrayFilter# - */ - gray: { - get: function () - { - return this.uniforms.gray; - }, - set: function (value) - { - this.uniforms.gray = value; - } - } -}); diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 228b419..d2f618d 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -34,7 +34,7 @@ var type = splitLine[1]; var name = splitLine[2]; - var size = mapSize(type); + var size = 1; if(name.indexOf('[') > -1) { diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index b443cf4..0c426a5 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -277,7 +277,7 @@ //check if its a point.. if(uniforms[i].x !== undefined) { - val = shader.uniforms[i]; + val = shader.uniforms[i] || new Float32Array(2); val[0] = uniforms[i].x; val[1] = uniforms[i].y; shader.uniforms[i] = val; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 6c35186..91b500e 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -21,7 +21,7 @@ { core.Filter.call(this, // vertex shader - glslify('./colorMatrix.vert'), + glslify('../fragments/default.vert'), // fragment shader glslify('./colorMatrix.frag') ); @@ -186,34 +186,34 @@ ColorMatrixFilter.prototype.hue = function (rotation, multiply) { rotation = (rotation || 0) / 180 * Math.PI; - + var cosR = Math.cos(rotation), sinR = Math.sin(rotation), sqrt = Math.sqrt; - + /*a good approximation for hue rotation This matrix is far better than the versions with magic luminance constants formerly used here, but also used in the starling framework (flash) and known from this old part of the internet: quasimondo.com/archives/000565.php - + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive implementation as a shader not a general matrix: https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - + This is the source for the code: see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 */ - + var w = 1/3, sqrW = sqrt(w);//weight is var a00 = cosR + (1.0 - cosR) * w; var a01 = w * (1.0 - cosR) - sqrW * sinR; var a02 = w * (1.0 - cosR) + sqrW * sinR; - + var a10 = w * (1.0 - cosR) + sqrW * sinR; var a11 = cosR + w*(1.0 - cosR); var a12 = w * (1.0 - cosR) - sqrW * sinR; - + var a20 = w * (1.0 - cosR) - sqrW * sinR; var a21 = w * (1.0 - cosR) + sqrW * sinR; var a22 = cosR + w * (1.0 - cosR); diff --git a/src/filters/colormatrix/colorMatrix.vert b/src/filters/colormatrix/colorMatrix.vert deleted file mode 100644 index 787220d..0000000 --- a/src/filters/colormatrix/colorMatrix.vert +++ /dev/null @@ -1,10 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void){ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index aa18fda..32276a1 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -19,7 +19,8 @@ core.Filter.call(this, // vertex shader - glslify('./displacement.vert'), +// glslify('./displacement.vert'), + glslify('../fragments/default-filter-matrix.vert'), // fragment shader glslify('./displacement.frag') @@ -29,7 +30,7 @@ this.maskMatrix = maskMatrix; this.uniforms.mapSampler = sprite.texture; - this.uniforms.otherMatrix = maskMatrix.toArray(true); + this.uniforms.filterMatrix = maskMatrix.toArray(true); this.uniforms.scale = { x: 1, y: 1 }; if (scale === null || scale === undefined) @@ -48,7 +49,7 @@ { var ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); - this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); + this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); this.uniforms.scale.x = this.scale.x * ratio; this.uniforms.scale.y = this.scale.y * ratio; diff --git a/src/filters/displacement/displacement.frag b/src/filters/displacement/displacement.frag index c989687..e7e4053 100644 --- a/src/filters/displacement/displacement.frag +++ b/src/filters/displacement/displacement.frag @@ -1,4 +1,4 @@ -varying vec2 vMapCoord; +varying vec2 vFilterCoord; varying vec2 vTextureCoord; uniform vec2 scale; @@ -10,7 +10,7 @@ void main(void) { - vec4 map = texture2D(mapSampler, vMapCoord); + vec4 map = texture2D(mapSampler, vFilterCoord); map -= 0.5; map.xy *= scale; diff --git a/src/filters/displacement/displacement.vert b/src/filters/displacement/displacement.vert deleted file mode 100644 index 42be4b6..0000000 --- a/src/filters/displacement/displacement.vert +++ /dev/null @@ -1,15 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -uniform mat3 otherMatrix; - -varying vec2 vMapCoord; -varying vec2 vTextureCoord; - -void main(void) -{ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; - vMapCoord = ( otherMatrix * vec3( aTextureCoord, 1.0) ).xy; -} diff --git a/src/filters/fragments/default-filter-matrix.vert b/src/filters/fragments/default-filter-matrix.vert new file mode 100755 index 0000000..75f1824 --- /dev/null +++ b/src/filters/fragments/default-filter-matrix.vert @@ -0,0 +1,15 @@ +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; + +uniform mat3 projectionMatrix; +uniform mat3 filterMatrix; + +varying vec2 vTextureCoord; +varying vec2 vFilterCoord; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy; + vTextureCoord = aTextureCoord; +} \ No newline at end of file diff --git a/src/filters/fragments/default.vert b/src/filters/fragments/default.vert new file mode 100755 index 0000000..1b744d2 --- /dev/null +++ b/src/filters/fragments/default.vert @@ -0,0 +1,12 @@ +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; + +uniform mat3 projectionMatrix; + +varying vec2 vTextureCoord; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + vTextureCoord = aTextureCoord; +} \ No newline at end of file diff --git a/src/filters/godray/GodrayFilter.js b/src/filters/godray/GodrayFilter.js deleted file mode 100644 index 28c9a42..0000000 --- a/src/filters/godray/GodrayFilter.js +++ /dev/null @@ -1,91 +0,0 @@ -var core = require('../../core'); -var glslify = require('glslify'); - -/** - * This filter applies a twist effect making display objects appear twisted in the given direction. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -function GodrayFilter() -{ - core.Filter.call(this, - // vertex shader - - glslify('./godray.vert', 'utf8'), - // fragment shader - glslify('./godray.frag', 'utf8') - ); - - this.uniforms.exposure = 0.0034; - this.uniforms.decay = 1.0; - this.uniforms.density = 0.84; - this.uniforms.weight = 5.65; - - this.uniforms.lightPositionOnScreen[0] = 0.5;///0.5; - this.uniforms.lightPositionOnScreen[1] = 0.5;//; -} - -GodrayFilter.prototype = Object.create(core.Filter.prototype); -GodrayFilter.prototype.constructor = GodrayFilter; -module.exports = GodrayFilter; - -GodrayFilter.prototype.apply = function (filterManager, input, output, clear) -{ - - filterManager.applyFilter(this, input, output, clear); -}; - -Object.defineProperties(GodrayFilter.prototype, { - /** - * This point describes the the offset of the twist. - * - * @member {PIXI.Point} - * @memberof PIXI.filters.GodrayFilter# - */ - offset: { - get: function () - { - return this.uniforms.offset; - }, - set: function (value) - { - this.uniforms.offset = value; - } - }, - - /** - * This radius of the twist. - * - * @member {number} - * @memberof PIXI.filters.GodrayFilter# - */ - radius: { - get: function () - { - return this.uniforms.radius; - }, - set: function (value) - { - this.uniforms.radius = value; - } - }, - - /** - * This angle of the twist. - * - * @member {number} - * @memberof PIXI.filters.GodrayFilter# - */ - angle: { - get: function () - { - return this.uniforms.angle; - }, - set: function (value) - { - this.uniforms.angle = value; - } - } -}); diff --git a/src/filters/godray/godray.frag b/src/filters/godray/godray.frag deleted file mode 100644 index 3dbd533..0000000 --- a/src/filters/godray/godray.frag +++ /dev/null @@ -1,31 +0,0 @@ -varying vec2 vTextureCoord; -uniform float exposure; -uniform float decay; -uniform float density; -uniform float weight; -uniform vec2 lightPositionOnScreen; -uniform sampler2D uSampler; - -const int NUM_SAMPLES = 100; - -void main() -{ - vec2 deltaTextCoord = vec2( vTextureCoord - lightPositionOnScreen.xy ); - vec2 textCoo = vTextureCoord; - deltaTextCoord *= 1.0 / float(NUM_SAMPLES) * density; - float illuminationDecay = 1.0; - - for(int i=0; i < NUM_SAMPLES ; i++) - { - textCoo -= deltaTextCoord; - vec4 sample = texture2D(uSampler, textCoo ); - - sample *= illuminationDecay * weight; - - gl_FragColor += sample; - - illuminationDecay *= decay; - } - - gl_FragColor *= exposure; -} diff --git a/src/filters/godray/godray.vert b/src/filters/godray/godray.vert deleted file mode 100644 index 507b40f..0000000 --- a/src/filters/godray/godray.vert +++ /dev/null @@ -1,12 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void) -{ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} - diff --git a/src/filters/gray/GrayFilter.js b/src/filters/gray/GrayFilter.js deleted file mode 100644 index af51b3e..0000000 --- a/src/filters/gray/GrayFilter.js +++ /dev/null @@ -1,47 +0,0 @@ -var core = require('../../core'); -// @see https://github.com/substack/brfs/issues/25 -var glslify = require('glslify'); - -/** - * This greyscales the palette of your Display Objects. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -function GrayFilter() -{ - core.Filter.call(this, - // vertex shader - glslify('./gray.vert', 'utf8'), - // fragment shader - glslify('./gray.frag', 'utf8') - ); - - this.uniforms.gray = 1; - - this.glShaderKey = 'gray'; -} - -GrayFilter.prototype = Object.create(core.Filter.prototype); -GrayFilter.prototype.constructor = GrayFilter; -module.exports = GrayFilter; - -Object.defineProperties(GrayFilter.prototype, { - /** - * The strength of the gray. 1 will make the object black and white, 0 will make the object its normal color. - * - * @member {number} - * @memberof PIXI.filters.GrayFilter# - */ - gray: { - get: function () - { - return this.uniforms.gray; - }, - set: function (value) - { - this.uniforms.gray = value; - } - } -}); diff --git a/src/filters/gray/gray.frag b/src/filters/gray/gray.frag deleted file mode 100644 index 2a1d3b1..0000000 --- a/src/filters/gray/gray.frag +++ /dev/null @@ -1,10 +0,0 @@ -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; -uniform float gray; - -void main(void) -{ - gl_FragColor = texture2D(uSampler, vTextureCoord); - gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray); -} diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 228b419..d2f618d 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -34,7 +34,7 @@ var type = splitLine[1]; var name = splitLine[2]; - var size = mapSize(type); + var size = 1; if(name.indexOf('[') > -1) { diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index b443cf4..0c426a5 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -277,7 +277,7 @@ //check if its a point.. if(uniforms[i].x !== undefined) { - val = shader.uniforms[i]; + val = shader.uniforms[i] || new Float32Array(2); val[0] = uniforms[i].x; val[1] = uniforms[i].y; shader.uniforms[i] = val; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 6c35186..91b500e 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -21,7 +21,7 @@ { core.Filter.call(this, // vertex shader - glslify('./colorMatrix.vert'), + glslify('../fragments/default.vert'), // fragment shader glslify('./colorMatrix.frag') ); @@ -186,34 +186,34 @@ ColorMatrixFilter.prototype.hue = function (rotation, multiply) { rotation = (rotation || 0) / 180 * Math.PI; - + var cosR = Math.cos(rotation), sinR = Math.sin(rotation), sqrt = Math.sqrt; - + /*a good approximation for hue rotation This matrix is far better than the versions with magic luminance constants formerly used here, but also used in the starling framework (flash) and known from this old part of the internet: quasimondo.com/archives/000565.php - + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive implementation as a shader not a general matrix: https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - + This is the source for the code: see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 */ - + var w = 1/3, sqrW = sqrt(w);//weight is var a00 = cosR + (1.0 - cosR) * w; var a01 = w * (1.0 - cosR) - sqrW * sinR; var a02 = w * (1.0 - cosR) + sqrW * sinR; - + var a10 = w * (1.0 - cosR) + sqrW * sinR; var a11 = cosR + w*(1.0 - cosR); var a12 = w * (1.0 - cosR) - sqrW * sinR; - + var a20 = w * (1.0 - cosR) - sqrW * sinR; var a21 = w * (1.0 - cosR) + sqrW * sinR; var a22 = cosR + w * (1.0 - cosR); diff --git a/src/filters/colormatrix/colorMatrix.vert b/src/filters/colormatrix/colorMatrix.vert deleted file mode 100644 index 787220d..0000000 --- a/src/filters/colormatrix/colorMatrix.vert +++ /dev/null @@ -1,10 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void){ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index aa18fda..32276a1 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -19,7 +19,8 @@ core.Filter.call(this, // vertex shader - glslify('./displacement.vert'), +// glslify('./displacement.vert'), + glslify('../fragments/default-filter-matrix.vert'), // fragment shader glslify('./displacement.frag') @@ -29,7 +30,7 @@ this.maskMatrix = maskMatrix; this.uniforms.mapSampler = sprite.texture; - this.uniforms.otherMatrix = maskMatrix.toArray(true); + this.uniforms.filterMatrix = maskMatrix.toArray(true); this.uniforms.scale = { x: 1, y: 1 }; if (scale === null || scale === undefined) @@ -48,7 +49,7 @@ { var ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); - this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); + this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); this.uniforms.scale.x = this.scale.x * ratio; this.uniforms.scale.y = this.scale.y * ratio; diff --git a/src/filters/displacement/displacement.frag b/src/filters/displacement/displacement.frag index c989687..e7e4053 100644 --- a/src/filters/displacement/displacement.frag +++ b/src/filters/displacement/displacement.frag @@ -1,4 +1,4 @@ -varying vec2 vMapCoord; +varying vec2 vFilterCoord; varying vec2 vTextureCoord; uniform vec2 scale; @@ -10,7 +10,7 @@ void main(void) { - vec4 map = texture2D(mapSampler, vMapCoord); + vec4 map = texture2D(mapSampler, vFilterCoord); map -= 0.5; map.xy *= scale; diff --git a/src/filters/displacement/displacement.vert b/src/filters/displacement/displacement.vert deleted file mode 100644 index 42be4b6..0000000 --- a/src/filters/displacement/displacement.vert +++ /dev/null @@ -1,15 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -uniform mat3 otherMatrix; - -varying vec2 vMapCoord; -varying vec2 vTextureCoord; - -void main(void) -{ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; - vMapCoord = ( otherMatrix * vec3( aTextureCoord, 1.0) ).xy; -} diff --git a/src/filters/fragments/default-filter-matrix.vert b/src/filters/fragments/default-filter-matrix.vert new file mode 100755 index 0000000..75f1824 --- /dev/null +++ b/src/filters/fragments/default-filter-matrix.vert @@ -0,0 +1,15 @@ +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; + +uniform mat3 projectionMatrix; +uniform mat3 filterMatrix; + +varying vec2 vTextureCoord; +varying vec2 vFilterCoord; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy; + vTextureCoord = aTextureCoord; +} \ No newline at end of file diff --git a/src/filters/fragments/default.vert b/src/filters/fragments/default.vert new file mode 100755 index 0000000..1b744d2 --- /dev/null +++ b/src/filters/fragments/default.vert @@ -0,0 +1,12 @@ +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; + +uniform mat3 projectionMatrix; + +varying vec2 vTextureCoord; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + vTextureCoord = aTextureCoord; +} \ No newline at end of file diff --git a/src/filters/godray/GodrayFilter.js b/src/filters/godray/GodrayFilter.js deleted file mode 100644 index 28c9a42..0000000 --- a/src/filters/godray/GodrayFilter.js +++ /dev/null @@ -1,91 +0,0 @@ -var core = require('../../core'); -var glslify = require('glslify'); - -/** - * This filter applies a twist effect making display objects appear twisted in the given direction. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -function GodrayFilter() -{ - core.Filter.call(this, - // vertex shader - - glslify('./godray.vert', 'utf8'), - // fragment shader - glslify('./godray.frag', 'utf8') - ); - - this.uniforms.exposure = 0.0034; - this.uniforms.decay = 1.0; - this.uniforms.density = 0.84; - this.uniforms.weight = 5.65; - - this.uniforms.lightPositionOnScreen[0] = 0.5;///0.5; - this.uniforms.lightPositionOnScreen[1] = 0.5;//; -} - -GodrayFilter.prototype = Object.create(core.Filter.prototype); -GodrayFilter.prototype.constructor = GodrayFilter; -module.exports = GodrayFilter; - -GodrayFilter.prototype.apply = function (filterManager, input, output, clear) -{ - - filterManager.applyFilter(this, input, output, clear); -}; - -Object.defineProperties(GodrayFilter.prototype, { - /** - * This point describes the the offset of the twist. - * - * @member {PIXI.Point} - * @memberof PIXI.filters.GodrayFilter# - */ - offset: { - get: function () - { - return this.uniforms.offset; - }, - set: function (value) - { - this.uniforms.offset = value; - } - }, - - /** - * This radius of the twist. - * - * @member {number} - * @memberof PIXI.filters.GodrayFilter# - */ - radius: { - get: function () - { - return this.uniforms.radius; - }, - set: function (value) - { - this.uniforms.radius = value; - } - }, - - /** - * This angle of the twist. - * - * @member {number} - * @memberof PIXI.filters.GodrayFilter# - */ - angle: { - get: function () - { - return this.uniforms.angle; - }, - set: function (value) - { - this.uniforms.angle = value; - } - } -}); diff --git a/src/filters/godray/godray.frag b/src/filters/godray/godray.frag deleted file mode 100644 index 3dbd533..0000000 --- a/src/filters/godray/godray.frag +++ /dev/null @@ -1,31 +0,0 @@ -varying vec2 vTextureCoord; -uniform float exposure; -uniform float decay; -uniform float density; -uniform float weight; -uniform vec2 lightPositionOnScreen; -uniform sampler2D uSampler; - -const int NUM_SAMPLES = 100; - -void main() -{ - vec2 deltaTextCoord = vec2( vTextureCoord - lightPositionOnScreen.xy ); - vec2 textCoo = vTextureCoord; - deltaTextCoord *= 1.0 / float(NUM_SAMPLES) * density; - float illuminationDecay = 1.0; - - for(int i=0; i < NUM_SAMPLES ; i++) - { - textCoo -= deltaTextCoord; - vec4 sample = texture2D(uSampler, textCoo ); - - sample *= illuminationDecay * weight; - - gl_FragColor += sample; - - illuminationDecay *= decay; - } - - gl_FragColor *= exposure; -} diff --git a/src/filters/godray/godray.vert b/src/filters/godray/godray.vert deleted file mode 100644 index 507b40f..0000000 --- a/src/filters/godray/godray.vert +++ /dev/null @@ -1,12 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void) -{ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} - diff --git a/src/filters/gray/GrayFilter.js b/src/filters/gray/GrayFilter.js deleted file mode 100644 index af51b3e..0000000 --- a/src/filters/gray/GrayFilter.js +++ /dev/null @@ -1,47 +0,0 @@ -var core = require('../../core'); -// @see https://github.com/substack/brfs/issues/25 -var glslify = require('glslify'); - -/** - * This greyscales the palette of your Display Objects. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -function GrayFilter() -{ - core.Filter.call(this, - // vertex shader - glslify('./gray.vert', 'utf8'), - // fragment shader - glslify('./gray.frag', 'utf8') - ); - - this.uniforms.gray = 1; - - this.glShaderKey = 'gray'; -} - -GrayFilter.prototype = Object.create(core.Filter.prototype); -GrayFilter.prototype.constructor = GrayFilter; -module.exports = GrayFilter; - -Object.defineProperties(GrayFilter.prototype, { - /** - * The strength of the gray. 1 will make the object black and white, 0 will make the object its normal color. - * - * @member {number} - * @memberof PIXI.filters.GrayFilter# - */ - gray: { - get: function () - { - return this.uniforms.gray; - }, - set: function (value) - { - this.uniforms.gray = value; - } - } -}); diff --git a/src/filters/gray/gray.frag b/src/filters/gray/gray.frag deleted file mode 100644 index 2a1d3b1..0000000 --- a/src/filters/gray/gray.frag +++ /dev/null @@ -1,10 +0,0 @@ -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; -uniform float gray; - -void main(void) -{ - gl_FragColor = texture2D(uSampler, vTextureCoord); - gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray); -} diff --git a/src/filters/gray/gray.vert b/src/filters/gray/gray.vert deleted file mode 100644 index 787220d..0000000 --- a/src/filters/gray/gray.vert +++ /dev/null @@ -1,10 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void){ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 228b419..d2f618d 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -34,7 +34,7 @@ var type = splitLine[1]; var name = splitLine[2]; - var size = mapSize(type); + var size = 1; if(name.indexOf('[') > -1) { diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index b443cf4..0c426a5 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -277,7 +277,7 @@ //check if its a point.. if(uniforms[i].x !== undefined) { - val = shader.uniforms[i]; + val = shader.uniforms[i] || new Float32Array(2); val[0] = uniforms[i].x; val[1] = uniforms[i].y; shader.uniforms[i] = val; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 6c35186..91b500e 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -21,7 +21,7 @@ { core.Filter.call(this, // vertex shader - glslify('./colorMatrix.vert'), + glslify('../fragments/default.vert'), // fragment shader glslify('./colorMatrix.frag') ); @@ -186,34 +186,34 @@ ColorMatrixFilter.prototype.hue = function (rotation, multiply) { rotation = (rotation || 0) / 180 * Math.PI; - + var cosR = Math.cos(rotation), sinR = Math.sin(rotation), sqrt = Math.sqrt; - + /*a good approximation for hue rotation This matrix is far better than the versions with magic luminance constants formerly used here, but also used in the starling framework (flash) and known from this old part of the internet: quasimondo.com/archives/000565.php - + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive implementation as a shader not a general matrix: https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - + This is the source for the code: see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 */ - + var w = 1/3, sqrW = sqrt(w);//weight is var a00 = cosR + (1.0 - cosR) * w; var a01 = w * (1.0 - cosR) - sqrW * sinR; var a02 = w * (1.0 - cosR) + sqrW * sinR; - + var a10 = w * (1.0 - cosR) + sqrW * sinR; var a11 = cosR + w*(1.0 - cosR); var a12 = w * (1.0 - cosR) - sqrW * sinR; - + var a20 = w * (1.0 - cosR) - sqrW * sinR; var a21 = w * (1.0 - cosR) + sqrW * sinR; var a22 = cosR + w * (1.0 - cosR); diff --git a/src/filters/colormatrix/colorMatrix.vert b/src/filters/colormatrix/colorMatrix.vert deleted file mode 100644 index 787220d..0000000 --- a/src/filters/colormatrix/colorMatrix.vert +++ /dev/null @@ -1,10 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void){ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index aa18fda..32276a1 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -19,7 +19,8 @@ core.Filter.call(this, // vertex shader - glslify('./displacement.vert'), +// glslify('./displacement.vert'), + glslify('../fragments/default-filter-matrix.vert'), // fragment shader glslify('./displacement.frag') @@ -29,7 +30,7 @@ this.maskMatrix = maskMatrix; this.uniforms.mapSampler = sprite.texture; - this.uniforms.otherMatrix = maskMatrix.toArray(true); + this.uniforms.filterMatrix = maskMatrix.toArray(true); this.uniforms.scale = { x: 1, y: 1 }; if (scale === null || scale === undefined) @@ -48,7 +49,7 @@ { var ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); - this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); + this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); this.uniforms.scale.x = this.scale.x * ratio; this.uniforms.scale.y = this.scale.y * ratio; diff --git a/src/filters/displacement/displacement.frag b/src/filters/displacement/displacement.frag index c989687..e7e4053 100644 --- a/src/filters/displacement/displacement.frag +++ b/src/filters/displacement/displacement.frag @@ -1,4 +1,4 @@ -varying vec2 vMapCoord; +varying vec2 vFilterCoord; varying vec2 vTextureCoord; uniform vec2 scale; @@ -10,7 +10,7 @@ void main(void) { - vec4 map = texture2D(mapSampler, vMapCoord); + vec4 map = texture2D(mapSampler, vFilterCoord); map -= 0.5; map.xy *= scale; diff --git a/src/filters/displacement/displacement.vert b/src/filters/displacement/displacement.vert deleted file mode 100644 index 42be4b6..0000000 --- a/src/filters/displacement/displacement.vert +++ /dev/null @@ -1,15 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -uniform mat3 otherMatrix; - -varying vec2 vMapCoord; -varying vec2 vTextureCoord; - -void main(void) -{ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; - vMapCoord = ( otherMatrix * vec3( aTextureCoord, 1.0) ).xy; -} diff --git a/src/filters/fragments/default-filter-matrix.vert b/src/filters/fragments/default-filter-matrix.vert new file mode 100755 index 0000000..75f1824 --- /dev/null +++ b/src/filters/fragments/default-filter-matrix.vert @@ -0,0 +1,15 @@ +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; + +uniform mat3 projectionMatrix; +uniform mat3 filterMatrix; + +varying vec2 vTextureCoord; +varying vec2 vFilterCoord; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy; + vTextureCoord = aTextureCoord; +} \ No newline at end of file diff --git a/src/filters/fragments/default.vert b/src/filters/fragments/default.vert new file mode 100755 index 0000000..1b744d2 --- /dev/null +++ b/src/filters/fragments/default.vert @@ -0,0 +1,12 @@ +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; + +uniform mat3 projectionMatrix; + +varying vec2 vTextureCoord; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + vTextureCoord = aTextureCoord; +} \ No newline at end of file diff --git a/src/filters/godray/GodrayFilter.js b/src/filters/godray/GodrayFilter.js deleted file mode 100644 index 28c9a42..0000000 --- a/src/filters/godray/GodrayFilter.js +++ /dev/null @@ -1,91 +0,0 @@ -var core = require('../../core'); -var glslify = require('glslify'); - -/** - * This filter applies a twist effect making display objects appear twisted in the given direction. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -function GodrayFilter() -{ - core.Filter.call(this, - // vertex shader - - glslify('./godray.vert', 'utf8'), - // fragment shader - glslify('./godray.frag', 'utf8') - ); - - this.uniforms.exposure = 0.0034; - this.uniforms.decay = 1.0; - this.uniforms.density = 0.84; - this.uniforms.weight = 5.65; - - this.uniforms.lightPositionOnScreen[0] = 0.5;///0.5; - this.uniforms.lightPositionOnScreen[1] = 0.5;//; -} - -GodrayFilter.prototype = Object.create(core.Filter.prototype); -GodrayFilter.prototype.constructor = GodrayFilter; -module.exports = GodrayFilter; - -GodrayFilter.prototype.apply = function (filterManager, input, output, clear) -{ - - filterManager.applyFilter(this, input, output, clear); -}; - -Object.defineProperties(GodrayFilter.prototype, { - /** - * This point describes the the offset of the twist. - * - * @member {PIXI.Point} - * @memberof PIXI.filters.GodrayFilter# - */ - offset: { - get: function () - { - return this.uniforms.offset; - }, - set: function (value) - { - this.uniforms.offset = value; - } - }, - - /** - * This radius of the twist. - * - * @member {number} - * @memberof PIXI.filters.GodrayFilter# - */ - radius: { - get: function () - { - return this.uniforms.radius; - }, - set: function (value) - { - this.uniforms.radius = value; - } - }, - - /** - * This angle of the twist. - * - * @member {number} - * @memberof PIXI.filters.GodrayFilter# - */ - angle: { - get: function () - { - return this.uniforms.angle; - }, - set: function (value) - { - this.uniforms.angle = value; - } - } -}); diff --git a/src/filters/godray/godray.frag b/src/filters/godray/godray.frag deleted file mode 100644 index 3dbd533..0000000 --- a/src/filters/godray/godray.frag +++ /dev/null @@ -1,31 +0,0 @@ -varying vec2 vTextureCoord; -uniform float exposure; -uniform float decay; -uniform float density; -uniform float weight; -uniform vec2 lightPositionOnScreen; -uniform sampler2D uSampler; - -const int NUM_SAMPLES = 100; - -void main() -{ - vec2 deltaTextCoord = vec2( vTextureCoord - lightPositionOnScreen.xy ); - vec2 textCoo = vTextureCoord; - deltaTextCoord *= 1.0 / float(NUM_SAMPLES) * density; - float illuminationDecay = 1.0; - - for(int i=0; i < NUM_SAMPLES ; i++) - { - textCoo -= deltaTextCoord; - vec4 sample = texture2D(uSampler, textCoo ); - - sample *= illuminationDecay * weight; - - gl_FragColor += sample; - - illuminationDecay *= decay; - } - - gl_FragColor *= exposure; -} diff --git a/src/filters/godray/godray.vert b/src/filters/godray/godray.vert deleted file mode 100644 index 507b40f..0000000 --- a/src/filters/godray/godray.vert +++ /dev/null @@ -1,12 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void) -{ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} - diff --git a/src/filters/gray/GrayFilter.js b/src/filters/gray/GrayFilter.js deleted file mode 100644 index af51b3e..0000000 --- a/src/filters/gray/GrayFilter.js +++ /dev/null @@ -1,47 +0,0 @@ -var core = require('../../core'); -// @see https://github.com/substack/brfs/issues/25 -var glslify = require('glslify'); - -/** - * This greyscales the palette of your Display Objects. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -function GrayFilter() -{ - core.Filter.call(this, - // vertex shader - glslify('./gray.vert', 'utf8'), - // fragment shader - glslify('./gray.frag', 'utf8') - ); - - this.uniforms.gray = 1; - - this.glShaderKey = 'gray'; -} - -GrayFilter.prototype = Object.create(core.Filter.prototype); -GrayFilter.prototype.constructor = GrayFilter; -module.exports = GrayFilter; - -Object.defineProperties(GrayFilter.prototype, { - /** - * The strength of the gray. 1 will make the object black and white, 0 will make the object its normal color. - * - * @member {number} - * @memberof PIXI.filters.GrayFilter# - */ - gray: { - get: function () - { - return this.uniforms.gray; - }, - set: function (value) - { - this.uniforms.gray = value; - } - } -}); diff --git a/src/filters/gray/gray.frag b/src/filters/gray/gray.frag deleted file mode 100644 index 2a1d3b1..0000000 --- a/src/filters/gray/gray.frag +++ /dev/null @@ -1,10 +0,0 @@ -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; -uniform float gray; - -void main(void) -{ - gl_FragColor = texture2D(uSampler, vTextureCoord); - gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray); -} diff --git a/src/filters/gray/gray.vert b/src/filters/gray/gray.vert deleted file mode 100644 index 787220d..0000000 --- a/src/filters/gray/gray.vert +++ /dev/null @@ -1,10 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void){ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} diff --git a/src/filters/index.js b/src/filters/index.js index d701906..2f16710 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -19,7 +19,7 @@ // DropShadowFilter: require('./dropshadow/DropShadowFilter'), // InvertFilter: require('./invert/InvertFilter'), // NoiseFilter: require('./noise/NoiseFilter'), - // PixelateFilter: require('./pixelate/PixelateFilter'), + PixelateFilter: require('./pixelate/PixelateFilter'), // RGBSplitFilter: require('./rgb/RGBSplitFilter'), // ShockwaveFilter: require('./shockwave/ShockwaveFilter'), // SepiaFilter: require('./sepia/SepiaFilter'), @@ -34,7 +34,6 @@ ColorMatrixFilter: require('./colormatrix/ColorMatrixFilter'), TwistFilter: require('./twist/TwistFilter'), - GrayFilter: require('./gray/GrayFilter'), - GodrayFilter: require('./godray/GodrayFilter'), + //GrayFilter: require('./gray/GrayFilter'), VoidFilter: require('./void/VoidFilter') }; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 228b419..d2f618d 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -34,7 +34,7 @@ var type = splitLine[1]; var name = splitLine[2]; - var size = mapSize(type); + var size = 1; if(name.indexOf('[') > -1) { diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index b443cf4..0c426a5 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -277,7 +277,7 @@ //check if its a point.. if(uniforms[i].x !== undefined) { - val = shader.uniforms[i]; + val = shader.uniforms[i] || new Float32Array(2); val[0] = uniforms[i].x; val[1] = uniforms[i].y; shader.uniforms[i] = val; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 6c35186..91b500e 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -21,7 +21,7 @@ { core.Filter.call(this, // vertex shader - glslify('./colorMatrix.vert'), + glslify('../fragments/default.vert'), // fragment shader glslify('./colorMatrix.frag') ); @@ -186,34 +186,34 @@ ColorMatrixFilter.prototype.hue = function (rotation, multiply) { rotation = (rotation || 0) / 180 * Math.PI; - + var cosR = Math.cos(rotation), sinR = Math.sin(rotation), sqrt = Math.sqrt; - + /*a good approximation for hue rotation This matrix is far better than the versions with magic luminance constants formerly used here, but also used in the starling framework (flash) and known from this old part of the internet: quasimondo.com/archives/000565.php - + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive implementation as a shader not a general matrix: https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - + This is the source for the code: see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 */ - + var w = 1/3, sqrW = sqrt(w);//weight is var a00 = cosR + (1.0 - cosR) * w; var a01 = w * (1.0 - cosR) - sqrW * sinR; var a02 = w * (1.0 - cosR) + sqrW * sinR; - + var a10 = w * (1.0 - cosR) + sqrW * sinR; var a11 = cosR + w*(1.0 - cosR); var a12 = w * (1.0 - cosR) - sqrW * sinR; - + var a20 = w * (1.0 - cosR) - sqrW * sinR; var a21 = w * (1.0 - cosR) + sqrW * sinR; var a22 = cosR + w * (1.0 - cosR); diff --git a/src/filters/colormatrix/colorMatrix.vert b/src/filters/colormatrix/colorMatrix.vert deleted file mode 100644 index 787220d..0000000 --- a/src/filters/colormatrix/colorMatrix.vert +++ /dev/null @@ -1,10 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void){ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index aa18fda..32276a1 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -19,7 +19,8 @@ core.Filter.call(this, // vertex shader - glslify('./displacement.vert'), +// glslify('./displacement.vert'), + glslify('../fragments/default-filter-matrix.vert'), // fragment shader glslify('./displacement.frag') @@ -29,7 +30,7 @@ this.maskMatrix = maskMatrix; this.uniforms.mapSampler = sprite.texture; - this.uniforms.otherMatrix = maskMatrix.toArray(true); + this.uniforms.filterMatrix = maskMatrix.toArray(true); this.uniforms.scale = { x: 1, y: 1 }; if (scale === null || scale === undefined) @@ -48,7 +49,7 @@ { var ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); - this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); + this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); this.uniforms.scale.x = this.scale.x * ratio; this.uniforms.scale.y = this.scale.y * ratio; diff --git a/src/filters/displacement/displacement.frag b/src/filters/displacement/displacement.frag index c989687..e7e4053 100644 --- a/src/filters/displacement/displacement.frag +++ b/src/filters/displacement/displacement.frag @@ -1,4 +1,4 @@ -varying vec2 vMapCoord; +varying vec2 vFilterCoord; varying vec2 vTextureCoord; uniform vec2 scale; @@ -10,7 +10,7 @@ void main(void) { - vec4 map = texture2D(mapSampler, vMapCoord); + vec4 map = texture2D(mapSampler, vFilterCoord); map -= 0.5; map.xy *= scale; diff --git a/src/filters/displacement/displacement.vert b/src/filters/displacement/displacement.vert deleted file mode 100644 index 42be4b6..0000000 --- a/src/filters/displacement/displacement.vert +++ /dev/null @@ -1,15 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -uniform mat3 otherMatrix; - -varying vec2 vMapCoord; -varying vec2 vTextureCoord; - -void main(void) -{ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; - vMapCoord = ( otherMatrix * vec3( aTextureCoord, 1.0) ).xy; -} diff --git a/src/filters/fragments/default-filter-matrix.vert b/src/filters/fragments/default-filter-matrix.vert new file mode 100755 index 0000000..75f1824 --- /dev/null +++ b/src/filters/fragments/default-filter-matrix.vert @@ -0,0 +1,15 @@ +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; + +uniform mat3 projectionMatrix; +uniform mat3 filterMatrix; + +varying vec2 vTextureCoord; +varying vec2 vFilterCoord; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy; + vTextureCoord = aTextureCoord; +} \ No newline at end of file diff --git a/src/filters/fragments/default.vert b/src/filters/fragments/default.vert new file mode 100755 index 0000000..1b744d2 --- /dev/null +++ b/src/filters/fragments/default.vert @@ -0,0 +1,12 @@ +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; + +uniform mat3 projectionMatrix; + +varying vec2 vTextureCoord; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + vTextureCoord = aTextureCoord; +} \ No newline at end of file diff --git a/src/filters/godray/GodrayFilter.js b/src/filters/godray/GodrayFilter.js deleted file mode 100644 index 28c9a42..0000000 --- a/src/filters/godray/GodrayFilter.js +++ /dev/null @@ -1,91 +0,0 @@ -var core = require('../../core'); -var glslify = require('glslify'); - -/** - * This filter applies a twist effect making display objects appear twisted in the given direction. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -function GodrayFilter() -{ - core.Filter.call(this, - // vertex shader - - glslify('./godray.vert', 'utf8'), - // fragment shader - glslify('./godray.frag', 'utf8') - ); - - this.uniforms.exposure = 0.0034; - this.uniforms.decay = 1.0; - this.uniforms.density = 0.84; - this.uniforms.weight = 5.65; - - this.uniforms.lightPositionOnScreen[0] = 0.5;///0.5; - this.uniforms.lightPositionOnScreen[1] = 0.5;//; -} - -GodrayFilter.prototype = Object.create(core.Filter.prototype); -GodrayFilter.prototype.constructor = GodrayFilter; -module.exports = GodrayFilter; - -GodrayFilter.prototype.apply = function (filterManager, input, output, clear) -{ - - filterManager.applyFilter(this, input, output, clear); -}; - -Object.defineProperties(GodrayFilter.prototype, { - /** - * This point describes the the offset of the twist. - * - * @member {PIXI.Point} - * @memberof PIXI.filters.GodrayFilter# - */ - offset: { - get: function () - { - return this.uniforms.offset; - }, - set: function (value) - { - this.uniforms.offset = value; - } - }, - - /** - * This radius of the twist. - * - * @member {number} - * @memberof PIXI.filters.GodrayFilter# - */ - radius: { - get: function () - { - return this.uniforms.radius; - }, - set: function (value) - { - this.uniforms.radius = value; - } - }, - - /** - * This angle of the twist. - * - * @member {number} - * @memberof PIXI.filters.GodrayFilter# - */ - angle: { - get: function () - { - return this.uniforms.angle; - }, - set: function (value) - { - this.uniforms.angle = value; - } - } -}); diff --git a/src/filters/godray/godray.frag b/src/filters/godray/godray.frag deleted file mode 100644 index 3dbd533..0000000 --- a/src/filters/godray/godray.frag +++ /dev/null @@ -1,31 +0,0 @@ -varying vec2 vTextureCoord; -uniform float exposure; -uniform float decay; -uniform float density; -uniform float weight; -uniform vec2 lightPositionOnScreen; -uniform sampler2D uSampler; - -const int NUM_SAMPLES = 100; - -void main() -{ - vec2 deltaTextCoord = vec2( vTextureCoord - lightPositionOnScreen.xy ); - vec2 textCoo = vTextureCoord; - deltaTextCoord *= 1.0 / float(NUM_SAMPLES) * density; - float illuminationDecay = 1.0; - - for(int i=0; i < NUM_SAMPLES ; i++) - { - textCoo -= deltaTextCoord; - vec4 sample = texture2D(uSampler, textCoo ); - - sample *= illuminationDecay * weight; - - gl_FragColor += sample; - - illuminationDecay *= decay; - } - - gl_FragColor *= exposure; -} diff --git a/src/filters/godray/godray.vert b/src/filters/godray/godray.vert deleted file mode 100644 index 507b40f..0000000 --- a/src/filters/godray/godray.vert +++ /dev/null @@ -1,12 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void) -{ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} - diff --git a/src/filters/gray/GrayFilter.js b/src/filters/gray/GrayFilter.js deleted file mode 100644 index af51b3e..0000000 --- a/src/filters/gray/GrayFilter.js +++ /dev/null @@ -1,47 +0,0 @@ -var core = require('../../core'); -// @see https://github.com/substack/brfs/issues/25 -var glslify = require('glslify'); - -/** - * This greyscales the palette of your Display Objects. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -function GrayFilter() -{ - core.Filter.call(this, - // vertex shader - glslify('./gray.vert', 'utf8'), - // fragment shader - glslify('./gray.frag', 'utf8') - ); - - this.uniforms.gray = 1; - - this.glShaderKey = 'gray'; -} - -GrayFilter.prototype = Object.create(core.Filter.prototype); -GrayFilter.prototype.constructor = GrayFilter; -module.exports = GrayFilter; - -Object.defineProperties(GrayFilter.prototype, { - /** - * The strength of the gray. 1 will make the object black and white, 0 will make the object its normal color. - * - * @member {number} - * @memberof PIXI.filters.GrayFilter# - */ - gray: { - get: function () - { - return this.uniforms.gray; - }, - set: function (value) - { - this.uniforms.gray = value; - } - } -}); diff --git a/src/filters/gray/gray.frag b/src/filters/gray/gray.frag deleted file mode 100644 index 2a1d3b1..0000000 --- a/src/filters/gray/gray.frag +++ /dev/null @@ -1,10 +0,0 @@ -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; -uniform float gray; - -void main(void) -{ - gl_FragColor = texture2D(uSampler, vTextureCoord); - gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray); -} diff --git a/src/filters/gray/gray.vert b/src/filters/gray/gray.vert deleted file mode 100644 index 787220d..0000000 --- a/src/filters/gray/gray.vert +++ /dev/null @@ -1,10 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void){ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} diff --git a/src/filters/index.js b/src/filters/index.js index d701906..2f16710 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -19,7 +19,7 @@ // DropShadowFilter: require('./dropshadow/DropShadowFilter'), // InvertFilter: require('./invert/InvertFilter'), // NoiseFilter: require('./noise/NoiseFilter'), - // PixelateFilter: require('./pixelate/PixelateFilter'), + PixelateFilter: require('./pixelate/PixelateFilter'), // RGBSplitFilter: require('./rgb/RGBSplitFilter'), // ShockwaveFilter: require('./shockwave/ShockwaveFilter'), // SepiaFilter: require('./sepia/SepiaFilter'), @@ -34,7 +34,6 @@ ColorMatrixFilter: require('./colormatrix/ColorMatrixFilter'), TwistFilter: require('./twist/TwistFilter'), - GrayFilter: require('./gray/GrayFilter'), - GodrayFilter: require('./godray/GodrayFilter'), + //GrayFilter: require('./gray/GrayFilter'), VoidFilter: require('./void/VoidFilter') }; diff --git a/src/filters/pixelate/PixelateFilter.js b/src/filters/pixelate/PixelateFilter.js new file mode 100644 index 0000000..6d5a1f2 --- /dev/null +++ b/src/filters/pixelate/PixelateFilter.js @@ -0,0 +1,47 @@ +var core = require('../../core'); +// @see https://github.com/substack/brfs/issues/25 +var glslify = require('glslify'); + +/** + * This filter applies a pixelate effect making display objects appear 'blocky'. + * + * @class + * @extends PIXI.AbstractFilter + * @memberof PIXI.filters + */ +function PixelateFilter() +{ + core.Filter.call(this, + // vertex shader + glslify('../fragments/default.vert'), + // fragment shader + glslify('./pixelate.frag') + ); + + this.size = [0,0]; + +} + +PixelateFilter.prototype = Object.create(core.Filter.prototype); +PixelateFilter.prototype.constructor = PixelateFilter; +module.exports = PixelateFilter; + +Object.defineProperties(PixelateFilter.prototype, { + /** + * This a point that describes the size of the blocks. + * x is the width of the block and y is the height. + * + * @member {PIXI.Point} + * @memberof PIXI.filters.PixelateFilter# + */ + size: { + get: function () + { + return this.uniforms.size; + }, + set: function (value) + { + this.uniforms.size.value = value; + } + } +}); diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 228b419..d2f618d 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -34,7 +34,7 @@ var type = splitLine[1]; var name = splitLine[2]; - var size = mapSize(type); + var size = 1; if(name.indexOf('[') > -1) { diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index b443cf4..0c426a5 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -277,7 +277,7 @@ //check if its a point.. if(uniforms[i].x !== undefined) { - val = shader.uniforms[i]; + val = shader.uniforms[i] || new Float32Array(2); val[0] = uniforms[i].x; val[1] = uniforms[i].y; shader.uniforms[i] = val; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 6c35186..91b500e 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -21,7 +21,7 @@ { core.Filter.call(this, // vertex shader - glslify('./colorMatrix.vert'), + glslify('../fragments/default.vert'), // fragment shader glslify('./colorMatrix.frag') ); @@ -186,34 +186,34 @@ ColorMatrixFilter.prototype.hue = function (rotation, multiply) { rotation = (rotation || 0) / 180 * Math.PI; - + var cosR = Math.cos(rotation), sinR = Math.sin(rotation), sqrt = Math.sqrt; - + /*a good approximation for hue rotation This matrix is far better than the versions with magic luminance constants formerly used here, but also used in the starling framework (flash) and known from this old part of the internet: quasimondo.com/archives/000565.php - + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive implementation as a shader not a general matrix: https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - + This is the source for the code: see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 */ - + var w = 1/3, sqrW = sqrt(w);//weight is var a00 = cosR + (1.0 - cosR) * w; var a01 = w * (1.0 - cosR) - sqrW * sinR; var a02 = w * (1.0 - cosR) + sqrW * sinR; - + var a10 = w * (1.0 - cosR) + sqrW * sinR; var a11 = cosR + w*(1.0 - cosR); var a12 = w * (1.0 - cosR) - sqrW * sinR; - + var a20 = w * (1.0 - cosR) - sqrW * sinR; var a21 = w * (1.0 - cosR) + sqrW * sinR; var a22 = cosR + w * (1.0 - cosR); diff --git a/src/filters/colormatrix/colorMatrix.vert b/src/filters/colormatrix/colorMatrix.vert deleted file mode 100644 index 787220d..0000000 --- a/src/filters/colormatrix/colorMatrix.vert +++ /dev/null @@ -1,10 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void){ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index aa18fda..32276a1 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -19,7 +19,8 @@ core.Filter.call(this, // vertex shader - glslify('./displacement.vert'), +// glslify('./displacement.vert'), + glslify('../fragments/default-filter-matrix.vert'), // fragment shader glslify('./displacement.frag') @@ -29,7 +30,7 @@ this.maskMatrix = maskMatrix; this.uniforms.mapSampler = sprite.texture; - this.uniforms.otherMatrix = maskMatrix.toArray(true); + this.uniforms.filterMatrix = maskMatrix.toArray(true); this.uniforms.scale = { x: 1, y: 1 }; if (scale === null || scale === undefined) @@ -48,7 +49,7 @@ { var ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); - this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); + this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); this.uniforms.scale.x = this.scale.x * ratio; this.uniforms.scale.y = this.scale.y * ratio; diff --git a/src/filters/displacement/displacement.frag b/src/filters/displacement/displacement.frag index c989687..e7e4053 100644 --- a/src/filters/displacement/displacement.frag +++ b/src/filters/displacement/displacement.frag @@ -1,4 +1,4 @@ -varying vec2 vMapCoord; +varying vec2 vFilterCoord; varying vec2 vTextureCoord; uniform vec2 scale; @@ -10,7 +10,7 @@ void main(void) { - vec4 map = texture2D(mapSampler, vMapCoord); + vec4 map = texture2D(mapSampler, vFilterCoord); map -= 0.5; map.xy *= scale; diff --git a/src/filters/displacement/displacement.vert b/src/filters/displacement/displacement.vert deleted file mode 100644 index 42be4b6..0000000 --- a/src/filters/displacement/displacement.vert +++ /dev/null @@ -1,15 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -uniform mat3 otherMatrix; - -varying vec2 vMapCoord; -varying vec2 vTextureCoord; - -void main(void) -{ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; - vMapCoord = ( otherMatrix * vec3( aTextureCoord, 1.0) ).xy; -} diff --git a/src/filters/fragments/default-filter-matrix.vert b/src/filters/fragments/default-filter-matrix.vert new file mode 100755 index 0000000..75f1824 --- /dev/null +++ b/src/filters/fragments/default-filter-matrix.vert @@ -0,0 +1,15 @@ +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; + +uniform mat3 projectionMatrix; +uniform mat3 filterMatrix; + +varying vec2 vTextureCoord; +varying vec2 vFilterCoord; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy; + vTextureCoord = aTextureCoord; +} \ No newline at end of file diff --git a/src/filters/fragments/default.vert b/src/filters/fragments/default.vert new file mode 100755 index 0000000..1b744d2 --- /dev/null +++ b/src/filters/fragments/default.vert @@ -0,0 +1,12 @@ +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; + +uniform mat3 projectionMatrix; + +varying vec2 vTextureCoord; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + vTextureCoord = aTextureCoord; +} \ No newline at end of file diff --git a/src/filters/godray/GodrayFilter.js b/src/filters/godray/GodrayFilter.js deleted file mode 100644 index 28c9a42..0000000 --- a/src/filters/godray/GodrayFilter.js +++ /dev/null @@ -1,91 +0,0 @@ -var core = require('../../core'); -var glslify = require('glslify'); - -/** - * This filter applies a twist effect making display objects appear twisted in the given direction. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -function GodrayFilter() -{ - core.Filter.call(this, - // vertex shader - - glslify('./godray.vert', 'utf8'), - // fragment shader - glslify('./godray.frag', 'utf8') - ); - - this.uniforms.exposure = 0.0034; - this.uniforms.decay = 1.0; - this.uniforms.density = 0.84; - this.uniforms.weight = 5.65; - - this.uniforms.lightPositionOnScreen[0] = 0.5;///0.5; - this.uniforms.lightPositionOnScreen[1] = 0.5;//; -} - -GodrayFilter.prototype = Object.create(core.Filter.prototype); -GodrayFilter.prototype.constructor = GodrayFilter; -module.exports = GodrayFilter; - -GodrayFilter.prototype.apply = function (filterManager, input, output, clear) -{ - - filterManager.applyFilter(this, input, output, clear); -}; - -Object.defineProperties(GodrayFilter.prototype, { - /** - * This point describes the the offset of the twist. - * - * @member {PIXI.Point} - * @memberof PIXI.filters.GodrayFilter# - */ - offset: { - get: function () - { - return this.uniforms.offset; - }, - set: function (value) - { - this.uniforms.offset = value; - } - }, - - /** - * This radius of the twist. - * - * @member {number} - * @memberof PIXI.filters.GodrayFilter# - */ - radius: { - get: function () - { - return this.uniforms.radius; - }, - set: function (value) - { - this.uniforms.radius = value; - } - }, - - /** - * This angle of the twist. - * - * @member {number} - * @memberof PIXI.filters.GodrayFilter# - */ - angle: { - get: function () - { - return this.uniforms.angle; - }, - set: function (value) - { - this.uniforms.angle = value; - } - } -}); diff --git a/src/filters/godray/godray.frag b/src/filters/godray/godray.frag deleted file mode 100644 index 3dbd533..0000000 --- a/src/filters/godray/godray.frag +++ /dev/null @@ -1,31 +0,0 @@ -varying vec2 vTextureCoord; -uniform float exposure; -uniform float decay; -uniform float density; -uniform float weight; -uniform vec2 lightPositionOnScreen; -uniform sampler2D uSampler; - -const int NUM_SAMPLES = 100; - -void main() -{ - vec2 deltaTextCoord = vec2( vTextureCoord - lightPositionOnScreen.xy ); - vec2 textCoo = vTextureCoord; - deltaTextCoord *= 1.0 / float(NUM_SAMPLES) * density; - float illuminationDecay = 1.0; - - for(int i=0; i < NUM_SAMPLES ; i++) - { - textCoo -= deltaTextCoord; - vec4 sample = texture2D(uSampler, textCoo ); - - sample *= illuminationDecay * weight; - - gl_FragColor += sample; - - illuminationDecay *= decay; - } - - gl_FragColor *= exposure; -} diff --git a/src/filters/godray/godray.vert b/src/filters/godray/godray.vert deleted file mode 100644 index 507b40f..0000000 --- a/src/filters/godray/godray.vert +++ /dev/null @@ -1,12 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void) -{ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} - diff --git a/src/filters/gray/GrayFilter.js b/src/filters/gray/GrayFilter.js deleted file mode 100644 index af51b3e..0000000 --- a/src/filters/gray/GrayFilter.js +++ /dev/null @@ -1,47 +0,0 @@ -var core = require('../../core'); -// @see https://github.com/substack/brfs/issues/25 -var glslify = require('glslify'); - -/** - * This greyscales the palette of your Display Objects. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -function GrayFilter() -{ - core.Filter.call(this, - // vertex shader - glslify('./gray.vert', 'utf8'), - // fragment shader - glslify('./gray.frag', 'utf8') - ); - - this.uniforms.gray = 1; - - this.glShaderKey = 'gray'; -} - -GrayFilter.prototype = Object.create(core.Filter.prototype); -GrayFilter.prototype.constructor = GrayFilter; -module.exports = GrayFilter; - -Object.defineProperties(GrayFilter.prototype, { - /** - * The strength of the gray. 1 will make the object black and white, 0 will make the object its normal color. - * - * @member {number} - * @memberof PIXI.filters.GrayFilter# - */ - gray: { - get: function () - { - return this.uniforms.gray; - }, - set: function (value) - { - this.uniforms.gray = value; - } - } -}); diff --git a/src/filters/gray/gray.frag b/src/filters/gray/gray.frag deleted file mode 100644 index 2a1d3b1..0000000 --- a/src/filters/gray/gray.frag +++ /dev/null @@ -1,10 +0,0 @@ -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; -uniform float gray; - -void main(void) -{ - gl_FragColor = texture2D(uSampler, vTextureCoord); - gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray); -} diff --git a/src/filters/gray/gray.vert b/src/filters/gray/gray.vert deleted file mode 100644 index 787220d..0000000 --- a/src/filters/gray/gray.vert +++ /dev/null @@ -1,10 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void){ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} diff --git a/src/filters/index.js b/src/filters/index.js index d701906..2f16710 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -19,7 +19,7 @@ // DropShadowFilter: require('./dropshadow/DropShadowFilter'), // InvertFilter: require('./invert/InvertFilter'), // NoiseFilter: require('./noise/NoiseFilter'), - // PixelateFilter: require('./pixelate/PixelateFilter'), + PixelateFilter: require('./pixelate/PixelateFilter'), // RGBSplitFilter: require('./rgb/RGBSplitFilter'), // ShockwaveFilter: require('./shockwave/ShockwaveFilter'), // SepiaFilter: require('./sepia/SepiaFilter'), @@ -34,7 +34,6 @@ ColorMatrixFilter: require('./colormatrix/ColorMatrixFilter'), TwistFilter: require('./twist/TwistFilter'), - GrayFilter: require('./gray/GrayFilter'), - GodrayFilter: require('./godray/GodrayFilter'), + //GrayFilter: require('./gray/GrayFilter'), VoidFilter: require('./void/VoidFilter') }; diff --git a/src/filters/pixelate/PixelateFilter.js b/src/filters/pixelate/PixelateFilter.js new file mode 100644 index 0000000..6d5a1f2 --- /dev/null +++ b/src/filters/pixelate/PixelateFilter.js @@ -0,0 +1,47 @@ +var core = require('../../core'); +// @see https://github.com/substack/brfs/issues/25 +var glslify = require('glslify'); + +/** + * This filter applies a pixelate effect making display objects appear 'blocky'. + * + * @class + * @extends PIXI.AbstractFilter + * @memberof PIXI.filters + */ +function PixelateFilter() +{ + core.Filter.call(this, + // vertex shader + glslify('../fragments/default.vert'), + // fragment shader + glslify('./pixelate.frag') + ); + + this.size = [0,0]; + +} + +PixelateFilter.prototype = Object.create(core.Filter.prototype); +PixelateFilter.prototype.constructor = PixelateFilter; +module.exports = PixelateFilter; + +Object.defineProperties(PixelateFilter.prototype, { + /** + * This a point that describes the size of the blocks. + * x is the width of the block and y is the height. + * + * @member {PIXI.Point} + * @memberof PIXI.filters.PixelateFilter# + */ + size: { + get: function () + { + return this.uniforms.size; + }, + set: function (value) + { + this.uniforms.size.value = value; + } + } +}); diff --git a/src/filters/pixelate/pixelate.frag b/src/filters/pixelate/pixelate.frag new file mode 100644 index 0000000..80ad2ee --- /dev/null +++ b/src/filters/pixelate/pixelate.frag @@ -0,0 +1,40 @@ +precision mediump float; + +varying vec2 vTextureCoord; + +uniform vec2 size; +uniform sampler2D uSampler; + +uniform vec4 filterArea; + +vec2 mapCoord( vec2 coord ) +{ + coord *= filterArea.xy; + coord += filterArea.zw; + + return coord; +} + +vec2 unmapCoord( vec2 coord ) +{ + coord -= filterArea.zw; + coord /= filterArea.xy; + + return coord; +} + +vec2 pixelate(vec2 coord, vec2 size) +{ + return floor( coord / size ) * size; +} + +void main(void) +{ + vec2 coord = mapCoord(vTextureCoord); + + coord = pixelate(coord, size); + + coord = unmapCoord(coord); + + gl_FragColor = texture2D(uSampler, coord); +} diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 228b419..d2f618d 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -34,7 +34,7 @@ var type = splitLine[1]; var name = splitLine[2]; - var size = mapSize(type); + var size = 1; if(name.indexOf('[') > -1) { diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index b443cf4..0c426a5 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -277,7 +277,7 @@ //check if its a point.. if(uniforms[i].x !== undefined) { - val = shader.uniforms[i]; + val = shader.uniforms[i] || new Float32Array(2); val[0] = uniforms[i].x; val[1] = uniforms[i].y; shader.uniforms[i] = val; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 6c35186..91b500e 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -21,7 +21,7 @@ { core.Filter.call(this, // vertex shader - glslify('./colorMatrix.vert'), + glslify('../fragments/default.vert'), // fragment shader glslify('./colorMatrix.frag') ); @@ -186,34 +186,34 @@ ColorMatrixFilter.prototype.hue = function (rotation, multiply) { rotation = (rotation || 0) / 180 * Math.PI; - + var cosR = Math.cos(rotation), sinR = Math.sin(rotation), sqrt = Math.sqrt; - + /*a good approximation for hue rotation This matrix is far better than the versions with magic luminance constants formerly used here, but also used in the starling framework (flash) and known from this old part of the internet: quasimondo.com/archives/000565.php - + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive implementation as a shader not a general matrix: https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - + This is the source for the code: see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 */ - + var w = 1/3, sqrW = sqrt(w);//weight is var a00 = cosR + (1.0 - cosR) * w; var a01 = w * (1.0 - cosR) - sqrW * sinR; var a02 = w * (1.0 - cosR) + sqrW * sinR; - + var a10 = w * (1.0 - cosR) + sqrW * sinR; var a11 = cosR + w*(1.0 - cosR); var a12 = w * (1.0 - cosR) - sqrW * sinR; - + var a20 = w * (1.0 - cosR) - sqrW * sinR; var a21 = w * (1.0 - cosR) + sqrW * sinR; var a22 = cosR + w * (1.0 - cosR); diff --git a/src/filters/colormatrix/colorMatrix.vert b/src/filters/colormatrix/colorMatrix.vert deleted file mode 100644 index 787220d..0000000 --- a/src/filters/colormatrix/colorMatrix.vert +++ /dev/null @@ -1,10 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void){ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index aa18fda..32276a1 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -19,7 +19,8 @@ core.Filter.call(this, // vertex shader - glslify('./displacement.vert'), +// glslify('./displacement.vert'), + glslify('../fragments/default-filter-matrix.vert'), // fragment shader glslify('./displacement.frag') @@ -29,7 +30,7 @@ this.maskMatrix = maskMatrix; this.uniforms.mapSampler = sprite.texture; - this.uniforms.otherMatrix = maskMatrix.toArray(true); + this.uniforms.filterMatrix = maskMatrix.toArray(true); this.uniforms.scale = { x: 1, y: 1 }; if (scale === null || scale === undefined) @@ -48,7 +49,7 @@ { var ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); - this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); + this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); this.uniforms.scale.x = this.scale.x * ratio; this.uniforms.scale.y = this.scale.y * ratio; diff --git a/src/filters/displacement/displacement.frag b/src/filters/displacement/displacement.frag index c989687..e7e4053 100644 --- a/src/filters/displacement/displacement.frag +++ b/src/filters/displacement/displacement.frag @@ -1,4 +1,4 @@ -varying vec2 vMapCoord; +varying vec2 vFilterCoord; varying vec2 vTextureCoord; uniform vec2 scale; @@ -10,7 +10,7 @@ void main(void) { - vec4 map = texture2D(mapSampler, vMapCoord); + vec4 map = texture2D(mapSampler, vFilterCoord); map -= 0.5; map.xy *= scale; diff --git a/src/filters/displacement/displacement.vert b/src/filters/displacement/displacement.vert deleted file mode 100644 index 42be4b6..0000000 --- a/src/filters/displacement/displacement.vert +++ /dev/null @@ -1,15 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -uniform mat3 otherMatrix; - -varying vec2 vMapCoord; -varying vec2 vTextureCoord; - -void main(void) -{ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; - vMapCoord = ( otherMatrix * vec3( aTextureCoord, 1.0) ).xy; -} diff --git a/src/filters/fragments/default-filter-matrix.vert b/src/filters/fragments/default-filter-matrix.vert new file mode 100755 index 0000000..75f1824 --- /dev/null +++ b/src/filters/fragments/default-filter-matrix.vert @@ -0,0 +1,15 @@ +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; + +uniform mat3 projectionMatrix; +uniform mat3 filterMatrix; + +varying vec2 vTextureCoord; +varying vec2 vFilterCoord; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy; + vTextureCoord = aTextureCoord; +} \ No newline at end of file diff --git a/src/filters/fragments/default.vert b/src/filters/fragments/default.vert new file mode 100755 index 0000000..1b744d2 --- /dev/null +++ b/src/filters/fragments/default.vert @@ -0,0 +1,12 @@ +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; + +uniform mat3 projectionMatrix; + +varying vec2 vTextureCoord; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + vTextureCoord = aTextureCoord; +} \ No newline at end of file diff --git a/src/filters/godray/GodrayFilter.js b/src/filters/godray/GodrayFilter.js deleted file mode 100644 index 28c9a42..0000000 --- a/src/filters/godray/GodrayFilter.js +++ /dev/null @@ -1,91 +0,0 @@ -var core = require('../../core'); -var glslify = require('glslify'); - -/** - * This filter applies a twist effect making display objects appear twisted in the given direction. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -function GodrayFilter() -{ - core.Filter.call(this, - // vertex shader - - glslify('./godray.vert', 'utf8'), - // fragment shader - glslify('./godray.frag', 'utf8') - ); - - this.uniforms.exposure = 0.0034; - this.uniforms.decay = 1.0; - this.uniforms.density = 0.84; - this.uniforms.weight = 5.65; - - this.uniforms.lightPositionOnScreen[0] = 0.5;///0.5; - this.uniforms.lightPositionOnScreen[1] = 0.5;//; -} - -GodrayFilter.prototype = Object.create(core.Filter.prototype); -GodrayFilter.prototype.constructor = GodrayFilter; -module.exports = GodrayFilter; - -GodrayFilter.prototype.apply = function (filterManager, input, output, clear) -{ - - filterManager.applyFilter(this, input, output, clear); -}; - -Object.defineProperties(GodrayFilter.prototype, { - /** - * This point describes the the offset of the twist. - * - * @member {PIXI.Point} - * @memberof PIXI.filters.GodrayFilter# - */ - offset: { - get: function () - { - return this.uniforms.offset; - }, - set: function (value) - { - this.uniforms.offset = value; - } - }, - - /** - * This radius of the twist. - * - * @member {number} - * @memberof PIXI.filters.GodrayFilter# - */ - radius: { - get: function () - { - return this.uniforms.radius; - }, - set: function (value) - { - this.uniforms.radius = value; - } - }, - - /** - * This angle of the twist. - * - * @member {number} - * @memberof PIXI.filters.GodrayFilter# - */ - angle: { - get: function () - { - return this.uniforms.angle; - }, - set: function (value) - { - this.uniforms.angle = value; - } - } -}); diff --git a/src/filters/godray/godray.frag b/src/filters/godray/godray.frag deleted file mode 100644 index 3dbd533..0000000 --- a/src/filters/godray/godray.frag +++ /dev/null @@ -1,31 +0,0 @@ -varying vec2 vTextureCoord; -uniform float exposure; -uniform float decay; -uniform float density; -uniform float weight; -uniform vec2 lightPositionOnScreen; -uniform sampler2D uSampler; - -const int NUM_SAMPLES = 100; - -void main() -{ - vec2 deltaTextCoord = vec2( vTextureCoord - lightPositionOnScreen.xy ); - vec2 textCoo = vTextureCoord; - deltaTextCoord *= 1.0 / float(NUM_SAMPLES) * density; - float illuminationDecay = 1.0; - - for(int i=0; i < NUM_SAMPLES ; i++) - { - textCoo -= deltaTextCoord; - vec4 sample = texture2D(uSampler, textCoo ); - - sample *= illuminationDecay * weight; - - gl_FragColor += sample; - - illuminationDecay *= decay; - } - - gl_FragColor *= exposure; -} diff --git a/src/filters/godray/godray.vert b/src/filters/godray/godray.vert deleted file mode 100644 index 507b40f..0000000 --- a/src/filters/godray/godray.vert +++ /dev/null @@ -1,12 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void) -{ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} - diff --git a/src/filters/gray/GrayFilter.js b/src/filters/gray/GrayFilter.js deleted file mode 100644 index af51b3e..0000000 --- a/src/filters/gray/GrayFilter.js +++ /dev/null @@ -1,47 +0,0 @@ -var core = require('../../core'); -// @see https://github.com/substack/brfs/issues/25 -var glslify = require('glslify'); - -/** - * This greyscales the palette of your Display Objects. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -function GrayFilter() -{ - core.Filter.call(this, - // vertex shader - glslify('./gray.vert', 'utf8'), - // fragment shader - glslify('./gray.frag', 'utf8') - ); - - this.uniforms.gray = 1; - - this.glShaderKey = 'gray'; -} - -GrayFilter.prototype = Object.create(core.Filter.prototype); -GrayFilter.prototype.constructor = GrayFilter; -module.exports = GrayFilter; - -Object.defineProperties(GrayFilter.prototype, { - /** - * The strength of the gray. 1 will make the object black and white, 0 will make the object its normal color. - * - * @member {number} - * @memberof PIXI.filters.GrayFilter# - */ - gray: { - get: function () - { - return this.uniforms.gray; - }, - set: function (value) - { - this.uniforms.gray = value; - } - } -}); diff --git a/src/filters/gray/gray.frag b/src/filters/gray/gray.frag deleted file mode 100644 index 2a1d3b1..0000000 --- a/src/filters/gray/gray.frag +++ /dev/null @@ -1,10 +0,0 @@ -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; -uniform float gray; - -void main(void) -{ - gl_FragColor = texture2D(uSampler, vTextureCoord); - gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray); -} diff --git a/src/filters/gray/gray.vert b/src/filters/gray/gray.vert deleted file mode 100644 index 787220d..0000000 --- a/src/filters/gray/gray.vert +++ /dev/null @@ -1,10 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void){ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} diff --git a/src/filters/index.js b/src/filters/index.js index d701906..2f16710 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -19,7 +19,7 @@ // DropShadowFilter: require('./dropshadow/DropShadowFilter'), // InvertFilter: require('./invert/InvertFilter'), // NoiseFilter: require('./noise/NoiseFilter'), - // PixelateFilter: require('./pixelate/PixelateFilter'), + PixelateFilter: require('./pixelate/PixelateFilter'), // RGBSplitFilter: require('./rgb/RGBSplitFilter'), // ShockwaveFilter: require('./shockwave/ShockwaveFilter'), // SepiaFilter: require('./sepia/SepiaFilter'), @@ -34,7 +34,6 @@ ColorMatrixFilter: require('./colormatrix/ColorMatrixFilter'), TwistFilter: require('./twist/TwistFilter'), - GrayFilter: require('./gray/GrayFilter'), - GodrayFilter: require('./godray/GodrayFilter'), + //GrayFilter: require('./gray/GrayFilter'), VoidFilter: require('./void/VoidFilter') }; diff --git a/src/filters/pixelate/PixelateFilter.js b/src/filters/pixelate/PixelateFilter.js new file mode 100644 index 0000000..6d5a1f2 --- /dev/null +++ b/src/filters/pixelate/PixelateFilter.js @@ -0,0 +1,47 @@ +var core = require('../../core'); +// @see https://github.com/substack/brfs/issues/25 +var glslify = require('glslify'); + +/** + * This filter applies a pixelate effect making display objects appear 'blocky'. + * + * @class + * @extends PIXI.AbstractFilter + * @memberof PIXI.filters + */ +function PixelateFilter() +{ + core.Filter.call(this, + // vertex shader + glslify('../fragments/default.vert'), + // fragment shader + glslify('./pixelate.frag') + ); + + this.size = [0,0]; + +} + +PixelateFilter.prototype = Object.create(core.Filter.prototype); +PixelateFilter.prototype.constructor = PixelateFilter; +module.exports = PixelateFilter; + +Object.defineProperties(PixelateFilter.prototype, { + /** + * This a point that describes the size of the blocks. + * x is the width of the block and y is the height. + * + * @member {PIXI.Point} + * @memberof PIXI.filters.PixelateFilter# + */ + size: { + get: function () + { + return this.uniforms.size; + }, + set: function (value) + { + this.uniforms.size.value = value; + } + } +}); diff --git a/src/filters/pixelate/pixelate.frag b/src/filters/pixelate/pixelate.frag new file mode 100644 index 0000000..80ad2ee --- /dev/null +++ b/src/filters/pixelate/pixelate.frag @@ -0,0 +1,40 @@ +precision mediump float; + +varying vec2 vTextureCoord; + +uniform vec2 size; +uniform sampler2D uSampler; + +uniform vec4 filterArea; + +vec2 mapCoord( vec2 coord ) +{ + coord *= filterArea.xy; + coord += filterArea.zw; + + return coord; +} + +vec2 unmapCoord( vec2 coord ) +{ + coord -= filterArea.zw; + coord /= filterArea.xy; + + return coord; +} + +vec2 pixelate(vec2 coord, vec2 size) +{ + return floor( coord / size ) * size; +} + +void main(void) +{ + vec2 coord = mapCoord(vTextureCoord); + + coord = pixelate(coord, size); + + coord = unmapCoord(coord); + + gl_FragColor = texture2D(uSampler, coord); +} diff --git a/src/filters/twist/TwistFilter.js b/src/filters/twist/TwistFilter.js index 3e5082a..90e5b7f 100644 --- a/src/filters/twist/TwistFilter.js +++ b/src/filters/twist/TwistFilter.js @@ -12,36 +12,20 @@ { core.Filter.call(this, // vertex shader - - glslify('./twist.vert', 'utf8'), + glslify('../fragments/default.vert'), // fragment shader - glslify('./twist.frag', 'utf8') + glslify('./twist.frag') ); - this.uniforms.radius = 400; - this.uniforms.angle = 3; - this.uniforms.offset = [400,300]; - //this.uniforms.dimensions = [100, 100, 100, 100]; - this.transform = new core.math.Matrix(); - this.padding = 200; + this.radius = 200; + this.angle = 4; + this.padding = 20; } TwistFilter.prototype = Object.create(core.Filter.prototype); TwistFilter.prototype.constructor = TwistFilter; module.exports = TwistFilter; -TwistFilter.prototype.apply = function (filterManager, input, output, clear) -{ - /* - this.uniforms.filterArea[0] = input.size.width; - this.uniforms.filterArea[1] = input.size.height; - this.uniforms.filterArea[2] = currentState.sourceFrame.x; - this.uniforms.filterArea[3] = currentState.sourceFrame.y; - */ - - filterManager.applyFilter(this, input, output, clear); -}; - Object.defineProperties(TwistFilter.prototype, { /** * This point describes the the offset of the twist. diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 228b419..d2f618d 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -34,7 +34,7 @@ var type = splitLine[1]; var name = splitLine[2]; - var size = mapSize(type); + var size = 1; if(name.indexOf('[') > -1) { diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index b443cf4..0c426a5 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -277,7 +277,7 @@ //check if its a point.. if(uniforms[i].x !== undefined) { - val = shader.uniforms[i]; + val = shader.uniforms[i] || new Float32Array(2); val[0] = uniforms[i].x; val[1] = uniforms[i].y; shader.uniforms[i] = val; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 6c35186..91b500e 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -21,7 +21,7 @@ { core.Filter.call(this, // vertex shader - glslify('./colorMatrix.vert'), + glslify('../fragments/default.vert'), // fragment shader glslify('./colorMatrix.frag') ); @@ -186,34 +186,34 @@ ColorMatrixFilter.prototype.hue = function (rotation, multiply) { rotation = (rotation || 0) / 180 * Math.PI; - + var cosR = Math.cos(rotation), sinR = Math.sin(rotation), sqrt = Math.sqrt; - + /*a good approximation for hue rotation This matrix is far better than the versions with magic luminance constants formerly used here, but also used in the starling framework (flash) and known from this old part of the internet: quasimondo.com/archives/000565.php - + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive implementation as a shader not a general matrix: https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - + This is the source for the code: see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 */ - + var w = 1/3, sqrW = sqrt(w);//weight is var a00 = cosR + (1.0 - cosR) * w; var a01 = w * (1.0 - cosR) - sqrW * sinR; var a02 = w * (1.0 - cosR) + sqrW * sinR; - + var a10 = w * (1.0 - cosR) + sqrW * sinR; var a11 = cosR + w*(1.0 - cosR); var a12 = w * (1.0 - cosR) - sqrW * sinR; - + var a20 = w * (1.0 - cosR) - sqrW * sinR; var a21 = w * (1.0 - cosR) + sqrW * sinR; var a22 = cosR + w * (1.0 - cosR); diff --git a/src/filters/colormatrix/colorMatrix.vert b/src/filters/colormatrix/colorMatrix.vert deleted file mode 100644 index 787220d..0000000 --- a/src/filters/colormatrix/colorMatrix.vert +++ /dev/null @@ -1,10 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void){ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index aa18fda..32276a1 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -19,7 +19,8 @@ core.Filter.call(this, // vertex shader - glslify('./displacement.vert'), +// glslify('./displacement.vert'), + glslify('../fragments/default-filter-matrix.vert'), // fragment shader glslify('./displacement.frag') @@ -29,7 +30,7 @@ this.maskMatrix = maskMatrix; this.uniforms.mapSampler = sprite.texture; - this.uniforms.otherMatrix = maskMatrix.toArray(true); + this.uniforms.filterMatrix = maskMatrix.toArray(true); this.uniforms.scale = { x: 1, y: 1 }; if (scale === null || scale === undefined) @@ -48,7 +49,7 @@ { var ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); - this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); + this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); this.uniforms.scale.x = this.scale.x * ratio; this.uniforms.scale.y = this.scale.y * ratio; diff --git a/src/filters/displacement/displacement.frag b/src/filters/displacement/displacement.frag index c989687..e7e4053 100644 --- a/src/filters/displacement/displacement.frag +++ b/src/filters/displacement/displacement.frag @@ -1,4 +1,4 @@ -varying vec2 vMapCoord; +varying vec2 vFilterCoord; varying vec2 vTextureCoord; uniform vec2 scale; @@ -10,7 +10,7 @@ void main(void) { - vec4 map = texture2D(mapSampler, vMapCoord); + vec4 map = texture2D(mapSampler, vFilterCoord); map -= 0.5; map.xy *= scale; diff --git a/src/filters/displacement/displacement.vert b/src/filters/displacement/displacement.vert deleted file mode 100644 index 42be4b6..0000000 --- a/src/filters/displacement/displacement.vert +++ /dev/null @@ -1,15 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -uniform mat3 otherMatrix; - -varying vec2 vMapCoord; -varying vec2 vTextureCoord; - -void main(void) -{ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; - vMapCoord = ( otherMatrix * vec3( aTextureCoord, 1.0) ).xy; -} diff --git a/src/filters/fragments/default-filter-matrix.vert b/src/filters/fragments/default-filter-matrix.vert new file mode 100755 index 0000000..75f1824 --- /dev/null +++ b/src/filters/fragments/default-filter-matrix.vert @@ -0,0 +1,15 @@ +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; + +uniform mat3 projectionMatrix; +uniform mat3 filterMatrix; + +varying vec2 vTextureCoord; +varying vec2 vFilterCoord; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy; + vTextureCoord = aTextureCoord; +} \ No newline at end of file diff --git a/src/filters/fragments/default.vert b/src/filters/fragments/default.vert new file mode 100755 index 0000000..1b744d2 --- /dev/null +++ b/src/filters/fragments/default.vert @@ -0,0 +1,12 @@ +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; + +uniform mat3 projectionMatrix; + +varying vec2 vTextureCoord; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + vTextureCoord = aTextureCoord; +} \ No newline at end of file diff --git a/src/filters/godray/GodrayFilter.js b/src/filters/godray/GodrayFilter.js deleted file mode 100644 index 28c9a42..0000000 --- a/src/filters/godray/GodrayFilter.js +++ /dev/null @@ -1,91 +0,0 @@ -var core = require('../../core'); -var glslify = require('glslify'); - -/** - * This filter applies a twist effect making display objects appear twisted in the given direction. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -function GodrayFilter() -{ - core.Filter.call(this, - // vertex shader - - glslify('./godray.vert', 'utf8'), - // fragment shader - glslify('./godray.frag', 'utf8') - ); - - this.uniforms.exposure = 0.0034; - this.uniforms.decay = 1.0; - this.uniforms.density = 0.84; - this.uniforms.weight = 5.65; - - this.uniforms.lightPositionOnScreen[0] = 0.5;///0.5; - this.uniforms.lightPositionOnScreen[1] = 0.5;//; -} - -GodrayFilter.prototype = Object.create(core.Filter.prototype); -GodrayFilter.prototype.constructor = GodrayFilter; -module.exports = GodrayFilter; - -GodrayFilter.prototype.apply = function (filterManager, input, output, clear) -{ - - filterManager.applyFilter(this, input, output, clear); -}; - -Object.defineProperties(GodrayFilter.prototype, { - /** - * This point describes the the offset of the twist. - * - * @member {PIXI.Point} - * @memberof PIXI.filters.GodrayFilter# - */ - offset: { - get: function () - { - return this.uniforms.offset; - }, - set: function (value) - { - this.uniforms.offset = value; - } - }, - - /** - * This radius of the twist. - * - * @member {number} - * @memberof PIXI.filters.GodrayFilter# - */ - radius: { - get: function () - { - return this.uniforms.radius; - }, - set: function (value) - { - this.uniforms.radius = value; - } - }, - - /** - * This angle of the twist. - * - * @member {number} - * @memberof PIXI.filters.GodrayFilter# - */ - angle: { - get: function () - { - return this.uniforms.angle; - }, - set: function (value) - { - this.uniforms.angle = value; - } - } -}); diff --git a/src/filters/godray/godray.frag b/src/filters/godray/godray.frag deleted file mode 100644 index 3dbd533..0000000 --- a/src/filters/godray/godray.frag +++ /dev/null @@ -1,31 +0,0 @@ -varying vec2 vTextureCoord; -uniform float exposure; -uniform float decay; -uniform float density; -uniform float weight; -uniform vec2 lightPositionOnScreen; -uniform sampler2D uSampler; - -const int NUM_SAMPLES = 100; - -void main() -{ - vec2 deltaTextCoord = vec2( vTextureCoord - lightPositionOnScreen.xy ); - vec2 textCoo = vTextureCoord; - deltaTextCoord *= 1.0 / float(NUM_SAMPLES) * density; - float illuminationDecay = 1.0; - - for(int i=0; i < NUM_SAMPLES ; i++) - { - textCoo -= deltaTextCoord; - vec4 sample = texture2D(uSampler, textCoo ); - - sample *= illuminationDecay * weight; - - gl_FragColor += sample; - - illuminationDecay *= decay; - } - - gl_FragColor *= exposure; -} diff --git a/src/filters/godray/godray.vert b/src/filters/godray/godray.vert deleted file mode 100644 index 507b40f..0000000 --- a/src/filters/godray/godray.vert +++ /dev/null @@ -1,12 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void) -{ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} - diff --git a/src/filters/gray/GrayFilter.js b/src/filters/gray/GrayFilter.js deleted file mode 100644 index af51b3e..0000000 --- a/src/filters/gray/GrayFilter.js +++ /dev/null @@ -1,47 +0,0 @@ -var core = require('../../core'); -// @see https://github.com/substack/brfs/issues/25 -var glslify = require('glslify'); - -/** - * This greyscales the palette of your Display Objects. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -function GrayFilter() -{ - core.Filter.call(this, - // vertex shader - glslify('./gray.vert', 'utf8'), - // fragment shader - glslify('./gray.frag', 'utf8') - ); - - this.uniforms.gray = 1; - - this.glShaderKey = 'gray'; -} - -GrayFilter.prototype = Object.create(core.Filter.prototype); -GrayFilter.prototype.constructor = GrayFilter; -module.exports = GrayFilter; - -Object.defineProperties(GrayFilter.prototype, { - /** - * The strength of the gray. 1 will make the object black and white, 0 will make the object its normal color. - * - * @member {number} - * @memberof PIXI.filters.GrayFilter# - */ - gray: { - get: function () - { - return this.uniforms.gray; - }, - set: function (value) - { - this.uniforms.gray = value; - } - } -}); diff --git a/src/filters/gray/gray.frag b/src/filters/gray/gray.frag deleted file mode 100644 index 2a1d3b1..0000000 --- a/src/filters/gray/gray.frag +++ /dev/null @@ -1,10 +0,0 @@ -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; -uniform float gray; - -void main(void) -{ - gl_FragColor = texture2D(uSampler, vTextureCoord); - gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray); -} diff --git a/src/filters/gray/gray.vert b/src/filters/gray/gray.vert deleted file mode 100644 index 787220d..0000000 --- a/src/filters/gray/gray.vert +++ /dev/null @@ -1,10 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void){ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} diff --git a/src/filters/index.js b/src/filters/index.js index d701906..2f16710 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -19,7 +19,7 @@ // DropShadowFilter: require('./dropshadow/DropShadowFilter'), // InvertFilter: require('./invert/InvertFilter'), // NoiseFilter: require('./noise/NoiseFilter'), - // PixelateFilter: require('./pixelate/PixelateFilter'), + PixelateFilter: require('./pixelate/PixelateFilter'), // RGBSplitFilter: require('./rgb/RGBSplitFilter'), // ShockwaveFilter: require('./shockwave/ShockwaveFilter'), // SepiaFilter: require('./sepia/SepiaFilter'), @@ -34,7 +34,6 @@ ColorMatrixFilter: require('./colormatrix/ColorMatrixFilter'), TwistFilter: require('./twist/TwistFilter'), - GrayFilter: require('./gray/GrayFilter'), - GodrayFilter: require('./godray/GodrayFilter'), + //GrayFilter: require('./gray/GrayFilter'), VoidFilter: require('./void/VoidFilter') }; diff --git a/src/filters/pixelate/PixelateFilter.js b/src/filters/pixelate/PixelateFilter.js new file mode 100644 index 0000000..6d5a1f2 --- /dev/null +++ b/src/filters/pixelate/PixelateFilter.js @@ -0,0 +1,47 @@ +var core = require('../../core'); +// @see https://github.com/substack/brfs/issues/25 +var glslify = require('glslify'); + +/** + * This filter applies a pixelate effect making display objects appear 'blocky'. + * + * @class + * @extends PIXI.AbstractFilter + * @memberof PIXI.filters + */ +function PixelateFilter() +{ + core.Filter.call(this, + // vertex shader + glslify('../fragments/default.vert'), + // fragment shader + glslify('./pixelate.frag') + ); + + this.size = [0,0]; + +} + +PixelateFilter.prototype = Object.create(core.Filter.prototype); +PixelateFilter.prototype.constructor = PixelateFilter; +module.exports = PixelateFilter; + +Object.defineProperties(PixelateFilter.prototype, { + /** + * This a point that describes the size of the blocks. + * x is the width of the block and y is the height. + * + * @member {PIXI.Point} + * @memberof PIXI.filters.PixelateFilter# + */ + size: { + get: function () + { + return this.uniforms.size; + }, + set: function (value) + { + this.uniforms.size.value = value; + } + } +}); diff --git a/src/filters/pixelate/pixelate.frag b/src/filters/pixelate/pixelate.frag new file mode 100644 index 0000000..80ad2ee --- /dev/null +++ b/src/filters/pixelate/pixelate.frag @@ -0,0 +1,40 @@ +precision mediump float; + +varying vec2 vTextureCoord; + +uniform vec2 size; +uniform sampler2D uSampler; + +uniform vec4 filterArea; + +vec2 mapCoord( vec2 coord ) +{ + coord *= filterArea.xy; + coord += filterArea.zw; + + return coord; +} + +vec2 unmapCoord( vec2 coord ) +{ + coord -= filterArea.zw; + coord /= filterArea.xy; + + return coord; +} + +vec2 pixelate(vec2 coord, vec2 size) +{ + return floor( coord / size ) * size; +} + +void main(void) +{ + vec2 coord = mapCoord(vTextureCoord); + + coord = pixelate(coord, size); + + coord = unmapCoord(coord); + + gl_FragColor = texture2D(uSampler, coord); +} diff --git a/src/filters/twist/TwistFilter.js b/src/filters/twist/TwistFilter.js index 3e5082a..90e5b7f 100644 --- a/src/filters/twist/TwistFilter.js +++ b/src/filters/twist/TwistFilter.js @@ -12,36 +12,20 @@ { core.Filter.call(this, // vertex shader - - glslify('./twist.vert', 'utf8'), + glslify('../fragments/default.vert'), // fragment shader - glslify('./twist.frag', 'utf8') + glslify('./twist.frag') ); - this.uniforms.radius = 400; - this.uniforms.angle = 3; - this.uniforms.offset = [400,300]; - //this.uniforms.dimensions = [100, 100, 100, 100]; - this.transform = new core.math.Matrix(); - this.padding = 200; + this.radius = 200; + this.angle = 4; + this.padding = 20; } TwistFilter.prototype = Object.create(core.Filter.prototype); TwistFilter.prototype.constructor = TwistFilter; module.exports = TwistFilter; -TwistFilter.prototype.apply = function (filterManager, input, output, clear) -{ - /* - this.uniforms.filterArea[0] = input.size.width; - this.uniforms.filterArea[1] = input.size.height; - this.uniforms.filterArea[2] = currentState.sourceFrame.x; - this.uniforms.filterArea[3] = currentState.sourceFrame.y; - */ - - filterManager.applyFilter(this, input, output, clear); -}; - Object.defineProperties(TwistFilter.prototype, { /** * This point describes the the offset of the twist. diff --git a/src/filters/twist/twist.vert b/src/filters/twist/twist.vert deleted file mode 100644 index 507b40f..0000000 --- a/src/filters/twist/twist.vert +++ /dev/null @@ -1,12 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void) -{ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} - diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 228b419..d2f618d 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -34,7 +34,7 @@ var type = splitLine[1]; var name = splitLine[2]; - var size = mapSize(type); + var size = 1; if(name.indexOf('[') > -1) { diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index b443cf4..0c426a5 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -277,7 +277,7 @@ //check if its a point.. if(uniforms[i].x !== undefined) { - val = shader.uniforms[i]; + val = shader.uniforms[i] || new Float32Array(2); val[0] = uniforms[i].x; val[1] = uniforms[i].y; shader.uniforms[i] = val; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 6c35186..91b500e 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -21,7 +21,7 @@ { core.Filter.call(this, // vertex shader - glslify('./colorMatrix.vert'), + glslify('../fragments/default.vert'), // fragment shader glslify('./colorMatrix.frag') ); @@ -186,34 +186,34 @@ ColorMatrixFilter.prototype.hue = function (rotation, multiply) { rotation = (rotation || 0) / 180 * Math.PI; - + var cosR = Math.cos(rotation), sinR = Math.sin(rotation), sqrt = Math.sqrt; - + /*a good approximation for hue rotation This matrix is far better than the versions with magic luminance constants formerly used here, but also used in the starling framework (flash) and known from this old part of the internet: quasimondo.com/archives/000565.php - + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive implementation as a shader not a general matrix: https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - + This is the source for the code: see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 */ - + var w = 1/3, sqrW = sqrt(w);//weight is var a00 = cosR + (1.0 - cosR) * w; var a01 = w * (1.0 - cosR) - sqrW * sinR; var a02 = w * (1.0 - cosR) + sqrW * sinR; - + var a10 = w * (1.0 - cosR) + sqrW * sinR; var a11 = cosR + w*(1.0 - cosR); var a12 = w * (1.0 - cosR) - sqrW * sinR; - + var a20 = w * (1.0 - cosR) - sqrW * sinR; var a21 = w * (1.0 - cosR) + sqrW * sinR; var a22 = cosR + w * (1.0 - cosR); diff --git a/src/filters/colormatrix/colorMatrix.vert b/src/filters/colormatrix/colorMatrix.vert deleted file mode 100644 index 787220d..0000000 --- a/src/filters/colormatrix/colorMatrix.vert +++ /dev/null @@ -1,10 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void){ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index aa18fda..32276a1 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -19,7 +19,8 @@ core.Filter.call(this, // vertex shader - glslify('./displacement.vert'), +// glslify('./displacement.vert'), + glslify('../fragments/default-filter-matrix.vert'), // fragment shader glslify('./displacement.frag') @@ -29,7 +30,7 @@ this.maskMatrix = maskMatrix; this.uniforms.mapSampler = sprite.texture; - this.uniforms.otherMatrix = maskMatrix.toArray(true); + this.uniforms.filterMatrix = maskMatrix.toArray(true); this.uniforms.scale = { x: 1, y: 1 }; if (scale === null || scale === undefined) @@ -48,7 +49,7 @@ { var ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); - this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); + this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); this.uniforms.scale.x = this.scale.x * ratio; this.uniforms.scale.y = this.scale.y * ratio; diff --git a/src/filters/displacement/displacement.frag b/src/filters/displacement/displacement.frag index c989687..e7e4053 100644 --- a/src/filters/displacement/displacement.frag +++ b/src/filters/displacement/displacement.frag @@ -1,4 +1,4 @@ -varying vec2 vMapCoord; +varying vec2 vFilterCoord; varying vec2 vTextureCoord; uniform vec2 scale; @@ -10,7 +10,7 @@ void main(void) { - vec4 map = texture2D(mapSampler, vMapCoord); + vec4 map = texture2D(mapSampler, vFilterCoord); map -= 0.5; map.xy *= scale; diff --git a/src/filters/displacement/displacement.vert b/src/filters/displacement/displacement.vert deleted file mode 100644 index 42be4b6..0000000 --- a/src/filters/displacement/displacement.vert +++ /dev/null @@ -1,15 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -uniform mat3 otherMatrix; - -varying vec2 vMapCoord; -varying vec2 vTextureCoord; - -void main(void) -{ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; - vMapCoord = ( otherMatrix * vec3( aTextureCoord, 1.0) ).xy; -} diff --git a/src/filters/fragments/default-filter-matrix.vert b/src/filters/fragments/default-filter-matrix.vert new file mode 100755 index 0000000..75f1824 --- /dev/null +++ b/src/filters/fragments/default-filter-matrix.vert @@ -0,0 +1,15 @@ +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; + +uniform mat3 projectionMatrix; +uniform mat3 filterMatrix; + +varying vec2 vTextureCoord; +varying vec2 vFilterCoord; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy; + vTextureCoord = aTextureCoord; +} \ No newline at end of file diff --git a/src/filters/fragments/default.vert b/src/filters/fragments/default.vert new file mode 100755 index 0000000..1b744d2 --- /dev/null +++ b/src/filters/fragments/default.vert @@ -0,0 +1,12 @@ +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; + +uniform mat3 projectionMatrix; + +varying vec2 vTextureCoord; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + vTextureCoord = aTextureCoord; +} \ No newline at end of file diff --git a/src/filters/godray/GodrayFilter.js b/src/filters/godray/GodrayFilter.js deleted file mode 100644 index 28c9a42..0000000 --- a/src/filters/godray/GodrayFilter.js +++ /dev/null @@ -1,91 +0,0 @@ -var core = require('../../core'); -var glslify = require('glslify'); - -/** - * This filter applies a twist effect making display objects appear twisted in the given direction. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -function GodrayFilter() -{ - core.Filter.call(this, - // vertex shader - - glslify('./godray.vert', 'utf8'), - // fragment shader - glslify('./godray.frag', 'utf8') - ); - - this.uniforms.exposure = 0.0034; - this.uniforms.decay = 1.0; - this.uniforms.density = 0.84; - this.uniforms.weight = 5.65; - - this.uniforms.lightPositionOnScreen[0] = 0.5;///0.5; - this.uniforms.lightPositionOnScreen[1] = 0.5;//; -} - -GodrayFilter.prototype = Object.create(core.Filter.prototype); -GodrayFilter.prototype.constructor = GodrayFilter; -module.exports = GodrayFilter; - -GodrayFilter.prototype.apply = function (filterManager, input, output, clear) -{ - - filterManager.applyFilter(this, input, output, clear); -}; - -Object.defineProperties(GodrayFilter.prototype, { - /** - * This point describes the the offset of the twist. - * - * @member {PIXI.Point} - * @memberof PIXI.filters.GodrayFilter# - */ - offset: { - get: function () - { - return this.uniforms.offset; - }, - set: function (value) - { - this.uniforms.offset = value; - } - }, - - /** - * This radius of the twist. - * - * @member {number} - * @memberof PIXI.filters.GodrayFilter# - */ - radius: { - get: function () - { - return this.uniforms.radius; - }, - set: function (value) - { - this.uniforms.radius = value; - } - }, - - /** - * This angle of the twist. - * - * @member {number} - * @memberof PIXI.filters.GodrayFilter# - */ - angle: { - get: function () - { - return this.uniforms.angle; - }, - set: function (value) - { - this.uniforms.angle = value; - } - } -}); diff --git a/src/filters/godray/godray.frag b/src/filters/godray/godray.frag deleted file mode 100644 index 3dbd533..0000000 --- a/src/filters/godray/godray.frag +++ /dev/null @@ -1,31 +0,0 @@ -varying vec2 vTextureCoord; -uniform float exposure; -uniform float decay; -uniform float density; -uniform float weight; -uniform vec2 lightPositionOnScreen; -uniform sampler2D uSampler; - -const int NUM_SAMPLES = 100; - -void main() -{ - vec2 deltaTextCoord = vec2( vTextureCoord - lightPositionOnScreen.xy ); - vec2 textCoo = vTextureCoord; - deltaTextCoord *= 1.0 / float(NUM_SAMPLES) * density; - float illuminationDecay = 1.0; - - for(int i=0; i < NUM_SAMPLES ; i++) - { - textCoo -= deltaTextCoord; - vec4 sample = texture2D(uSampler, textCoo ); - - sample *= illuminationDecay * weight; - - gl_FragColor += sample; - - illuminationDecay *= decay; - } - - gl_FragColor *= exposure; -} diff --git a/src/filters/godray/godray.vert b/src/filters/godray/godray.vert deleted file mode 100644 index 507b40f..0000000 --- a/src/filters/godray/godray.vert +++ /dev/null @@ -1,12 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void) -{ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} - diff --git a/src/filters/gray/GrayFilter.js b/src/filters/gray/GrayFilter.js deleted file mode 100644 index af51b3e..0000000 --- a/src/filters/gray/GrayFilter.js +++ /dev/null @@ -1,47 +0,0 @@ -var core = require('../../core'); -// @see https://github.com/substack/brfs/issues/25 -var glslify = require('glslify'); - -/** - * This greyscales the palette of your Display Objects. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -function GrayFilter() -{ - core.Filter.call(this, - // vertex shader - glslify('./gray.vert', 'utf8'), - // fragment shader - glslify('./gray.frag', 'utf8') - ); - - this.uniforms.gray = 1; - - this.glShaderKey = 'gray'; -} - -GrayFilter.prototype = Object.create(core.Filter.prototype); -GrayFilter.prototype.constructor = GrayFilter; -module.exports = GrayFilter; - -Object.defineProperties(GrayFilter.prototype, { - /** - * The strength of the gray. 1 will make the object black and white, 0 will make the object its normal color. - * - * @member {number} - * @memberof PIXI.filters.GrayFilter# - */ - gray: { - get: function () - { - return this.uniforms.gray; - }, - set: function (value) - { - this.uniforms.gray = value; - } - } -}); diff --git a/src/filters/gray/gray.frag b/src/filters/gray/gray.frag deleted file mode 100644 index 2a1d3b1..0000000 --- a/src/filters/gray/gray.frag +++ /dev/null @@ -1,10 +0,0 @@ -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; -uniform float gray; - -void main(void) -{ - gl_FragColor = texture2D(uSampler, vTextureCoord); - gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray); -} diff --git a/src/filters/gray/gray.vert b/src/filters/gray/gray.vert deleted file mode 100644 index 787220d..0000000 --- a/src/filters/gray/gray.vert +++ /dev/null @@ -1,10 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void){ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} diff --git a/src/filters/index.js b/src/filters/index.js index d701906..2f16710 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -19,7 +19,7 @@ // DropShadowFilter: require('./dropshadow/DropShadowFilter'), // InvertFilter: require('./invert/InvertFilter'), // NoiseFilter: require('./noise/NoiseFilter'), - // PixelateFilter: require('./pixelate/PixelateFilter'), + PixelateFilter: require('./pixelate/PixelateFilter'), // RGBSplitFilter: require('./rgb/RGBSplitFilter'), // ShockwaveFilter: require('./shockwave/ShockwaveFilter'), // SepiaFilter: require('./sepia/SepiaFilter'), @@ -34,7 +34,6 @@ ColorMatrixFilter: require('./colormatrix/ColorMatrixFilter'), TwistFilter: require('./twist/TwistFilter'), - GrayFilter: require('./gray/GrayFilter'), - GodrayFilter: require('./godray/GodrayFilter'), + //GrayFilter: require('./gray/GrayFilter'), VoidFilter: require('./void/VoidFilter') }; diff --git a/src/filters/pixelate/PixelateFilter.js b/src/filters/pixelate/PixelateFilter.js new file mode 100644 index 0000000..6d5a1f2 --- /dev/null +++ b/src/filters/pixelate/PixelateFilter.js @@ -0,0 +1,47 @@ +var core = require('../../core'); +// @see https://github.com/substack/brfs/issues/25 +var glslify = require('glslify'); + +/** + * This filter applies a pixelate effect making display objects appear 'blocky'. + * + * @class + * @extends PIXI.AbstractFilter + * @memberof PIXI.filters + */ +function PixelateFilter() +{ + core.Filter.call(this, + // vertex shader + glslify('../fragments/default.vert'), + // fragment shader + glslify('./pixelate.frag') + ); + + this.size = [0,0]; + +} + +PixelateFilter.prototype = Object.create(core.Filter.prototype); +PixelateFilter.prototype.constructor = PixelateFilter; +module.exports = PixelateFilter; + +Object.defineProperties(PixelateFilter.prototype, { + /** + * This a point that describes the size of the blocks. + * x is the width of the block and y is the height. + * + * @member {PIXI.Point} + * @memberof PIXI.filters.PixelateFilter# + */ + size: { + get: function () + { + return this.uniforms.size; + }, + set: function (value) + { + this.uniforms.size.value = value; + } + } +}); diff --git a/src/filters/pixelate/pixelate.frag b/src/filters/pixelate/pixelate.frag new file mode 100644 index 0000000..80ad2ee --- /dev/null +++ b/src/filters/pixelate/pixelate.frag @@ -0,0 +1,40 @@ +precision mediump float; + +varying vec2 vTextureCoord; + +uniform vec2 size; +uniform sampler2D uSampler; + +uniform vec4 filterArea; + +vec2 mapCoord( vec2 coord ) +{ + coord *= filterArea.xy; + coord += filterArea.zw; + + return coord; +} + +vec2 unmapCoord( vec2 coord ) +{ + coord -= filterArea.zw; + coord /= filterArea.xy; + + return coord; +} + +vec2 pixelate(vec2 coord, vec2 size) +{ + return floor( coord / size ) * size; +} + +void main(void) +{ + vec2 coord = mapCoord(vTextureCoord); + + coord = pixelate(coord, size); + + coord = unmapCoord(coord); + + gl_FragColor = texture2D(uSampler, coord); +} diff --git a/src/filters/twist/TwistFilter.js b/src/filters/twist/TwistFilter.js index 3e5082a..90e5b7f 100644 --- a/src/filters/twist/TwistFilter.js +++ b/src/filters/twist/TwistFilter.js @@ -12,36 +12,20 @@ { core.Filter.call(this, // vertex shader - - glslify('./twist.vert', 'utf8'), + glslify('../fragments/default.vert'), // fragment shader - glslify('./twist.frag', 'utf8') + glslify('./twist.frag') ); - this.uniforms.radius = 400; - this.uniforms.angle = 3; - this.uniforms.offset = [400,300]; - //this.uniforms.dimensions = [100, 100, 100, 100]; - this.transform = new core.math.Matrix(); - this.padding = 200; + this.radius = 200; + this.angle = 4; + this.padding = 20; } TwistFilter.prototype = Object.create(core.Filter.prototype); TwistFilter.prototype.constructor = TwistFilter; module.exports = TwistFilter; -TwistFilter.prototype.apply = function (filterManager, input, output, clear) -{ - /* - this.uniforms.filterArea[0] = input.size.width; - this.uniforms.filterArea[1] = input.size.height; - this.uniforms.filterArea[2] = currentState.sourceFrame.x; - this.uniforms.filterArea[3] = currentState.sourceFrame.y; - */ - - filterManager.applyFilter(this, input, output, clear); -}; - Object.defineProperties(TwistFilter.prototype, { /** * This point describes the the offset of the twist. diff --git a/src/filters/twist/twist.vert b/src/filters/twist/twist.vert deleted file mode 100644 index 507b40f..0000000 --- a/src/filters/twist/twist.vert +++ /dev/null @@ -1,12 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void) -{ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} - diff --git a/src/filters/void/VoidFilter.js b/src/filters/void/VoidFilter.js index 6d49849..786c852 100644 --- a/src/filters/void/VoidFilter.js +++ b/src/filters/void/VoidFilter.js @@ -13,9 +13,9 @@ { core.Filter.call(this, // vertex shader - glslify('./void.vert', 'utf8'), + glslify('../fragments/default.vert'), // fragment shader - glslify('./void.frag', 'utf8') + glslify('./void.frag') ); this.glShaderKey = 'void'; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 228b419..d2f618d 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -34,7 +34,7 @@ var type = splitLine[1]; var name = splitLine[2]; - var size = mapSize(type); + var size = 1; if(name.indexOf('[') > -1) { diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index b443cf4..0c426a5 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -277,7 +277,7 @@ //check if its a point.. if(uniforms[i].x !== undefined) { - val = shader.uniforms[i]; + val = shader.uniforms[i] || new Float32Array(2); val[0] = uniforms[i].x; val[1] = uniforms[i].y; shader.uniforms[i] = val; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 6c35186..91b500e 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -21,7 +21,7 @@ { core.Filter.call(this, // vertex shader - glslify('./colorMatrix.vert'), + glslify('../fragments/default.vert'), // fragment shader glslify('./colorMatrix.frag') ); @@ -186,34 +186,34 @@ ColorMatrixFilter.prototype.hue = function (rotation, multiply) { rotation = (rotation || 0) / 180 * Math.PI; - + var cosR = Math.cos(rotation), sinR = Math.sin(rotation), sqrt = Math.sqrt; - + /*a good approximation for hue rotation This matrix is far better than the versions with magic luminance constants formerly used here, but also used in the starling framework (flash) and known from this old part of the internet: quasimondo.com/archives/000565.php - + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive implementation as a shader not a general matrix: https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - + This is the source for the code: see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 */ - + var w = 1/3, sqrW = sqrt(w);//weight is var a00 = cosR + (1.0 - cosR) * w; var a01 = w * (1.0 - cosR) - sqrW * sinR; var a02 = w * (1.0 - cosR) + sqrW * sinR; - + var a10 = w * (1.0 - cosR) + sqrW * sinR; var a11 = cosR + w*(1.0 - cosR); var a12 = w * (1.0 - cosR) - sqrW * sinR; - + var a20 = w * (1.0 - cosR) - sqrW * sinR; var a21 = w * (1.0 - cosR) + sqrW * sinR; var a22 = cosR + w * (1.0 - cosR); diff --git a/src/filters/colormatrix/colorMatrix.vert b/src/filters/colormatrix/colorMatrix.vert deleted file mode 100644 index 787220d..0000000 --- a/src/filters/colormatrix/colorMatrix.vert +++ /dev/null @@ -1,10 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void){ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index aa18fda..32276a1 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -19,7 +19,8 @@ core.Filter.call(this, // vertex shader - glslify('./displacement.vert'), +// glslify('./displacement.vert'), + glslify('../fragments/default-filter-matrix.vert'), // fragment shader glslify('./displacement.frag') @@ -29,7 +30,7 @@ this.maskMatrix = maskMatrix; this.uniforms.mapSampler = sprite.texture; - this.uniforms.otherMatrix = maskMatrix.toArray(true); + this.uniforms.filterMatrix = maskMatrix.toArray(true); this.uniforms.scale = { x: 1, y: 1 }; if (scale === null || scale === undefined) @@ -48,7 +49,7 @@ { var ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); - this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); + this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); this.uniforms.scale.x = this.scale.x * ratio; this.uniforms.scale.y = this.scale.y * ratio; diff --git a/src/filters/displacement/displacement.frag b/src/filters/displacement/displacement.frag index c989687..e7e4053 100644 --- a/src/filters/displacement/displacement.frag +++ b/src/filters/displacement/displacement.frag @@ -1,4 +1,4 @@ -varying vec2 vMapCoord; +varying vec2 vFilterCoord; varying vec2 vTextureCoord; uniform vec2 scale; @@ -10,7 +10,7 @@ void main(void) { - vec4 map = texture2D(mapSampler, vMapCoord); + vec4 map = texture2D(mapSampler, vFilterCoord); map -= 0.5; map.xy *= scale; diff --git a/src/filters/displacement/displacement.vert b/src/filters/displacement/displacement.vert deleted file mode 100644 index 42be4b6..0000000 --- a/src/filters/displacement/displacement.vert +++ /dev/null @@ -1,15 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -uniform mat3 otherMatrix; - -varying vec2 vMapCoord; -varying vec2 vTextureCoord; - -void main(void) -{ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; - vMapCoord = ( otherMatrix * vec3( aTextureCoord, 1.0) ).xy; -} diff --git a/src/filters/fragments/default-filter-matrix.vert b/src/filters/fragments/default-filter-matrix.vert new file mode 100755 index 0000000..75f1824 --- /dev/null +++ b/src/filters/fragments/default-filter-matrix.vert @@ -0,0 +1,15 @@ +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; + +uniform mat3 projectionMatrix; +uniform mat3 filterMatrix; + +varying vec2 vTextureCoord; +varying vec2 vFilterCoord; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy; + vTextureCoord = aTextureCoord; +} \ No newline at end of file diff --git a/src/filters/fragments/default.vert b/src/filters/fragments/default.vert new file mode 100755 index 0000000..1b744d2 --- /dev/null +++ b/src/filters/fragments/default.vert @@ -0,0 +1,12 @@ +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; + +uniform mat3 projectionMatrix; + +varying vec2 vTextureCoord; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + vTextureCoord = aTextureCoord; +} \ No newline at end of file diff --git a/src/filters/godray/GodrayFilter.js b/src/filters/godray/GodrayFilter.js deleted file mode 100644 index 28c9a42..0000000 --- a/src/filters/godray/GodrayFilter.js +++ /dev/null @@ -1,91 +0,0 @@ -var core = require('../../core'); -var glslify = require('glslify'); - -/** - * This filter applies a twist effect making display objects appear twisted in the given direction. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -function GodrayFilter() -{ - core.Filter.call(this, - // vertex shader - - glslify('./godray.vert', 'utf8'), - // fragment shader - glslify('./godray.frag', 'utf8') - ); - - this.uniforms.exposure = 0.0034; - this.uniforms.decay = 1.0; - this.uniforms.density = 0.84; - this.uniforms.weight = 5.65; - - this.uniforms.lightPositionOnScreen[0] = 0.5;///0.5; - this.uniforms.lightPositionOnScreen[1] = 0.5;//; -} - -GodrayFilter.prototype = Object.create(core.Filter.prototype); -GodrayFilter.prototype.constructor = GodrayFilter; -module.exports = GodrayFilter; - -GodrayFilter.prototype.apply = function (filterManager, input, output, clear) -{ - - filterManager.applyFilter(this, input, output, clear); -}; - -Object.defineProperties(GodrayFilter.prototype, { - /** - * This point describes the the offset of the twist. - * - * @member {PIXI.Point} - * @memberof PIXI.filters.GodrayFilter# - */ - offset: { - get: function () - { - return this.uniforms.offset; - }, - set: function (value) - { - this.uniforms.offset = value; - } - }, - - /** - * This radius of the twist. - * - * @member {number} - * @memberof PIXI.filters.GodrayFilter# - */ - radius: { - get: function () - { - return this.uniforms.radius; - }, - set: function (value) - { - this.uniforms.radius = value; - } - }, - - /** - * This angle of the twist. - * - * @member {number} - * @memberof PIXI.filters.GodrayFilter# - */ - angle: { - get: function () - { - return this.uniforms.angle; - }, - set: function (value) - { - this.uniforms.angle = value; - } - } -}); diff --git a/src/filters/godray/godray.frag b/src/filters/godray/godray.frag deleted file mode 100644 index 3dbd533..0000000 --- a/src/filters/godray/godray.frag +++ /dev/null @@ -1,31 +0,0 @@ -varying vec2 vTextureCoord; -uniform float exposure; -uniform float decay; -uniform float density; -uniform float weight; -uniform vec2 lightPositionOnScreen; -uniform sampler2D uSampler; - -const int NUM_SAMPLES = 100; - -void main() -{ - vec2 deltaTextCoord = vec2( vTextureCoord - lightPositionOnScreen.xy ); - vec2 textCoo = vTextureCoord; - deltaTextCoord *= 1.0 / float(NUM_SAMPLES) * density; - float illuminationDecay = 1.0; - - for(int i=0; i < NUM_SAMPLES ; i++) - { - textCoo -= deltaTextCoord; - vec4 sample = texture2D(uSampler, textCoo ); - - sample *= illuminationDecay * weight; - - gl_FragColor += sample; - - illuminationDecay *= decay; - } - - gl_FragColor *= exposure; -} diff --git a/src/filters/godray/godray.vert b/src/filters/godray/godray.vert deleted file mode 100644 index 507b40f..0000000 --- a/src/filters/godray/godray.vert +++ /dev/null @@ -1,12 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void) -{ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} - diff --git a/src/filters/gray/GrayFilter.js b/src/filters/gray/GrayFilter.js deleted file mode 100644 index af51b3e..0000000 --- a/src/filters/gray/GrayFilter.js +++ /dev/null @@ -1,47 +0,0 @@ -var core = require('../../core'); -// @see https://github.com/substack/brfs/issues/25 -var glslify = require('glslify'); - -/** - * This greyscales the palette of your Display Objects. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -function GrayFilter() -{ - core.Filter.call(this, - // vertex shader - glslify('./gray.vert', 'utf8'), - // fragment shader - glslify('./gray.frag', 'utf8') - ); - - this.uniforms.gray = 1; - - this.glShaderKey = 'gray'; -} - -GrayFilter.prototype = Object.create(core.Filter.prototype); -GrayFilter.prototype.constructor = GrayFilter; -module.exports = GrayFilter; - -Object.defineProperties(GrayFilter.prototype, { - /** - * The strength of the gray. 1 will make the object black and white, 0 will make the object its normal color. - * - * @member {number} - * @memberof PIXI.filters.GrayFilter# - */ - gray: { - get: function () - { - return this.uniforms.gray; - }, - set: function (value) - { - this.uniforms.gray = value; - } - } -}); diff --git a/src/filters/gray/gray.frag b/src/filters/gray/gray.frag deleted file mode 100644 index 2a1d3b1..0000000 --- a/src/filters/gray/gray.frag +++ /dev/null @@ -1,10 +0,0 @@ -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; -uniform float gray; - -void main(void) -{ - gl_FragColor = texture2D(uSampler, vTextureCoord); - gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray); -} diff --git a/src/filters/gray/gray.vert b/src/filters/gray/gray.vert deleted file mode 100644 index 787220d..0000000 --- a/src/filters/gray/gray.vert +++ /dev/null @@ -1,10 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void){ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} diff --git a/src/filters/index.js b/src/filters/index.js index d701906..2f16710 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -19,7 +19,7 @@ // DropShadowFilter: require('./dropshadow/DropShadowFilter'), // InvertFilter: require('./invert/InvertFilter'), // NoiseFilter: require('./noise/NoiseFilter'), - // PixelateFilter: require('./pixelate/PixelateFilter'), + PixelateFilter: require('./pixelate/PixelateFilter'), // RGBSplitFilter: require('./rgb/RGBSplitFilter'), // ShockwaveFilter: require('./shockwave/ShockwaveFilter'), // SepiaFilter: require('./sepia/SepiaFilter'), @@ -34,7 +34,6 @@ ColorMatrixFilter: require('./colormatrix/ColorMatrixFilter'), TwistFilter: require('./twist/TwistFilter'), - GrayFilter: require('./gray/GrayFilter'), - GodrayFilter: require('./godray/GodrayFilter'), + //GrayFilter: require('./gray/GrayFilter'), VoidFilter: require('./void/VoidFilter') }; diff --git a/src/filters/pixelate/PixelateFilter.js b/src/filters/pixelate/PixelateFilter.js new file mode 100644 index 0000000..6d5a1f2 --- /dev/null +++ b/src/filters/pixelate/PixelateFilter.js @@ -0,0 +1,47 @@ +var core = require('../../core'); +// @see https://github.com/substack/brfs/issues/25 +var glslify = require('glslify'); + +/** + * This filter applies a pixelate effect making display objects appear 'blocky'. + * + * @class + * @extends PIXI.AbstractFilter + * @memberof PIXI.filters + */ +function PixelateFilter() +{ + core.Filter.call(this, + // vertex shader + glslify('../fragments/default.vert'), + // fragment shader + glslify('./pixelate.frag') + ); + + this.size = [0,0]; + +} + +PixelateFilter.prototype = Object.create(core.Filter.prototype); +PixelateFilter.prototype.constructor = PixelateFilter; +module.exports = PixelateFilter; + +Object.defineProperties(PixelateFilter.prototype, { + /** + * This a point that describes the size of the blocks. + * x is the width of the block and y is the height. + * + * @member {PIXI.Point} + * @memberof PIXI.filters.PixelateFilter# + */ + size: { + get: function () + { + return this.uniforms.size; + }, + set: function (value) + { + this.uniforms.size.value = value; + } + } +}); diff --git a/src/filters/pixelate/pixelate.frag b/src/filters/pixelate/pixelate.frag new file mode 100644 index 0000000..80ad2ee --- /dev/null +++ b/src/filters/pixelate/pixelate.frag @@ -0,0 +1,40 @@ +precision mediump float; + +varying vec2 vTextureCoord; + +uniform vec2 size; +uniform sampler2D uSampler; + +uniform vec4 filterArea; + +vec2 mapCoord( vec2 coord ) +{ + coord *= filterArea.xy; + coord += filterArea.zw; + + return coord; +} + +vec2 unmapCoord( vec2 coord ) +{ + coord -= filterArea.zw; + coord /= filterArea.xy; + + return coord; +} + +vec2 pixelate(vec2 coord, vec2 size) +{ + return floor( coord / size ) * size; +} + +void main(void) +{ + vec2 coord = mapCoord(vTextureCoord); + + coord = pixelate(coord, size); + + coord = unmapCoord(coord); + + gl_FragColor = texture2D(uSampler, coord); +} diff --git a/src/filters/twist/TwistFilter.js b/src/filters/twist/TwistFilter.js index 3e5082a..90e5b7f 100644 --- a/src/filters/twist/TwistFilter.js +++ b/src/filters/twist/TwistFilter.js @@ -12,36 +12,20 @@ { core.Filter.call(this, // vertex shader - - glslify('./twist.vert', 'utf8'), + glslify('../fragments/default.vert'), // fragment shader - glslify('./twist.frag', 'utf8') + glslify('./twist.frag') ); - this.uniforms.radius = 400; - this.uniforms.angle = 3; - this.uniforms.offset = [400,300]; - //this.uniforms.dimensions = [100, 100, 100, 100]; - this.transform = new core.math.Matrix(); - this.padding = 200; + this.radius = 200; + this.angle = 4; + this.padding = 20; } TwistFilter.prototype = Object.create(core.Filter.prototype); TwistFilter.prototype.constructor = TwistFilter; module.exports = TwistFilter; -TwistFilter.prototype.apply = function (filterManager, input, output, clear) -{ - /* - this.uniforms.filterArea[0] = input.size.width; - this.uniforms.filterArea[1] = input.size.height; - this.uniforms.filterArea[2] = currentState.sourceFrame.x; - this.uniforms.filterArea[3] = currentState.sourceFrame.y; - */ - - filterManager.applyFilter(this, input, output, clear); -}; - Object.defineProperties(TwistFilter.prototype, { /** * This point describes the the offset of the twist. diff --git a/src/filters/twist/twist.vert b/src/filters/twist/twist.vert deleted file mode 100644 index 507b40f..0000000 --- a/src/filters/twist/twist.vert +++ /dev/null @@ -1,12 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void) -{ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} - diff --git a/src/filters/void/VoidFilter.js b/src/filters/void/VoidFilter.js index 6d49849..786c852 100644 --- a/src/filters/void/VoidFilter.js +++ b/src/filters/void/VoidFilter.js @@ -13,9 +13,9 @@ { core.Filter.call(this, // vertex shader - glslify('./void.vert', 'utf8'), + glslify('../fragments/default.vert'), // fragment shader - glslify('./void.frag', 'utf8') + glslify('./void.frag') ); this.glShaderKey = 'void'; diff --git a/src/filters/void/void.vert b/src/filters/void/void.vert deleted file mode 100644 index 787220d..0000000 --- a/src/filters/void/void.vert +++ /dev/null @@ -1,10 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform mat3 projectionMatrix; -varying vec2 vTextureCoord; - -void main(void){ - gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; -}