diff --git a/bundles/pixi.js/src/useDeprecated.js b/bundles/pixi.js/src/useDeprecated.js index 1a3b41e..33dab51 100644 --- a/bundles/pixi.js/src/useDeprecated.js +++ b/bundles/pixi.js/src/useDeprecated.js @@ -135,7 +135,7 @@ { deprecation(v5, 'PIXI.FilterManager has moved to PIXI.systems.FilterSystem'); - return PIXI.systems.FilterManager; + return PIXI.systems.FilterSystem; }, }, }); @@ -771,6 +771,50 @@ this.returnFilterTexture(renderTexture); }, + + /** + * @method PIXI.systems.FilterSystem#calculateScreenSpaceMatrix + * @deprecated since 5.0.0 + * @param {PIXI.Matrix} outputMatrix - the matrix to output to. + * @return {PIXI.Matrix} The mapped matrix. + */ + calculateScreenSpaceMatrix(outputMatrix) + { + deprecation(v5, 'FilterSystem#calculateScreenSpaceMatrix is removed, ' + + 'use `(vTextureCoord * inputSize.xy) + outputFrame.xy` instead'); + + const mappedMatrix = outputMatrix.identity(); + const { sourceFrame, destinationFrame } = this.activeState; + + mappedMatrix.translate(sourceFrame.x / destinationFrame.width, sourceFrame.y / destinationFrame.height); + mappedMatrix.scale(destinationFrame.width, destinationFrame.height); + + return mappedMatrix; + }, + + /** + * @method PIXI.systems.FilterSystem#calculateNormalizedScreenSpaceMatrix + * @deprecated since 5.0.0 + * @param {PIXI.Matrix} outputMatrix - The matrix to output to. + * @return {PIXI.Matrix} The mapped matrix. + */ + calculateNormalizedScreenSpaceMatrix(outputMatrix) + { + deprecation(v5, 'FilterManager#calculateNormalizedScreenSpaceMatrix is removed, ' + + 'use `((vTextureCoord * inputSize.xy) + outputFrame.xy) / outputFrame.zw` instead.'); + + const { sourceFrame, destinationFrame } = this.activeState; + const mappedMatrix = outputMatrix.identity(); + + mappedMatrix.translate(sourceFrame.x / destinationFrame.width, sourceFrame.y / destinationFrame.height); + + const translateScaleX = (destinationFrame.width / sourceFrame.width); + const translateScaleY = (destinationFrame.height / sourceFrame.height); + + mappedMatrix.scale(translateScaleX, translateScaleY); + + return mappedMatrix; + }, }); Object.defineProperties(PIXI.RenderTexture.prototype, { diff --git a/bundles/pixi.js/src/useDeprecated.js b/bundles/pixi.js/src/useDeprecated.js index 1a3b41e..33dab51 100644 --- a/bundles/pixi.js/src/useDeprecated.js +++ b/bundles/pixi.js/src/useDeprecated.js @@ -135,7 +135,7 @@ { deprecation(v5, 'PIXI.FilterManager has moved to PIXI.systems.FilterSystem'); - return PIXI.systems.FilterManager; + return PIXI.systems.FilterSystem; }, }, }); @@ -771,6 +771,50 @@ this.returnFilterTexture(renderTexture); }, + + /** + * @method PIXI.systems.FilterSystem#calculateScreenSpaceMatrix + * @deprecated since 5.0.0 + * @param {PIXI.Matrix} outputMatrix - the matrix to output to. + * @return {PIXI.Matrix} The mapped matrix. + */ + calculateScreenSpaceMatrix(outputMatrix) + { + deprecation(v5, 'FilterSystem#calculateScreenSpaceMatrix is removed, ' + + 'use `(vTextureCoord * inputSize.xy) + outputFrame.xy` instead'); + + const mappedMatrix = outputMatrix.identity(); + const { sourceFrame, destinationFrame } = this.activeState; + + mappedMatrix.translate(sourceFrame.x / destinationFrame.width, sourceFrame.y / destinationFrame.height); + mappedMatrix.scale(destinationFrame.width, destinationFrame.height); + + return mappedMatrix; + }, + + /** + * @method PIXI.systems.FilterSystem#calculateNormalizedScreenSpaceMatrix + * @deprecated since 5.0.0 + * @param {PIXI.Matrix} outputMatrix - The matrix to output to. + * @return {PIXI.Matrix} The mapped matrix. + */ + calculateNormalizedScreenSpaceMatrix(outputMatrix) + { + deprecation(v5, 'FilterManager#calculateNormalizedScreenSpaceMatrix is removed, ' + + 'use `((vTextureCoord * inputSize.xy) + outputFrame.xy) / outputFrame.zw` instead.'); + + const { sourceFrame, destinationFrame } = this.activeState; + const mappedMatrix = outputMatrix.identity(); + + mappedMatrix.translate(sourceFrame.x / destinationFrame.width, sourceFrame.y / destinationFrame.height); + + const translateScaleX = (destinationFrame.width / sourceFrame.width); + const translateScaleY = (destinationFrame.height / sourceFrame.height); + + mappedMatrix.scale(translateScaleX, translateScaleY); + + return mappedMatrix; + }, }); Object.defineProperties(PIXI.RenderTexture.prototype, { diff --git a/packages/core/src/filters/Filter.js b/packages/core/src/filters/Filter.js index 14b79ac..3cecb7f 100644 --- a/packages/core/src/filters/Filter.js +++ b/packages/core/src/filters/Filter.js @@ -34,6 +34,9 @@ * Developers can use normal coordinates of v3 and then allow filter to use partial Framebuffers, * bringing those extra uniforms into account. * + * Also be aware that we have changed default vertex shader, please consult + * {@link https://github.com/pixijs/pixi.js/wiki/v5-Creating-filters Wiki}. + * * ### Built-in Uniforms * * PixiJS viewport uses screen (CSS) coordinates, `(0, 0, renderer.screen.width, renderer.screen.height)`, @@ -45,7 +48,7 @@ * _Important note: as with all Framebuffers in PixiJS, both input and output are * premultiplied by alpha._ * - * By default, input Framebuffer space coordinates are passed to fragment shader with `vTextureCoord`. + * By default, input normalized coordinates are passed to fragment shader with `vTextureCoord`. * Use it to sample the input. * * ``` @@ -83,15 +86,15 @@ * * **inputSize** * - * Temporary Framebuffer is different, it can be either the size of screen, either power-of-two. - * The `inputSize.xy` are size of temporary Framebuffer that holds input. + * Temporary framebuffer is different, it can be either the size of screen, either power-of-two. + * The `inputSize.xy` are size of temporary framebuffer that holds input. * The `inputSize.zw` is inverted, it's a shortcut to evade division inside the shader. * * Set `inputSize.xy = outputFrame.zw` for a fullscreen filter. * - * To calculate input texture coordinate in 0-1 space, you have to map it to Framebuffer normalized space. - * Multiply by `outputFrame.zw` to get pixel coordinate in part of Framebuffer. - * Divide by `inputSize.xy` to get Framebuffer normalized space (input sampler space) + * To calculate input normalized coordinate, you have to map it to filter normalized space. + * Multiply by `outputFrame.zw` to get input coordinate. + * Divide by `inputSize.xy` to get input normalized coordinate. * * ``` * vec2 filterTextureCoord( void ) @@ -209,11 +212,11 @@ * There are some useful properties in the currentState : * target, filters, sourceFrame, destinationFrame, renderTarget, resolution */ - apply(filterManager, input, output, clear, currentState, derp) // eslint-disable-line no-unused-vars + apply(filterManager, input, output, clear, currentState) { // do as you please! - filterManager.applyFilter(this, input, output, clear, currentState, derp); + filterManager.applyFilter(this, input, output, clear, currentState); // or just do a regular render.. } diff --git a/bundles/pixi.js/src/useDeprecated.js b/bundles/pixi.js/src/useDeprecated.js index 1a3b41e..33dab51 100644 --- a/bundles/pixi.js/src/useDeprecated.js +++ b/bundles/pixi.js/src/useDeprecated.js @@ -135,7 +135,7 @@ { deprecation(v5, 'PIXI.FilterManager has moved to PIXI.systems.FilterSystem'); - return PIXI.systems.FilterManager; + return PIXI.systems.FilterSystem; }, }, }); @@ -771,6 +771,50 @@ this.returnFilterTexture(renderTexture); }, + + /** + * @method PIXI.systems.FilterSystem#calculateScreenSpaceMatrix + * @deprecated since 5.0.0 + * @param {PIXI.Matrix} outputMatrix - the matrix to output to. + * @return {PIXI.Matrix} The mapped matrix. + */ + calculateScreenSpaceMatrix(outputMatrix) + { + deprecation(v5, 'FilterSystem#calculateScreenSpaceMatrix is removed, ' + + 'use `(vTextureCoord * inputSize.xy) + outputFrame.xy` instead'); + + const mappedMatrix = outputMatrix.identity(); + const { sourceFrame, destinationFrame } = this.activeState; + + mappedMatrix.translate(sourceFrame.x / destinationFrame.width, sourceFrame.y / destinationFrame.height); + mappedMatrix.scale(destinationFrame.width, destinationFrame.height); + + return mappedMatrix; + }, + + /** + * @method PIXI.systems.FilterSystem#calculateNormalizedScreenSpaceMatrix + * @deprecated since 5.0.0 + * @param {PIXI.Matrix} outputMatrix - The matrix to output to. + * @return {PIXI.Matrix} The mapped matrix. + */ + calculateNormalizedScreenSpaceMatrix(outputMatrix) + { + deprecation(v5, 'FilterManager#calculateNormalizedScreenSpaceMatrix is removed, ' + + 'use `((vTextureCoord * inputSize.xy) + outputFrame.xy) / outputFrame.zw` instead.'); + + const { sourceFrame, destinationFrame } = this.activeState; + const mappedMatrix = outputMatrix.identity(); + + mappedMatrix.translate(sourceFrame.x / destinationFrame.width, sourceFrame.y / destinationFrame.height); + + const translateScaleX = (destinationFrame.width / sourceFrame.width); + const translateScaleY = (destinationFrame.height / sourceFrame.height); + + mappedMatrix.scale(translateScaleX, translateScaleY); + + return mappedMatrix; + }, }); Object.defineProperties(PIXI.RenderTexture.prototype, { diff --git a/packages/core/src/filters/Filter.js b/packages/core/src/filters/Filter.js index 14b79ac..3cecb7f 100644 --- a/packages/core/src/filters/Filter.js +++ b/packages/core/src/filters/Filter.js @@ -34,6 +34,9 @@ * Developers can use normal coordinates of v3 and then allow filter to use partial Framebuffers, * bringing those extra uniforms into account. * + * Also be aware that we have changed default vertex shader, please consult + * {@link https://github.com/pixijs/pixi.js/wiki/v5-Creating-filters Wiki}. + * * ### Built-in Uniforms * * PixiJS viewport uses screen (CSS) coordinates, `(0, 0, renderer.screen.width, renderer.screen.height)`, @@ -45,7 +48,7 @@ * _Important note: as with all Framebuffers in PixiJS, both input and output are * premultiplied by alpha._ * - * By default, input Framebuffer space coordinates are passed to fragment shader with `vTextureCoord`. + * By default, input normalized coordinates are passed to fragment shader with `vTextureCoord`. * Use it to sample the input. * * ``` @@ -83,15 +86,15 @@ * * **inputSize** * - * Temporary Framebuffer is different, it can be either the size of screen, either power-of-two. - * The `inputSize.xy` are size of temporary Framebuffer that holds input. + * Temporary framebuffer is different, it can be either the size of screen, either power-of-two. + * The `inputSize.xy` are size of temporary framebuffer that holds input. * The `inputSize.zw` is inverted, it's a shortcut to evade division inside the shader. * * Set `inputSize.xy = outputFrame.zw` for a fullscreen filter. * - * To calculate input texture coordinate in 0-1 space, you have to map it to Framebuffer normalized space. - * Multiply by `outputFrame.zw` to get pixel coordinate in part of Framebuffer. - * Divide by `inputSize.xy` to get Framebuffer normalized space (input sampler space) + * To calculate input normalized coordinate, you have to map it to filter normalized space. + * Multiply by `outputFrame.zw` to get input coordinate. + * Divide by `inputSize.xy` to get input normalized coordinate. * * ``` * vec2 filterTextureCoord( void ) @@ -209,11 +212,11 @@ * There are some useful properties in the currentState : * target, filters, sourceFrame, destinationFrame, renderTarget, resolution */ - apply(filterManager, input, output, clear, currentState, derp) // eslint-disable-line no-unused-vars + apply(filterManager, input, output, clear, currentState) { // do as you please! - filterManager.applyFilter(this, input, output, clear, currentState, derp); + filterManager.applyFilter(this, input, output, clear, currentState); // or just do a regular render.. } diff --git a/packages/core/src/filters/FilterSystem.js b/packages/core/src/filters/FilterSystem.js index 0b0f30a..2b720f1 100644 --- a/packages/core/src/filters/FilterSystem.js +++ b/packages/core/src/filters/FilterSystem.js @@ -3,8 +3,7 @@ import RenderTexture from '../renderTexture/RenderTexture'; import Quad from '../utils/Quad'; import QuadUv from '../utils/QuadUv'; -import { Rectangle } from '@pixi/math'; -import * as filterTransforms from './filterTransforms'; +import { Rectangle, Matrix } from '@pixi/math'; import { nextPow2 } from '@pixi/utils'; import UniformGroup from '../shader/UniformGroup'; import { DRAW_MODES } from '@pixi/constants'; @@ -376,27 +375,9 @@ } /** - * Calculates the mapped matrix. + * Multiply _input normalized coordinates_ to this matrix to get _sprite texture normalized coordinates_. * - * TODO playing around here.. this is temporary - (will end up in the shader) - * this returns a matrix that will normalize map filter cords in the filter to screen space - * - * @param {PIXI.Matrix} outputMatrix - the matrix to output to. - * @return {PIXI.Matrix} The mapped matrix. - */ - calculateScreenSpaceMatrix(outputMatrix) - { - const currentState = this.activeState; - - return filterTransforms.calculateScreenSpaceMatrix( - outputMatrix, - currentState.sourceFrame, - currentState.destinationFrame - ); - } - - /** - * This will map the filter coord so that a texture can be used based on the transform of a sprite + * Use `outputMatrix * vTextureCoord` in the shader. * * @param {PIXI.Matrix} outputMatrix - The matrix to output to. * @param {PIXI.Sprite} sprite - The sprite to map to. @@ -404,14 +385,18 @@ */ calculateSpriteMatrix(outputMatrix, sprite) { - const currentState = this.activeState; + const { sourceFrame, destinationFrame } = this.activeState; + const { orig } = sprite._texture; + const mappedMatrix = outputMatrix.set(destinationFrame.width, 0, 0, + destinationFrame.height, sourceFrame.x, sourceFrame.y); + const worldTransform = sprite.worldTransform.copyTo(Matrix.TEMP_MATRIX); - return filterTransforms.calculateSpriteMatrix( - outputMatrix, - currentState.sourceFrame, - currentState.destinationFrame, - sprite - ); + worldTransform.invert(); + mappedMatrix.prepend(worldTransform); + mappedMatrix.scale(1.0 / orig.width, 1.0 / orig.height); + mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); + + return mappedMatrix; } /** diff --git a/bundles/pixi.js/src/useDeprecated.js b/bundles/pixi.js/src/useDeprecated.js index 1a3b41e..33dab51 100644 --- a/bundles/pixi.js/src/useDeprecated.js +++ b/bundles/pixi.js/src/useDeprecated.js @@ -135,7 +135,7 @@ { deprecation(v5, 'PIXI.FilterManager has moved to PIXI.systems.FilterSystem'); - return PIXI.systems.FilterManager; + return PIXI.systems.FilterSystem; }, }, }); @@ -771,6 +771,50 @@ this.returnFilterTexture(renderTexture); }, + + /** + * @method PIXI.systems.FilterSystem#calculateScreenSpaceMatrix + * @deprecated since 5.0.0 + * @param {PIXI.Matrix} outputMatrix - the matrix to output to. + * @return {PIXI.Matrix} The mapped matrix. + */ + calculateScreenSpaceMatrix(outputMatrix) + { + deprecation(v5, 'FilterSystem#calculateScreenSpaceMatrix is removed, ' + + 'use `(vTextureCoord * inputSize.xy) + outputFrame.xy` instead'); + + const mappedMatrix = outputMatrix.identity(); + const { sourceFrame, destinationFrame } = this.activeState; + + mappedMatrix.translate(sourceFrame.x / destinationFrame.width, sourceFrame.y / destinationFrame.height); + mappedMatrix.scale(destinationFrame.width, destinationFrame.height); + + return mappedMatrix; + }, + + /** + * @method PIXI.systems.FilterSystem#calculateNormalizedScreenSpaceMatrix + * @deprecated since 5.0.0 + * @param {PIXI.Matrix} outputMatrix - The matrix to output to. + * @return {PIXI.Matrix} The mapped matrix. + */ + calculateNormalizedScreenSpaceMatrix(outputMatrix) + { + deprecation(v5, 'FilterManager#calculateNormalizedScreenSpaceMatrix is removed, ' + + 'use `((vTextureCoord * inputSize.xy) + outputFrame.xy) / outputFrame.zw` instead.'); + + const { sourceFrame, destinationFrame } = this.activeState; + const mappedMatrix = outputMatrix.identity(); + + mappedMatrix.translate(sourceFrame.x / destinationFrame.width, sourceFrame.y / destinationFrame.height); + + const translateScaleX = (destinationFrame.width / sourceFrame.width); + const translateScaleY = (destinationFrame.height / sourceFrame.height); + + mappedMatrix.scale(translateScaleX, translateScaleY); + + return mappedMatrix; + }, }); Object.defineProperties(PIXI.RenderTexture.prototype, { diff --git a/packages/core/src/filters/Filter.js b/packages/core/src/filters/Filter.js index 14b79ac..3cecb7f 100644 --- a/packages/core/src/filters/Filter.js +++ b/packages/core/src/filters/Filter.js @@ -34,6 +34,9 @@ * Developers can use normal coordinates of v3 and then allow filter to use partial Framebuffers, * bringing those extra uniforms into account. * + * Also be aware that we have changed default vertex shader, please consult + * {@link https://github.com/pixijs/pixi.js/wiki/v5-Creating-filters Wiki}. + * * ### Built-in Uniforms * * PixiJS viewport uses screen (CSS) coordinates, `(0, 0, renderer.screen.width, renderer.screen.height)`, @@ -45,7 +48,7 @@ * _Important note: as with all Framebuffers in PixiJS, both input and output are * premultiplied by alpha._ * - * By default, input Framebuffer space coordinates are passed to fragment shader with `vTextureCoord`. + * By default, input normalized coordinates are passed to fragment shader with `vTextureCoord`. * Use it to sample the input. * * ``` @@ -83,15 +86,15 @@ * * **inputSize** * - * Temporary Framebuffer is different, it can be either the size of screen, either power-of-two. - * The `inputSize.xy` are size of temporary Framebuffer that holds input. + * Temporary framebuffer is different, it can be either the size of screen, either power-of-two. + * The `inputSize.xy` are size of temporary framebuffer that holds input. * The `inputSize.zw` is inverted, it's a shortcut to evade division inside the shader. * * Set `inputSize.xy = outputFrame.zw` for a fullscreen filter. * - * To calculate input texture coordinate in 0-1 space, you have to map it to Framebuffer normalized space. - * Multiply by `outputFrame.zw` to get pixel coordinate in part of Framebuffer. - * Divide by `inputSize.xy` to get Framebuffer normalized space (input sampler space) + * To calculate input normalized coordinate, you have to map it to filter normalized space. + * Multiply by `outputFrame.zw` to get input coordinate. + * Divide by `inputSize.xy` to get input normalized coordinate. * * ``` * vec2 filterTextureCoord( void ) @@ -209,11 +212,11 @@ * There are some useful properties in the currentState : * target, filters, sourceFrame, destinationFrame, renderTarget, resolution */ - apply(filterManager, input, output, clear, currentState, derp) // eslint-disable-line no-unused-vars + apply(filterManager, input, output, clear, currentState) { // do as you please! - filterManager.applyFilter(this, input, output, clear, currentState, derp); + filterManager.applyFilter(this, input, output, clear, currentState); // or just do a regular render.. } diff --git a/packages/core/src/filters/FilterSystem.js b/packages/core/src/filters/FilterSystem.js index 0b0f30a..2b720f1 100644 --- a/packages/core/src/filters/FilterSystem.js +++ b/packages/core/src/filters/FilterSystem.js @@ -3,8 +3,7 @@ import RenderTexture from '../renderTexture/RenderTexture'; import Quad from '../utils/Quad'; import QuadUv from '../utils/QuadUv'; -import { Rectangle } from '@pixi/math'; -import * as filterTransforms from './filterTransforms'; +import { Rectangle, Matrix } from '@pixi/math'; import { nextPow2 } from '@pixi/utils'; import UniformGroup from '../shader/UniformGroup'; import { DRAW_MODES } from '@pixi/constants'; @@ -376,27 +375,9 @@ } /** - * Calculates the mapped matrix. + * Multiply _input normalized coordinates_ to this matrix to get _sprite texture normalized coordinates_. * - * TODO playing around here.. this is temporary - (will end up in the shader) - * this returns a matrix that will normalize map filter cords in the filter to screen space - * - * @param {PIXI.Matrix} outputMatrix - the matrix to output to. - * @return {PIXI.Matrix} The mapped matrix. - */ - calculateScreenSpaceMatrix(outputMatrix) - { - const currentState = this.activeState; - - return filterTransforms.calculateScreenSpaceMatrix( - outputMatrix, - currentState.sourceFrame, - currentState.destinationFrame - ); - } - - /** - * This will map the filter coord so that a texture can be used based on the transform of a sprite + * Use `outputMatrix * vTextureCoord` in the shader. * * @param {PIXI.Matrix} outputMatrix - The matrix to output to. * @param {PIXI.Sprite} sprite - The sprite to map to. @@ -404,14 +385,18 @@ */ calculateSpriteMatrix(outputMatrix, sprite) { - const currentState = this.activeState; + const { sourceFrame, destinationFrame } = this.activeState; + const { orig } = sprite._texture; + const mappedMatrix = outputMatrix.set(destinationFrame.width, 0, 0, + destinationFrame.height, sourceFrame.x, sourceFrame.y); + const worldTransform = sprite.worldTransform.copyTo(Matrix.TEMP_MATRIX); - return filterTransforms.calculateSpriteMatrix( - outputMatrix, - currentState.sourceFrame, - currentState.destinationFrame, - sprite - ); + worldTransform.invert(); + mappedMatrix.prepend(worldTransform); + mappedMatrix.scale(1.0 / orig.width, 1.0 / orig.height); + mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); + + return mappedMatrix; } /** diff --git a/packages/core/src/filters/filterTransforms.js b/packages/core/src/filters/filterTransforms.js deleted file mode 100644 index 5becf5d..0000000 --- a/packages/core/src/filters/filterTransforms.js +++ /dev/null @@ -1,50 +0,0 @@ -import { Matrix } from '@pixi/math'; - -/** - * Calculates the mapped matrix - * @param {PIXI.Matrix} outputMatrix matrix that will normalize map filter cords in the filter to screen space - * @param {PIXI.Rectangle} filterArea filter area - * @param {PIXI.Rectangle} textureSize texture size - * @returns {PIXI.Matrix} same as outputMatrix - * @private - */ -export function calculateScreenSpaceMatrix(outputMatrix, filterArea, textureSize) -{ - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(textureSize.width, textureSize.height); - - return mappedMatrix; -} - -export function calculateNormalizedScreenSpaceMatrix(outputMatrix, filterArea, textureSize) -{ - const mappedMatrix = outputMatrix.identity(); - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - const translateScaleX = (textureSize.width / filterArea.width); - const translateScaleY = (textureSize.height / filterArea.height); - - mappedMatrix.scale(translateScaleX, translateScaleY); - - return mappedMatrix; -} - -// this will map the filter coord so that a texture can be used based on the transform of a sprite -export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) -{ - const orig = sprite._texture.orig; - const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); - const worldTransform = sprite.worldTransform.copyTo(Matrix.TEMP_MATRIX); - - worldTransform.invert(); - mappedMatrix.prepend(worldTransform); - mappedMatrix.scale(1.0 / orig.width, 1.0 / orig.height); - mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); - - return mappedMatrix; -} diff --git a/bundles/pixi.js/src/useDeprecated.js b/bundles/pixi.js/src/useDeprecated.js index 1a3b41e..33dab51 100644 --- a/bundles/pixi.js/src/useDeprecated.js +++ b/bundles/pixi.js/src/useDeprecated.js @@ -135,7 +135,7 @@ { deprecation(v5, 'PIXI.FilterManager has moved to PIXI.systems.FilterSystem'); - return PIXI.systems.FilterManager; + return PIXI.systems.FilterSystem; }, }, }); @@ -771,6 +771,50 @@ this.returnFilterTexture(renderTexture); }, + + /** + * @method PIXI.systems.FilterSystem#calculateScreenSpaceMatrix + * @deprecated since 5.0.0 + * @param {PIXI.Matrix} outputMatrix - the matrix to output to. + * @return {PIXI.Matrix} The mapped matrix. + */ + calculateScreenSpaceMatrix(outputMatrix) + { + deprecation(v5, 'FilterSystem#calculateScreenSpaceMatrix is removed, ' + + 'use `(vTextureCoord * inputSize.xy) + outputFrame.xy` instead'); + + const mappedMatrix = outputMatrix.identity(); + const { sourceFrame, destinationFrame } = this.activeState; + + mappedMatrix.translate(sourceFrame.x / destinationFrame.width, sourceFrame.y / destinationFrame.height); + mappedMatrix.scale(destinationFrame.width, destinationFrame.height); + + return mappedMatrix; + }, + + /** + * @method PIXI.systems.FilterSystem#calculateNormalizedScreenSpaceMatrix + * @deprecated since 5.0.0 + * @param {PIXI.Matrix} outputMatrix - The matrix to output to. + * @return {PIXI.Matrix} The mapped matrix. + */ + calculateNormalizedScreenSpaceMatrix(outputMatrix) + { + deprecation(v5, 'FilterManager#calculateNormalizedScreenSpaceMatrix is removed, ' + + 'use `((vTextureCoord * inputSize.xy) + outputFrame.xy) / outputFrame.zw` instead.'); + + const { sourceFrame, destinationFrame } = this.activeState; + const mappedMatrix = outputMatrix.identity(); + + mappedMatrix.translate(sourceFrame.x / destinationFrame.width, sourceFrame.y / destinationFrame.height); + + const translateScaleX = (destinationFrame.width / sourceFrame.width); + const translateScaleY = (destinationFrame.height / sourceFrame.height); + + mappedMatrix.scale(translateScaleX, translateScaleY); + + return mappedMatrix; + }, }); Object.defineProperties(PIXI.RenderTexture.prototype, { diff --git a/packages/core/src/filters/Filter.js b/packages/core/src/filters/Filter.js index 14b79ac..3cecb7f 100644 --- a/packages/core/src/filters/Filter.js +++ b/packages/core/src/filters/Filter.js @@ -34,6 +34,9 @@ * Developers can use normal coordinates of v3 and then allow filter to use partial Framebuffers, * bringing those extra uniforms into account. * + * Also be aware that we have changed default vertex shader, please consult + * {@link https://github.com/pixijs/pixi.js/wiki/v5-Creating-filters Wiki}. + * * ### Built-in Uniforms * * PixiJS viewport uses screen (CSS) coordinates, `(0, 0, renderer.screen.width, renderer.screen.height)`, @@ -45,7 +48,7 @@ * _Important note: as with all Framebuffers in PixiJS, both input and output are * premultiplied by alpha._ * - * By default, input Framebuffer space coordinates are passed to fragment shader with `vTextureCoord`. + * By default, input normalized coordinates are passed to fragment shader with `vTextureCoord`. * Use it to sample the input. * * ``` @@ -83,15 +86,15 @@ * * **inputSize** * - * Temporary Framebuffer is different, it can be either the size of screen, either power-of-two. - * The `inputSize.xy` are size of temporary Framebuffer that holds input. + * Temporary framebuffer is different, it can be either the size of screen, either power-of-two. + * The `inputSize.xy` are size of temporary framebuffer that holds input. * The `inputSize.zw` is inverted, it's a shortcut to evade division inside the shader. * * Set `inputSize.xy = outputFrame.zw` for a fullscreen filter. * - * To calculate input texture coordinate in 0-1 space, you have to map it to Framebuffer normalized space. - * Multiply by `outputFrame.zw` to get pixel coordinate in part of Framebuffer. - * Divide by `inputSize.xy` to get Framebuffer normalized space (input sampler space) + * To calculate input normalized coordinate, you have to map it to filter normalized space. + * Multiply by `outputFrame.zw` to get input coordinate. + * Divide by `inputSize.xy` to get input normalized coordinate. * * ``` * vec2 filterTextureCoord( void ) @@ -209,11 +212,11 @@ * There are some useful properties in the currentState : * target, filters, sourceFrame, destinationFrame, renderTarget, resolution */ - apply(filterManager, input, output, clear, currentState, derp) // eslint-disable-line no-unused-vars + apply(filterManager, input, output, clear, currentState) { // do as you please! - filterManager.applyFilter(this, input, output, clear, currentState, derp); + filterManager.applyFilter(this, input, output, clear, currentState); // or just do a regular render.. } diff --git a/packages/core/src/filters/FilterSystem.js b/packages/core/src/filters/FilterSystem.js index 0b0f30a..2b720f1 100644 --- a/packages/core/src/filters/FilterSystem.js +++ b/packages/core/src/filters/FilterSystem.js @@ -3,8 +3,7 @@ import RenderTexture from '../renderTexture/RenderTexture'; import Quad from '../utils/Quad'; import QuadUv from '../utils/QuadUv'; -import { Rectangle } from '@pixi/math'; -import * as filterTransforms from './filterTransforms'; +import { Rectangle, Matrix } from '@pixi/math'; import { nextPow2 } from '@pixi/utils'; import UniformGroup from '../shader/UniformGroup'; import { DRAW_MODES } from '@pixi/constants'; @@ -376,27 +375,9 @@ } /** - * Calculates the mapped matrix. + * Multiply _input normalized coordinates_ to this matrix to get _sprite texture normalized coordinates_. * - * TODO playing around here.. this is temporary - (will end up in the shader) - * this returns a matrix that will normalize map filter cords in the filter to screen space - * - * @param {PIXI.Matrix} outputMatrix - the matrix to output to. - * @return {PIXI.Matrix} The mapped matrix. - */ - calculateScreenSpaceMatrix(outputMatrix) - { - const currentState = this.activeState; - - return filterTransforms.calculateScreenSpaceMatrix( - outputMatrix, - currentState.sourceFrame, - currentState.destinationFrame - ); - } - - /** - * This will map the filter coord so that a texture can be used based on the transform of a sprite + * Use `outputMatrix * vTextureCoord` in the shader. * * @param {PIXI.Matrix} outputMatrix - The matrix to output to. * @param {PIXI.Sprite} sprite - The sprite to map to. @@ -404,14 +385,18 @@ */ calculateSpriteMatrix(outputMatrix, sprite) { - const currentState = this.activeState; + const { sourceFrame, destinationFrame } = this.activeState; + const { orig } = sprite._texture; + const mappedMatrix = outputMatrix.set(destinationFrame.width, 0, 0, + destinationFrame.height, sourceFrame.x, sourceFrame.y); + const worldTransform = sprite.worldTransform.copyTo(Matrix.TEMP_MATRIX); - return filterTransforms.calculateSpriteMatrix( - outputMatrix, - currentState.sourceFrame, - currentState.destinationFrame, - sprite - ); + worldTransform.invert(); + mappedMatrix.prepend(worldTransform); + mappedMatrix.scale(1.0 / orig.width, 1.0 / orig.height); + mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); + + return mappedMatrix; } /** diff --git a/packages/core/src/filters/filterTransforms.js b/packages/core/src/filters/filterTransforms.js deleted file mode 100644 index 5becf5d..0000000 --- a/packages/core/src/filters/filterTransforms.js +++ /dev/null @@ -1,50 +0,0 @@ -import { Matrix } from '@pixi/math'; - -/** - * Calculates the mapped matrix - * @param {PIXI.Matrix} outputMatrix matrix that will normalize map filter cords in the filter to screen space - * @param {PIXI.Rectangle} filterArea filter area - * @param {PIXI.Rectangle} textureSize texture size - * @returns {PIXI.Matrix} same as outputMatrix - * @private - */ -export function calculateScreenSpaceMatrix(outputMatrix, filterArea, textureSize) -{ - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(textureSize.width, textureSize.height); - - return mappedMatrix; -} - -export function calculateNormalizedScreenSpaceMatrix(outputMatrix, filterArea, textureSize) -{ - const mappedMatrix = outputMatrix.identity(); - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - const translateScaleX = (textureSize.width / filterArea.width); - const translateScaleY = (textureSize.height / filterArea.height); - - mappedMatrix.scale(translateScaleX, translateScaleY); - - return mappedMatrix; -} - -// this will map the filter coord so that a texture can be used based on the transform of a sprite -export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) -{ - const orig = sprite._texture.orig; - const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); - const worldTransform = sprite.worldTransform.copyTo(Matrix.TEMP_MATRIX); - - worldTransform.invert(); - mappedMatrix.prepend(worldTransform); - mappedMatrix.scale(1.0 / orig.width, 1.0 / orig.height); - mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); - - return mappedMatrix; -} diff --git a/packages/core/src/filters/spriteMask/SpriteMaskFilter.js b/packages/core/src/filters/spriteMask/SpriteMaskFilter.js index 16a0f5d..43fe2f4 100644 --- a/packages/core/src/filters/spriteMask/SpriteMaskFilter.js +++ b/packages/core/src/filters/spriteMask/SpriteMaskFilter.js @@ -66,6 +66,7 @@ this.uniforms.npmAlpha = tex.baseTexture.premultiplyAlpha ? 0.0 : 1.0; this.uniforms.mask = tex; + // get _normalized sprite texture coords_ and convert them to _normalized atlas texture coords_ with `prepend` this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite) .prepend(tex.transform.mapCoord); this.uniforms.alpha = maskSprite.worldAlpha; diff --git a/bundles/pixi.js/src/useDeprecated.js b/bundles/pixi.js/src/useDeprecated.js index 1a3b41e..33dab51 100644 --- a/bundles/pixi.js/src/useDeprecated.js +++ b/bundles/pixi.js/src/useDeprecated.js @@ -135,7 +135,7 @@ { deprecation(v5, 'PIXI.FilterManager has moved to PIXI.systems.FilterSystem'); - return PIXI.systems.FilterManager; + return PIXI.systems.FilterSystem; }, }, }); @@ -771,6 +771,50 @@ this.returnFilterTexture(renderTexture); }, + + /** + * @method PIXI.systems.FilterSystem#calculateScreenSpaceMatrix + * @deprecated since 5.0.0 + * @param {PIXI.Matrix} outputMatrix - the matrix to output to. + * @return {PIXI.Matrix} The mapped matrix. + */ + calculateScreenSpaceMatrix(outputMatrix) + { + deprecation(v5, 'FilterSystem#calculateScreenSpaceMatrix is removed, ' + + 'use `(vTextureCoord * inputSize.xy) + outputFrame.xy` instead'); + + const mappedMatrix = outputMatrix.identity(); + const { sourceFrame, destinationFrame } = this.activeState; + + mappedMatrix.translate(sourceFrame.x / destinationFrame.width, sourceFrame.y / destinationFrame.height); + mappedMatrix.scale(destinationFrame.width, destinationFrame.height); + + return mappedMatrix; + }, + + /** + * @method PIXI.systems.FilterSystem#calculateNormalizedScreenSpaceMatrix + * @deprecated since 5.0.0 + * @param {PIXI.Matrix} outputMatrix - The matrix to output to. + * @return {PIXI.Matrix} The mapped matrix. + */ + calculateNormalizedScreenSpaceMatrix(outputMatrix) + { + deprecation(v5, 'FilterManager#calculateNormalizedScreenSpaceMatrix is removed, ' + + 'use `((vTextureCoord * inputSize.xy) + outputFrame.xy) / outputFrame.zw` instead.'); + + const { sourceFrame, destinationFrame } = this.activeState; + const mappedMatrix = outputMatrix.identity(); + + mappedMatrix.translate(sourceFrame.x / destinationFrame.width, sourceFrame.y / destinationFrame.height); + + const translateScaleX = (destinationFrame.width / sourceFrame.width); + const translateScaleY = (destinationFrame.height / sourceFrame.height); + + mappedMatrix.scale(translateScaleX, translateScaleY); + + return mappedMatrix; + }, }); Object.defineProperties(PIXI.RenderTexture.prototype, { diff --git a/packages/core/src/filters/Filter.js b/packages/core/src/filters/Filter.js index 14b79ac..3cecb7f 100644 --- a/packages/core/src/filters/Filter.js +++ b/packages/core/src/filters/Filter.js @@ -34,6 +34,9 @@ * Developers can use normal coordinates of v3 and then allow filter to use partial Framebuffers, * bringing those extra uniforms into account. * + * Also be aware that we have changed default vertex shader, please consult + * {@link https://github.com/pixijs/pixi.js/wiki/v5-Creating-filters Wiki}. + * * ### Built-in Uniforms * * PixiJS viewport uses screen (CSS) coordinates, `(0, 0, renderer.screen.width, renderer.screen.height)`, @@ -45,7 +48,7 @@ * _Important note: as with all Framebuffers in PixiJS, both input and output are * premultiplied by alpha._ * - * By default, input Framebuffer space coordinates are passed to fragment shader with `vTextureCoord`. + * By default, input normalized coordinates are passed to fragment shader with `vTextureCoord`. * Use it to sample the input. * * ``` @@ -83,15 +86,15 @@ * * **inputSize** * - * Temporary Framebuffer is different, it can be either the size of screen, either power-of-two. - * The `inputSize.xy` are size of temporary Framebuffer that holds input. + * Temporary framebuffer is different, it can be either the size of screen, either power-of-two. + * The `inputSize.xy` are size of temporary framebuffer that holds input. * The `inputSize.zw` is inverted, it's a shortcut to evade division inside the shader. * * Set `inputSize.xy = outputFrame.zw` for a fullscreen filter. * - * To calculate input texture coordinate in 0-1 space, you have to map it to Framebuffer normalized space. - * Multiply by `outputFrame.zw` to get pixel coordinate in part of Framebuffer. - * Divide by `inputSize.xy` to get Framebuffer normalized space (input sampler space) + * To calculate input normalized coordinate, you have to map it to filter normalized space. + * Multiply by `outputFrame.zw` to get input coordinate. + * Divide by `inputSize.xy` to get input normalized coordinate. * * ``` * vec2 filterTextureCoord( void ) @@ -209,11 +212,11 @@ * There are some useful properties in the currentState : * target, filters, sourceFrame, destinationFrame, renderTarget, resolution */ - apply(filterManager, input, output, clear, currentState, derp) // eslint-disable-line no-unused-vars + apply(filterManager, input, output, clear, currentState) { // do as you please! - filterManager.applyFilter(this, input, output, clear, currentState, derp); + filterManager.applyFilter(this, input, output, clear, currentState); // or just do a regular render.. } diff --git a/packages/core/src/filters/FilterSystem.js b/packages/core/src/filters/FilterSystem.js index 0b0f30a..2b720f1 100644 --- a/packages/core/src/filters/FilterSystem.js +++ b/packages/core/src/filters/FilterSystem.js @@ -3,8 +3,7 @@ import RenderTexture from '../renderTexture/RenderTexture'; import Quad from '../utils/Quad'; import QuadUv from '../utils/QuadUv'; -import { Rectangle } from '@pixi/math'; -import * as filterTransforms from './filterTransforms'; +import { Rectangle, Matrix } from '@pixi/math'; import { nextPow2 } from '@pixi/utils'; import UniformGroup from '../shader/UniformGroup'; import { DRAW_MODES } from '@pixi/constants'; @@ -376,27 +375,9 @@ } /** - * Calculates the mapped matrix. + * Multiply _input normalized coordinates_ to this matrix to get _sprite texture normalized coordinates_. * - * TODO playing around here.. this is temporary - (will end up in the shader) - * this returns a matrix that will normalize map filter cords in the filter to screen space - * - * @param {PIXI.Matrix} outputMatrix - the matrix to output to. - * @return {PIXI.Matrix} The mapped matrix. - */ - calculateScreenSpaceMatrix(outputMatrix) - { - const currentState = this.activeState; - - return filterTransforms.calculateScreenSpaceMatrix( - outputMatrix, - currentState.sourceFrame, - currentState.destinationFrame - ); - } - - /** - * This will map the filter coord so that a texture can be used based on the transform of a sprite + * Use `outputMatrix * vTextureCoord` in the shader. * * @param {PIXI.Matrix} outputMatrix - The matrix to output to. * @param {PIXI.Sprite} sprite - The sprite to map to. @@ -404,14 +385,18 @@ */ calculateSpriteMatrix(outputMatrix, sprite) { - const currentState = this.activeState; + const { sourceFrame, destinationFrame } = this.activeState; + const { orig } = sprite._texture; + const mappedMatrix = outputMatrix.set(destinationFrame.width, 0, 0, + destinationFrame.height, sourceFrame.x, sourceFrame.y); + const worldTransform = sprite.worldTransform.copyTo(Matrix.TEMP_MATRIX); - return filterTransforms.calculateSpriteMatrix( - outputMatrix, - currentState.sourceFrame, - currentState.destinationFrame, - sprite - ); + worldTransform.invert(); + mappedMatrix.prepend(worldTransform); + mappedMatrix.scale(1.0 / orig.width, 1.0 / orig.height); + mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); + + return mappedMatrix; } /** diff --git a/packages/core/src/filters/filterTransforms.js b/packages/core/src/filters/filterTransforms.js deleted file mode 100644 index 5becf5d..0000000 --- a/packages/core/src/filters/filterTransforms.js +++ /dev/null @@ -1,50 +0,0 @@ -import { Matrix } from '@pixi/math'; - -/** - * Calculates the mapped matrix - * @param {PIXI.Matrix} outputMatrix matrix that will normalize map filter cords in the filter to screen space - * @param {PIXI.Rectangle} filterArea filter area - * @param {PIXI.Rectangle} textureSize texture size - * @returns {PIXI.Matrix} same as outputMatrix - * @private - */ -export function calculateScreenSpaceMatrix(outputMatrix, filterArea, textureSize) -{ - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(textureSize.width, textureSize.height); - - return mappedMatrix; -} - -export function calculateNormalizedScreenSpaceMatrix(outputMatrix, filterArea, textureSize) -{ - const mappedMatrix = outputMatrix.identity(); - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - const translateScaleX = (textureSize.width / filterArea.width); - const translateScaleY = (textureSize.height / filterArea.height); - - mappedMatrix.scale(translateScaleX, translateScaleY); - - return mappedMatrix; -} - -// this will map the filter coord so that a texture can be used based on the transform of a sprite -export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) -{ - const orig = sprite._texture.orig; - const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); - const worldTransform = sprite.worldTransform.copyTo(Matrix.TEMP_MATRIX); - - worldTransform.invert(); - mappedMatrix.prepend(worldTransform); - mappedMatrix.scale(1.0 / orig.width, 1.0 / orig.height); - mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); - - return mappedMatrix; -} diff --git a/packages/core/src/filters/spriteMask/SpriteMaskFilter.js b/packages/core/src/filters/spriteMask/SpriteMaskFilter.js index 16a0f5d..43fe2f4 100644 --- a/packages/core/src/filters/spriteMask/SpriteMaskFilter.js +++ b/packages/core/src/filters/spriteMask/SpriteMaskFilter.js @@ -66,6 +66,7 @@ this.uniforms.npmAlpha = tex.baseTexture.premultiplyAlpha ? 0.0 : 1.0; this.uniforms.mask = tex; + // get _normalized sprite texture coords_ and convert them to _normalized atlas texture coords_ with `prepend` this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite) .prepend(tex.transform.mapCoord); this.uniforms.alpha = maskSprite.worldAlpha; diff --git a/packages/core/src/textures/TextureMatrix.js b/packages/core/src/textures/TextureMatrix.js index 50278b5..66a7000 100644 --- a/packages/core/src/textures/TextureMatrix.js +++ b/packages/core/src/textures/TextureMatrix.js @@ -117,7 +117,7 @@ /** * updates matrices if texture was changed - * @param {boolean} forceUpdate if true, matrices will be updated any case + * @param {boolean} [forceUpdate=false] if true, matrices will be updated any case * @returns {boolean} whether or not it was updated */ update(forceUpdate) diff --git a/bundles/pixi.js/src/useDeprecated.js b/bundles/pixi.js/src/useDeprecated.js index 1a3b41e..33dab51 100644 --- a/bundles/pixi.js/src/useDeprecated.js +++ b/bundles/pixi.js/src/useDeprecated.js @@ -135,7 +135,7 @@ { deprecation(v5, 'PIXI.FilterManager has moved to PIXI.systems.FilterSystem'); - return PIXI.systems.FilterManager; + return PIXI.systems.FilterSystem; }, }, }); @@ -771,6 +771,50 @@ this.returnFilterTexture(renderTexture); }, + + /** + * @method PIXI.systems.FilterSystem#calculateScreenSpaceMatrix + * @deprecated since 5.0.0 + * @param {PIXI.Matrix} outputMatrix - the matrix to output to. + * @return {PIXI.Matrix} The mapped matrix. + */ + calculateScreenSpaceMatrix(outputMatrix) + { + deprecation(v5, 'FilterSystem#calculateScreenSpaceMatrix is removed, ' + + 'use `(vTextureCoord * inputSize.xy) + outputFrame.xy` instead'); + + const mappedMatrix = outputMatrix.identity(); + const { sourceFrame, destinationFrame } = this.activeState; + + mappedMatrix.translate(sourceFrame.x / destinationFrame.width, sourceFrame.y / destinationFrame.height); + mappedMatrix.scale(destinationFrame.width, destinationFrame.height); + + return mappedMatrix; + }, + + /** + * @method PIXI.systems.FilterSystem#calculateNormalizedScreenSpaceMatrix + * @deprecated since 5.0.0 + * @param {PIXI.Matrix} outputMatrix - The matrix to output to. + * @return {PIXI.Matrix} The mapped matrix. + */ + calculateNormalizedScreenSpaceMatrix(outputMatrix) + { + deprecation(v5, 'FilterManager#calculateNormalizedScreenSpaceMatrix is removed, ' + + 'use `((vTextureCoord * inputSize.xy) + outputFrame.xy) / outputFrame.zw` instead.'); + + const { sourceFrame, destinationFrame } = this.activeState; + const mappedMatrix = outputMatrix.identity(); + + mappedMatrix.translate(sourceFrame.x / destinationFrame.width, sourceFrame.y / destinationFrame.height); + + const translateScaleX = (destinationFrame.width / sourceFrame.width); + const translateScaleY = (destinationFrame.height / sourceFrame.height); + + mappedMatrix.scale(translateScaleX, translateScaleY); + + return mappedMatrix; + }, }); Object.defineProperties(PIXI.RenderTexture.prototype, { diff --git a/packages/core/src/filters/Filter.js b/packages/core/src/filters/Filter.js index 14b79ac..3cecb7f 100644 --- a/packages/core/src/filters/Filter.js +++ b/packages/core/src/filters/Filter.js @@ -34,6 +34,9 @@ * Developers can use normal coordinates of v3 and then allow filter to use partial Framebuffers, * bringing those extra uniforms into account. * + * Also be aware that we have changed default vertex shader, please consult + * {@link https://github.com/pixijs/pixi.js/wiki/v5-Creating-filters Wiki}. + * * ### Built-in Uniforms * * PixiJS viewport uses screen (CSS) coordinates, `(0, 0, renderer.screen.width, renderer.screen.height)`, @@ -45,7 +48,7 @@ * _Important note: as with all Framebuffers in PixiJS, both input and output are * premultiplied by alpha._ * - * By default, input Framebuffer space coordinates are passed to fragment shader with `vTextureCoord`. + * By default, input normalized coordinates are passed to fragment shader with `vTextureCoord`. * Use it to sample the input. * * ``` @@ -83,15 +86,15 @@ * * **inputSize** * - * Temporary Framebuffer is different, it can be either the size of screen, either power-of-two. - * The `inputSize.xy` are size of temporary Framebuffer that holds input. + * Temporary framebuffer is different, it can be either the size of screen, either power-of-two. + * The `inputSize.xy` are size of temporary framebuffer that holds input. * The `inputSize.zw` is inverted, it's a shortcut to evade division inside the shader. * * Set `inputSize.xy = outputFrame.zw` for a fullscreen filter. * - * To calculate input texture coordinate in 0-1 space, you have to map it to Framebuffer normalized space. - * Multiply by `outputFrame.zw` to get pixel coordinate in part of Framebuffer. - * Divide by `inputSize.xy` to get Framebuffer normalized space (input sampler space) + * To calculate input normalized coordinate, you have to map it to filter normalized space. + * Multiply by `outputFrame.zw` to get input coordinate. + * Divide by `inputSize.xy` to get input normalized coordinate. * * ``` * vec2 filterTextureCoord( void ) @@ -209,11 +212,11 @@ * There are some useful properties in the currentState : * target, filters, sourceFrame, destinationFrame, renderTarget, resolution */ - apply(filterManager, input, output, clear, currentState, derp) // eslint-disable-line no-unused-vars + apply(filterManager, input, output, clear, currentState) { // do as you please! - filterManager.applyFilter(this, input, output, clear, currentState, derp); + filterManager.applyFilter(this, input, output, clear, currentState); // or just do a regular render.. } diff --git a/packages/core/src/filters/FilterSystem.js b/packages/core/src/filters/FilterSystem.js index 0b0f30a..2b720f1 100644 --- a/packages/core/src/filters/FilterSystem.js +++ b/packages/core/src/filters/FilterSystem.js @@ -3,8 +3,7 @@ import RenderTexture from '../renderTexture/RenderTexture'; import Quad from '../utils/Quad'; import QuadUv from '../utils/QuadUv'; -import { Rectangle } from '@pixi/math'; -import * as filterTransforms from './filterTransforms'; +import { Rectangle, Matrix } from '@pixi/math'; import { nextPow2 } from '@pixi/utils'; import UniformGroup from '../shader/UniformGroup'; import { DRAW_MODES } from '@pixi/constants'; @@ -376,27 +375,9 @@ } /** - * Calculates the mapped matrix. + * Multiply _input normalized coordinates_ to this matrix to get _sprite texture normalized coordinates_. * - * TODO playing around here.. this is temporary - (will end up in the shader) - * this returns a matrix that will normalize map filter cords in the filter to screen space - * - * @param {PIXI.Matrix} outputMatrix - the matrix to output to. - * @return {PIXI.Matrix} The mapped matrix. - */ - calculateScreenSpaceMatrix(outputMatrix) - { - const currentState = this.activeState; - - return filterTransforms.calculateScreenSpaceMatrix( - outputMatrix, - currentState.sourceFrame, - currentState.destinationFrame - ); - } - - /** - * This will map the filter coord so that a texture can be used based on the transform of a sprite + * Use `outputMatrix * vTextureCoord` in the shader. * * @param {PIXI.Matrix} outputMatrix - The matrix to output to. * @param {PIXI.Sprite} sprite - The sprite to map to. @@ -404,14 +385,18 @@ */ calculateSpriteMatrix(outputMatrix, sprite) { - const currentState = this.activeState; + const { sourceFrame, destinationFrame } = this.activeState; + const { orig } = sprite._texture; + const mappedMatrix = outputMatrix.set(destinationFrame.width, 0, 0, + destinationFrame.height, sourceFrame.x, sourceFrame.y); + const worldTransform = sprite.worldTransform.copyTo(Matrix.TEMP_MATRIX); - return filterTransforms.calculateSpriteMatrix( - outputMatrix, - currentState.sourceFrame, - currentState.destinationFrame, - sprite - ); + worldTransform.invert(); + mappedMatrix.prepend(worldTransform); + mappedMatrix.scale(1.0 / orig.width, 1.0 / orig.height); + mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); + + return mappedMatrix; } /** diff --git a/packages/core/src/filters/filterTransforms.js b/packages/core/src/filters/filterTransforms.js deleted file mode 100644 index 5becf5d..0000000 --- a/packages/core/src/filters/filterTransforms.js +++ /dev/null @@ -1,50 +0,0 @@ -import { Matrix } from '@pixi/math'; - -/** - * Calculates the mapped matrix - * @param {PIXI.Matrix} outputMatrix matrix that will normalize map filter cords in the filter to screen space - * @param {PIXI.Rectangle} filterArea filter area - * @param {PIXI.Rectangle} textureSize texture size - * @returns {PIXI.Matrix} same as outputMatrix - * @private - */ -export function calculateScreenSpaceMatrix(outputMatrix, filterArea, textureSize) -{ - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(textureSize.width, textureSize.height); - - return mappedMatrix; -} - -export function calculateNormalizedScreenSpaceMatrix(outputMatrix, filterArea, textureSize) -{ - const mappedMatrix = outputMatrix.identity(); - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - const translateScaleX = (textureSize.width / filterArea.width); - const translateScaleY = (textureSize.height / filterArea.height); - - mappedMatrix.scale(translateScaleX, translateScaleY); - - return mappedMatrix; -} - -// this will map the filter coord so that a texture can be used based on the transform of a sprite -export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) -{ - const orig = sprite._texture.orig; - const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); - const worldTransform = sprite.worldTransform.copyTo(Matrix.TEMP_MATRIX); - - worldTransform.invert(); - mappedMatrix.prepend(worldTransform); - mappedMatrix.scale(1.0 / orig.width, 1.0 / orig.height); - mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); - - return mappedMatrix; -} diff --git a/packages/core/src/filters/spriteMask/SpriteMaskFilter.js b/packages/core/src/filters/spriteMask/SpriteMaskFilter.js index 16a0f5d..43fe2f4 100644 --- a/packages/core/src/filters/spriteMask/SpriteMaskFilter.js +++ b/packages/core/src/filters/spriteMask/SpriteMaskFilter.js @@ -66,6 +66,7 @@ this.uniforms.npmAlpha = tex.baseTexture.premultiplyAlpha ? 0.0 : 1.0; this.uniforms.mask = tex; + // get _normalized sprite texture coords_ and convert them to _normalized atlas texture coords_ with `prepend` this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite) .prepend(tex.transform.mapCoord); this.uniforms.alpha = maskSprite.worldAlpha; diff --git a/packages/core/src/textures/TextureMatrix.js b/packages/core/src/textures/TextureMatrix.js index 50278b5..66a7000 100644 --- a/packages/core/src/textures/TextureMatrix.js +++ b/packages/core/src/textures/TextureMatrix.js @@ -117,7 +117,7 @@ /** * updates matrices if texture was changed - * @param {boolean} forceUpdate if true, matrices will be updated any case + * @param {boolean} [forceUpdate=false] if true, matrices will be updated any case * @returns {boolean} whether or not it was updated */ update(forceUpdate) diff --git a/packages/filters/filter-displacement/src/DisplacementFilter.js b/packages/filters/filter-displacement/src/DisplacementFilter.js index 3bd25b8..65086c3 100644 --- a/packages/filters/filter-displacement/src/DisplacementFilter.js +++ b/packages/filters/filter-displacement/src/DisplacementFilter.js @@ -61,9 +61,11 @@ * @param {PIXI.systems.FilterSystem} filterManager - The manager. * @param {PIXI.RenderTexture} input - The input target. * @param {PIXI.RenderTexture} output - The output target. + * @param {boolean} clear - Should the output be cleared before rendering to it. */ - apply(filterManager, input, output) + apply(filterManager, input, output, clear) { + // fill maskMatrix with _normalized sprite texture coords_ this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); this.uniforms.scale.x = this.scale.x; this.uniforms.scale.y = this.scale.y; @@ -82,7 +84,7 @@ } // draw the filter... - filterManager.applyFilter(this, input, output); + filterManager.applyFilter(this, input, output, clear); } /**