PixiJS容器滤镜疑问：滤镜作用于容器整体还是内部单个Sprite？

这确实是PixiJS Container的标准行为。

原因说明 #

PixiJS里，给Container加滤镜时，默认会对容器内每个独立渲染元素（比如Sprite）单独应用滤镜，而非把整个容器当成一个整体渲染后再统一加滤镜。这是因为Container本身不会生成独立纹理，它只负责子元素的布局和批量渲染，滤镜会基于每个子元素的局部坐标系生效，而非容器的全局坐标系，所以才会出现你看到的每个Sprite各自被滤镜处理的情况。

解决办法 #

要实现整个容器作为整体应用滤镜的效果，你需要让容器生成缓存纹理，具体有两种方式：

方式一：启用cacheAsBitmap

直接开启容器的缓存功能，它会先把所有子元素渲染到临时纹理上，再对这个整体纹理应用滤镜，此时滤镜的坐标系就是容器的全局坐标系，就能达到左侧Sprite比右侧暗的效果：

container.cacheAsBitmap = true;
container.filters = [你的自定义滤镜];

如果容器内子元素有动态变化（比如位置移动、动画），需要手动调用container.updateCache()更新缓存，否则滤镜效果不会同步变化。不过这个方法会增加少量性能开销，根据场景需求取舍就行。

方式二：手动创建RenderTexture

如果需要更灵活的控制，可以手动生成渲染纹理，把容器渲染到纹理后用Sprite承载，再给这个Sprite加滤镜：

// 创建对应尺寸的渲染纹理
const renderTexture = PIXI.RenderTexture.create({ 
  width: container.width, 
  height: container.height 
});
// 将容器内容渲染到纹理
app.renderer.render(container, { renderTexture });
// 创建承载纹理的Sprite
const containerSprite = new PIXI.Sprite(renderTexture);
// 应用自定义滤镜
containerSprite.filters = [你的自定义滤镜];
// 添加到舞台
app.stage.addChild(containerSprite);

内容的提问来源于stack exchange，提问作者user2218633