pixi.js

Version:

pixijs.com

pixijs/pixijs

1 lines • 7.87 kB

Source Map (JSON)

View Raw

{"version":3,"file":"NoiseFilter.mjs","sources":["../../../../src/filters/defaults/noise/NoiseFilter.ts"],"sourcesContent":["import { GlProgram } from '../../../rendering/renderers/gl/shader/GlProgram';\nimport { GpuProgram } from '../../../rendering/renderers/gpu/shader/GpuProgram';\nimport { UniformGroup } from '../../../rendering/renderers/shared/shader/UniformGroup';\nimport { Filter } from '../../Filter';\nimport vertex from '../defaultFilter.vert';\nimport fragment from './noise.frag';\nimport source from './noise.wgsl';\n\nimport type { FilterOptions } from '../../Filter';\n\n/**\n * Configuration options for the NoiseFilter.\n *\n * The NoiseFilter adds random noise to the rendered content. The noise effect can be\n * controlled through the noise intensity and an optional seed value for reproducible results.\n * @example\n * ```ts\n * // Basic noise effect\n * const options: NoiseFilterOptions = {\n * noise: 0.5,\n * seed: Math.random()\n * };\n *\n * // Create filter with options\n * const noiseFilter = new NoiseFilter(options);\n * ```\n * @category filters\n * @standard\n */\nexport interface NoiseFilterOptions extends FilterOptions\n{\n /**\n * The amount of noise to apply. Should be in range (0, 1]:\n * - 0.1 = subtle noise\n * - 0.5 = moderate noise (default)\n * - 1.0 = maximum noise\n * @default 0.5\n * @example\n * ```ts\n * // Moderate noise effect\n * const noiseFilter = new NoiseFilter({ noise: 0.5 });\n * ```\n */\n noise?: number;\n /**\n * A seed value to apply to the random noise generation.\n * Using the same seed will generate the same noise pattern.\n * @default Math.random()\n * @example\n * ```ts\n * // Using a fixed seed for reproducible noise\n * const noiseFilter = new NoiseFilter({ seed: 12345 });\n * ```\n */\n seed?: number;\n}\n\n/**\n * A filter that adds configurable random noise to rendered content.\n *\n * This filter generates pixel noise based on a noise intensity value and an optional seed.\n * It can be used to create various effects like film grain, static, or texture variation.\n *\n * Based on: https://github.com/evanw/glfx.js/blob/master/src/filters/adjust/noise.js\n * @example\n * ```ts\n * import { NoiseFilter } from 'pixi.js';\n *\n * // Create with options\n * const filter = new NoiseFilter({\n * noise: 0.5, // 50% noise intensity\n * seed: 12345 // Fixed seed for consistent noise\n * });\n *\n * // Apply to a display object\n * sprite.filters = [filter];\n *\n * // Adjust noise dynamically\n * filter.noise = 0.8; // Increase noise\n * filter.seed = Math.random(); // New random pattern\n * ```\n * @category filters\n * @author Vico: vicocotea\n * @standard\n * @noInheritDoc\n */\nexport class NoiseFilter extends Filter\n{\n /**\n * The default configuration options for the NoiseFilter.\n *\n * These values will be used when no specific options are provided to the constructor.\n * You can override any of these values by passing your own options object.\n * @example\n * ```ts\n * NoiseFilter.defaultOptions.noise = 0.7; // Change default noise to 0.7\n * const filter = new NoiseFilter(); // Will use noise 0.7 by default\n * ```\n */\n public static defaultOptions: NoiseFilterOptions = {\n noise: 0.5,\n };\n\n /**\n * @param options - The options of the noise filter.\n */\n constructor(options: NoiseFilterOptions = {})\n {\n options = { ...NoiseFilter.defaultOptions, ...options };\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 glProgram = GlProgram.from({\n vertex,\n fragment,\n name: 'noise-filter'\n });\n\n const { noise, seed, ...rest } = options;\n\n super({\n ...rest,\n gpuProgram,\n glProgram,\n resources: {\n noiseUniforms: new UniformGroup({\n uNoise: { value: 1, type: 'f32' },\n uSeed: { value: 1, type: 'f32' },\n })\n },\n });\n\n this.noise = noise;\n this.seed = seed ?? Math.random();\n }\n\n /**\n * The amount of noise to apply to the filtered content.\n *\n * This value controls the intensity of the random noise effect:\n * - Values close to 0 produce subtle noise\n * - Values around 0.5 produce moderate noise\n * - Values close to 1 produce strong noise\n * @default 0.5\n * @example\n * ```ts\n * const noiseFilter = new NoiseFilter();\n *\n * // Set to subtle noise\n * noiseFilter.noise = 0.2;\n *\n * // Set to maximum noise\n * noiseFilter.noise = 1.0;\n * ```\n */\n get noise(): number\n {\n return this.resources.noiseUniforms.uniforms.uNoise;\n }\n\n set noise(value: number)\n {\n this.resources.noiseUniforms.uniforms.uNoise = value;\n }\n\n /**\n * The seed value used for random noise generation.\n *\n * This value determines the noise pattern:\n * - Using the same seed will generate identical noise patterns\n * - Different seeds produce different but consistent patterns\n * - `Math.random()` can be used for random patterns\n * @default Math.random()\n * @example\n * ```ts\n * const noiseFilter = new NoiseFilter();\n *\n * // Use a fixed seed for consistent noise\n * noiseFilter.seed = 12345;\n *\n * // Generate new random pattern\n * noiseFilter.seed = Math.random();\n * ```\n */\n get seed(): number\n {\n return this.resources.noiseUniforms.uniforms.uSeed;\n }\n\n set seed(value: number)\n {\n this.resources.noiseUniforms.uniforms.uSeed = value;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;AAsFO,MAAM,YAAA,GAAN,MAAM,YAAA,SAAoB,MACjC,CAAA;AAAA;AAAA;AAAA;AAAA,EAmBI,WAAA,CAAY,OAA8B,GAAA,EAC1C,EAAA;AACI,IAAA,OAAA,GAAU,EAAE,GAAG,YAAY,CAAA,cAAA,EAAgB,GAAG,OAAQ,EAAA,CAAA;AAEtD,IAAM,MAAA,UAAA,GAAa,WAAW,IAAK,CAAA;AAAA,MAC/B,MAAQ,EAAA;AAAA,QACJ,MAAA;AAAA,QACA,UAAY,EAAA,YAAA;AAAA,OAChB;AAAA,MACA,QAAU,EAAA;AAAA,QACN,MAAA;AAAA,QACA,UAAY,EAAA,cAAA;AAAA,OAChB;AAAA,KACH,CAAA,CAAA;AAED,IAAM,MAAA,SAAA,GAAY,UAAU,IAAK,CAAA;AAAA,MAC7B,MAAA;AAAA,MACA,QAAA;AAAA,MACA,IAAM,EAAA,cAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,KAAA,EAAO,IAAM,EAAA,GAAG,MAAS,GAAA,OAAA,CAAA;AAEjC,IAAM,KAAA,CAAA;AAAA,MACF,GAAG,IAAA;AAAA,MACH,UAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAW,EAAA;AAAA,QACP,aAAA,EAAe,IAAI,YAAa,CAAA;AAAA,UAC5B,MAAQ,EAAA,EAAE,KAAO,EAAA,CAAA,EAAG,MAAM,KAAM,EAAA;AAAA,UAChC,KAAO,EAAA,EAAE,KAAO,EAAA,CAAA,EAAG,MAAM,KAAM,EAAA;AAAA,SAClC,CAAA;AAAA,OACL;AAAA,KACH,CAAA,CAAA;AAED,IAAA,IAAA,CAAK,KAAQ,GAAA,KAAA,CAAA;AACb,IAAK,IAAA,CAAA,IAAA,GAAO,IAAQ,IAAA,IAAA,CAAK,MAAO,EAAA,CAAA;AAAA,GACpC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAqBA,IAAI,KACJ,GAAA;AACI,IAAO,OAAA,IAAA,CAAK,SAAU,CAAA,aAAA,CAAc,QAAS,CAAA,MAAA,CAAA;AAAA,GACjD;AAAA,EAEA,IAAI,MAAM,KACV,EAAA;AACI,IAAK,IAAA,CAAA,SAAA,CAAU,aAAc,CAAA,QAAA,CAAS,MAAS,GAAA,KAAA,CAAA;AAAA,GACnD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAqBA,IAAI,IACJ,GAAA;AACI,IAAO,OAAA,IAAA,CAAK,SAAU,CAAA,aAAA,CAAc,QAAS,CAAA,KAAA,CAAA;AAAA,GACjD;AAAA,EAEA,IAAI,KAAK,KACT,EAAA;AACI,IAAK,IAAA,CAAA,SAAA,CAAU,aAAc,CAAA,QAAA,CAAS,KAAQ,GAAA,KAAA,CAAA;AAAA,GAClD;AACJ,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AApHa,YAAA,CAaK,cAAqC,GAAA;AAAA,EAC/C,KAAO,EAAA,GAAA;AACX,CAAA,CAAA;AAfG,IAAM,WAAN,GAAA;;;;"}