Pixijs Filters

作者 pixijs83760c6f5346MIT346 个星标收录于 2026年10月8日更新于 2026年10月8日仓库7天前更新

Use this skill when applying visual effects to PixiJS v8 containers via the filter pipeline. Covers built-in filters (AlphaFilter, BlurFilter, ColorMatrixFilter, DisplacementFilter, NoiseFilter), custom Filter.from() with GLSL/WGSL, options (resolution, padding, antialias, blendRequired), filterArea optimization, pixi-filters community package. Triggers on: filters, BlurFilter, ColorMatrixFilter, DisplacementFilter, NoiseFilter, Filter.from, GLSL filter, pixi-filters, filterArea.

仅含说明Software Development Design & Creative

AI 生成的概览

指导通过滤镜管线为 PixiJS v8 应用视觉效果，涵盖内置滤镜与自定义着色器滤镜。

功能: 说明如何将 AlphaFilter、BlurFilter、ColorMatrixFilter、DisplacementFilter 和 NoiseFilter 等 PixiJS v8 内置滤镜挂载到容器上，以及如何使用 Filter.from() 配合 GLSL 或 WGSL 片元着色器创建自定义滤镜。内容还涉及 resolution、padding、antialias 等滤镜选项、filterArea 优化以及 pixi-filters 社区包。产出为参考说明与代码示例，而非生成的文件。
适用场景: 适用于需要通过滤镜为 PixiJS v8 显示对象或容器添加视觉效果的场景。也适合编写基于着色器的自定义滤镜、优化滤镜性能，或从旧版 PixiJS 滤镜 API 迁移时使用。
运行要求: 需要 PixiJS v8 项目；自定义滤镜需要 GLSL 或 WGSL 着色器知识。社区滤镜可选依赖 pixi-filters 包。不包含脚本。

Attach visual effects by assigning one filter (or an array for chaining) to container.filters. Built-in filters cover blur, color matrix, displacement, alpha, and noise; custom filters wrap a GLSL/WGSL fragment shader via Filter.from(...).

Quick Start

const sprite = new Sprite(await Assets.load("hero.png"));app.stage.addChild(sprite);
const blur = new BlurFilter({ strength: 4, quality: 4 });const colorMatrix = new ColorMatrixFilter();colorMatrix.brightness(1.2, false);
sprite.filters = [blur, colorMatrix];
const container = new Container();container.filters = [new BlurFilter({ strength: 2 })];container.filterArea = new Rectangle(0, 0, 800, 600);app.stage.addChild(container);

const sprite = new Sprite(await Assets.load("hero.png"));app.stage.addChild(sprite);
const blur = new BlurFilter({ strength: 4, quality: 4 });const colorMatrix = new ColorMatrixFilter();colorMatrix.brightness(1.2, false);
sprite.filters = [blur, colorMatrix];
const container = new Container();container.filters = [new BlurFilter({ strength: 2 })];container.filterArea = new Rectangle(0, 0, 800, 600);app.stage.addChild(container);

Related skills: pixijs-custom-rendering (shader internals, uniform types), pixijs-blend-modes (composing with filters), pixijs-performance (filter tuning, filterArea).

Core Patterns

Built-in filters

