diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index fb708a1..46946f0 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -17,10 +17,10 @@ this.blurXFilter = new BlurXFilter(); this.blurYFilter = new BlurYFilter(); this.resolution = 0.25;//0.25;//0.25//1//01.26; - this.blurYFilter.passes = this.blurXFilter.passes = 2; + this.blurYFilter.passes = this.blurXFilter.passes = 1; this.blurYFilter.strength = this.blurXFilter.strength = 4;//4// 4 - this.padding = 100 + this.padding = 20; } diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index fb708a1..46946f0 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -17,10 +17,10 @@ this.blurXFilter = new BlurXFilter(); this.blurYFilter = new BlurYFilter(); this.resolution = 0.25;//0.25;//0.25//1//01.26; - this.blurYFilter.passes = this.blurXFilter.passes = 2; + this.blurYFilter.passes = this.blurXFilter.passes = 1; this.blurYFilter.strength = this.blurXFilter.strength = 4;//4// 4 - this.padding = 100 + this.padding = 20; } diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 61eed96..56cbd3b 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -1,7 +1,7 @@ var core = require('../../core'); -var glslify = require('glslify'); var generateBlurVertSource = require('./generateBlurVertSource'); var generateBlurFragSource = require('./generateBlurFragSource'); +var getMaxBlurKernelSize = require('./getMaxBlurKernelSize'); /** * The BlurXFilter applies a horizontal Gaussian blur to an object. @@ -12,11 +12,8 @@ */ function BlurXFilter() { - var vertSrc = generateBlurVertSource(11, true); - var fragSrc = generateBlurFragSource(11); - - console.log(vertSrc); - console.log(fragSrc); + var vertSrc = generateBlurVertSource(5, true); + var fragSrc = generateBlurFragSource(5); core.Filter.call(this, // vertex shader @@ -34,6 +31,8 @@ this.passes = 1; this.resolution = 1;//0.25;//0.5;//0.1//5; this.strength = 4; + + this.firstRun = true; } BlurXFilter.prototype = Object.create(core.Filter.prototype); @@ -42,6 +41,19 @@ BlurXFilter.prototype.apply = function (filterManager, input, output, clear) { + if(this.firstRun) + { + var gl = filterManager.renderer.gl; + var kernelSize = getMaxBlurKernelSize(gl); + + this.vertexSrc = generateBlurVertSource(kernelSize, true); + this.fragmentSrc = generateBlurFragSource(kernelSize); + + this.firstRun = false; + } + + + this.uniforms.strength = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); // screen space! diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index fb708a1..46946f0 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -17,10 +17,10 @@ this.blurXFilter = new BlurXFilter(); this.blurYFilter = new BlurYFilter(); this.resolution = 0.25;//0.25;//0.25//1//01.26; - this.blurYFilter.passes = this.blurXFilter.passes = 2; + this.blurYFilter.passes = this.blurXFilter.passes = 1; this.blurYFilter.strength = this.blurXFilter.strength = 4;//4// 4 - this.padding = 100 + this.padding = 20; } diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 61eed96..56cbd3b 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -1,7 +1,7 @@ var core = require('../../core'); -var glslify = require('glslify'); var generateBlurVertSource = require('./generateBlurVertSource'); var generateBlurFragSource = require('./generateBlurFragSource'); +var getMaxBlurKernelSize = require('./getMaxBlurKernelSize'); /** * The BlurXFilter applies a horizontal Gaussian blur to an object. @@ -12,11 +12,8 @@ */ function BlurXFilter() { - var vertSrc = generateBlurVertSource(11, true); - var fragSrc = generateBlurFragSource(11); - - console.log(vertSrc); - console.log(fragSrc); + var vertSrc = generateBlurVertSource(5, true); + var fragSrc = generateBlurFragSource(5); core.Filter.call(this, // vertex shader @@ -34,6 +31,8 @@ this.passes = 1; this.resolution = 1;//0.25;//0.5;//0.1//5; this.strength = 4; + + this.firstRun = true; } BlurXFilter.prototype = Object.create(core.Filter.prototype); @@ -42,6 +41,19 @@ BlurXFilter.prototype.apply = function (filterManager, input, output, clear) { + if(this.firstRun) + { + var gl = filterManager.renderer.gl; + var kernelSize = getMaxBlurKernelSize(gl); + + this.vertexSrc = generateBlurVertSource(kernelSize, true); + this.fragmentSrc = generateBlurFragSource(kernelSize); + + this.firstRun = false; + } + + + this.uniforms.strength = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); // screen space! diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 86a3171..56fc380 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -1,7 +1,7 @@ var core = require('../../core'); var generateBlurVertSource = require('./generateBlurVertSource'); var generateBlurFragSource = require('./generateBlurFragSource'); - +var getMaxBlurKernelSize = require('./getMaxBlurKernelSize'); /** * The BlurYFilter applies a horizontal Gaussian blur to an object. @@ -12,8 +12,8 @@ */ function BlurYFilter() { - var vertSrc = generateBlurVertSource(11, false); - var fragSrc = generateBlurFragSource(11); + var vertSrc = generateBlurVertSource(5, false); + var fragSrc = generateBlurFragSource(5); core.Filter.call(this, // vertex shader @@ -33,6 +33,17 @@ BlurYFilter.prototype.apply = function (filterManager, input, output, clear) { + if(this.firstRun) + { + var gl = filterManager.renderer.gl; + var kernelSize = getMaxBlurKernelSize(gl); + + this.vertexSrc = generateBlurVertSource(kernelSize, false); + this.fragmentSrc = generateBlurFragSource(kernelSize); + + this.firstRun = false; + } + this.uniforms.strength = (1/output.destinationFrame.height) * (output.size.height/input.size.height); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); this.uniforms.strength *= this.strength; diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index fb708a1..46946f0 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -17,10 +17,10 @@ this.blurXFilter = new BlurXFilter(); this.blurYFilter = new BlurYFilter(); this.resolution = 0.25;//0.25;//0.25//1//01.26; - this.blurYFilter.passes = this.blurXFilter.passes = 2; + this.blurYFilter.passes = this.blurXFilter.passes = 1; this.blurYFilter.strength = this.blurXFilter.strength = 4;//4// 4 - this.padding = 100 + this.padding = 20; } diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 61eed96..56cbd3b 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -1,7 +1,7 @@ var core = require('../../core'); -var glslify = require('glslify'); var generateBlurVertSource = require('./generateBlurVertSource'); var generateBlurFragSource = require('./generateBlurFragSource'); +var getMaxBlurKernelSize = require('./getMaxBlurKernelSize'); /** * The BlurXFilter applies a horizontal Gaussian blur to an object. @@ -12,11 +12,8 @@ */ function BlurXFilter() { - var vertSrc = generateBlurVertSource(11, true); - var fragSrc = generateBlurFragSource(11); - - console.log(vertSrc); - console.log(fragSrc); + var vertSrc = generateBlurVertSource(5, true); + var fragSrc = generateBlurFragSource(5); core.Filter.call(this, // vertex shader @@ -34,6 +31,8 @@ this.passes = 1; this.resolution = 1;//0.25;//0.5;//0.1//5; this.strength = 4; + + this.firstRun = true; } BlurXFilter.prototype = Object.create(core.Filter.prototype); @@ -42,6 +41,19 @@ BlurXFilter.prototype.apply = function (filterManager, input, output, clear) { + if(this.firstRun) + { + var gl = filterManager.renderer.gl; + var kernelSize = getMaxBlurKernelSize(gl); + + this.vertexSrc = generateBlurVertSource(kernelSize, true); + this.fragmentSrc = generateBlurFragSource(kernelSize); + + this.firstRun = false; + } + + + this.uniforms.strength = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); // screen space! diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 86a3171..56fc380 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -1,7 +1,7 @@ var core = require('../../core'); var generateBlurVertSource = require('./generateBlurVertSource'); var generateBlurFragSource = require('./generateBlurFragSource'); - +var getMaxBlurKernelSize = require('./getMaxBlurKernelSize'); /** * The BlurYFilter applies a horizontal Gaussian blur to an object. @@ -12,8 +12,8 @@ */ function BlurYFilter() { - var vertSrc = generateBlurVertSource(11, false); - var fragSrc = generateBlurFragSource(11); + var vertSrc = generateBlurVertSource(5, false); + var fragSrc = generateBlurFragSource(5); core.Filter.call(this, // vertex shader @@ -33,6 +33,17 @@ BlurYFilter.prototype.apply = function (filterManager, input, output, clear) { + if(this.firstRun) + { + var gl = filterManager.renderer.gl; + var kernelSize = getMaxBlurKernelSize(gl); + + this.vertexSrc = generateBlurVertSource(kernelSize, false); + this.fragmentSrc = generateBlurFragSource(kernelSize); + + this.firstRun = false; + } + this.uniforms.strength = (1/output.destinationFrame.height) * (output.size.height/input.size.height); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); this.uniforms.strength *= this.strength; diff --git a/src/filters/blur/blur.frag b/src/filters/blur/blur.frag deleted file mode 100644 index 0c4f23c..0000000 --- a/src/filters/blur/blur.frag +++ /dev/null @@ -1,31 +0,0 @@ -precision mediump float; - -varying vec2 vTextureCoord; -varying vec2 vBlurTexCoords[15]; - -uniform sampler2D uSampler; - -void main(void) -{ - gl_FragColor = vec4(0.0); - - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 0]) * 0.000489; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 1]) * 0.002403; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 2]) * 0.009246; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 3]) * 0.02784; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 4]) * 0.065602; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 5]) * 0.120999; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 6]) * 0.174697; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 7]) * 0.197448; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 8]) * 0.174697; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 9]) * 0.120999; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 10]) * 0.065602; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 11]) * 0.02784; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 12]) * 0.009246; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 13]) * 0.002403; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 14]) * 0.000489; - - - - -} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index fb708a1..46946f0 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -17,10 +17,10 @@ this.blurXFilter = new BlurXFilter(); this.blurYFilter = new BlurYFilter(); this.resolution = 0.25;//0.25;//0.25//1//01.26; - this.blurYFilter.passes = this.blurXFilter.passes = 2; + this.blurYFilter.passes = this.blurXFilter.passes = 1; this.blurYFilter.strength = this.blurXFilter.strength = 4;//4// 4 - this.padding = 100 + this.padding = 20; } diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 61eed96..56cbd3b 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -1,7 +1,7 @@ var core = require('../../core'); -var glslify = require('glslify'); var generateBlurVertSource = require('./generateBlurVertSource'); var generateBlurFragSource = require('./generateBlurFragSource'); +var getMaxBlurKernelSize = require('./getMaxBlurKernelSize'); /** * The BlurXFilter applies a horizontal Gaussian blur to an object. @@ -12,11 +12,8 @@ */ function BlurXFilter() { - var vertSrc = generateBlurVertSource(11, true); - var fragSrc = generateBlurFragSource(11); - - console.log(vertSrc); - console.log(fragSrc); + var vertSrc = generateBlurVertSource(5, true); + var fragSrc = generateBlurFragSource(5); core.Filter.call(this, // vertex shader @@ -34,6 +31,8 @@ this.passes = 1; this.resolution = 1;//0.25;//0.5;//0.1//5; this.strength = 4; + + this.firstRun = true; } BlurXFilter.prototype = Object.create(core.Filter.prototype); @@ -42,6 +41,19 @@ BlurXFilter.prototype.apply = function (filterManager, input, output, clear) { + if(this.firstRun) + { + var gl = filterManager.renderer.gl; + var kernelSize = getMaxBlurKernelSize(gl); + + this.vertexSrc = generateBlurVertSource(kernelSize, true); + this.fragmentSrc = generateBlurFragSource(kernelSize); + + this.firstRun = false; + } + + + this.uniforms.strength = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); // screen space! diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 86a3171..56fc380 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -1,7 +1,7 @@ var core = require('../../core'); var generateBlurVertSource = require('./generateBlurVertSource'); var generateBlurFragSource = require('./generateBlurFragSource'); - +var getMaxBlurKernelSize = require('./getMaxBlurKernelSize'); /** * The BlurYFilter applies a horizontal Gaussian blur to an object. @@ -12,8 +12,8 @@ */ function BlurYFilter() { - var vertSrc = generateBlurVertSource(11, false); - var fragSrc = generateBlurFragSource(11); + var vertSrc = generateBlurVertSource(5, false); + var fragSrc = generateBlurFragSource(5); core.Filter.call(this, // vertex shader @@ -33,6 +33,17 @@ BlurYFilter.prototype.apply = function (filterManager, input, output, clear) { + if(this.firstRun) + { + var gl = filterManager.renderer.gl; + var kernelSize = getMaxBlurKernelSize(gl); + + this.vertexSrc = generateBlurVertSource(kernelSize, false); + this.fragmentSrc = generateBlurFragSource(kernelSize); + + this.firstRun = false; + } + this.uniforms.strength = (1/output.destinationFrame.height) * (output.size.height/input.size.height); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); this.uniforms.strength *= this.strength; diff --git a/src/filters/blur/blur.frag b/src/filters/blur/blur.frag deleted file mode 100644 index 0c4f23c..0000000 --- a/src/filters/blur/blur.frag +++ /dev/null @@ -1,31 +0,0 @@ -precision mediump float; - -varying vec2 vTextureCoord; -varying vec2 vBlurTexCoords[15]; - -uniform sampler2D uSampler; - -void main(void) -{ - gl_FragColor = vec4(0.0); - - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 0]) * 0.000489; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 1]) * 0.002403; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 2]) * 0.009246; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 3]) * 0.02784; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 4]) * 0.065602; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 5]) * 0.120999; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 6]) * 0.174697; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 7]) * 0.197448; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 8]) * 0.174697; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 9]) * 0.120999; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 10]) * 0.065602; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 11]) * 0.02784; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 12]) * 0.009246; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 13]) * 0.002403; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 14]) * 0.000489; - - - - -} diff --git a/src/filters/blur/blurX.vert b/src/filters/blur/blurX.vert deleted file mode 100644 index cc0e22b..0000000 --- a/src/filters/blur/blurX.vert +++ /dev/null @@ -1,31 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform float strength; -uniform mat3 projectionMatrix; - -varying vec2 vTextureCoord; -varying vec2 vBlurTexCoords[15]; - -void main(void) -{ - gl_Position = vec4((projectionMatrix * vec3((aVertexPosition), 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; - - vBlurTexCoords[ 0] = aTextureCoord + vec2(-7.0 * strength, 0.0); - vBlurTexCoords[ 1] = aTextureCoord + vec2(-6.0 * strength, 0.0); - vBlurTexCoords[ 2] = aTextureCoord + vec2(-5.0 * strength, 0.0); - vBlurTexCoords[ 3] = aTextureCoord + vec2(-4.0 * strength, 0.0); - vBlurTexCoords[ 4] = aTextureCoord + vec2(-3.0 * strength, 0.0); - vBlurTexCoords[ 5] = aTextureCoord + vec2(-2.0 * strength, 0.0); - vBlurTexCoords[ 6] = aTextureCoord + vec2(-1.0 * strength, 0.0); - vBlurTexCoords[ 7] = aTextureCoord; - vBlurTexCoords[ 8] = aTextureCoord + vec2(1.0 * strength, 0.0); - vBlurTexCoords[ 9] = aTextureCoord + vec2(2.0 * strength, 0.0); - vBlurTexCoords[ 10] = aTextureCoord + vec2(3.0 * strength, 0.0); - vBlurTexCoords[ 11] = aTextureCoord + vec2(4.0 * strength, 0.0); - vBlurTexCoords[ 12] = aTextureCoord + vec2(5.0 * strength, 0.0); - vBlurTexCoords[ 13] = aTextureCoord + vec2(6.0 * strength, 0.0); - vBlurTexCoords[ 14] = aTextureCoord + vec2(7.0 * strength, 0.0); - -} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index fb708a1..46946f0 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -17,10 +17,10 @@ this.blurXFilter = new BlurXFilter(); this.blurYFilter = new BlurYFilter(); this.resolution = 0.25;//0.25;//0.25//1//01.26; - this.blurYFilter.passes = this.blurXFilter.passes = 2; + this.blurYFilter.passes = this.blurXFilter.passes = 1; this.blurYFilter.strength = this.blurXFilter.strength = 4;//4// 4 - this.padding = 100 + this.padding = 20; } diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 61eed96..56cbd3b 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -1,7 +1,7 @@ var core = require('../../core'); -var glslify = require('glslify'); var generateBlurVertSource = require('./generateBlurVertSource'); var generateBlurFragSource = require('./generateBlurFragSource'); +var getMaxBlurKernelSize = require('./getMaxBlurKernelSize'); /** * The BlurXFilter applies a horizontal Gaussian blur to an object. @@ -12,11 +12,8 @@ */ function BlurXFilter() { - var vertSrc = generateBlurVertSource(11, true); - var fragSrc = generateBlurFragSource(11); - - console.log(vertSrc); - console.log(fragSrc); + var vertSrc = generateBlurVertSource(5, true); + var fragSrc = generateBlurFragSource(5); core.Filter.call(this, // vertex shader @@ -34,6 +31,8 @@ this.passes = 1; this.resolution = 1;//0.25;//0.5;//0.1//5; this.strength = 4; + + this.firstRun = true; } BlurXFilter.prototype = Object.create(core.Filter.prototype); @@ -42,6 +41,19 @@ BlurXFilter.prototype.apply = function (filterManager, input, output, clear) { + if(this.firstRun) + { + var gl = filterManager.renderer.gl; + var kernelSize = getMaxBlurKernelSize(gl); + + this.vertexSrc = generateBlurVertSource(kernelSize, true); + this.fragmentSrc = generateBlurFragSource(kernelSize); + + this.firstRun = false; + } + + + this.uniforms.strength = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); // screen space! diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 86a3171..56fc380 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -1,7 +1,7 @@ var core = require('../../core'); var generateBlurVertSource = require('./generateBlurVertSource'); var generateBlurFragSource = require('./generateBlurFragSource'); - +var getMaxBlurKernelSize = require('./getMaxBlurKernelSize'); /** * The BlurYFilter applies a horizontal Gaussian blur to an object. @@ -12,8 +12,8 @@ */ function BlurYFilter() { - var vertSrc = generateBlurVertSource(11, false); - var fragSrc = generateBlurFragSource(11); + var vertSrc = generateBlurVertSource(5, false); + var fragSrc = generateBlurFragSource(5); core.Filter.call(this, // vertex shader @@ -33,6 +33,17 @@ BlurYFilter.prototype.apply = function (filterManager, input, output, clear) { + if(this.firstRun) + { + var gl = filterManager.renderer.gl; + var kernelSize = getMaxBlurKernelSize(gl); + + this.vertexSrc = generateBlurVertSource(kernelSize, false); + this.fragmentSrc = generateBlurFragSource(kernelSize); + + this.firstRun = false; + } + this.uniforms.strength = (1/output.destinationFrame.height) * (output.size.height/input.size.height); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); this.uniforms.strength *= this.strength; diff --git a/src/filters/blur/blur.frag b/src/filters/blur/blur.frag deleted file mode 100644 index 0c4f23c..0000000 --- a/src/filters/blur/blur.frag +++ /dev/null @@ -1,31 +0,0 @@ -precision mediump float; - -varying vec2 vTextureCoord; -varying vec2 vBlurTexCoords[15]; - -uniform sampler2D uSampler; - -void main(void) -{ - gl_FragColor = vec4(0.0); - - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 0]) * 0.000489; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 1]) * 0.002403; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 2]) * 0.009246; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 3]) * 0.02784; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 4]) * 0.065602; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 5]) * 0.120999; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 6]) * 0.174697; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 7]) * 0.197448; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 8]) * 0.174697; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 9]) * 0.120999; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 10]) * 0.065602; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 11]) * 0.02784; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 12]) * 0.009246; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 13]) * 0.002403; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 14]) * 0.000489; - - - - -} diff --git a/src/filters/blur/blurX.vert b/src/filters/blur/blurX.vert deleted file mode 100644 index cc0e22b..0000000 --- a/src/filters/blur/blurX.vert +++ /dev/null @@ -1,31 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform float strength; -uniform mat3 projectionMatrix; - -varying vec2 vTextureCoord; -varying vec2 vBlurTexCoords[15]; - -void main(void) -{ - gl_Position = vec4((projectionMatrix * vec3((aVertexPosition), 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; - - vBlurTexCoords[ 0] = aTextureCoord + vec2(-7.0 * strength, 0.0); - vBlurTexCoords[ 1] = aTextureCoord + vec2(-6.0 * strength, 0.0); - vBlurTexCoords[ 2] = aTextureCoord + vec2(-5.0 * strength, 0.0); - vBlurTexCoords[ 3] = aTextureCoord + vec2(-4.0 * strength, 0.0); - vBlurTexCoords[ 4] = aTextureCoord + vec2(-3.0 * strength, 0.0); - vBlurTexCoords[ 5] = aTextureCoord + vec2(-2.0 * strength, 0.0); - vBlurTexCoords[ 6] = aTextureCoord + vec2(-1.0 * strength, 0.0); - vBlurTexCoords[ 7] = aTextureCoord; - vBlurTexCoords[ 8] = aTextureCoord + vec2(1.0 * strength, 0.0); - vBlurTexCoords[ 9] = aTextureCoord + vec2(2.0 * strength, 0.0); - vBlurTexCoords[ 10] = aTextureCoord + vec2(3.0 * strength, 0.0); - vBlurTexCoords[ 11] = aTextureCoord + vec2(4.0 * strength, 0.0); - vBlurTexCoords[ 12] = aTextureCoord + vec2(5.0 * strength, 0.0); - vBlurTexCoords[ 13] = aTextureCoord + vec2(6.0 * strength, 0.0); - vBlurTexCoords[ 14] = aTextureCoord + vec2(7.0 * strength, 0.0); - -} diff --git a/src/filters/blur/blurY.vert b/src/filters/blur/blurY.vert deleted file mode 100644 index f1616f7..0000000 --- a/src/filters/blur/blurY.vert +++ /dev/null @@ -1,32 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform float strength; -uniform mat3 projectionMatrix; - -varying vec2 vTextureCoord; -varying vec2 vBlurTexCoords[15]; - -void main(void) -{ - gl_Position = vec4((projectionMatrix * vec3((aVertexPosition), 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; - - vBlurTexCoords[ 0] = aTextureCoord + vec2(0.0, -7.0 * strength); - vBlurTexCoords[ 1] = aTextureCoord + vec2(0.0, -6.0 * strength); - vBlurTexCoords[ 2] = aTextureCoord + vec2(0.0, -5.0 * strength); - vBlurTexCoords[ 3] = aTextureCoord + vec2(0.0, -4.0 * strength); - vBlurTexCoords[ 4] = aTextureCoord + vec2(0.0, -3.0 * strength); - vBlurTexCoords[ 5] = aTextureCoord + vec2(0.0, -2.0 * strength); - vBlurTexCoords[ 6] = aTextureCoord + vec2(0.0, -1.0 * strength); - vBlurTexCoords[ 7] = aTextureCoord; - vBlurTexCoords[ 8] = aTextureCoord + vec2(0.0, 1.0 * strength); - vBlurTexCoords[ 9] = aTextureCoord + vec2(0.0, 2.0 * strength); - vBlurTexCoords[ 10] = aTextureCoord + vec2(0.0, 3.0 * strength); - vBlurTexCoords[ 11] = aTextureCoord + vec2(0.0, 4.0 * strength); - vBlurTexCoords[ 12] = aTextureCoord + vec2(0.0, 5.0 * strength); - vBlurTexCoords[ 13] = aTextureCoord + vec2(0.0, 6.0 * strength); - vBlurTexCoords[ 14] = aTextureCoord + vec2(0.0, 7.0 * strength); - - -} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index fb708a1..46946f0 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -17,10 +17,10 @@ this.blurXFilter = new BlurXFilter(); this.blurYFilter = new BlurYFilter(); this.resolution = 0.25;//0.25;//0.25//1//01.26; - this.blurYFilter.passes = this.blurXFilter.passes = 2; + this.blurYFilter.passes = this.blurXFilter.passes = 1; this.blurYFilter.strength = this.blurXFilter.strength = 4;//4// 4 - this.padding = 100 + this.padding = 20; } diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 61eed96..56cbd3b 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -1,7 +1,7 @@ var core = require('../../core'); -var glslify = require('glslify'); var generateBlurVertSource = require('./generateBlurVertSource'); var generateBlurFragSource = require('./generateBlurFragSource'); +var getMaxBlurKernelSize = require('./getMaxBlurKernelSize'); /** * The BlurXFilter applies a horizontal Gaussian blur to an object. @@ -12,11 +12,8 @@ */ function BlurXFilter() { - var vertSrc = generateBlurVertSource(11, true); - var fragSrc = generateBlurFragSource(11); - - console.log(vertSrc); - console.log(fragSrc); + var vertSrc = generateBlurVertSource(5, true); + var fragSrc = generateBlurFragSource(5); core.Filter.call(this, // vertex shader @@ -34,6 +31,8 @@ this.passes = 1; this.resolution = 1;//0.25;//0.5;//0.1//5; this.strength = 4; + + this.firstRun = true; } BlurXFilter.prototype = Object.create(core.Filter.prototype); @@ -42,6 +41,19 @@ BlurXFilter.prototype.apply = function (filterManager, input, output, clear) { + if(this.firstRun) + { + var gl = filterManager.renderer.gl; + var kernelSize = getMaxBlurKernelSize(gl); + + this.vertexSrc = generateBlurVertSource(kernelSize, true); + this.fragmentSrc = generateBlurFragSource(kernelSize); + + this.firstRun = false; + } + + + this.uniforms.strength = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); // screen space! diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 86a3171..56fc380 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -1,7 +1,7 @@ var core = require('../../core'); var generateBlurVertSource = require('./generateBlurVertSource'); var generateBlurFragSource = require('./generateBlurFragSource'); - +var getMaxBlurKernelSize = require('./getMaxBlurKernelSize'); /** * The BlurYFilter applies a horizontal Gaussian blur to an object. @@ -12,8 +12,8 @@ */ function BlurYFilter() { - var vertSrc = generateBlurVertSource(11, false); - var fragSrc = generateBlurFragSource(11); + var vertSrc = generateBlurVertSource(5, false); + var fragSrc = generateBlurFragSource(5); core.Filter.call(this, // vertex shader @@ -33,6 +33,17 @@ BlurYFilter.prototype.apply = function (filterManager, input, output, clear) { + if(this.firstRun) + { + var gl = filterManager.renderer.gl; + var kernelSize = getMaxBlurKernelSize(gl); + + this.vertexSrc = generateBlurVertSource(kernelSize, false); + this.fragmentSrc = generateBlurFragSource(kernelSize); + + this.firstRun = false; + } + this.uniforms.strength = (1/output.destinationFrame.height) * (output.size.height/input.size.height); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); this.uniforms.strength *= this.strength; diff --git a/src/filters/blur/blur.frag b/src/filters/blur/blur.frag deleted file mode 100644 index 0c4f23c..0000000 --- a/src/filters/blur/blur.frag +++ /dev/null @@ -1,31 +0,0 @@ -precision mediump float; - -varying vec2 vTextureCoord; -varying vec2 vBlurTexCoords[15]; - -uniform sampler2D uSampler; - -void main(void) -{ - gl_FragColor = vec4(0.0); - - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 0]) * 0.000489; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 1]) * 0.002403; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 2]) * 0.009246; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 3]) * 0.02784; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 4]) * 0.065602; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 5]) * 0.120999; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 6]) * 0.174697; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 7]) * 0.197448; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 8]) * 0.174697; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 9]) * 0.120999; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 10]) * 0.065602; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 11]) * 0.02784; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 12]) * 0.009246; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 13]) * 0.002403; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 14]) * 0.000489; - - - - -} diff --git a/src/filters/blur/blurX.vert b/src/filters/blur/blurX.vert deleted file mode 100644 index cc0e22b..0000000 --- a/src/filters/blur/blurX.vert +++ /dev/null @@ -1,31 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform float strength; -uniform mat3 projectionMatrix; - -varying vec2 vTextureCoord; -varying vec2 vBlurTexCoords[15]; - -void main(void) -{ - gl_Position = vec4((projectionMatrix * vec3((aVertexPosition), 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; - - vBlurTexCoords[ 0] = aTextureCoord + vec2(-7.0 * strength, 0.0); - vBlurTexCoords[ 1] = aTextureCoord + vec2(-6.0 * strength, 0.0); - vBlurTexCoords[ 2] = aTextureCoord + vec2(-5.0 * strength, 0.0); - vBlurTexCoords[ 3] = aTextureCoord + vec2(-4.0 * strength, 0.0); - vBlurTexCoords[ 4] = aTextureCoord + vec2(-3.0 * strength, 0.0); - vBlurTexCoords[ 5] = aTextureCoord + vec2(-2.0 * strength, 0.0); - vBlurTexCoords[ 6] = aTextureCoord + vec2(-1.0 * strength, 0.0); - vBlurTexCoords[ 7] = aTextureCoord; - vBlurTexCoords[ 8] = aTextureCoord + vec2(1.0 * strength, 0.0); - vBlurTexCoords[ 9] = aTextureCoord + vec2(2.0 * strength, 0.0); - vBlurTexCoords[ 10] = aTextureCoord + vec2(3.0 * strength, 0.0); - vBlurTexCoords[ 11] = aTextureCoord + vec2(4.0 * strength, 0.0); - vBlurTexCoords[ 12] = aTextureCoord + vec2(5.0 * strength, 0.0); - vBlurTexCoords[ 13] = aTextureCoord + vec2(6.0 * strength, 0.0); - vBlurTexCoords[ 14] = aTextureCoord + vec2(7.0 * strength, 0.0); - -} diff --git a/src/filters/blur/blurY.vert b/src/filters/blur/blurY.vert deleted file mode 100644 index f1616f7..0000000 --- a/src/filters/blur/blurY.vert +++ /dev/null @@ -1,32 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform float strength; -uniform mat3 projectionMatrix; - -varying vec2 vTextureCoord; -varying vec2 vBlurTexCoords[15]; - -void main(void) -{ - gl_Position = vec4((projectionMatrix * vec3((aVertexPosition), 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; - - vBlurTexCoords[ 0] = aTextureCoord + vec2(0.0, -7.0 * strength); - vBlurTexCoords[ 1] = aTextureCoord + vec2(0.0, -6.0 * strength); - vBlurTexCoords[ 2] = aTextureCoord + vec2(0.0, -5.0 * strength); - vBlurTexCoords[ 3] = aTextureCoord + vec2(0.0, -4.0 * strength); - vBlurTexCoords[ 4] = aTextureCoord + vec2(0.0, -3.0 * strength); - vBlurTexCoords[ 5] = aTextureCoord + vec2(0.0, -2.0 * strength); - vBlurTexCoords[ 6] = aTextureCoord + vec2(0.0, -1.0 * strength); - vBlurTexCoords[ 7] = aTextureCoord; - vBlurTexCoords[ 8] = aTextureCoord + vec2(0.0, 1.0 * strength); - vBlurTexCoords[ 9] = aTextureCoord + vec2(0.0, 2.0 * strength); - vBlurTexCoords[ 10] = aTextureCoord + vec2(0.0, 3.0 * strength); - vBlurTexCoords[ 11] = aTextureCoord + vec2(0.0, 4.0 * strength); - vBlurTexCoords[ 12] = aTextureCoord + vec2(0.0, 5.0 * strength); - vBlurTexCoords[ 13] = aTextureCoord + vec2(0.0, 6.0 * strength); - vBlurTexCoords[ 14] = aTextureCoord + vec2(0.0, 7.0 * strength); - - -} diff --git a/src/filters/blur/generateBlurFragSource.js b/src/filters/blur/generateBlurFragSource.js index 59cf930..4b9190a 100644 --- a/src/filters/blur/generateBlurFragSource.js +++ b/src/filters/blur/generateBlurFragSource.js @@ -5,8 +5,7 @@ 7:[0.00598, 0.060626, 0.241843, 0.383103], 9:[0.000229, 0.005977, 0.060598, 0.241732, 0.382928], 11:[0.000003, 0.000229, 0.005977, 0.060598, 0.24173, 0.382925], - 13:[0.0, 0.000003, 0.000229, 0.005977, 0.060598, 0.24173, 0.382925], - 15:[0.0, 0.0, 0.000003, 0.000229, 0.005977, 0.060598, 0.24173, 0.382925] + 13:[0.0, 0.000003, 0.000229, 0.005977, 0.060598, 0.24173, 0.382925] } var generateFragBlurSource = function(kernelSize) @@ -48,7 +47,6 @@ 'precision mediump float;', - 'varying vec2 vTextureCoord;', 'varying vec2 vBlurTexCoords[%size%];', 'uniform sampler2D uSampler;', diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index fb708a1..46946f0 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -17,10 +17,10 @@ this.blurXFilter = new BlurXFilter(); this.blurYFilter = new BlurYFilter(); this.resolution = 0.25;//0.25;//0.25//1//01.26; - this.blurYFilter.passes = this.blurXFilter.passes = 2; + this.blurYFilter.passes = this.blurXFilter.passes = 1; this.blurYFilter.strength = this.blurXFilter.strength = 4;//4// 4 - this.padding = 100 + this.padding = 20; } diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 61eed96..56cbd3b 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -1,7 +1,7 @@ var core = require('../../core'); -var glslify = require('glslify'); var generateBlurVertSource = require('./generateBlurVertSource'); var generateBlurFragSource = require('./generateBlurFragSource'); +var getMaxBlurKernelSize = require('./getMaxBlurKernelSize'); /** * The BlurXFilter applies a horizontal Gaussian blur to an object. @@ -12,11 +12,8 @@ */ function BlurXFilter() { - var vertSrc = generateBlurVertSource(11, true); - var fragSrc = generateBlurFragSource(11); - - console.log(vertSrc); - console.log(fragSrc); + var vertSrc = generateBlurVertSource(5, true); + var fragSrc = generateBlurFragSource(5); core.Filter.call(this, // vertex shader @@ -34,6 +31,8 @@ this.passes = 1; this.resolution = 1;//0.25;//0.5;//0.1//5; this.strength = 4; + + this.firstRun = true; } BlurXFilter.prototype = Object.create(core.Filter.prototype); @@ -42,6 +41,19 @@ BlurXFilter.prototype.apply = function (filterManager, input, output, clear) { + if(this.firstRun) + { + var gl = filterManager.renderer.gl; + var kernelSize = getMaxBlurKernelSize(gl); + + this.vertexSrc = generateBlurVertSource(kernelSize, true); + this.fragmentSrc = generateBlurFragSource(kernelSize); + + this.firstRun = false; + } + + + this.uniforms.strength = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); // screen space! diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 86a3171..56fc380 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -1,7 +1,7 @@ var core = require('../../core'); var generateBlurVertSource = require('./generateBlurVertSource'); var generateBlurFragSource = require('./generateBlurFragSource'); - +var getMaxBlurKernelSize = require('./getMaxBlurKernelSize'); /** * The BlurYFilter applies a horizontal Gaussian blur to an object. @@ -12,8 +12,8 @@ */ function BlurYFilter() { - var vertSrc = generateBlurVertSource(11, false); - var fragSrc = generateBlurFragSource(11); + var vertSrc = generateBlurVertSource(5, false); + var fragSrc = generateBlurFragSource(5); core.Filter.call(this, // vertex shader @@ -33,6 +33,17 @@ BlurYFilter.prototype.apply = function (filterManager, input, output, clear) { + if(this.firstRun) + { + var gl = filterManager.renderer.gl; + var kernelSize = getMaxBlurKernelSize(gl); + + this.vertexSrc = generateBlurVertSource(kernelSize, false); + this.fragmentSrc = generateBlurFragSource(kernelSize); + + this.firstRun = false; + } + this.uniforms.strength = (1/output.destinationFrame.height) * (output.size.height/input.size.height); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); this.uniforms.strength *= this.strength; diff --git a/src/filters/blur/blur.frag b/src/filters/blur/blur.frag deleted file mode 100644 index 0c4f23c..0000000 --- a/src/filters/blur/blur.frag +++ /dev/null @@ -1,31 +0,0 @@ -precision mediump float; - -varying vec2 vTextureCoord; -varying vec2 vBlurTexCoords[15]; - -uniform sampler2D uSampler; - -void main(void) -{ - gl_FragColor = vec4(0.0); - - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 0]) * 0.000489; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 1]) * 0.002403; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 2]) * 0.009246; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 3]) * 0.02784; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 4]) * 0.065602; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 5]) * 0.120999; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 6]) * 0.174697; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 7]) * 0.197448; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 8]) * 0.174697; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 9]) * 0.120999; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 10]) * 0.065602; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 11]) * 0.02784; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 12]) * 0.009246; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 13]) * 0.002403; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 14]) * 0.000489; - - - - -} diff --git a/src/filters/blur/blurX.vert b/src/filters/blur/blurX.vert deleted file mode 100644 index cc0e22b..0000000 --- a/src/filters/blur/blurX.vert +++ /dev/null @@ -1,31 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform float strength; -uniform mat3 projectionMatrix; - -varying vec2 vTextureCoord; -varying vec2 vBlurTexCoords[15]; - -void main(void) -{ - gl_Position = vec4((projectionMatrix * vec3((aVertexPosition), 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; - - vBlurTexCoords[ 0] = aTextureCoord + vec2(-7.0 * strength, 0.0); - vBlurTexCoords[ 1] = aTextureCoord + vec2(-6.0 * strength, 0.0); - vBlurTexCoords[ 2] = aTextureCoord + vec2(-5.0 * strength, 0.0); - vBlurTexCoords[ 3] = aTextureCoord + vec2(-4.0 * strength, 0.0); - vBlurTexCoords[ 4] = aTextureCoord + vec2(-3.0 * strength, 0.0); - vBlurTexCoords[ 5] = aTextureCoord + vec2(-2.0 * strength, 0.0); - vBlurTexCoords[ 6] = aTextureCoord + vec2(-1.0 * strength, 0.0); - vBlurTexCoords[ 7] = aTextureCoord; - vBlurTexCoords[ 8] = aTextureCoord + vec2(1.0 * strength, 0.0); - vBlurTexCoords[ 9] = aTextureCoord + vec2(2.0 * strength, 0.0); - vBlurTexCoords[ 10] = aTextureCoord + vec2(3.0 * strength, 0.0); - vBlurTexCoords[ 11] = aTextureCoord + vec2(4.0 * strength, 0.0); - vBlurTexCoords[ 12] = aTextureCoord + vec2(5.0 * strength, 0.0); - vBlurTexCoords[ 13] = aTextureCoord + vec2(6.0 * strength, 0.0); - vBlurTexCoords[ 14] = aTextureCoord + vec2(7.0 * strength, 0.0); - -} diff --git a/src/filters/blur/blurY.vert b/src/filters/blur/blurY.vert deleted file mode 100644 index f1616f7..0000000 --- a/src/filters/blur/blurY.vert +++ /dev/null @@ -1,32 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform float strength; -uniform mat3 projectionMatrix; - -varying vec2 vTextureCoord; -varying vec2 vBlurTexCoords[15]; - -void main(void) -{ - gl_Position = vec4((projectionMatrix * vec3((aVertexPosition), 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; - - vBlurTexCoords[ 0] = aTextureCoord + vec2(0.0, -7.0 * strength); - vBlurTexCoords[ 1] = aTextureCoord + vec2(0.0, -6.0 * strength); - vBlurTexCoords[ 2] = aTextureCoord + vec2(0.0, -5.0 * strength); - vBlurTexCoords[ 3] = aTextureCoord + vec2(0.0, -4.0 * strength); - vBlurTexCoords[ 4] = aTextureCoord + vec2(0.0, -3.0 * strength); - vBlurTexCoords[ 5] = aTextureCoord + vec2(0.0, -2.0 * strength); - vBlurTexCoords[ 6] = aTextureCoord + vec2(0.0, -1.0 * strength); - vBlurTexCoords[ 7] = aTextureCoord; - vBlurTexCoords[ 8] = aTextureCoord + vec2(0.0, 1.0 * strength); - vBlurTexCoords[ 9] = aTextureCoord + vec2(0.0, 2.0 * strength); - vBlurTexCoords[ 10] = aTextureCoord + vec2(0.0, 3.0 * strength); - vBlurTexCoords[ 11] = aTextureCoord + vec2(0.0, 4.0 * strength); - vBlurTexCoords[ 12] = aTextureCoord + vec2(0.0, 5.0 * strength); - vBlurTexCoords[ 13] = aTextureCoord + vec2(0.0, 6.0 * strength); - vBlurTexCoords[ 14] = aTextureCoord + vec2(0.0, 7.0 * strength); - - -} diff --git a/src/filters/blur/generateBlurFragSource.js b/src/filters/blur/generateBlurFragSource.js index 59cf930..4b9190a 100644 --- a/src/filters/blur/generateBlurFragSource.js +++ b/src/filters/blur/generateBlurFragSource.js @@ -5,8 +5,7 @@ 7:[0.00598, 0.060626, 0.241843, 0.383103], 9:[0.000229, 0.005977, 0.060598, 0.241732, 0.382928], 11:[0.000003, 0.000229, 0.005977, 0.060598, 0.24173, 0.382925], - 13:[0.0, 0.000003, 0.000229, 0.005977, 0.060598, 0.24173, 0.382925], - 15:[0.0, 0.0, 0.000003, 0.000229, 0.005977, 0.060598, 0.24173, 0.382925] + 13:[0.0, 0.000003, 0.000229, 0.005977, 0.060598, 0.24173, 0.382925] } var generateFragBlurSource = function(kernelSize) @@ -48,7 +47,6 @@ 'precision mediump float;', - 'varying vec2 vTextureCoord;', 'varying vec2 vBlurTexCoords[%size%];', 'uniform sampler2D uSampler;', diff --git a/src/filters/blur/generateBlurVertSource.js b/src/filters/blur/generateBlurVertSource.js index 7096810..7cfeadb 100644 --- a/src/filters/blur/generateBlurVertSource.js +++ b/src/filters/blur/generateBlurVertSource.js @@ -50,13 +50,11 @@ 'uniform float strength;', 'uniform mat3 projectionMatrix;', - 'varying vec2 vTextureCoord;', 'varying vec2 vBlurTexCoords[%size%];', 'void main(void)', '{', 'gl_Position = vec4((projectionMatrix * vec3((aVertexPosition), 1.0)).xy, 0.0, 1.0);', - 'vTextureCoord = aTextureCoord;',//TODO remove.. '%blur%', '}' ].join('\n'); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index fb708a1..46946f0 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -17,10 +17,10 @@ this.blurXFilter = new BlurXFilter(); this.blurYFilter = new BlurYFilter(); this.resolution = 0.25;//0.25;//0.25//1//01.26; - this.blurYFilter.passes = this.blurXFilter.passes = 2; + this.blurYFilter.passes = this.blurXFilter.passes = 1; this.blurYFilter.strength = this.blurXFilter.strength = 4;//4// 4 - this.padding = 100 + this.padding = 20; } diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 61eed96..56cbd3b 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -1,7 +1,7 @@ var core = require('../../core'); -var glslify = require('glslify'); var generateBlurVertSource = require('./generateBlurVertSource'); var generateBlurFragSource = require('./generateBlurFragSource'); +var getMaxBlurKernelSize = require('./getMaxBlurKernelSize'); /** * The BlurXFilter applies a horizontal Gaussian blur to an object. @@ -12,11 +12,8 @@ */ function BlurXFilter() { - var vertSrc = generateBlurVertSource(11, true); - var fragSrc = generateBlurFragSource(11); - - console.log(vertSrc); - console.log(fragSrc); + var vertSrc = generateBlurVertSource(5, true); + var fragSrc = generateBlurFragSource(5); core.Filter.call(this, // vertex shader @@ -34,6 +31,8 @@ this.passes = 1; this.resolution = 1;//0.25;//0.5;//0.1//5; this.strength = 4; + + this.firstRun = true; } BlurXFilter.prototype = Object.create(core.Filter.prototype); @@ -42,6 +41,19 @@ BlurXFilter.prototype.apply = function (filterManager, input, output, clear) { + if(this.firstRun) + { + var gl = filterManager.renderer.gl; + var kernelSize = getMaxBlurKernelSize(gl); + + this.vertexSrc = generateBlurVertSource(kernelSize, true); + this.fragmentSrc = generateBlurFragSource(kernelSize); + + this.firstRun = false; + } + + + this.uniforms.strength = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); // screen space! diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 86a3171..56fc380 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -1,7 +1,7 @@ var core = require('../../core'); var generateBlurVertSource = require('./generateBlurVertSource'); var generateBlurFragSource = require('./generateBlurFragSource'); - +var getMaxBlurKernelSize = require('./getMaxBlurKernelSize'); /** * The BlurYFilter applies a horizontal Gaussian blur to an object. @@ -12,8 +12,8 @@ */ function BlurYFilter() { - var vertSrc = generateBlurVertSource(11, false); - var fragSrc = generateBlurFragSource(11); + var vertSrc = generateBlurVertSource(5, false); + var fragSrc = generateBlurFragSource(5); core.Filter.call(this, // vertex shader @@ -33,6 +33,17 @@ BlurYFilter.prototype.apply = function (filterManager, input, output, clear) { + if(this.firstRun) + { + var gl = filterManager.renderer.gl; + var kernelSize = getMaxBlurKernelSize(gl); + + this.vertexSrc = generateBlurVertSource(kernelSize, false); + this.fragmentSrc = generateBlurFragSource(kernelSize); + + this.firstRun = false; + } + this.uniforms.strength = (1/output.destinationFrame.height) * (output.size.height/input.size.height); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); this.uniforms.strength *= this.strength; diff --git a/src/filters/blur/blur.frag b/src/filters/blur/blur.frag deleted file mode 100644 index 0c4f23c..0000000 --- a/src/filters/blur/blur.frag +++ /dev/null @@ -1,31 +0,0 @@ -precision mediump float; - -varying vec2 vTextureCoord; -varying vec2 vBlurTexCoords[15]; - -uniform sampler2D uSampler; - -void main(void) -{ - gl_FragColor = vec4(0.0); - - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 0]) * 0.000489; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 1]) * 0.002403; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 2]) * 0.009246; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 3]) * 0.02784; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 4]) * 0.065602; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 5]) * 0.120999; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 6]) * 0.174697; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 7]) * 0.197448; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 8]) * 0.174697; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 9]) * 0.120999; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 10]) * 0.065602; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 11]) * 0.02784; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 12]) * 0.009246; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 13]) * 0.002403; - gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 14]) * 0.000489; - - - - -} diff --git a/src/filters/blur/blurX.vert b/src/filters/blur/blurX.vert deleted file mode 100644 index cc0e22b..0000000 --- a/src/filters/blur/blurX.vert +++ /dev/null @@ -1,31 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform float strength; -uniform mat3 projectionMatrix; - -varying vec2 vTextureCoord; -varying vec2 vBlurTexCoords[15]; - -void main(void) -{ - gl_Position = vec4((projectionMatrix * vec3((aVertexPosition), 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; - - vBlurTexCoords[ 0] = aTextureCoord + vec2(-7.0 * strength, 0.0); - vBlurTexCoords[ 1] = aTextureCoord + vec2(-6.0 * strength, 0.0); - vBlurTexCoords[ 2] = aTextureCoord + vec2(-5.0 * strength, 0.0); - vBlurTexCoords[ 3] = aTextureCoord + vec2(-4.0 * strength, 0.0); - vBlurTexCoords[ 4] = aTextureCoord + vec2(-3.0 * strength, 0.0); - vBlurTexCoords[ 5] = aTextureCoord + vec2(-2.0 * strength, 0.0); - vBlurTexCoords[ 6] = aTextureCoord + vec2(-1.0 * strength, 0.0); - vBlurTexCoords[ 7] = aTextureCoord; - vBlurTexCoords[ 8] = aTextureCoord + vec2(1.0 * strength, 0.0); - vBlurTexCoords[ 9] = aTextureCoord + vec2(2.0 * strength, 0.0); - vBlurTexCoords[ 10] = aTextureCoord + vec2(3.0 * strength, 0.0); - vBlurTexCoords[ 11] = aTextureCoord + vec2(4.0 * strength, 0.0); - vBlurTexCoords[ 12] = aTextureCoord + vec2(5.0 * strength, 0.0); - vBlurTexCoords[ 13] = aTextureCoord + vec2(6.0 * strength, 0.0); - vBlurTexCoords[ 14] = aTextureCoord + vec2(7.0 * strength, 0.0); - -} diff --git a/src/filters/blur/blurY.vert b/src/filters/blur/blurY.vert deleted file mode 100644 index f1616f7..0000000 --- a/src/filters/blur/blurY.vert +++ /dev/null @@ -1,32 +0,0 @@ -attribute vec2 aVertexPosition; -attribute vec2 aTextureCoord; - -uniform float strength; -uniform mat3 projectionMatrix; - -varying vec2 vTextureCoord; -varying vec2 vBlurTexCoords[15]; - -void main(void) -{ - gl_Position = vec4((projectionMatrix * vec3((aVertexPosition), 1.0)).xy, 0.0, 1.0); - vTextureCoord = aTextureCoord; - - vBlurTexCoords[ 0] = aTextureCoord + vec2(0.0, -7.0 * strength); - vBlurTexCoords[ 1] = aTextureCoord + vec2(0.0, -6.0 * strength); - vBlurTexCoords[ 2] = aTextureCoord + vec2(0.0, -5.0 * strength); - vBlurTexCoords[ 3] = aTextureCoord + vec2(0.0, -4.0 * strength); - vBlurTexCoords[ 4] = aTextureCoord + vec2(0.0, -3.0 * strength); - vBlurTexCoords[ 5] = aTextureCoord + vec2(0.0, -2.0 * strength); - vBlurTexCoords[ 6] = aTextureCoord + vec2(0.0, -1.0 * strength); - vBlurTexCoords[ 7] = aTextureCoord; - vBlurTexCoords[ 8] = aTextureCoord + vec2(0.0, 1.0 * strength); - vBlurTexCoords[ 9] = aTextureCoord + vec2(0.0, 2.0 * strength); - vBlurTexCoords[ 10] = aTextureCoord + vec2(0.0, 3.0 * strength); - vBlurTexCoords[ 11] = aTextureCoord + vec2(0.0, 4.0 * strength); - vBlurTexCoords[ 12] = aTextureCoord + vec2(0.0, 5.0 * strength); - vBlurTexCoords[ 13] = aTextureCoord + vec2(0.0, 6.0 * strength); - vBlurTexCoords[ 14] = aTextureCoord + vec2(0.0, 7.0 * strength); - - -} diff --git a/src/filters/blur/generateBlurFragSource.js b/src/filters/blur/generateBlurFragSource.js index 59cf930..4b9190a 100644 --- a/src/filters/blur/generateBlurFragSource.js +++ b/src/filters/blur/generateBlurFragSource.js @@ -5,8 +5,7 @@ 7:[0.00598, 0.060626, 0.241843, 0.383103], 9:[0.000229, 0.005977, 0.060598, 0.241732, 0.382928], 11:[0.000003, 0.000229, 0.005977, 0.060598, 0.24173, 0.382925], - 13:[0.0, 0.000003, 0.000229, 0.005977, 0.060598, 0.24173, 0.382925], - 15:[0.0, 0.0, 0.000003, 0.000229, 0.005977, 0.060598, 0.24173, 0.382925] + 13:[0.0, 0.000003, 0.000229, 0.005977, 0.060598, 0.24173, 0.382925] } var generateFragBlurSource = function(kernelSize) @@ -48,7 +47,6 @@ 'precision mediump float;', - 'varying vec2 vTextureCoord;', 'varying vec2 vBlurTexCoords[%size%];', 'uniform sampler2D uSampler;', diff --git a/src/filters/blur/generateBlurVertSource.js b/src/filters/blur/generateBlurVertSource.js index 7096810..7cfeadb 100644 --- a/src/filters/blur/generateBlurVertSource.js +++ b/src/filters/blur/generateBlurVertSource.js @@ -50,13 +50,11 @@ 'uniform float strength;', 'uniform mat3 projectionMatrix;', - 'varying vec2 vTextureCoord;', 'varying vec2 vBlurTexCoords[%size%];', 'void main(void)', '{', 'gl_Position = vec4((projectionMatrix * vec3((aVertexPosition), 1.0)).xy, 0.0, 1.0);', - 'vTextureCoord = aTextureCoord;',//TODO remove.. '%blur%', '}' ].join('\n'); diff --git a/src/filters/blur/getMaxBlurKernelSize.js b/src/filters/blur/getMaxBlurKernelSize.js new file mode 100644 index 0000000..7cc0e96 --- /dev/null +++ b/src/filters/blur/getMaxBlurKernelSize.js @@ -0,0 +1,16 @@ + + +var getMaxKernelSize = function(gl) +{ + var maxVaryings = ( gl.getParameter(gl.MAX_VARYING_VECTORS) / 2 ) | 0; + var kernelSize = 11; + + while(kernelSize > maxVaryings) + { + kernelSize -= 2; + } + + return kernelSize; +} + +module.exports = getMaxKernelSize; \ No newline at end of file