What’s New

pixijs v8.19.0

v8.19.0
Added
  • Add HTML-in-Canvas texture support via pixi.js/html-source subpath with HTMLSource and ElementImageSource for rendering live DOM elements into PixiJS textures while keeping them interactive
  • Implement transientAttachment opt-in flag for MSAA RenderTextures in WebGPU to discard MSAA buffer instead of writing to memory on supported devices
Changed
  • Container.updateTransform now applies zero scale literally instead of coercing it to 1, so passing scaleX: 0 or scaleY: 0 will hide the container matching scale.set(0, 0)
  • ParticleContainer now respects blend mode inherited from ancestors instead of only reading its local blendMode
  • FillPattern gains a textureSpace option ('global' | 'local') to control pattern tiling behavior, with global as default, and setTransform(matrix) now applies the matrix directly without inversion
Fixed
  • Fix BitmapText trailing glyph after glyph-less word-break character
  • Fix SplitText crash when text begins with whitespace
  • Fix TilingSprite tileRotation shearing pattern on non-square sprites
  • Fix canvas renderer not rounding anchor offset when roundPixels is enabled
  • Fix renderer's maxBatchableTextures not being passed to non-default batchers
  • Handle null from getShaderSource/getShaderInfoLog on lost context
💾 Download

Installation:

npm install pixi.js@8.19.0

Development Build:

Production Build:

Documentation:

Changed

https://github.com/pixijs/pixijs/compare/v8.18.1...v8.19.0

🚨 Behavior Change
  • fix: Container.updateTransform honors zero scale (#12044) by @Zyie in https://github.com/pixijs/pixijs/pull/12046
    • Container.updateTransform({ scaleX: 0, scaleY: 0 }) previously coerced a zero scale to 1 (the code used opts.scaleX || 1), so passing 0 left the container at full size. It now applies zero scale literally, matching scale.set(0, 0). If you relied on updateTransform ignoring a zero scale, stop passing 0 when you mean full scale.
    const container = new Container();
container.updateTransform({ scaleX: 0, scaleY: 0 });
// before: scale coerced to (1, 1) — container stayed full-size
// after:  scale applied as (0, 0) — container hidden, matching scale.set(0, 0)
  • fix: particle container inherit blend mode by @DmitriyGolub in https://github.com/pixijs/pixijs/pull/11978
    • ParticleContainer now respects the blend mode inherited from its ancestors. Previously the render pipe read the container's own local blendMode instead of the resolved groupBlendMode, so setting e.g. stage.blendMode = 'add' had no effect on particles. Particles nested under a parent with a non-default blend mode will now render differently (e.g. additive brightening) where they were silently ignored before. A blendMode set directly on the ParticleContainer is unchanged.
  • fix: FillPattern tiling and radial gradient sizing by @Zyie in https://github.com/pixijs/pixijs/pull/12037

    • FillPattern gains a textureSpace option ('global' | 'local'), while fixing several long-standing pattern/gradient sizing bugs. textureSpace defaults to 'global', so patterns now tile continuously across adjacent shapes instead of remapping per shape; setTransform(matrix) now applies the matrix you pass directly (it previously inverted and rescaled it by the texture size); and textureSpace: 'local' radial gradients now scale to the gradient's outer radius. Existing pattern fills and local radial gradients can render differently.

      If you hand-compensated for the old setTransform behavior (pre-inverting or scaling by texture size), remove that compensation. The legacy positional new FillPattern(texture, repetition) form still works.

    import { Assets, FillPattern, Graphics } from 'pixi.js';

const texture = await Assets.load('pattern.png');

// new options-object constructor with explicit textureSpace
const pattern = new FillPattern({ texture, repetition: 'repeat', textureSpace: 'local' });

const g = new Graphics().rect(0, 0, 200, 100).fill({ fill: pattern });
🎁 Added
  • feat: add HTML-in-Canvas texture support by @Zyie in https://github.com/pixijs/pixijs/pull/12053
    • A new opt-in pixi.js/html-source subpath renders live DOM elements into PixiJS textures while the element stays fully interactive in the browser (inputs editable, links clickable, CSS animations running). Use HTMLSource for a live element or ElementImageSource for an immutable snapshot. The element must be a direct child of the Pixi canvas. Importing the subpath also registers a lowest-priority Texture.from fallback for generic HTML elements, so it cannot affect apps that don't import it.
    import { Application, Sprite } from 'pixi.js';
import { HTMLSource } from 'pixi.js/html-source';

const app = new Application();
await app.init({ resizeTo: window });
document.body.appendChild(app.canvas);

const form = document.createElement('form');
form.innerHTML = '<input value="still editable" />';
app.canvas.appendChild(form); // must be a direct child of the Pixi canvas

const sprite = Sprite.from(new HTMLSource({ resource: form, autoUpdate: true }));
app.stage.addChild(sprite); // live DOM mirrored to the GPU; the form stays interactive
  • feat: implement transientAttachment for MSAA RenderTextures for WebGPU by @GoodBoyDigital in https://github.com/pixijs/pixijs/pull/12050
    • Texture sources gain an opt-in transient flag so the WebGPU backend can discard the MSAA buffer at the end of a render pass (storeOp: 'discard') instead of writing it back to memory, and keep MSAA contents in tile memory on TBDR mobile GPUs where GPUTextureUsage.TRANSIENT_ATTACHMENT is available. This cuts memory bandwidth for single-pass MSAA render targets. Only set it on antialiased textures that follow a single-pass-then-discard pattern; a later loadOp: 'load' on a transient attachment yields undefined contents. Default is false, so existing code is unaffected. A WebGPU-only renderer.device.extensions.transientAttachment probe reports device support.
🐛 Fixed
🧹 Chores
New Contributors

Full Changelog: https://github.com/pixijs/pixijs/compare/v8.18.1...v8.19.0

View original