import {  AlphaFilter,  BlurFilter,  ColorMatrixFilter,  DisplacementFilter,  NoiseFilter,  Assets,  Sprite,} from "pixi.js";
// Alpha (uniform transparency without per-child layering)const alpha = new AlphaFilter({ alpha: 0.5 });
// Blur — strength/quality are uniform; strengthX/strengthY split axes;// kernelSize must be odd (5, 7, 9, ... 15); repeatEdgePixels avoids transparent edgesconst blur = new BlurFilter({  strength: 4,  quality: 4,  kernelSize: 5,  repeatEdgePixels: false,});
// Color matrix — brightness is one of many presets. Others: tint, hue,// contrast, saturate, desaturate, greyscale/grayscale, blackAndWhite,// negative, sepia, technicolor, polaroid, kodachrome, browni, vintage,// colorTone, night, predator, lsd, reset. Direct access via// `colorMatrix.matrix` (20-element array) and `colorMatrix.alpha` (blend// between original and transformed).const colorMatrix = new ColorMatrixFilter();colorMatrix.brightness(1.5, false);colorMatrix.contrast(0.5, true); // multiply stacks on top of existing matrixcolorMatrix.alpha = 0.7; // blend at 70% strength
// Displacement — scale is a number or PointDataconst displacementTexture = await Assets.load("displacement_map.png");const displacementSprite = new Sprite(displacementTexture);const displacement = new DisplacementFilter({  sprite: displacementSprite,  scale: { x: 20, y: 10 },});
// Noise — seed is an arbitrary number that determines the noise pattern; same seed reproduces the same patternconst noise = new NoiseFilter({ noise: 0.5, seed: Math.random() });
sprite.filters = [blur, colorMatrix];

import {  AlphaFilter,  BlurFilter,  ColorMatrixFilter,  DisplacementFilter,  NoiseFilter,  Assets,  Sprite,} from "pixi.js";
// Alpha (uniform transparency without per-child layering)const alpha = new AlphaFilter({ alpha: 0.5 });
// Blur — strength/quality are uniform; strengthX/strengthY split axes;// kernelSize must be odd (5, 7, 9, ... 15); repeatEdgePixels avoids transparent edgesconst blur = new BlurFilter({  strength: 4,  quality: 4,  kernelSize: 5,  repeatEdgePixels: false,});
// Color matrix — brightness is one of many presets. Others: tint, hue,// contrast, saturate, desaturate, greyscale/grayscale, blackAndWhite,// negative, sepia, technicolor, polaroid, kodachrome, browni, vintage,// colorTone, night, predator, lsd, reset. Direct access via// `colorMatrix.matrix` (20-element array) and `colorMatrix.alpha` (blend// between original and transformed).const colorMatrix = new ColorMatrixFilter();colorMatrix.brightness(1.5, false);colorMatrix.contrast(0.5, true); // multiply stacks on top of existing matrixcolorMatrix.alpha = 0.7; // blend at 70% strength
// Displacement — scale is a number or PointDataconst displacementTexture = await Assets.load("displacement_map.png");const displacementSprite = new Sprite(displacementTexture);const displacement = new DisplacementFilter({  sprite: displacementSprite,  scale: { x: 20, y: 10 },});
// Noise — seed is an arbitrary number that determines the noise pattern; same seed reproduces the same patternconst noise = new NoiseFilter({ noise: 0.5, seed: Math.random() });
sprite.filters = [blur, colorMatrix];

Custom filter with Filter.from()

The simplest way to create a custom filter. Only a fragment shader is needed; PixiJS provides a default vertex shader.

import { Filter } from "pixi.js";
const filter = Filter.from({  gl: {    fragment: `            in vec2 vTextureCoord;            out vec4 finalColor;            uniform sampler2D uTexture;            uniform float uTime;
            void main() {                vec2 uv = vTextureCoord;                uv.x += sin(uv.y * 10.0 + uTime) * 0.02;                finalColor = texture(uTexture, uv);            }        `,  },  resources: {    timeUniforms: {      uTime: { value: 0, type: "f32" },    },  },});
sprite.filters = filter;
app.ticker.add((ticker) => {  filter.resources.timeUniforms.uniforms.uTime += 0.04 * ticker.deltaTime;});

import { Filter } from "pixi.js";
const filter = Filter.from({  gl: {    fragment: `            in vec2 vTextureCoord;            out vec4 finalColor;            uniform sampler2D uTexture;            uniform float uTime;
            void main() {                vec2 uv = vTextureCoord;                uv.x += sin(uv.y * 10.0 + uTime) * 0.02;                finalColor = texture(uTexture, uv);            }        `,  },  resources: {    timeUniforms: {      uTime: { value: 0, type: "f32" },    },  },});
