Skip to main content

滤镜/混合模式

¥Filters / Blend Modes

PixiJS 滤镜允许你将后处理视觉效果应用于任何场景对象及其子对象。滤镜可用于实现模糊、色彩调整、噪点或基于自定义着色器的操作等效果。

¥PixiJS filters allow you to apply post-processing visual effects to any scene object and its children. Filters can be used for effects such as blurring, color adjustments, noise, or custom shader-based operations.

import { Sprite, BlurFilter } from 'pixi.js';

// Apply the filter
sprite.filters = [new BlurFilter({ strength: 8 })];

应用过滤器​

¥Applying Filters

应用滤镜很简单。你可以将滤镜实例分配给任何场景对象的 filters 属性，例如 Sprite、Container 或 Graphics。你可以通过传递滤镜实例数组来应用多个滤镜。

¥Applying filters is straightforward. You can assign a filter instance to the filters property of any scene object, such as Sprite, Container, or Graphics. You can apply multiple filters by passing an array of filter instances.

import { BlurFilter, NoiseFilter } from 'pixi.js';

sprite.filters = new BlurFilter({ strength: 5 });

sprite.filters = [
    new BlurFilter({ strength: 4 }),
    new NoiseFilter({ noise: 0.2 }),
];
信息

顺序很重要 - 过滤器按顺序应用。

¥Order matters — filters are applied in sequence.

高级混合模式​

¥Advanced Blend Modes

PixiJS v8 为滤镜引入了高级混合模式，允许实现更复杂的合成效果。这些混合模式可用于创建独特的视觉样式和效果。要使用像 HARD_LIGHT 这样的高级模式，你必须手动导入高级混合模式扩展：

¥PixiJS v8 introduces advanced blend modes for filters, allowing for more complex compositing effects. These blend modes can be used to create unique visual styles and effects. To use advanced modes like HARD_LIGHT, you must manually import the advanced blend mode extension:

import 'pixi.js/advanced-blend-modes';
import { HardMixBlend } from 'pixi.js';

sprite.filters = [new HardMixBlend()];

内置滤镜概览​

¥Built-In Filters Overview

PixiJS v8 提供了多种开箱即用的过滤器：

¥PixiJS v8 provides a variety of filters out of the box:

过滤器类别描述
AlphaFilter将透明度应用于对象。
BlurFilter高斯模糊。
ColorMatrixFilter通过矩阵应用颜色变换。
DisplacementFilter使用其他纹理扭曲对象。
NoiseFilter添加随机噪声以产生颗粒效果。
信息

要了解更多社区滤镜，请参阅 pixi-filters。

¥To explore more community filters, see pixi-filters.

混合滤镜：用于自定义合成模式

¥Blend Filters: Used for custom compositing modes

过滤器类别描述
ColorBurnBlend使基色变暗以反映混合色。
ColorDodgeBlend使基色变亮。
DarkenBlend保留最暗的颜色分量。
DivideBlend将基色除以混合色。
HardMixBlend高对比度混合。
LinearBurnBlend使用线性公式变暗。
LinearDodgeBlend使用线性公式进行亮度调整。
LinearLightBlend线性减淡和加深的组合。
PinLightBlend选择性替换颜色。
SubtractBlend从基色中减去混合色。

创建自定义滤镜​

¥Creating a Custom Filter

要在 PixiJS v8 中定义自定义滤镜，请将 Filter.from() 与着色器程序和 GPU 资源结合使用。

¥To define a custom filter in PixiJS v8, you use Filter.from() with shader programs and GPU resources.

import { Filter, GlProgram, Texture } from 'pixi.js';

const vertex = `
  in vec2 aPosition;
  out vec2 vTextureCoord;

  uniform vec4 uInputSize;
  uniform vec4 uOutputFrame;
  uniform vec4 uOutputTexture;

  vec4 filterVertexPosition( void )
  {
      vec2 position = aPosition * uOutputFrame.zw + uOutputFrame.xy;

      position.x = position.x * (2.0 / uOutputTexture.x) - 1.0;
      position.y = position.y * (2.0*uOutputTexture.z / uOutputTexture.y) - uOutputTexture.z;

      return vec4(position, 0.0, 1.0);
  }

  vec2 filterTextureCoord( void )
  {
      return aPosition * (uOutputFrame.zw * uInputSize.zw);
  }

  void main(void)
  {
      gl_Position = filterVertexPosition();
      vTextureCoord = filterTextureCoord();
  }
`;

const fragment = `
  in vec2 vTextureCoord;
  in vec4 vColor;

  uniform sampler2D uTexture;
  uniform float uTime;

  void main(void)
  {
      vec2 uvs = vTextureCoord.xy;

      vec4 fg = texture2D(uTexture, vTextureCoord);


      fg.r = uvs.y + sin(uTime);


      gl_FragColor = fg;

  }
`;

const customFilter = new Filter({
    glProgram: new GlProgram({
        fragment,
        vertex,
    }),
    resources: {
        timeUniforms: {
            uTime: { value: 0.0, type: 'f32' },
        },
    },
});


// Apply the filter
sprite.filters = [customFilter];

// Update uniform
app.ticker.add((ticker) => {
    filter.resources.timeUniforms.uniforms.uTime += 0.04 * ticker.deltaTime;
});
信息Tip

着色器必须兼容 WebGL 或 WebGPU。对于双渲染器支持，请包含 gpuProgram。

¥Shaders must be WebGL- or WebGPU-compatible. For dual-renderer support, include a gpuProgram.

API 参考​

¥API Reference