SuperAPI AI 工具集

pixijs-blend-modes

通用与其它

查看项目

更新于 10-16 08:06

技能介绍

用途:在 PixiJS v8 中对显示对象进行混合模式合成,控制叠加、光照、变暗等视觉效果。

主要能力:标准模式内置且硬件加速,包括 normal、add、multiply、screen、erase、none、inherit、min、max(min/max 仅 WebGL2+)。高级模式需显式导入扩展 pixi.js/advanced-blend-modes 才可用,包括 color-burn、color-dodge、darken、difference、divide、exclusion、hard-light、hard-mix、lighten、linear-burn、linear-dodge、linear-light、luminosity、negation、overlay、pin-light、saturation、soft-light、subtract、vivid-light、color;它们内部使用滤镜,成本高于标准模式。

使用方式:设置 container.blendMode,例如 sprite.blendMode = "add";高级模式前执行 import "pixi.js/advanced-blend-modes"。在 WebGL 上高级模式需在 app.init({ useBackBuffer: true }) 时启用后缓冲,否则会警告并静默回退;WebGPU 无条件启用后缓冲。应在创建受影响对象前设置 Filter.defaultOptions.resolution = "inherit",避免高 DPI 下被裁剪或缩放。

限制与注意:混合模式切换会打断渲染批次,应把同模式对象相邻排列以减少 draw call(screen/screen/normal/normal 为 2 次,交替排序为 4 次)。不要在 v8 使用 BLEND_MODES 枚举,它只是类型,运行时访问会报错,应直接写字符串。未导入扩展时高级模式会静默回退为正常模式。避免相邻对象频繁切换混合模式。