pixi.js

Version:

pixijs.com

pixijs/pixijs

1 lines • 10.8 kB

Source Map (JSON)

View Raw

{"version":3,"file":"DisplacementFilter.mjs","sources":["../../../../src/filters/defaults/displacement/DisplacementFilter.ts"],"sourcesContent":["import { Matrix } from '../../../maths/matrix/Matrix';\nimport { Point } from '../../../maths/point/Point';\nimport { GlProgram } from '../../../rendering/renderers/gl/shader/GlProgram';\nimport { GpuProgram } from '../../../rendering/renderers/gpu/shader/GpuProgram';\nimport { UniformGroup } from '../../../rendering/renderers/shared/shader/UniformGroup';\nimport { Sprite } from '../../../scene/sprite/Sprite';\nimport { deprecation, v8_0_0 } from '../../../utils/logging/deprecation';\nimport { Filter } from '../../Filter';\nimport fragment from './displacement.frag';\nimport vertex from './displacement.vert';\nimport source from './displacement.wgsl';\n\nimport type { PointData } from '../../../maths/point/PointData';\nimport type { Texture } from '../../../rendering/renderers/shared/texture/Texture';\nimport type { FilterOptions } from '../../Filter';\nimport type { FilterSystem } from '../../FilterSystem';\n\n/**\n * Configuration options for the DisplacementFilter.\n *\n * A displacement filter uses a sprite's texture as a displacement map,\n * moving pixels of the target based on the color values of corresponding\n * pixels in the displacement sprite.\n * @example\n * ```ts\n * const options: DisplacementFilterOptions = {\n * sprite: displacementSprite,\n * scale: { x: 20, y: 20 }\n * };\n *\n * const filter = new DisplacementFilter(options);\n * ```\n * @category filters\n * @standard\n */\nexport interface DisplacementFilterOptions extends FilterOptions\n{\n /**\n * The sprite whose texture will be used as the displacement map.\n * Red channel = horizontal displacement\n * Green channel = vertical displacement\n * @example\n * ```ts\n * const displacementSprite = new Sprite(texture);\n * const filter = new DisplacementFilter({ sprite: displacementSprite });\n * ```\n */\n sprite: Sprite;\n\n /**\n * The scale of the displacement effect. Can be a single number for uniform\n * scaling or a point-like object for separate x/y scaling.\n * @default 20\n * @example\n * ```ts\n * // Uniform scaling\n * new DisplacementFilter({ sprite, scale: 20 });\n * // Separate scaling\n * new DisplacementFilter({ sprite, scale: { x: 10, y: 15 } });\n * ```\n */\n scale?: number | PointData;\n}\n\n/**\n * A filter that applies a displacement map effect using a sprite's texture.\n *\n * The DisplacementFilter uses another texture (from a sprite) as a displacement map,\n * where the red and green channels of each pixel in the map determine how the corresponding\n * pixel in the filtered object should be offset:\n * - Red channel controls horizontal displacement\n * - Green channel controls vertical displacement\n *\n * Common use cases:\n * - Creating ripple or wave effects\n * - Distorting images dynamically\n * - Implementing heat haze effects\n * - Creating transition effects\n * @example\n * ```ts\n * import { Sprite, DisplacementFilter } from 'pixi.js';\n *\n * // Create a sprite to use as the displacement map\n * const displacementSprite = Sprite.from('displacement-map.png');\n *\n * // Create and configure the filter\n * const displacementFilter = new DisplacementFilter({\n * sprite: displacementSprite,\n * scale: { x: 20, y: 20 }\n * });\n *\n * // Apply to any display object\n * container.filters = [displacementFilter];\n * ```\n * @category filters\n * @author Vico: vicocotea\n * @standard\n * @noInheritDoc\n */\nexport class DisplacementFilter extends Filter\n{\n private readonly _sprite: Sprite;\n\n /**\n * @param {Sprite | DisplacementFilterOptions} options - The sprite or options object.\n * @param {Sprite} options.sprite - The texture used for the displacement map.\n * @param {number | PointData} options.scale - The scale of the displacement.\n */\n constructor(options: Sprite | DisplacementFilterOptions);\n /** @deprecated since 8.0.0 */\n constructor(sprite: Sprite, scale?: number | PointData);\n constructor(...args: [Sprite | DisplacementFilterOptions] | [Sprite, (number | PointData)?])\n {\n let options = args[0];\n\n if (options instanceof Sprite)\n {\n // #if _DEBUG\n if (args[1])\n {\n deprecation(v8_0_0, 'DisplacementFilter now uses options object instead of params. {sprite, scale}');\n }\n // #endif\n\n options = { sprite: options, scale: args[1] };\n }\n\n const { sprite, scale: scaleOption, ...rest } = options;\n\n let scale = scaleOption ?? 20;\n\n // check if is a number or a point\n if (typeof scale === 'number')\n {\n scale = new Point(scale, scale);\n }\n\n const filterUniforms = new UniformGroup({\n uFilterMatrix: { value: new Matrix(), type: 'mat3x3<f32>' },\n uScale: { value: scale, type: 'vec2<f32>' },\n uRotation: { value: new Float32Array([0, 0, 0, 0]), type: 'mat2x2<f32>' },\n });\n\n const glProgram = GlProgram.from({\n vertex,\n fragment,\n name: 'displacement-filter'\n });\n\n const gpuProgram = GpuProgram.from({\n vertex: {\n source,\n entryPoint: 'mainVertex',\n },\n fragment: {\n source,\n entryPoint: 'mainFragment',\n },\n });\n\n const textureSource = sprite.texture.source;\n\n super({\n ...rest,\n gpuProgram,\n glProgram,\n resources: {\n filterUniforms,\n uMapTexture: textureSource,\n uMapSampler: textureSource.style,\n },\n });\n\n this._sprite = options.sprite;\n this._sprite.renderable = false;\n }\n\n /**\n * Applies the filter.\n * @param filterManager - The manager.\n * @param input - The input target.\n * @param output - The output target.\n * @param clearMode - clearMode.\n * @advanced\n */\n public apply(\n filterManager: FilterSystem,\n input: Texture,\n output: Texture,\n clearMode: boolean\n ): void\n {\n const uniforms = this.resources.filterUniforms.uniforms;\n\n filterManager.calculateSpriteMatrix(\n uniforms.uFilterMatrix,\n this._sprite\n );\n\n // Extract rotation from world transform\n const wt = this._sprite.worldTransform;\n const lenX = Math.sqrt((wt.a * wt.a) + (wt.b * wt.b));\n const lenY = Math.sqrt((wt.c * wt.c) + (wt.d * wt.d));\n\n if (lenX !== 0 && lenY !== 0)\n {\n uniforms.uRotation[0] = wt.a / lenX;\n uniforms.uRotation[1] = wt.b / lenX;\n uniforms.uRotation[2] = wt.c / lenY;\n uniforms.uRotation[3] = wt.d / lenY;\n }\n\n this.resources.uMapTexture = this._sprite.texture.source;\n\n filterManager.applyFilter(this, input, output, clearMode);\n }\n\n /**\n * The scale of the displacement effect.\n *\n * Gets the current x and y scaling values used for the displacement mapping.\n * - x: Horizontal displacement scale\n * - y: Vertical displacement scale\n * @returns {Point} The current scale as a Point object\n * @example\n * ```ts\n * const filter = new DisplacementFilter({ sprite });\n *\n * // Get current scale\n * console.log(filter.scale.x, filter.scale.y);\n *\n * // Update scale\n * filter.scale.x = 100;\n * filter.scale.y = 50;\n * ```\n */\n get scale(): Point\n {\n return this.resources.filterUniforms.uniforms.uScale as Point;\n }\n}\n"],"names":[],"mappings":"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"}