sprite.filters = filter;
app.ticker.add((ticker) => {  filter.resources.timeUniforms.uniforms.uTime += 0.04 * ticker.deltaTime;});

For more control, construct GlProgram/GpuProgram objects directly:

import { Filter, GlProgram } from "pixi.js";
const glProgram = GlProgram.from({ fragment: fragmentSrc, vertex: vertexSrc });
const filter = new Filter({  glProgram,  resources: {    timeUniforms: {      uTime: { value: 0, type: "f32" },    },  },});

import { Filter, GlProgram } from "pixi.js";
const glProgram = GlProgram.from({ fragment: fragmentSrc, vertex: vertexSrc });
const filter = new Filter({  glProgram,  resources: {    timeUniforms: {      uTime: { value: 0, type: "f32" },    },  },});

Key points:

Use out vec4 finalColor in fragment shaders, not gl_FragColor (GLSL ES 3.0).
Use texture() to sample, not texture2D.
glProgram for WebGL, gpuProgram for WebGPU. Omitting one skips that renderer.
Textures go in resources, not uniforms. The filter system auto-provides uTexture (the input).
Access uniform values via filter.resources.{groupName}.uniforms.{name}.

Filter options

import { Filter, GlProgram, Rectangle } from "pixi.js";
const filter = new Filter({  glProgram: GlProgram.from({ fragment }),  resources: {},  resolution: 0.5, // default 1. Lower = faster, blurrier. 'inherit' matches the render target resolution  padding: 10, // default 0. Extra pixels for effects that extend bounds  antialias: "off", // default 'off'. 'on' | 'off' | 'inherit'  blendMode: "normal", // default 'normal'  blendRequired: false, // default false. true if shader samples uBackTexture  clipToViewport: true, // default true});
// Optimization: set known bounds to avoid per-frame measurementcontainer.filterArea = new Rectangle(0, 0, 800, 600);
// Toggle without rebuilding the filter arrayfilter.enabled = false;
// Share one filter instance across many display objectssprite1.filters = [filter];sprite2.filters = [filter];

import { Filter, GlProgram, Rectangle } from "pixi.js";
const filter = new Filter({  glProgram: GlProgram.from({ fragment }),  resources: {},  resolution: 0.5, // default 1. Lower = faster, blurrier. 'inherit' matches the render target resolution  padding: 10, // default 0. Extra pixels for effects that extend bounds  antialias: "off", // default 'off'. 'on' | 'off' | 'inherit'  blendMode: "normal", // default 'normal'  blendRequired: false, // default false. true if shader samples uBackTexture  clipToViewport: true, // default true});
// Optimization: set known bounds to avoid per-frame measurementcontainer.filterArea = new Rectangle(0, 0, 800, 600);
// Toggle without rebuilding the filter arrayfilter.enabled = false;
// Share one filter instance across many display objectssprite1.filters = [filter];sprite2.filters = [filter];

Community filters (pixi-filters)

import { AdjustmentFilter } from "pixi-filters/adjustment";import { GlowFilter } from "pixi-filters/glow";
sprite.filters = [  new AdjustmentFilter({ brightness: 1.2, contrast: 1.1 }),  new GlowFilter({ distance: 15, outerStrength: 2 }),];

import { AdjustmentFilter } from "pixi-filters/adjustment";import { GlowFilter } from "pixi-filters/glow";
sprite.filters = [  new AdjustmentFilter({ brightness: 1.2, contrast: 1.1 }),  new GlowFilter({ distance: 15, outerStrength: 2 }),];

For v8, community filters use pixi-filters/{name} imports, not the old @pixi/filter-* packages.

Advanced blend modes

Advanced blend modes (color-burn, overlay, hard-light, etc.) are powered by the filter system and must be imported before use. They also require useBackBuffer: true on WebGL; see the pixijs-blend-modes skill for the full list.

import "pixi.js/advanced-blend-modes";
await app.init({ useBackBuffer: true });sprite.blendMode = "color-burn";

import "pixi.js/advanced-blend-modes";
await app.init({ useBackBuffer: true });sprite.blendMode = "color-burn";

Advanced blend modes are filter-based, so they inherit Filter.defaultOptions, whose resolution defaults to 1. On high-DPI render targets this can make a blend mode look clipped, scaled, or only partially applied. Set Filter.defaultOptions.resolution = 'inherit' before creating the affected objects to render at the render target resolution, at higher memory and runtime cost:

import { Filter } from "pixi.js";import "pixi.js/advanced-blend-modes";
Filter.defaultOptions.resolution = "inherit";sprite.blendMode = "overlay";

import { Filter } from "pixi.js";import "pixi.js/advanced-blend-modes";
Filter.defaultOptions.resolution = "inherit";sprite.blendMode = "overlay";

Common Mistakes

[CRITICAL] Using old Filter constructor (vertex, fragment, uniforms)

Wrong:

Correct:

import { Filter, GlProgram } from "pixi.js";
const filter = new Filter({  glProgram: GlProgram.from({ fragment, vertex }),  resources: {    timeUniforms: { uTime: { value: 0, type: "f32" } },  },});

import { Filter, GlProgram } from "pixi.js";
const filter = new Filter({  glProgram: GlProgram.from({ fragment, vertex }),  resources: {    timeUniforms: { uTime: { value: 0, type: "f32" } },  },});

v8 uses an options object. Shaders must be wrapped in GlProgram.from() or GpuProgram.from(). Uniforms are grouped in resources with explicit types. Textures are resources, not uniforms.

[HIGH] Using @pixi/filter-* packages for v8

Wrong:

Correct:

@pixi/filter-* packages are v7 only. For v8, the community filters package restructured to pixi-filters/{name}.

[HIGH] Using too many filters without containerizing

Each filter application requires a framebuffer switch, bounds measurement, and render-to-texture pass. One filter on a parent container is much cheaper than the same filter on each child.

Wrong:

Correct:

[HIGH] Using a blendRequired filter without useBackBuffer on WebGL

Custom filters and most advanced community filters that set blendRequired: true sample the back buffer. On WebGL that only works if the renderer was initialized with useBackBuffer: true; otherwise PixiJS logs a warning and the filter silently falls back:

WebGPU enables the back buffer unconditionally, so this only affects WebGL.

[MEDIUM] Not setting filterArea for known-size containers

Without filterArea, PixiJS measures the container bounds every frame via getGlobalBounds(), which recursively walks all children. For containers with known dimensions, set filterArea to avoid this cost:

import { Rectangle } from "pixi.js";
container.filterArea = new Rectangle(0, 0, 800, 600);container.filters = [someFilter];

import { Rectangle } from "pixi.js";
container.filterArea = new Rectangle(0, 0, 800, 600);container.filters = [someFilter];

API Reference

来源与署名

来源：pixijs/pixijs-skills位于skills/pixijs-filters提交83760c6

许可证： MIT

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

Pixijs Filters

Quick Start

Core Patterns

Built-in filters

Custom filter with Filter.from()

Filter options

Community filters (pixi-filters)

Advanced blend modes

Common Mistakes

[CRITICAL] Using old Filter constructor (vertex, fragment, uniforms)

[HIGH] Using @pixi/filter-* packages for v8

[HIGH] Using too many filters without containerizing

[HIGH] Using a blendRequired filter without useBackBuffer on WebGL

[MEDIUM] Not setting filterArea for known-size containers

API Reference

来源与署名

更多来自 pixijs/pixijs-skills 的技能

Pixijs Ticker

Pixijs Scene Text

Pixijs Scene Sprite

Pixijs Scene Particle Container

Pixijs Scene Mesh

Pixijs Scene Graphics

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices