diff --git a/src/core/renderers/webgl/filters/SpriteMaskFilter.frag b/src/core/renderers/webgl/filters/SpriteMaskFilter.frag new file mode 100644 index 0000000..75fbc1b --- /dev/null +++ b/src/core/renderers/webgl/filters/SpriteMaskFilter.frag @@ -0,0 +1,21 @@ +precision lowp float; + +varying vec2 vMaskCoord; +varying vec2 vTextureCoord; +varying vec4 vColor; + +uniform sampler2D uSampler; +uniform sampler2D mask; + +void main(void) +{ + +// check clip! this will stop the mask bleeding out from the edges + vec2 text = abs( vMaskCoord - 0.5 ); + text = step(0.5, text); + float clip = 1.0 - max(text.y, text.x); + vec4 original = texture2D(uSampler, vTextureCoord); + vec4 masky = texture2D(mask, vMaskCoord); + original *= (masky.r * masky.a * clip); + gl_FragColor = original; +} diff --git a/src/core/renderers/webgl/filters/SpriteMaskFilter.frag b/src/core/renderers/webgl/filters/SpriteMaskFilter.frag new file mode 100644 index 0000000..75fbc1b --- /dev/null +++ b/src/core/renderers/webgl/filters/SpriteMaskFilter.frag @@ -0,0 +1,21 @@ +precision lowp float; + +varying vec2 vMaskCoord; +varying vec2 vTextureCoord; +varying vec4 vColor; + +uniform sampler2D uSampler; +uniform sampler2D mask; + +void main(void) +{ + +// check clip! this will stop the mask bleeding out from the edges + vec2 text = abs( vMaskCoord - 0.5 ); + text = step(0.5, text); + float clip = 1.0 - max(text.y, text.x); + vec4 original = texture2D(uSampler, vTextureCoord); + vec4 masky = texture2D(mask, vMaskCoord); + original *= (masky.r * masky.a * clip); + gl_FragColor = original; +} diff --git a/src/core/renderers/webgl/filters/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/SpriteMaskFilter.js index 0f77bcb..8951bd6 100644 --- a/src/core/renderers/webgl/filters/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/SpriteMaskFilter.js @@ -13,55 +13,9 @@ { var maskMatrix = new math.Matrix(); - //TODO move this code out to a frag and vert file. AbstractFilter.call(this, - // vertex shader - [ - 'attribute vec2 aVertexPosition;', - 'attribute vec2 aTextureCoord;', - 'attribute vec4 aColor;', - - 'uniform mat3 projectionMatrix;', - 'uniform mat3 otherMatrix;', - - 'varying vec2 vMaskCoord;', - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'void main(void)', - '{', - ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', - ' vTextureCoord = aTextureCoord;', - ' vMaskCoord = ( otherMatrix * vec3( aTextureCoord, 1.0) ).xy;', - ' vColor = vec4(aColor.rgb * aColor.a, aColor.a);', - '}' - ].join('\n'), - // fragment shader - [ - 'precision lowp float;', - - 'varying vec2 vMaskCoord;', - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform sampler2D uSampler;', - 'uniform sampler2D mask;', - - 'void main(void)', - '{', - - // cheeck clip! this will stop the mask bleeding out from the edges - ' vec2 text = abs( vMaskCoord - 0.5 ); ', - ' text = step(0.5, text);', - ' float clip = 1.0 - max(text.y, text.x);', - - ' vec4 original = texture2D(uSampler, vTextureCoord);', - ' vec4 masky = texture2D(mask, vMaskCoord);', - ' original *= (masky.r * masky.a * clip);', - ' gl_FragColor = original;', - '}' - ].join('\n'), - // uniforms + fs.readFileSync(__dirname + '/SpriteMaskFilter.vert', 'utf8'), + fs.readFileSync(__dirname + '/SpriteMaskFilter.frag', 'utf8'), { mask: { type: 'sampler2D', value: sprite.texture }, otherMatrix: { type: 'mat3', value: maskMatrix.toArray(true) } diff --git a/src/core/renderers/webgl/filters/SpriteMaskFilter.frag b/src/core/renderers/webgl/filters/SpriteMaskFilter.frag new file mode 100644 index 0000000..75fbc1b --- /dev/null +++ b/src/core/renderers/webgl/filters/SpriteMaskFilter.frag @@ -0,0 +1,21 @@ +precision lowp float; + +varying vec2 vMaskCoord; +varying vec2 vTextureCoord; +varying vec4 vColor; + +uniform sampler2D uSampler; +uniform sampler2D mask; + +void main(void) +{ + +// check clip! this will stop the mask bleeding out from the edges + vec2 text = abs( vMaskCoord - 0.5 ); + text = step(0.5, text); + float clip = 1.0 - max(text.y, text.x); + vec4 original = texture2D(uSampler, vTextureCoord); + vec4 masky = texture2D(mask, vMaskCoord); + original *= (masky.r * masky.a * clip); + gl_FragColor = original; +} diff --git a/src/core/renderers/webgl/filters/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/SpriteMaskFilter.js index 0f77bcb..8951bd6 100644 --- a/src/core/renderers/webgl/filters/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/SpriteMaskFilter.js @@ -13,55 +13,9 @@ { var maskMatrix = new math.Matrix(); - //TODO move this code out to a frag and vert file. AbstractFilter.call(this, - // vertex shader - [ - 'attribute vec2 aVertexPosition;', - 'attribute vec2 aTextureCoord;', - 'attribute vec4 aColor;', - - 'uniform mat3 projectionMatrix;', - 'uniform mat3 otherMatrix;', - - 'varying vec2 vMaskCoord;', - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'void main(void)', - '{', - ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', - ' vTextureCoord = aTextureCoord;', - ' vMaskCoord = ( otherMatrix * vec3( aTextureCoord, 1.0) ).xy;', - ' vColor = vec4(aColor.rgb * aColor.a, aColor.a);', - '}' - ].join('\n'), - // fragment shader - [ - 'precision lowp float;', - - 'varying vec2 vMaskCoord;', - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - - 'uniform sampler2D uSampler;', - 'uniform sampler2D mask;', - - 'void main(void)', - '{', - - // cheeck clip! this will stop the mask bleeding out from the edges - ' vec2 text = abs( vMaskCoord - 0.5 ); ', - ' text = step(0.5, text);', - ' float clip = 1.0 - max(text.y, text.x);', - - ' vec4 original = texture2D(uSampler, vTextureCoord);', - ' vec4 masky = texture2D(mask, vMaskCoord);', - ' original *= (masky.r * masky.a * clip);', - ' gl_FragColor = original;', - '}' - ].join('\n'), - // uniforms + fs.readFileSync(__dirname + '/SpriteMaskFilter.vert', 'utf8'), + fs.readFileSync(__dirname + '/SpriteMaskFilter.frag', 'utf8'), { mask: { type: 'sampler2D', value: sprite.texture }, otherMatrix: { type: 'mat3', value: maskMatrix.toArray(true) } diff --git a/src/core/renderers/webgl/filters/SpriteMaskFilter.vert b/src/core/renderers/webgl/filters/SpriteMaskFilter.vert new file mode 100644 index 0000000..d5feb01 --- /dev/null +++ b/src/core/renderers/webgl/filters/SpriteMaskFilter.vert @@ -0,0 +1,18 @@ +attribute vec2 aVertexPosition; +attribute vec2 aTextureCoord; +attribute vec4 aColor; + +uniform mat3 projectionMatrix; +uniform mat3 otherMatrix; + +varying vec2 vMaskCoord; +varying vec2 vTextureCoord; +varying vec4 vColor; + +void main(void) +{ + gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); + vTextureCoord = aTextureCoord; + vMaskCoord = ( otherMatrix * vec3( aTextureCoord, 1.0) ).xy; + vColor = vec4(aColor.rgb * aColor.a, aColor.a); +}