diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index c61922e..e8fe515 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -10,30 +10,56 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space var calculateScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - var mappedMatrix = outputMatrix; + //var worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + texture = {width:800, height:600}//sprite._texture.baseTexture; - mappedMatrix.a = textureSize.width; - mappedMatrix.b = 0; - mappedMatrix.c = 0; - mappedMatrix.d = textureSize.height; - mappedMatrix.tx = filterArea.x; - mappedMatrix.ty = filterArea.y; + // TODO unwrap? + var mappedMatrix = outputMatrix.identity(); + + mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); + + mappedMatrix.scale( textureSize.width , textureSize.height ); return mappedMatrix; + } -var calculateNormalisedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize, screenSize) +var calculateNormalisedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - var mappedMatrix = outputMatrix; - - mappedMatrix.a = textureSize.width / screenSize.width; - mappedMatrix.b = 0; - mappedMatrix.c = 0; - mappedMatrix.d = textureSize.height / screenSize.height; - mappedMatrix.tx = filterArea.x / screenSize.width; - mappedMatrix.ty = filterArea.y / screenSize.height; + //var worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + texture = {width:800, height:600}//sprite._texture.baseTexture; + + // TODO unwrap? + var mappedMatrix = outputMatrix.identity(); + + // scale.. + var ratio = textureSize.height / textureSize.width; + + mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); + + mappedMatrix.scale(1 , ratio); + + var translateScaleX = (textureSize.width / texture.width); + var translateScaleY = (textureSize.height / texture.height); + + // worldTransform.tx /= texture.width * translateScaleX; + + //this...? free beer for anyone who can explain why this makes sense! + // worldTransform.ty /= texture.width * translateScaleX; + // worldTransform.ty /= texture.height * translateScaleY; + + // worldTransform.invert(); + // mappedMatrix.prepend(worldTransform); + + // apply inverse scale.. + mappedMatrix.scale(1 , 1/ratio); + + mappedMatrix.scale( translateScaleX , translateScaleY ); + + // mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; + } // this will map the filter coord so that a texture can be used based on the transform of a sprite @@ -72,38 +98,6 @@ mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; - - // Keeping the orginal as a reminder to me on how this works! - // - // var m = new math.Matrix(); - - // // scale.. - // var ratio = this.textureSize.height / this.textureSize.width; - - // m.translate(filterArea.x / this.textureSize.width, filterArea.y / this.textureSize.height); - - - // m.scale(1 , ratio); - - - // var transform = wt.clone(); - - // var translateScaleX = (this.textureSize.width / 620); - // var translateScaleY = (this.textureSize.height / 380); - - // transform.tx /= 620 * translateScaleX; - // transform.ty /= 620 * translateScaleX; - - // transform.invert(); - - // transform.append(m); - - // // apply inverse scale.. - // transform.scale(1 , 1/ratio); - - // transform.scale( translateScaleX , translateScaleY ); - - // return transform; }; module.exports = { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index c61922e..e8fe515 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -10,30 +10,56 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space var calculateScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - var mappedMatrix = outputMatrix; + //var worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + texture = {width:800, height:600}//sprite._texture.baseTexture; - mappedMatrix.a = textureSize.width; - mappedMatrix.b = 0; - mappedMatrix.c = 0; - mappedMatrix.d = textureSize.height; - mappedMatrix.tx = filterArea.x; - mappedMatrix.ty = filterArea.y; + // TODO unwrap? + var mappedMatrix = outputMatrix.identity(); + + mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); + + mappedMatrix.scale( textureSize.width , textureSize.height ); return mappedMatrix; + } -var calculateNormalisedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize, screenSize) +var calculateNormalisedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - var mappedMatrix = outputMatrix; - - mappedMatrix.a = textureSize.width / screenSize.width; - mappedMatrix.b = 0; - mappedMatrix.c = 0; - mappedMatrix.d = textureSize.height / screenSize.height; - mappedMatrix.tx = filterArea.x / screenSize.width; - mappedMatrix.ty = filterArea.y / screenSize.height; + //var worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + texture = {width:800, height:600}//sprite._texture.baseTexture; + + // TODO unwrap? + var mappedMatrix = outputMatrix.identity(); + + // scale.. + var ratio = textureSize.height / textureSize.width; + + mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); + + mappedMatrix.scale(1 , ratio); + + var translateScaleX = (textureSize.width / texture.width); + var translateScaleY = (textureSize.height / texture.height); + + // worldTransform.tx /= texture.width * translateScaleX; + + //this...? free beer for anyone who can explain why this makes sense! + // worldTransform.ty /= texture.width * translateScaleX; + // worldTransform.ty /= texture.height * translateScaleY; + + // worldTransform.invert(); + // mappedMatrix.prepend(worldTransform); + + // apply inverse scale.. + mappedMatrix.scale(1 , 1/ratio); + + mappedMatrix.scale( translateScaleX , translateScaleY ); + + // mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; + } // this will map the filter coord so that a texture can be used based on the transform of a sprite @@ -72,38 +98,6 @@ mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; - - // Keeping the orginal as a reminder to me on how this works! - // - // var m = new math.Matrix(); - - // // scale.. - // var ratio = this.textureSize.height / this.textureSize.width; - - // m.translate(filterArea.x / this.textureSize.width, filterArea.y / this.textureSize.height); - - - // m.scale(1 , ratio); - - - // var transform = wt.clone(); - - // var translateScaleX = (this.textureSize.width / 620); - // var translateScaleY = (this.textureSize.height / 380); - - // transform.tx /= 620 * translateScaleX; - // transform.ty /= 620 * translateScaleX; - - // transform.invert(); - - // transform.append(m); - - // // apply inverse scale.. - // transform.scale(1 , 1/ratio); - - // transform.scale( translateScaleX , translateScaleY ); - - // return transform; }; module.exports = { diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8b15bab..1bc5f16 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -92,12 +92,48 @@ var currentState = this.stack[this.stackIndex]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); + + var filters = currentState.filters; + + if(filters.length === 1) + { + filters[0].apply(this, currentState.renderTarget, lastState.renderTarget, false); + } + else + { + var flip = currentState.renderTarget; + var flop = FilterManager.getPotRenderTarget(renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); + for (var i = 0; i < filters.length-1; i++) + { + + filters[i].apply(this, flip, flop, true); + + var t = flip; + flip = flop; + flopTexture = t; + }; + + filters[i].apply(this, flip, lastState.renderTarget, true); + + } +/* var filter = currentState.filters[0]; - // lets get the last state as that contains the renderTarget we need to render too - filter.apply(this, currentState.renderTarget, lastState.renderTarget, false); + var flip = lastState.renderTarget; + var flop = + for (var i = 0; i < currentState.filters.length; i++) + { + filter = currentState.filters[i]; + // lets get the last state as that contains the renderTarget we need to render too + filter.apply(this, currentState.renderTarget, flip, false); + + + // currentState.filters[] + }; +*/ + // return the texture.. FilterManager.freePotRenderTarget(currentState.renderTarget); @@ -215,10 +251,10 @@ FilterManager.prototype.calculateNormalisedScreenSpaceMatrix = function (outputMatrix) { var currentState = this.stack[this.stackIndex]; - tempRect.x = this.renderer.width; - tempRect.y = this.renderer.height; - return filterTransforms.calculateNormalisedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, tempRect); + + + return filterTransforms.calculateNormalisedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } // this will map the filter coord so that a texture can be used based on the transform of a sprite