pixi.js

Version:

pixijs.com

pixijs/pixijs

1 lines • 11.3 kB

Source Map (JSON)

View Raw

{"version":3,"file":"Filter.mjs","sources":["../../src/filters/Filter.ts"],"sourcesContent":["import { GlProgram } from '../rendering/renderers/gl/shader/GlProgram';\nimport { GpuProgram } from '../rendering/renderers/gpu/shader/GpuProgram';\nimport { Shader } from '../rendering/renderers/shared/shader/Shader';\nimport { State } from '../rendering/renderers/shared/state/State';\n\nimport type { RenderSurface } from '../rendering/renderers/shared/renderTarget/RenderTargetSystem';\nimport type {\n IShaderWithResources,\n ShaderFromResources,\n ShaderWithResources\n} from '../rendering/renderers/shared/shader/Shader';\nimport type { BLEND_MODES } from '../rendering/renderers/shared/state/const';\nimport type { Texture } from '../rendering/renderers/shared/texture/Texture';\nimport type { FilterSystem } from './FilterSystem';\n\n/**\n * The options to use when creating a new filter.\n * @category filters\n * @advanced\n */\nexport interface FilterOptions\n{\n /** optional blend mode used by the filter when rendering (defaults to 'normal') */\n blendMode?: BLEND_MODES;\n /**\n * the resolution the filter should be rendered at. The lower the resolution, the more performant\n * the filter will be, but the lower the quality of the output. (default 1)\n * If 'inherit', the resolution of the render target is used.\n * Consider lowering this for things like blurs filters\n */\n resolution?: number | 'inherit';\n /**\n * the amount of pixels to pad the container with when applying the filter. For example a blur extends the\n * container out as it blurs, so padding is applied to ensure that extra detail is rendered as well\n * without clipping occurring. (default 0)\n */\n padding?: number;\n /**\n * If true the filter will make use of antialiasing. Although it looks better this can have a performance impact.\n * If set to 'inherit', the filter will detect the antialiasing of the render target and change this automatically.\n * Definitely don't set this to true if the render target has antialiasing set to false. As it will antialias,\n * but you won't see the difference. (default 'off')\n *\n * This can be a boolean or [FilterAntialias]{@link FilterAntialias} string.\n */\n antialias?: FilterAntialias | boolean;\n /**\n * If this is set to true, the filter system will grab a snap shot of the area being rendered\n * to and pass this into the shader. This is useful for blend modes that need to be aware of the pixels\n * they are rendering to. Only use if you need that data, otherwise its an extra gpu copy you don't need!\n * (default false)\n */\n blendRequired?: boolean;\n /**\n * If this is set to true, the filter system will clip filter texture into viewport\n * This is useful for filters that applied to whole texture.\n * (default true)\n */\n clipToViewport?: boolean;\n}\n\n/**\n * Filter options mixed with shader resources. A filter needs a shader and some resources to work.\n * @category filters\n * @advanced\n * @see {@link FilterOptions}\n */\nexport type FilterWithShader = FilterOptions & IShaderWithResources;\n\n/**\n * The antialiasing mode of the filter. This can be either:\n * - `on` - the filter is always antialiased regardless of the render target settings\n * - `off` - (default) the filter is never antialiased regardless of the render target settings\n * - `inherit` - the filter uses the antialias settings of the render target\n * @category filters\n * @advanced\n */\nexport type FilterAntialias = 'on' | 'off' | 'inherit';\n\n/**\n * The Filter class is the base for all filter effects used in Pixi.js\n * As it extends a shader, it requires that a glProgram is parsed in to work with WebGL and a gpuProgram for WebGPU.\n * If you don't proved one, then the filter is skipped and just rendered as if it wasn't there for that renderer.\n *\n * A filter can be applied to anything that extends Container in Pixi.js which also includes Sprites, Graphics etc.\n *\n * Its worth noting Performance-wise filters can be pretty expensive if used too much in a single scene.\n * The following happens under the hood when a filter is applied:\n *\n * .1. Break the current batch\n * \n * .2. The target is measured using getGlobalBounds\n * (recursively go through all children and figure out how big the object is)\n * \n * .3. Get the closest Po2 Textures from the texture pool\n * \n * .4. Render the target to that texture\n * \n * .5. Render that texture back to the main frame buffer as a quad using the filters program.\n * \n * \n * Some filters (such as blur) require multiple passes too which can result in an even bigger performance hit. So be careful!\n * Its not generally the complexity of the shader that is the bottle neck,\n * but all the framebuffer / shader switching that has to take place.\n * One filter applied to a container with many objects is MUCH faster than many filter applied to many objects.\n * @category filters\n * @advanced\n * @example\n * import { Filter } from 'pixi.js';\n *\n * const customFilter = new Filter({\n * glProgram: new GlProgram({\n * fragment,\n * vertex,\n * }),\n * resources: {\n * timeUniforms: {\n * uTime: { value: 0.0, type: 'f32' },\n * },\n * },\n * });\n *\n * // Apply the filter\n * sprite.filters = [customFilter];\n *\n * // Update uniform\n * app.ticker.add((ticker) => {\n * filter.resources.timeUniforms.uniforms.uTime += 0.04 * ticker.deltaTime;\n * });\n */\nexport class Filter extends Shader\n{\n /** The default filter settings */\n public static defaultOptions: FilterOptions = {\n blendMode: 'normal',\n resolution: 1,\n padding: 0,\n antialias: 'off',\n blendRequired: false,\n clipToViewport: true,\n };\n\n /**\n * The padding of the filter. Some filters require extra space to breath such as a blur.\n * Increasing this will add extra width and height to the bounds of the object that the\n * filter is applied to.\n * @default 0\n */\n public padding: number;\n\n /**\n * should the filter use antialiasing?\n * @default inherit\n */\n public antialias: FilterAntialias;\n\n /** If enabled is true the filter is applied, if false it will not. */\n public enabled = true;\n\n /**\n * The gpu state the filter requires to render.\n * @internal\n */\n public _state = State.for2d();\n\n /**\n * The resolution of the filter. Setting this to be lower will lower the quality but\n * increase the performance of the filter.\n * @default 1\n */\n public resolution: number | 'inherit';\n\n /**\n * Whether or not this filter requires the previous render texture for blending.\n * @default false\n */\n public blendRequired: boolean;\n\n /**\n * Clip texture into viewport or not\n * @default true\n */\n public clipToViewport: boolean;\n\n /**\n * @param options - The optional parameters of this filter.\n */\n constructor(options: FilterWithShader)\n {\n options = { ...Filter.defaultOptions, ...options };\n\n super(options as ShaderWithResources);\n\n this.blendMode = options.blendMode;\n this.padding = options.padding;\n\n // check if is boolean\n if (typeof options.antialias === 'boolean')\n {\n this.antialias = options.antialias ? 'on' : 'off';\n }\n else\n {\n this.antialias = options.antialias;\n }\n\n this.resolution = options.resolution;\n this.blendRequired = options.blendRequired;\n this.clipToViewport = options.clipToViewport;\n\n this.addResource('uTexture', 0, 1);\n }\n\n /**\n * Applies the filter\n * @param filterManager - The renderer to retrieve the filter from\n * @param input - The input render target.\n * @param output - The target to output to.\n * @param clearMode - Should the output be cleared before rendering to it\n */\n public apply(\n filterManager: FilterSystem,\n input: Texture,\n output: RenderSurface,\n clearMode: boolean\n ): void\n {\n filterManager.applyFilter(this, input, output, clearMode);\n }\n\n /**\n * Get the blend mode of the filter.\n * @default \"normal\"\n */\n get blendMode(): BLEND_MODES\n {\n return this._state.blendMode;\n }\n\n /** Sets the blend mode of the filter. */\n set blendMode(value: BLEND_MODES)\n {\n this._state.blendMode = value;\n }\n\n /**\n * A short hand function to create a filter based of a vertex and fragment shader src.\n * @param options\n * @returns A shiny new PixiJS filter!\n */\n public static from(options: FilterOptions & ShaderFromResources): Filter\n {\n const { gpu, gl, ...rest } = options;\n\n let gpuProgram: GpuProgram;\n let glProgram: GlProgram;\n\n if (gpu)\n {\n gpuProgram = GpuProgram.from(gpu);\n }\n\n if (gl)\n {\n glProgram = GlProgram.from(gl);\n }\n\n return new Filter({\n gpuProgram,\n glProgram,\n ...rest\n });\n }\n}\n"],"names":[],"mappings":";;;;;;AAkIO,MAAM,OAAA,GAAN,MAAM,OAAA,SAAe,MAC5B,CAAA;AAAA;AAAA;AAAA;AAAA,EAwDI,YAAY,OACZ,EAAA;AACI,IAAA,OAAA,GAAU,EAAE,GAAG,OAAO,CAAA,cAAA,EAAgB,GAAG,OAAQ,EAAA,CAAA;AAEjD,IAAA,KAAA,CAAM,OAA8B,CAAA,CAAA;AAlCxC;AAAA,IAAA,IAAA,CAAO,OAAU,GAAA,IAAA,CAAA;AAMjB;AAAA;AAAA;AAAA;AAAA,IAAO,IAAA,CAAA,MAAA,GAAS,MAAM,KAAM,EAAA,CAAA;AA8BxB,IAAA,IAAA,CAAK,YAAY,OAAQ,CAAA,SAAA,CAAA;AACzB,IAAA,IAAA,CAAK,UAAU,OAAQ,CAAA,OAAA,CAAA;AAGvB,IAAI,IAAA,OAAO,OAAQ,CAAA,SAAA,KAAc,SACjC,EAAA;AACI,MAAK,IAAA,CAAA,SAAA,GAAY,OAAQ,CAAA,SAAA,GAAY,IAAO,GAAA,KAAA,CAAA;AAAA,KAGhD,MAAA;AACI,MAAA,IAAA,CAAK,YAAY,OAAQ,CAAA,SAAA,CAAA;AAAA,KAC7B;AAEA,IAAA,IAAA,CAAK,aAAa,OAAQ,CAAA,UAAA,CAAA;AAC1B,IAAA,IAAA,CAAK,gBAAgB,OAAQ,CAAA,aAAA,CAAA;AAC7B,IAAA,IAAA,CAAK,iBAAiB,OAAQ,CAAA,cAAA,CAAA;AAE9B,IAAK,IAAA,CAAA,WAAA,CAAY,UAAY,EAAA,CAAA,EAAG,CAAC,CAAA,CAAA;AAAA,GACrC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASO,KACH,CAAA,aAAA,EACA,KACA,EAAA,MAAA,EACA,SAEJ,EAAA;AACI,IAAA,aAAA,CAAc,WAAY,CAAA,IAAA,EAAM,KAAO,EAAA,MAAA,EAAQ,SAAS,CAAA,CAAA;AAAA,GAC5D;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,SACJ,GAAA;AACI,IAAA,OAAO,KAAK,MAAO,CAAA,SAAA,CAAA;AAAA,GACvB;AAAA;AAAA,EAGA,IAAI,UAAU,KACd,EAAA;AACI,IAAA,IAAA,CAAK,OAAO,SAAY,GAAA,KAAA,CAAA;AAAA,GAC5B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,OAAc,KAAK,OACnB,EAAA;AACI,IAAA,MAAM,EAAE,GAAA,EAAK,EAAI,EAAA,GAAG,MAAS,GAAA,OAAA,CAAA;AAE7B,IAAI,IAAA,UAAA,CAAA;AACJ,IAAI,IAAA,SAAA,CAAA;AAEJ,IAAA,IAAI,GACJ,EAAA;AACI,MAAa,UAAA,GAAA,UAAA,CAAW,KAAK,GAAG,CAAA,CAAA;AAAA,KACpC;AAEA,IAAA,IAAI,EACJ,EAAA;AACI,MAAY,SAAA,GAAA,SAAA,CAAU,KAAK,EAAE,CAAA,CAAA;AAAA,KACjC;AAEA,IAAA,OAAO,IAAI,OAAO,CAAA;AAAA,MACd,UAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAG,IAAA;AAAA,KACN,CAAA,CAAA;AAAA,GACL;AACJ,CAAA,CAAA;AAAA;AA/Ia,OAAA,CAGK,cAAgC,GAAA;AAAA,EAC1C,SAAW,EAAA,QAAA;AAAA,EACX,UAAY,EAAA,CAAA;AAAA,EACZ,OAAS,EAAA,CAAA;AAAA,EACT,SAAW,EAAA,KAAA;AAAA,EACX,aAAe,EAAA,KAAA;AAAA,EACf,cAAgB,EAAA,IAAA;AACpB,CAAA,CAAA;AAVG,IAAM,MAAN,GAAA;;;;"}